Mercurial > hg > js-dsp-test

comparison fft/jsfft/example/index.html @ 25:66f9fd5ac611

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