Fourier Series of a Triangular Wave Visualization
Visualization of the fourier-series triangulat wave coded in Javascript.
Here is the source code. Just change the value of m to see how it looks from small values compared to greater values.
Html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Fourier Series</title>
6 <style>
7 #plane {
8 text-align: center;
9 }
10 </style>
11 </head>
12 <body>
13 <canvas id="plane" width="480" height="200"></canvas>
14 <script>
15 var board = document.getElementById( "plane" )
16 var plane = board.getContext("2d")
17 var angle = 0, m = 10, radius, wave = []
18
19 setInterval( draw, 20 )
20
21 function draw()
22 {
23 clear()
24 var x = 0
25 var y = 0
26 var cx = 80, cy = 100
27
28 for( var i=1; i<m; i+=2 )
29 {
30 radius = 60 * ( 8 / Math.pow( Math.PI, 2) )
31 * ( Math.pow(-1, (i-1)/2) / Math.pow(i, 2) )
32 x = radius * Math.cos( i * Math.PI * angle )
33 y = radius * Math.sin( i * Math.PI * angle )
34
35 if( radius < 0 ) radius *= -1
36
37 plane.beginPath()
38 plane.arc( cx, cy, radius, 0, Math.PI*2 )
39 plane.strokeStyle = "grey"
40 plane.stroke()
41
42 plane.beginPath()
43 plane.moveTo(cx, cy)
44 plane.lineTo(cx+x, cy+y)
45 plane.stroke()
46
47 cx += x
48 cy += y
49 }
50 wave.unshift(cy)
51
52 //draw line horizontally
53 plane.beginPath()
54 plane.moveTo(cx, cy)
55 plane.lineTo(180, cy)
56 plane.stroke()
57
58 for( var i=0; i<wave.length; i++ )
59 {
60 plane.fillStyle = "black"
61 plane.fillRect(180+i, wave[i], 2, 2 )
62 }
63 if(wave.length==320) wave.pop()
64
65 angle -= 0.03
66 }
67
68 function clear()
69 {
70 plane.fillStyle = "white"
71 plane.strokeStyle = "black"
72 plane.fillRect(0, 0, board.width, board.height )
73 plane.strokeRect(0, 0, board.width, board.height )
74 }
75 draw()
76 </script>
77 </body>
78 </html>
