blob_pt_move

2018-06-28 16:12:46 +02:00
commit ba3916e3b5
4 changed files with 16703 additions and 0 deletions
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Candy Crash</title>
+    <link rel="stylesheet" href="styles/styles.css">
+    <script type="text/javascript" src="script/paper-full.js"></script>
+    <script type="text/paperscript" src="script/script.js" canvas="canvas"></script>
+
+</head>
+  <body>
+      <canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
+  </body>
+</html>
@@ -0,0 +1,183 @@
+var path = new Path({
+  fillColor: 'black'
+});
+var amount = 3
+
+for (var i = 0; i < amount; i++) {
+  var point = new Point(600, 650) * Point.random(view.size);
+  path.add(point);
+  console.log(point);
+  var segment = path.segments[i];
+}
+
+function onFrame(event) {
+	// Loop through the segments of the path:
+
+		// A cylic value between -1 and 1
+		var sinus = Math.sin(event.time * 3 + i);
+
+		// Change the y position of the segment point:
+		segment.point.y = sinus * 60 + 100;
+}
+
+path.closed = true;
+path.fullySelected = true;
+path.position.x += 1000;
+path.smooth();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// function Ball(r, p, v) {
+//
+//     this.radius = r;
+//     this.point = p;
+//     this.vector = v;
+//     this.maxVec = 0.1;
+//     this.numSegment = Math.floor(r / 1 + 1);
+//     this.boundOffset = [];
+//     this.boundOffsetBuff = [];
+//     this.sidePoints = [];
+//     this.path = new Path({
+//         fillColor: {
+//             hue: Math.random() * 360,
+//             saturation: 1,
+//             brightness: 1
+//         },
+//         blendMode: 'lighter'
+//     });
+//
+//     for (var i = 0; i < this.numSegment; i ++) {
+//         this.boundOffset.push(this.radius);
+//         this.boundOffsetBuff.push(this.radius);
+//         this.path.add(new Point());
+//         this.sidePoints.push(new Point({
+//             angle: 360 / this.numSegment * i,
+//             length: 1
+//         }));
+//     }
+// }
+//
+// Ball.prototype = {
+//     iterate: function() {
+//         this.checkBorders();
+//         if (this.vector.length > this.maxVec)
+//             this.vector.length = this.maxVec;
+//         this.point += this.vector;
+//         this.updateShape();
+//     },
+//
+//     checkBorders: function() {
+//         var size = view.size;
+//         if (this.point.x < -this.radius)
+//             this.point.x = size.width + this.radius;
+//         if (this.point.x > size.width + this.radius)
+//             this.point.x = -this.radius;
+//         if (this.point.y < -this.radius)
+//             this.point.y = size.height + this.radius;
+//         if (this.point.y > size.height + this.radius)
+//             this.point.y = -this.radius;
+//     },
+//
+//     updateShape: function() {
+//         var segments = this.path.segments;
+//         for (var i = 0; i < this.numSegment; i ++)
+//             segments[i].point = this.getSidePoint(i);
+//
+//         this.path.smooth();
+//         for (var i = 0; i < this.numSegment; i ++) {
+//             if (this.boundOffset[i] < this.radius / 4)
+//                 this.boundOffset[i] = this.radius / 4;
+//             var next = (i + 1) % this.numSegment;
+//             var prev = (i > 0) ? i - 1 : this.numSegment - 1;
+//             var offset = this.boundOffset[i];
+//             offset += (this.radius - offset) / 15;
+//             offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
+//             this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
+//         }
+//     },
+//
+//     react: function(b) {
+//         var dist = this.point.getDistance(b.point);
+//         if (dist < this.radius + b.radius && dist != 0) {
+//             var overlap = this.radius + b.radius - dist;
+//             var direc = (this.point - b.point).normalize(overlap * 0.015);
+//             this.vector += direc;
+//             b.vector -= direc;
+//
+//             this.calcBounds(b);
+//             b.calcBounds(this);
+//             this.updateBounds();
+//             b.updateBounds();
+//         }
+//     },
+//
+//     getBoundOffset: function(b) {
+//         var diff = this.point - b;
+//         var angle = (diff.angle + 180) % 360;
+//         return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
+//     },
+//
+//     calcBounds: function(b) {
+//         for (var i = 0; i < this.numSegment; i ++) {
+//             var tp = this.getSidePoint(i);
+//             var bLen = b.getBoundOffset(tp);
+//             var td = tp.getDistance(b.point);
+//             if (td < bLen) {
+//                 this.boundOffsetBuff[i] -= (bLen  - td) / 2;
+//             }
+//         }
+//     },
+//
+//     getSidePoint: function(index) {
+//         return this.point + this.sidePoints[index] * this.boundOffset[index];
+//     },
+//
+//     updateBounds: function() {
+//         for (var i = 0; i < this.numSegment; i ++)
+//             this.boundOffset[i] = this.boundOffsetBuff[i];
+//     }
+// };
+//
+// //--------------------- main ---------------------
+//
+// var balls = [];
+// var numBalls = 7;
+// for (var i = 0; i < numBalls; i++) {
+//     var position = Point.random() * view.size;
+//     var vector = new Point({
+//         angle: 360 * Math.random(),
+//         length: Math.random() * 10
+//     });
+//     var radius = Math.random() * 100 + 100;
+//     balls.push(new Ball(radius, position, vector));
+//
+//   }
+// function onFrame() {
+//     for (var i = 0; i < balls.length - 1; i++) {
+//         for (var j = i + 1; j < balls.length; j++) {
+//             balls[i].react(balls[j]);
+//         }
+//     }
+//     for (var i = 0, l = balls.length; i < l; i++) {
+//         balls[i].iterate();
+//     }
+// }
@@ -0,0 +1,12 @@
+html,
+body {
+    margin: 0;
+    overflow: hidden;
+    height: 100%;
+}
+
+/* Scale canvas with resize attribute to full size */
+canvas[resize] {
+    width: 100%;
+    height: 100%;
+}