Coding Math - More Trigonometry

by Ehsan Ziya

HTML

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

CSS

html, body {
    margin: 0;
}

JavaScript

// 1 radian = 57.3 degrees
// 2 PI radians = 360 degrees, 6.28 radians

// convert radians to degrees
// degrees = (radians * 180) / PI

// convert degrees to radians
// radians = (degrees * PI) / 180

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

var cx = width / 2;
var cy = height / 2;

var offset = (height / 2) - 50;
var speed = 0.05;
var angle = 0;

function render(){
    var y = cy + Math.sin(angle) * offset;
    
    ctx.clearRect(0,0,width,height);
    ctx.beginPath();
    ctx.arc(cx, y, 10, 0, Math.PI * 2, false);
    ctx.fill();
    
    angle += speed;
    requestAnimationFrame(render);
}

render();