It isn't the page you're looking for, but it is an interactive demonstration of a Dirichtlet kernel
var c = document.createElement('canvas');
var w = window.innerWidth / 4, h = window.innerHeight / 2;
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((k + (1/2)) * t) / Math.sin(t / 2);
}
return val;
}
function draw(n, f, a) {
ctx.fillRect(0,0,w,h);
ctx.beginPath();
for (var t = -Math.PI; t < Math.PI; t += 0.005) {
var y = wave(t, n, f)
ctx.lineTo((Math.PI + t) * (w / Math.PI / 2), (h/1.1) - (y * 1));
}
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);