CM02 - Intro to Trigonometry

by Ehsan Ziya

HTML

<canvas id='canvas'></canvas>

CSS

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var centerX = w / 2;
var centerY = h / 2;

//ctx.translate(0, h / 2);
//ctx.scale(1, -1);
//for (var angle = 0; angle < Math.PI * 2; angle += 0.1) {
	//var x = angle * 50;
  //var y = Math.sin(angle) * 50;
  //ctx.fillRect(x, y, 5, 5);
//}

var offset = h * 0.2;
var speed = 0.10;
var a = 0;

function render(){
	var y = centerY + Math.sin(a) * offset;
  ctx.clearRect(0, 0, w, h);
  ctx.beginPath();
  ctx.arc(centerX, y, 100, 0, Math.PI * 2, false);
  ctx.fill();
  a += speed;
  requestAnimationFrame(render);
}

render();