joriszwart.nl

const degreesToRadians= degrees => degrees * (Math.PI / 180)

function radiansToDegrees(radians) { return radians * (180 / Math.PI); }

const context = document.querySelector(‘canvas’).getContext(‘2d’)

const k = 64 let sin = 0, cos = 25

const width = 2 * Math.PI * k // this controls the phase so it ends up in y = 0

context.canvas.width = width

context.moveTo(0, 100) context.lineTo(width, 100) context.stroke()

for(let x = 0; x < context.canvas.width; x++) { sin += cos / k cos -= sin / k

context.fillStyle = 'blue'
context.fillRect(x, context.canvas.height / 2 + sin, 1, 1)
context.fillStyle = 'red'
context.fillRect(x, context.canvas.height / 2 + cos, 1, 1)

}