Coding Math - Intro to 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;

ctx.translate(0, height / 2); // shift the canvas down so it starts in the middle
ctx.scale(1, -1); // reverse the y axis

for ( var angle = 0; angle < Math.PI * 2; angle += 0.1 ) {
    var x = angle * 50;
    var y = Math.sin(angle) * 50; // calculate the y
    ctx.fillRect(x, y, 1, 1);
}