add attractor to attractors1

4 files changed, 42 insertions, 5 deletions

diff --git a/sandbox/attractors1/attractor.js b/sandbox/attractors1/attractor.js
new file mode 100644
index 0000000..6531324
--- /dev/null
+++ b/sandbox/attractors1/attractor.js
@@ -0,0 +1,10 @@
+( function() {
+
+function Attractor( x, y, attraction ) {
+  this.x = x;
+  this.y = y;
+}
+
+window.Attractor = Attractor;
+
+})();
diff --git a/sandbox/attractors1/attractors1.html b/sandbox/attractors1/attractors1.html
index bc98321..a68557d 100644
--- a/sandbox/attractors1/attractors1.html
+++ b/sandbox/attractors1/attractors1.html
@@ -18,6 +18,7 @@
 
 <script src="request-animation-frame.js"></script>
 <script src="particle.js"></script>
+<script src="attractor.js"></script>
 <script src="attractors1.js"></script>
 
 </body>
diff --git a/sandbox/attractors1/attractors1.js b/sandbox/attractors1/attractors1.js
index 4eeb7c9..21e4975 100644
--- a/sandbox/attractors1/attractors1.js
+++ b/sandbox/attractors1/attractors1.js
@@ -1,6 +1,7 @@
 var canvas, ctx;
 var canvasW, canvasH;
 var particle;
+var attractor;
 
 document.addEventListener( 'DOMContentLoaded', init, false );
 
@@ -14,6 +15,7 @@ function init() {
   canvas.addEventListener( 'mousedown', onMousedown, false );
 
   particle = new Particle( canvasW / 2, canvasH / 2 );
+  attractor = new Attractor( canvasW * 0.3, canvasH / 2 )
 
   animate();
 }
@@ -21,11 +23,23 @@ function init() {
 // -------------------------- animate, render, update -------------------------- //
 
 function animate() {
-  particle.update();
-  // wrap around
+  // apply force of attractor to particle
   if ( !isDragging ) {
-    particle.x = ( particle.x + canvasW ) % canvasW;
+    var distance = attractor.x - particle.x;
+    var maxDistance = 300;
+    var force = Math.max( maxDistance - Math.abs( distance) , 0 );
+    force /= maxDistance;
+    force *= force;
+    force *= distance > 0 ? 1 : -1;
+    force *= 2;
+    particle.applyForce( force );
   }
+
+  particle.update();
+  // wrap around
+  // if ( !isDragging ) {
+  //   particle.x = ( particle.x + canvasW ) % canvasW;
+  // }
   render();
   rAF( animate );
 }
@@ -39,6 +53,13 @@ function render() {
   ctx.arc( particle.x, particle.y, 15, 0, Math.PI * 2, true );
   ctx.fill();
   ctx.closePath();
+
+  // render attractor
+  ctx.fillStyle = 'hsla(240, 100%, 50%, 0.5)';
+  ctx.beginPath();
+  ctx.arc( attractor.x, attractor.y, 8, 0, Math.PI * 2, true );
+  ctx.fill();
+  ctx.closePath();
 }
 
 // -------------------------- mouse -------------------------- //
diff --git a/sandbox/attractors1/particle.js b/sandbox/attractors1/particle.js
index eeb376e..168f5b7 100644
--- a/sandbox/attractors1/particle.js
+++ b/sandbox/attractors1/particle.js
@@ -7,14 +7,19 @@ function Particle( x, y ) {
   this.accel = 0;
 }
 
-var friction = 0.05;
+var friction = 0.04;
 
 
 Particle.prototype.update = function() {
   this.velocity += this.accel;
   this.velocity *= ( 1 - friction );
   this.x += this.velocity;
-}
+  this.accel = 0;
+};
+
+Particle.prototype.applyForce = function( force ) {
+  this.accel += force;
+};
 
 window.Particle = Particle;