1 files changed, 32 insertions, 80 deletions

diff --git a/client/draw.js b/client/draw.js
index 3dab322..bed5f80 100644
--- a/client/draw.js
+++ b/client/draw.js
@@ -1,7 +1,3 @@
-import Tone from 'tone'
-
-import output from './lib/output'
-
 import {
   browser, requestAudioContext,
   randint, randrange, clamp, mod,
@@ -13,9 +9,14 @@ import color from './lib/color'
 let w, h
 let rx, ry
 
+const pixels_per_second = 1024
+
 const canvas = document.createElement('canvas')
 const ctx = canvas.getContext('2d')
 
+const scratch = document.createElement('canvas')
+const scratchCtx = scratch.getContext('2d')
+
 document.body.appendChild(canvas)
 document.body.addEventListener('resize', resize)
 resize()
@@ -94,7 +95,6 @@ function waveform(pcm, sr, pos, zoom){
   var x0 = 0
   var y0 = 20
   var ymid = y0 + half_height
-  var pixels_per_second = 1024
   var max_width_in_seconds = width / pixels_per_second
   var max_width_in_samples = max_width_in_seconds * sr
   var pcm_length = pcm.length
@@ -120,69 +120,22 @@ function waveform(pcm, sr, pos, zoom){
   ctx.restore()
 }
 
-const signalWindows = require('signal-windows').windows
-const FFTJS = require('fft.js')
-const fft_size = 2048
-const fft_overlap = fft_size / 4
-const half_fft_size = fft_size / 2
-const fft = new FFTJS(fft_size)
+function spectrum(spec, x0, y0, ww, hh){
+  const data = spec.data
+  const fft_size = spec.fft_size
+  const half_fft_size = spec.fft_size / 2
+  const spec_len = data.length
 
-function toSpectrum(pcm){
-  const ham = signalWindows.construct('ham', fft_size)
-  const pcm_in = new Array(fft_size)
-  const pcm_length = pcm.length
-  const pcm_q_length = Math.ceil(pcm_length / fft_size) * fft_size
-  let i, j, fft_out, spec = [];
-  for (i = 0; i < pcm_q_length; i += fft_overlap) {
-    for (j = 0; j < fft_size; j++) {
-      pcm_in[j] = pcm[i+j] * ham[j] || 0
-    }
-    fft_out = fft.createComplexArray()
-    fft.realTransform(fft_out, pcm_in)
-    fft.completeSpectrum(fft_out)
-    spec.push(fft_out)
-  }
-  return spec
-}
-function fromSpectrum(spec, sr){
-  const spec_len = spec.length
-  const ham = signalWindows.construct('ham', fft_size)
-  const out = fft.createComplexArray()
-  const pcm_length = fft_overlap * spec_len
-  const audioBuffer = Tone.context.createBuffer(1, pcm_length, sr)
-  const pcm = audioBuffer.getChannelData(0);
-  let i, j, u, v, _r, _i, col
-  for (i = 0; i < spec_len; i++) {
-    col = spec[i]
-    fft.inverseTransform(out, col)
-    u = i * (fft_overlap)
-    for (j = fft_size * 1/4; j < fft_size * 3/4; j++) {
-      pcm[u+j] = out[j*2] / ham[j] || 0
-    }
-  }
-  const player = new Tone.Player(audioBuffer)
-  player.connect(output)
-  player.start(Tone.now() + pcm_length / sr)
-  // console.log(Tone.now() + pcm_length / sr)
-  return audioBuffer
-}
-function spectrum(pcm, sr){
-  sr = sr || 44100
-  const spec = toSpectrum(pcm)
-
-  ctx.save()
-
-  const scratch = document.createElement('canvas')
-  scratch.width = spec.length
+  scratch.width = data.length
   scratch.height = half_fft_size
-  const scratchCtx = scratch.getContext('2d')
 
   var imageData = ctx.createImageData(scratch.width, scratch.height)
-  var data = imageData.data
+  var pixels = imageData.data
+
+  let i, j, u, v, _r, _i, col, hsl
 
-  let i, j, u, v, _r, _i, col, hsl, spec_len = spec.length
   for (i = 0; i < spec_len; i++) {
-    col = spec[i]
+    col = data[i]
 
     for (j = 0; j < half_fft_size; j++) {
       u = ((half_fft_size - j) * spec_len + i) * 4
@@ -191,36 +144,35 @@ function spectrum(pcm, sr){
       _i = mod(col[v+1], Math.PI*2) / (Math.PI*2)
       hsl = color.hsl2rgb((_i + 1) / 2, 1.0, 1 - Math.abs(_r / 10))
       // red - real part
-      // data[u] = _r * 127 + 127
+      // pixels[u] = _r * 127 + 127
       // // green - imag part
-      // data[u+1] = _i * 127 + 127
+      // pixels[u+1] = _i * 127 + 127
       // // blue - magnitude
-      // data[u+2] = Math.sqrt(Math.pow(_r, 2) + Math.pow(_i, 2)) * 128 + 127
-      // data[u+3] = 255
-      data[u] = hsl[0]
-      data[u+1] = hsl[1]
-      data[u+2] = hsl[2]
-      data[u+3] = 255
+      // pixels[u+2] = Math.sqrt(Math.pow(_r, 2) + Math.pow(_i, 2)) * 128 + 127
+      // pixels[u+3] = 255
+      pixels[u] = hsl[0]
+      pixels[u+1] = hsl[1]
+      pixels[u+2] = hsl[2]
+      pixels[u+3] = 255
     }
   }
 
   scratchCtx.putImageData(imageData, 0, 0)
 
-  var pcm_length = pcm.length
-  var pixels_per_second = 1024
+  var pcm_length = spec.fft_overlap * spec_len
+
+  x0 = x0 || 0
+  y0 = y0 || Math.floor(h/4)
+  ww = ww || window.innerWidth
+  hh = hh || h/4
 
-  const width = Math.round(pcm_length / sr * pixels_per_second) // ok not really this
-  const height = Math.floor(h*2/3)
+  const width = Math.round(pcm_length / spec.sr * pixels_per_second)
+  const height = Math.floor(hh)
 
-  const x0 = 0
-  const y0 = Math.floor(h/4) + 20
+  ctx.save()
   clear(1, x0, y0, w, height)
   ctx.drawImage(scratch, x0, y0, width, height)
-
   ctx.restore()
-
-  const new_pcm = fromSpectrum(spec, sr)
-  console.log(new_pcm)
 }
 
 export default {