Visualizing Sine Wave
Let's try to visualize the sine wave in a rotating circle.
If you want to see the source code, here it is.
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Sine Wave</title>
6 <style>
7 #plane {
8 position: absolute;
9 top: 50%;
10 left: 50%;
11 transform: translate(-50%, -50%);
12 }
13 </style>
14 </head>
15 <body>
16 <canvas id="plane" width="500" height="120"></canvas>
17 <script>
18 var board = document.getElementById("plane")
19 var plane = board.getContext("2d")
20 var angle = 0, radius = 50, wave = [],
21 cx = 60, cy = 60, x, y
22
23 setInterval( draw, 20)
24
25 function draw()
26 {
27 clear()
28
29 x = radius * Math.cos( angle )
30 y = radius * Math.sin( angle )
31 wave.unshift( cy+y )
32
33 plane.beginPath()
34 plane.arc( cx, cy, radius, 0, Math.PI*2 )
35 plane.strokeStyle = "grey"
36 plane.stroke()
37
38 plane.beginPath()
39 plane.moveTo(cx, cy)
40 plane.lineTo(cx+x, cy+y)
41 plane.stroke()
42
43 plane.beginPath()
44 plane.moveTo(cx+x, cy+y)
45 plane.lineTo( 150, cy+y)
46 plane.stroke()
47
48 for( var i=0; i<wave.length; i++ )
49 {
50 plane.fillStyle = "black"
51 plane.fillRect( 150+i, wave[i], 2, 2 )
52 }
53 if( wave.length > 320 ) wave.pop()
54
55 angle -= 0.05
56 }
57
58 function clear()
59 {
60 plane.fillStyle = "white"
61 plane.strokeStyle = "black"
62 plane.fillRect(0, 0, board.width, board.height )
63 plane.strokeRect(0, 0, board.width, board.height)
64 }
65
66 </script>
67 </body>
68 </html>
