learning about the unit circle. trigonometry exercises for javascript canvas stuffs.

around_the_world.js

var canvas = document.getElementById("exercises"),
    context = canvas.getContext("2d"),
    width = canvas.width, 
    height = canvas.height;

// midpoints
var midX = canvas.width/2, midY = canvas.height/2;

// trigonometry
var TAU = Math.PI * 2,
    PI = Math.PI;

// Canvas to Unit Circle (conversion)
var scale = 200;

// Now, draw the Unit Circle Axes!
function drawAxes() {
  context.strokeStyle = "cornflowerblue";
  context.beginPath();

  context.moveTo(midX, midY); // point of origin
  context.lineTo(width, midY);
  context.moveTo(midX, midY); // point of origin
  context.lineTo(midX,0);
  context.moveTo(midX, midY); // point of origin
  context.lineTo(0,midY);
  context.moveTo(midX, midY); // point of origin
  context.lineTo(midX, height);

  context.stroke();
}

// drawAxes();
// drawAxes();
// drawAxes();
// drawAxes();

// Create a function that takes an X,Y and
// plots it on the Unit Circle!

function plot(x,y) {
  context.fillStyle = "greenyellow";
  context.fillRect(midX + (x * 200),
                   midY + (-y * 200),
                   10,5);
}
// plot(0,0); //

context.fillStyle = "deeppink";
context.fillRect(400,400,10,5);
context.fillRect(400,390,10,5);
context.fillRect(400,380,10,5);
context.fillRect(400,350,10,5);
context.fillRect(400,330,10,5);

// animate northwards!
var yPosition = 0;
function animateNorth() {
  if (yPosition < 1) {
    // clear
    context.clearRect(0,0,width,height);
    // draw
    plot(0,yPosition);
    yPosition = yPosition + 1/10;
    drawAxes();
  }
}

// setInterval(animateNorth, 100);


// now, animate circle!!!!!!!
var x = 1, y = 0;
var theta = 0;

function aroundTheWorld() {
  // if ((theta-2*PI) <= 0.0001) {
  if (theta <= 2*PI + 0.0001) {
    // clear
    context.clearRect(0,0,width,height);
    // draw
    plot(Math.cos(theta),Math.sin(theta));
    theta = theta + (2 * PI)/50;
    drawAxes();
    drawAxes();
    drawAxes();
  }
  else {
  // clear
    context.clearRect(0,0,width,height);
    // draw
    plot(Math.cos(0),Math.sin(0));
    drawAxes();
    drawAxes();
    drawAxes();
}
}

setInterval(aroundTheWorld, 100)