changed from circles to a line

OdeToCode · Jul 20, 2012 · 85f81b3 · 85f81b3
1 parent 77c4613
commit 85f81b3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 27 deletions.
diff --git a/Particle.js b/Particle.js
@@ -15,20 +15,6 @@
         return currentPoint.y;
     };
 
-    var update = function () {
-        var ballSize = 30;
-        var gradient = context.createRadialGradient(currentPoint.x + ballSize / 2,
-                                                    currentPoint.y + ballSize / 2,
-                                                    2,
-                                                    currentPoint.x + ballSize / 2,
-                                                    currentPoint.y + ballSize / 2,
-                                                    ballSize * 0.20);
-        gradient.addColorStop(0, "rgba(204,0,0,1)");
-        gradient.addColorStop(1, "rgba(0,0,0,0)");
-        context.fillStyle = gradient;
-        context.fillRect(currentPoint.x, currentPoint.y, ballSize, ballSize);
-    };
-
     var verlet = function (timeStep) {
 
         var calcPoint = new Point(0, 0);
@@ -74,12 +60,15 @@
                 currentPoint.subtract(dpoint);
             }
         }
+        if (currentPoint.x < 2) currentPoint.x = 2;
+        if (currentPoint.x > canvas.width  -20) currentPoint.x = canvas.width - 20;
+        if (currentPoint.y < 2) currentPoint.y = 2;
+        if (currentPoint.y > canvas.height - 2) currentPoint.y = canvas.height - 2;
     };
 
     return {
         getX: getX,
         getY: getY,
-        update: update,
         verlet: verlet,
         addConstraint: addConstraint,
         applyForce: applyForce,

diff --git a/Rope.js b/Rope.js
@@ -1,6 +1,6 @@
 var Rope = function (canvas) {
 
-    var canvas = canvas;
+    var context = canvas.getContext("2d");    
     var particles = [];
     var offset = canvas.width / 2;
     var gravityVector = new Point(0, 0.9);
@@ -11,6 +11,10 @@
         getX: function () { return offset; },
         getY: function () { return 2; }
     };
+    var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, "blue");
+    gradient.addColorStop(0.5, "white");
+    gradient.addColorStop(1, "red");
 
     var onTick = function () {
         accumulateForces();
@@ -31,13 +35,13 @@
     };
 
     var accumulateForces = function () {
-        
+
         for (var i = 0; i < particles.length; i++) {
             var forcePoint = new Point(0, 0);
             forcePoint.add(gravityVector);
-            forcePoint.add(windVector);                
+            forcePoint.add(windVector);
             particles[i].applyForce(forcePoint);
-        }        
+        }
     };
 
     var verlet = function () {
@@ -55,12 +59,20 @@
     };
 
     var updateAll = function () {
-        for (var i = 0; i < particles.length; i++) {
-            particles[i].update();
+
+        context.beginPath();
+        context.strokeStyle = gradient;
+        context.lineWidth = 2;
+        context.moveTo(particles[0].getX(), particles[0].getY());
+
+        for (var i = 1; i < particles.length; i++) {
+            context.lineTo(particles[i].getX(), particles[i].getY());
         }
+        context.stroke();
+        context.endPath();
     }
 
-    for (var i = 0; i < 60; i++) {
+    for (var i = 0; i < 50; i++) {
         particles[i] = Particle(canvas, i * 8 + offset, 2);
         if (i == 0) {
             particles[i].addConstraint(new Constraint(startElement, 4));

diff --git a/default.html b/default.html
@@ -5,9 +5,15 @@
 
 </head>
 <body>
-    <canvas id="canvas" width="800" height="600"></canvas>  
+    <canvas id="canvas" width="800" height="500"></canvas>  
+
+    <div>
+        <label for="wind">Blow, wind. Blow!: </label>
+        <input type="checkbox" name="wind" id="wind" />
+        <label for="trail">Leave trail:</label>
+        <input type="checkbox" name="trail" id="trail" />
+    </div>
 
-    <input type="checkbox" name="wind" id="wind" />
 
     <script src="jquery-1.7.2.js" type="text/javascript"></script>  
     <script src="Frames.js" type="text/javascript"></script>

diff --git a/verlet.js b/verlet.js
@@ -1,6 +1,6 @@
 (function () {
 
-    var canvas, context, rope, width, height;
+    var canvas, context, rope, width, height, trail;
 
     var domReady = function () {
         canvas = document.getElementById("canvas");
@@ -13,12 +13,25 @@
         $("#wind").click(function () {
             rope.toggleWind();
         });
+        $("#trail").click(function () {
+            toggleTrail();
+        });
+
+
+        context.fillStyle = "rgba(0,0,0,1.0)";
+        context.fillRect(0, 0, width, height);
+    };
+
+    var toggleTrail = function () {
+        trail = !trail;
     };
 
     var loop = function () {
         requestAnimationFrame(loop);
-        context.fillStyle = "rgba(0,0,0,1.0)";
-        context.fillRect(0, 0, width, height);
+        if (!trail) {
+            context.fillStyle = "rgba(0,0,0,1.0)";
+            context.fillRect(0, 0, width, height);
+        }
         rope.onTick();
     };