FFT

by Scott Kaye

HTML

<canvas></canvas>

JavaScript

const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth - 10;
canvas.height = window.innerHeight - 20;
const ctx = canvas.getContext("2d");

ctx.lineWidth = 1;
ctx.lineCap = "round";

function fft(x, steps) {
	let y = 0;
	
	for (let i = 1; i <= steps * 2; i += 2) {
		y += (4 / Math.PI) * (1 / i) * Math.sin(i * Math.PI * x);
	}
	
	return y;
}

let frame = 0;

function draw() {
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	
	let steps = ((Math.sin(frame) + 1) * 10 | 0) + 2;
	let xOffset = frame / 30;
	
	ctx.beginPath();
	ctx.moveTo(0, 200);
	for(let x = 0; x < 100; x += 0.01) {
		let y = fft(x - xOffset, steps);

		y += 1.5;
		ctx.lineTo(x * 100, y * 100);
	}
	ctx.stroke();
	
	frame += 0.1;
	requestAnimationFrame(draw);
}

draw();