1 files changed, 153 insertions, 0 deletions
diff --git a/app/client/audio/wav2pix.js b/app/client/audio/wav2pix.js
new file mode 100644
index 0000000..3e86c40
--- /dev/null
+++ b/app/client/audio/wav2pix.js
@@ -0,0 +1,153 @@
+import Tone from 'tone'
+import JSZip from 'jszip'
+import { sprintf } from 'sprintf-js'
+import FileSaver from 'file-saver'
+
+import draw from './draw'
+import keys from './lib/keys'
+import mouse from './lib/mouse'
+import output from './lib/output'
+import spectrum from './lib/spectrum'
+
+import {
+  requestAudioContext,
+  lerp, clamp, mod,
+} from './lib/util'
+
+let selfDrag = false
+let buffer
+let players = []
+let gallery
+let sr = 44100
+let last_i = 0
+let _r = 8, _i = 8
+function init(){
+  requestAudioContext(ready)
+  document.body.addEventListener('dragover', dragover)
+  document.body.addEventListener('dragstart', dragstart)
+  document.body.addEventListener('drop', drop)
+  document.querySelector("#upload").addEventListener('change', handleFileSelect)
+  // draw.onFrame(() => {})
+  draw.resize(256, 256)
+
+  gallery = document.querySelector('#gallery')
+  mouse.register({
+    move: (x, y) => {
+    }
+  })
+  keys.listen((z) => {
+    // console.log(z)
+    play(mod(z, players.length))
+  })
+}
+function ready(){
+}
+function dragover (e) {
+  e.preventDefault()
+}
+function dragstart (e) {
+  selfDrag = true
+}
+function drop (e) {
+  e.stopPropagation()
+  e.preventDefault()
+
+  if (e.dataTransfer && ! selfDrag) {
+    if (e.dataTransfer.files.length) {
+      handleFileSelect(e)
+    }
+  }
+  else {
+    handleFileSelect(e)
+  }
+  selfDrag = false
+}
+let files, file_index = 0;
+function handleFileSelect(e){
+  files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+  loadNext()
+}
+function loadNext(){
+  var file = files[file_index++]
+  if (! file) return
+  load(file)
+}
+function load(file){
+  players = []
+  buffer = new Tone.Buffer(URL.createObjectURL(file), loadBuffer, (err) => console.error('err', err))
+}
+function loadBuffer(){
+  console.log('loaded buffer', buffer)
+  const pcm = buffer._buffer.getChannelData(0)
+  sr = buffer._buffer.sampleRate
+  if (! pcm) return
+
+  const FRAME_LENGTH = 126 * 255
+  const FRAME_OFFSET = FRAME_LENGTH / 4
+
+  var zip = new JSZip()
+
+  var zip_folder = zip.folder("images");
+
+  for (var offset = 0, count = 0, _len = pcm.length - FRAME_LENGTH; offset < _len; offset += FRAME_OFFSET, count += 1) {
+    if ((count % 100) === 0) console.log(count)
+    // console.log('generating', count, offset)
+    // let player = render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
+    render(pcm.slice(offset, offset+FRAME_LENGTH), count, zip_folder)
+    // register(player, count)
+    // if (count > 20) break
+  }
+
+  console.log('done exporting')
+  zip.generateAsync({type:"blob"}).then(function(content) {
+    console.log('saving zip')
+    FileSaver.saveAs(content, "img2pix.zip")
+    setTimeout(loadNext, 1000)
+  })
+  // play(0)
+}
+function render(pcm, count, zip){
+  const fft = spectrum.toSpectrum(pcm, sr)
+  // console.log('render', fft)
+  // const pcm_rev = pcm.slice().reverse()
+  // const spec_rev = spectrum.toSpectrum(pcm_rev, spec.sr)
+  draw.clear()
+  const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i)
+  const dataURL = canvas.toDataURL("image/png")
+  if (zip) {
+    const fn = sprintf('frame_%05d.png', count)
+    zip.file(fn, dataURL.split(',')[1], {base64: true})
+  }
+  return { fft, canvas, imageData }
+}
+function play(i) {
+  // console.log('play', i)
+  last_i = i
+  let player = players[clamp(i, 0, players.length)]
+  // const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, 1, 1)
+  // console.log(_r, _i)
+  // const { canvas, imageData } = draw.raw_spectrum(player.fft, 0, 256, 0, 256, _r, _i)
+  const new_fft = spectrum.fromImageData(player.imageData, 44100, _r, _i)
+  // gallery.innerHTML = ''
+
+  // console.log(player.fft.data, new_fft.data)
+  const buf = spectrum.fromSpectrum(new_fft)
+  const _p = new Tone.Player(buf)
+  _p.connect(output)
+  _p.start(Tone.now())
+  redraw(new_fft)
+}
+function redraw(new_fft){
+  const { canvas, imageData } = draw.raw_spectrum(new_fft, 0, 256, 0, 256, _r, _i)
+}
+function register(player, i){
+  // console.log('register', player)
+  players.push(player)
+  player.canvas.addEventListener('click', () => {
+    play(i)
+  })
+  if (i < 20) {
+    gallery.appendChild(player.canvas)  
+  }
+}
+init()