CM04 - Lissajous Curves and Shit

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;

var angleX = 0;
var angleY = 0;
var speedX = 0.01;
var speedY = 0.03;
var radiusX = 100;
var rediusY = 200;
var x = 0;
var y = 0;

function render(){
	ctx.clearRect(0,0,w,h);
  var x = centerX + Math.cos(angleX) * radiusX;
  var y = centerY + Math.sin(angleY) * rediusY;
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2, false);
  ctx.fill();  
  angleX += speedX;
  angleY += speedY;
  requestAnimationFrame(render);
}

render();