It isn't the page you're looking for, but it is an interactive demonstration of a fourier series
var c = document.createElement('canvas'); var w = window.innerWidth / 4, h = window.innerHeight / 4; c.width = w; c.height = h; var ctx = c.getContext('2d'); ctx.fillStyle = '#fff'; ctx.strokeStyle = '#005791'; ctx.lineWidth = 2; function wave(t, n, f) { var val = 0; for (var k = 1; k < n; k ++) { val += Math.sin(Math.PI * 4 * ((2 * k) - 1) * f * t) / ((2 * k) - 1); } return (4 / Math.PI) * val; } function draw(n, f, a) { ctx.fillRect(0,0,w,h); ctx.beginPath(); for (var t = 0; t < 1.05; t += 0.005) { var y = wave(t * Math.PI, n, f) ctx.lineTo(t * w * 1.26, (h/2) + (y * h/4)); } ctx.stroke(); } function drawAt(n) { draw(n, 0.2); document.body.style.backgroundImage = 'url(' + c.toDataURL(); ')'; document.body.style.backgroundSize = '' + (w / 2) + 'px ' + (h / 2) + 'px'; } document.onmousemove = function(e) { drawAt((Math.floor(e.pageX * 20 / window.innerWidth)) + 1); } drawAt(0.5);