Mercurial > hg > js-dsp-test

annotate fft/jsfft/example/index.html @ 40:223f770b5341 kissfft-double tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Try a double-precision kissfft
author Chris Cannam
date Wed, 07 Sep 2016 10:40:32 +0100
parents 66f9fd5ac611
children
rev   line source
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 &amp;&amp; i &lt; 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 &amp;&amp; i &lt; 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 &amp;&amp; i &lt; 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>