Coding Math 5 - Arctangent pt. 2

coding-math-5-arctangent-pt-2.markdown

Coding Math 5 - Arctangent pt. 2

A Pen by thinsoldier on CodePen.

License.

index.html

<canvas id="canvas">
https://www.youtube.com/watch?v=LHzgW9aQUV8
</canvas>

script.js

var canvas,
    context,
    width,
    height,
    arrowX,
    arrowY,
    dx, dy, // distance between arrow and mouse
    angle,
    a,
    lastMouse = {'x':0,'y':0};

function setup()
{
  canvas = document.querySelector('canvas');
  context = canvas.getContext("2d");
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
  arrowX = width/2;
  arrowY = height/2;
  angle = 0;
  a = 0;
}

function gridMaker(divisions,color,weight)
{
  var divisions = divisions || 10;
  var color = color || 'red';
  var weight = weight || 2;
  
  context.beginPath();
  context.lineWidth = weight;
  context.strokeStyle = color;
  var column = width / divisions;
  var row = height / divisions;
  for( var i = 0; i <= divisions; i +=1 ) {
    var x = i * column;
    var y = i * row;
    context.moveTo( x, 0);
    context.lineTo( x, height);
    context.moveTo( 0, y);
    context.lineTo( width, y);
  }
  context.stroke();
}

function guidelines()
{ 
  // 100 divisions
  gridMaker(100,'#E9F0F9',0.25);
  // 10 divisions  
  gridMaker(10,'#E9E0FF',1);  
  // axes
  gridMaker(2,'#E9E0FF', 3);
  // compass points
  context.fillStyle = 'skyblue';
  for( var i = 0; i <= 3; i += 1 )
  {
    for( var j = 0; j <= 3; j += 1 )
    {
      var x = i * ( width  / 2 ) - ( i * 5);
      var y = j * ( height / 2 ) - ( j * 5);
      context.fillRect( x , y , 10 , 10 );
      context.restore();
    }
  }
  
}

function render()
{ 
  updateMouse();
  arrowX = width  / 2 + Math.cos(a) * height * .4;
  arrowY = height / 2 + Math.sin(a) * height * .4;
  a += 0.01;
  context.clearRect(0,0,width,height);
  
  guidelines();  
  
  context.save();
  context.translate( arrowX, arrowY );
  context.rotate(angle);
  
  context.beginPath();
  context.moveTo(80,0);
  context.lineTo(-80,0);
  context.moveTo(80,0);
  context.lineTo(40,-20);
  context.moveTo(80,0);
  context.lineTo(40,20);
  context.lineWidth = 2;
  context.strokeStyle = "#000";
  context.stroke();
  
  context.restore();
  requestAnimationFrame(render);
};

// Constantly follow the mouse even if it isn't being moved (mousemove)
function updateMouse(x,y)
{
  if( !x ){ x = lastMouse.x; }
  if( !y ){ y = lastMouse.y; }
  dx =  x - arrowX;
  dy =  y - arrowY;
  angle = Math.atan2( dy, dx );
  lastMouse.x = x;
  lastMouse.y = y;
}

document.body.addEventListener("mousemove", function(event){
  updateMouse(event.clientX,event.clientY);
});

setup();
render();

window.onresize = setup;

style.css

* { margin: 0; }

canvas { display: block; }