Chris@25
|
1 <!DOCTYPE html>
|
Chris@25
|
2 <html>
|
Chris@25
|
3 <head>
|
Chris@25
|
4 <meta charset="utf-8">
|
Chris@25
|
5 <script src="../lib/complex_array.js"></script>
|
Chris@25
|
6 <script src="../lib/fft.js"></script>
|
Chris@25
|
7 <link rel="stylesheet" href="example.css">
|
Chris@25
|
8 <title></title>
|
Chris@25
|
9 </head>
|
Chris@25
|
10 <body>
|
Chris@25
|
11 <div class="panel">
|
Chris@25
|
12 <div id="original" class="example"></div>
|
Chris@25
|
13 <div class="explanation">
|
Chris@25
|
14 Sample data
|
Chris@25
|
15 <pre>
|
Chris@25
|
16 var data = new ComplexArray(128)
|
Chris@25
|
17 data.map(function(value, i, n) {
|
Chris@25
|
18 value.real = (i > n/3 && i < 2*n/3) ? 1 : 0
|
Chris@25
|
19 })
|
Chris@25
|
20 </pre>
|
Chris@25
|
21 </div>
|
Chris@25
|
22 </div>
|
Chris@25
|
23 <div class="panel">
|
Chris@25
|
24 <div id="fft" class="example"></div>
|
Chris@25
|
25 <div class="explanation">
|
Chris@25
|
26 Transform (in place):<br>
|
Chris@25
|
27 <code>
|
Chris@25
|
28 data.FFT()
|
Chris@25
|
29 </code>
|
Chris@25
|
30 </div>
|
Chris@25
|
31 </div>
|
Chris@25
|
32 <div class="panel">
|
Chris@25
|
33 <div id="fft_filtered" class="example"></div>
|
Chris@25
|
34 <div class="explanation">
|
Chris@25
|
35 Simple low pass filter:
|
Chris@25
|
36 <pre>
|
Chris@25
|
37 data.map(function(freq, i, n) {
|
Chris@25
|
38 if (i > n/5 && i < 4*n/5) {
|
Chris@25
|
39 freq.real = 0
|
Chris@25
|
40 freq.imag = 0
|
Chris@25
|
41 }
|
Chris@25
|
42 })
|
Chris@25
|
43 </pre>
|
Chris@25
|
44 </div>
|
Chris@25
|
45 </div>
|
Chris@25
|
46 <div class="panel">
|
Chris@25
|
47 <div id="original_filtered" class="example"></div>
|
Chris@25
|
48 <div class="explanation">
|
Chris@25
|
49 Transform back:<br>
|
Chris@25
|
50 <code>
|
Chris@25
|
51 data.InvFFT()
|
Chris@25
|
52 </code>
|
Chris@25
|
53 </div>
|
Chris@25
|
54 </div>
|
Chris@25
|
55 <div class="panel">
|
Chris@25
|
56 <div id="all_in_one" class="example"></div>
|
Chris@25
|
57 <div class="explanation">
|
Chris@25
|
58 ... or all in one step
|
Chris@25
|
59 <pre>
|
Chris@25
|
60 data.frequencyMap(function(freq, i, n) {
|
Chris@25
|
61 if (i > n/5 && i < 4*n/5) {
|
Chris@25
|
62 freq.real = 0
|
Chris@25
|
63 freq.imag = 0
|
Chris@25
|
64 }
|
Chris@25
|
65 })
|
Chris@25
|
66 </pre>
|
Chris@25
|
67 </div>
|
Chris@25
|
68 </div>
|
Chris@25
|
69 <script>
|
Chris@25
|
70 !function() {
|
Chris@25
|
71 function drawToCanvas(element_id, data) {
|
Chris@25
|
72 var
|
Chris@25
|
73 element = document.getElementById(element_id)
|
Chris@25
|
74 canvas = document.createElement('canvas'),
|
Chris@25
|
75 context = canvas.getContext('2d'),
|
Chris@25
|
76 width = element.clientWidth,
|
Chris@25
|
77 height = element.clientHeight,
|
Chris@25
|
78 n = data.length
|
Chris@25
|
79
|
Chris@25
|
80 canvas.width = width
|
Chris@25
|
81 canvas.height = height
|
Chris@25
|
82 element.appendChild(canvas)
|
Chris@25
|
83
|
Chris@25
|
84 context.strokeStyle = 'blue'
|
Chris@25
|
85 context.beginPath()
|
Chris@25
|
86 data.forEach(function(c_value, i) {
|
Chris@25
|
87 context.lineTo(
|
Chris@25
|
88 i * width / n,
|
Chris@25
|
89 height/2 * (1.5 - c_value.real)
|
Chris@25
|
90 )
|
Chris@25
|
91 })
|
Chris@25
|
92 context.stroke()
|
Chris@25
|
93 }
|
Chris@25
|
94
|
Chris@25
|
95 window.onload = function() {
|
Chris@25
|
96 var
|
Chris@25
|
97 data = new complex_array.ComplexArray(128)
|
Chris@25
|
98
|
Chris@25
|
99 data.map(function(value, i, n) {
|
Chris@25
|
100 value.real = (i > n/3 && i < 2*n/3) ? 1 : 0
|
Chris@25
|
101 })
|
Chris@25
|
102
|
Chris@25
|
103 drawToCanvas('original', data)
|
Chris@25
|
104
|
Chris@25
|
105 data.FFT()
|
Chris@25
|
106 drawToCanvas('fft', data)
|
Chris@25
|
107 data.map(function(freq, i, n) {
|
Chris@25
|
108 if (i > n/5 && i < 4*n/5) {
|
Chris@25
|
109 freq.real = 0
|
Chris@25
|
110 freq.imag = 0
|
Chris@25
|
111 }
|
Chris@25
|
112 })
|
Chris@25
|
113 drawToCanvas('fft_filtered', data)
|
Chris@25
|
114 drawToCanvas('original_filtered', data.InvFFT())
|
Chris@25
|
115
|
Chris@25
|
116 drawToCanvas('all_in_one', data.frequencyMap(function(freq, i, n) {
|
Chris@25
|
117 if (i > n/5 && i < 4*n/5) {
|
Chris@25
|
118 freq.real = 0
|
Chris@25
|
119 freq.imag = 0
|
Chris@25
|
120 }
|
Chris@25
|
121 }))
|
Chris@25
|
122 }
|
Chris@25
|
123 }()
|
Chris@25
|
124 </script>
|
Chris@25
|
125 </body>
|
Chris@25
|
126 </html>
|