傅里葉級數的可視化

在b站上看到一個大神用p5.js寫的，我覺得吧，原生是無敵的存在（其實是因為我不會），所以……效果自然沒有人家的好咯

js代碼：

 1 var time = 0;
 2 var wave = [];
 3 var temp_n = document.getElementById("temp_n").value;
 4 var lastx, lasty;
 5 
 6 var myCanvas = document.getElementById("myCanvas");
 7 var context = myCanvas.getContext('2d');
 8 
 9 temp = setInterval("draw()", 10);
10 
11 // Get the value that user input
12 function getValue() {
13     temp_n = document.getElementById("temp_n").value;
14 }
15 // The draw function
16 function draw() {
17 
18     context.clearRect(0, 0, myCanvas.width, myCanvas.height);
19 
20     // Draw the background
21     drawRect(0, 0, 960, 500, "#000");
22 
23     drawPicture(1);
24     drawPicture(2);
25 
26     drawLine(lastx, lasty, 480, lasty);
27 
28     for (let i = 1; i < wave.length; i++) {
29         drawRect(480 + i / 10, wave[i], 1, 1, "#fff");
30     }
31 
32     if (wave.length > 2000) {
33         console.log(wave[0]);
34         console.log(wave.length);
35         wave.pop();
36         wave.length -= 1;
37         console.log(wave.length)
38     };
39 
40     time += 0.01;
41 }
42 
43 function drawPicture(temp) {
44     let x = y = cx = cy = 250;
45     for (let i = 0; i < temp_n; i++){
46         let n = 2 * i + 1;
47         let radius = 50 * 4 / (n * Math.PI);
48         x += radius * Math.cos(n * time);
49         y += radius * Math.sin(n * time);
50         switch (temp) {
51             case 1 :
52                 drawCircle(cx, cy, radius, "#fff");
53                 break;
54             case 2 :
55                 drawLine(cx, cy, x, y, 1);
56                 drawRound(x, y, 1, "#fff");
57                 break;
58         }
59         cx = x;
60         cy = y;
61     }
62     lastx = x;
63     lasty = y;
64     wave.unshift(y);
65 }
66 
67 // 繪製圓圈方法
68 function drawCircle(x, y, r, color) {
69     drawRound(x, y, r, color);
70     drawRound(x, y, (r - 1), "#000");
71 }
72 
73 // 繪製圓方法
74 function drawRound(x, y, r, color) {
75     context.fillStyle = color;
76     context.beginPath();
77     context.arc(x, y, r, 0, Math.PI * 2, true);
78     context.closePath();
79     context.fill();
80 }
81 
82 // 繪製線條方法
83 function drawLine(startx, starty, endx, endy, line_width) {
84     context.moveTo(startx, starty);
85     context.lineTo(endx, endy);
86     context.lineWidth = line_width;
87     context.strokeStyle = "#fff";
88     context.stroke();
89 }
90 
91 // 繪製矩形方法
92 function drawRect(startx, starty, endx, endy, color) {
93     context.fillStyle = color;
94     context.fillRect(startx, starty, endx, endy);
95 }

請不要在意裡面的英文，當時只是覺得逼格很高

效果我一直不知道怎麼放

HTML中只要有個canvas就好了