Js Canvas Animate Grid Elements Individually

I'm generating a grid of hexagons by using a for loop and I'm having some issues for (var i=0; i <= rows; i++) { for (var j=0; j <= cols; j++) { ctx.s

Solution 1:

Your link applies 2 forces:

1. Particles near the mouse are repelled. More specifically, if the particles centerpoint is near the mouse centerpoint, then the particle is repelled along the line between the two centerpoints.

2. Particles not near the mouse are attracted back to their original positions. More specifically, the particles move toward their original centerpoint along the line between their current centerpoint and their original centerpoint.

The math works like this:

// Given the mouse centerpoint (mx,my) & particle's centerpoint (px,py)// calculate the difference between x's & y'svar dx=px-mx;
var dy=py-my;

// You can repel the particle by increasing the// particle's position by a fraction of dx & dy
px+=dx/100;
py+=dy/100;

// And you can attract the particle by decreasing the// particle's position by a fraction of dx & dy
px-=dx/100;
py-=dy/100;

Here's annotated code and a Demo (easing removed for ease of understanding):

// canvas related variablesvar canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
functionreOffset(){
  varBB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

ctx.fillStyle='skyblue';

// mouse related variablesvarPI2=Math.PI*2;
var mouseRadius=75;   // this is the mouse's radius of influencevar mouseRadiusSquared=mouseRadius*mouseRadius;
var mouseIsDown=false;
var mx,my;


// define a bunch of hex objects stored in an arrayvar hexRadius=5;
var hexPadding=5;
var hexes=[];
for(var y=hexRadius;y<ch;y+=hexRadius*2+hexPadding){
  for(var x=hexRadius;x<cw;x+=hexRadius*2+hexPadding){
    hexes.push({startingX:x,startingY:y,x:x,y:y});
  }}


// start a continuously running ticker looprequestAnimationFrame(tick);


// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});


// draw every hex in its current positionfunctiondraw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.beginPath();
  for(var i=0;i<hexes.length;i++){
    var h=hexes[i];
    ctx.moveTo(h.x,h.y);
    ctx.arc(h.x,h.y,hexRadius,0,PI2);
    ctx.closePath();
  }
  ctx.fill();
}

// create a continuously running tickerfunctiontick(time){

  // update each hex position based on its // position relative to the mousefor(var i=0;i<hexes.length;i++){
    var h=hexes[i];
    // calculate if this hex is inside the mouse radiusvar dx=h.x-mx;
    var dy=h.y-my;
    if(mouseIsDown && dx*dx+dy*dy<mouseRadiusSquared){
      // hex is inside mouseRadius// so mouseDown repels hex
      h.x+=dx/120;
      h.y+=dy/120;
    }elseif(h.x==h.startingX && h.y==h.startingY){
      // hex is at startingX/Y & is not being repelled// so do nothing
    }else{
      // hex has moved off startingX/Y// but is no longer being repelled// so gravity attracts hex back to its startingX/Y
      dx=h.x-h.startingX;
      dy=h.y-h.startingY;
      h.x-=dx/60;
      h.y-=dy/60;            
    }
  }

  // redraw the hexes in their new positionsdraw();

  // request another tickrequestAnimationFrame(tick);
}


// listen for mousedown eventsfunctionhandleMouseDown(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // calculate the mouse position
  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  // set the mousedown flag
  mouseIsDown=true;
}


// listen for mouseup eventsfunctionhandleMouseUp(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // clear the mousedown flag 
  mouseIsDown=false;
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h4>Press the mouse down to repel the particles.<br>Release to return particles to starting point.</h4><canvasid="canvas"width=300height=300></canvas>