傅里叶级数的可视化

在b站上看到一个大神用p5.js写的，我觉得吧，原生是无敌的存在（其实是因为我不会），所以……效果自然没有人家的好咯

js代码：

var time = 0;
var wave = [];
var temp_n = document.getElementById("temp_n").value;
var lastx, lasty;

var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext('2d');

temp = setInterval("draw()", 10);

// Get the value that user input
function getValue() {
    temp_n = document.getElementById("temp_n").value;
}
// The draw function
function draw() {

    context.clearRect(0, 0, myCanvas.width, myCanvas.height);

    // Draw the background
    drawRect(0, 0, 960, 500, "#000");

    drawPicture(1);
    drawPicture(2);

    drawLine(lastx, lasty, 480, lasty);

    for (let i = 1; i < wave.length; i++) {
        drawRect(480 + i / 10, wave[i], 1, 1, "#fff");
    }

    if (wave.length > 2000) {
        console.log(wave[0]);
        console.log(wave.length);
        wave.pop();
        wave.length -= 1;
        console.log(wave.length)
    };

    time += 0.01;
}

function drawPicture(temp) {
    let x = y = cx = cy = 250;
    for (let i = 0; i < temp_n; i++){
        let n = 2 * i + 1;
        let radius = 50 * 4 / (n * Math.PI);
        x += radius * Math.cos(n * time);
        y += radius * Math.sin(n * time);
        switch (temp) {
            case 1 :
                drawCircle(cx, cy, radius, "#fff");
                break;
            case 2 :
                drawLine(cx, cy, x, y, 1);
                drawRound(x, y, 1, "#fff");
                break;
        }
        cx = x;
        cy = y;
    }
    lastx = x;
    lasty = y;
    wave.unshift(y);
}

// 绘制圆圈方法
function drawCircle(x, y, r, color) {
    drawRound(x, y, r, color);
    drawRound(x, y, (r - 1), "#000");
}

// 绘制圆方法
function drawRound(x, y, r, color) {
    context.fillStyle = color;
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
}

// 绘制线条方法
function drawLine(startx, starty, endx, endy, line_width) {
    context.moveTo(startx, starty);
    context.lineTo(endx, endy);
    context.lineWidth = line_width;
    context.strokeStyle = "#fff";
    context.stroke();
}

// 绘制矩形方法
function drawRect(startx, starty, endx, endy, color) {
    context.fillStyle = color;
    context.fillRect(startx, starty, endx, endy);
}

请不要在意里面的英文，当时只是觉得逼格很高

效果我一直不知道怎么放

HTML中只要有个canvas就好了