test

1 files changed, 108 insertions, 140 deletions

diff --git a/client/index.js b/client/index.js
index c4fc67d..18e94da 100644
--- a/client/index.js
+++ b/client/index.js
@@ -1,163 +1,131 @@
 import Tone from 'tone'
-
-import Sampler from './lib/sampler'
-
 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 { Hall } from './lib/hall'
-
 import {
   requestAudioContext,
-  lerp,
+  lerp, clamp, mod,
 } from './lib/util'
 
-// const root = 440
-
-const HALLWAY_LENGTH = 147
-// const SPEAKER_COUNT = 16
-
-// let notes = [299, 336, 374, 399, 449, 498, 561, 598].map(i => i/2)
-// notes = notes.concat(notes.map(i => i/2))
-
-let samplers = {}
-let sampler
+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)
 
-requestAudioContext( () => {
-  // sampler = samplers.misc = new Sampler('samples/misc/glass.mp3', 2)
-  sampler = samplers.smash = new Sampler('samples/smash/g{}.mp3', 12)
-  // sampler = samplers.earth = new Sampler('samples/earth/earth{}.mp3', 20)
-  // sampler = samplers.glass = new Sampler('samples/glass/0{}Particle.mp3', 20)
-  // sampler = samplers.bubbles = new Sampler('samples/bubbles/bubbles{}.mp3', 10)
-  // sampler = samplers.kalimba = new Sampler('samples/kalimba/380731__cabled-mess__sansula-08-c-raw.wav', 10)
-
-  samplers.choice = (m,n) => {
-    const r = Math.random()
-    if (r < m) return samplers.smash
-    if (r < m+n) return samplers.kalimba
-    return samplers.glass
-  }
-  Tone.Buffer.on('load', function(){
-    console.log('all buffers are loaded.')
-    // redraw()
+  gallery = document.querySelector('#gallery')
+  mouse.register({
+    move: (x, y) => {
+    }
   })
-})
-
-// const hall = new Hall ({
-//   length: HALLWAY_LENGTH,
-//   speakers: SPEAKER_COUNT,
-// })
+  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()
 
-function redraw(){
-  draw.clear()
+  if (e.dataTransfer && ! selfDrag) {
+    if (e.dataTransfer.files.length) {
+      handleFileSelect(e)
+    }
+  }
+  else {
+    handleFileSelect(e)
+  }
+  selfDrag = false
 }
+function handleFileSelect(e){
+  var files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+  var file = files[0]
+  // console.log(files, file)
+  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
 
-let last_lin_bins, last_sam
-let timeout
-function manipulate(x, y, pcm, spec){
-  if (timeout) return null
-  timeout = setTimeout( () => { timeout = null }, 20 )
+  const FRAME_LENGTH = 126 * 255
+  const FRAME_OFFSET = FRAME_LENGTH
 
-  // reverseSpectrum,
-  // shuffleSpectrum,
-  // invertSpectrum
+  for (var offset = 0, count = 0, _len = pcm.length; offset < _len; offset += FRAME_OFFSET, count += 1) {
+    // console.log('generating', count, offset)
+    let player = render(pcm.slice(offset, offset+FRAME_LENGTH))
+    register(player, count)
+    if (count > 20) break
+    // break
+  }
+  play(0)
+}
+function render(pcm){
+  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)
-  // return spec_rev
-  // return spectrum.reverseSpectrum(spec)
-  // const log_bins = spectrum.logarithmicBins(spec)
-
-  // let lin_bins = (x * x * x * spec.fft_size/6)|0 
-  // let sam = (y * sampler.length)|0 + 1
-  // if (lin_bins == last_lin_bins && sam == last_sam) return null
-  // last_lin_bins = lin_bins
-  // last_sam = sam
-  // const log_bins = spectrum.linearBins(spec, lin_bins)
-  // const new_bins = spectrum.reverseBins(log_bins)
-  // const concat_bins = spectrum.concatBins(new_bins)
-  // const new_spec = spectrum.reorderBins(spec, concat_bins)
-  // console.log(spec, new_spec)
-
-  // let new_spec = spectrum.cloneSpectrum(spec)
-  // new_spec = spectrum.rotatePhase(new_spec, x * Math.PI)
-
-  let new_spec = spectrum.rotateSpectrum(spec, (y + 0.5)%1)
-
-  return new_spec
+  // const { buf, pcm } = spectrum.fromSpectrum(fft)
+  draw.clear()
+  const { canvas, imageData } = draw.raw_spectrum(fft, 0, 256, 0, 256, _r, _i)
+  const dataURL = canvas.toDataURL("image/png")
+  return { fft, canvas, imageData, dataURL }
 }
+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 = ''
+  gallery.appendChild(canvas)
 
-keys.listen(i => {
-  trigger(xx + i/50, yy, 0, sampler)
-})
-
-let xx = 0.5, yy = 0.5
-mouse.register({
-  down: (x, y) => {
-    redraw()
-    clearTimeout(timeout)
-    timeout = null
-    trigger(x, y, 0, sampler)
-  },
-  move: (x, y) => {
-    xx = x
-    yy = y
-  },
-  drag: (x, y) => {
-    trigger(x, y, 0, sampler)
-  },
-  // up: (x, y) => {
-  // },
-})
-
-function trigger(x, y, t, source){
-  x = x || 0
-  y = y || 0
-  t = t || 0
-  t += Tone.now()
-  source = source || sampler
-  // source = source || last_dist > 40
-  // ? samplers.choice(0.2, 0.2)
-  // : samplers.choice((1-y) * 0.2, y*0.02)
-  // const freq = notes[Math.floor(x * notes.length)]
-  // const { speaker, player } = hall.play(source, y, freq, x, t)
-
-  const { pcm, spec } = source.getWaveAndSpectrum(x)
-  if (! pcm) return
-
-  const new_spec = manipulate(x, y, pcm, spec)
-  if (! new_spec) return
-
-  const audioBuffer = spectrum.fromSpectrum(new_spec)
-  const player = new Tone.Player(audioBuffer)
-  player.connect(output)
-  player.start(Tone.now())
-
-  draw.onFrame(() => {
-    // INIT DRAWING PHASE
-    draw.clear()
-
-    // DRAW INDIVIDUAL UI ELEMENTS
-    // draw.waveform(pcm)
-    // draw.spectrum(spec, 0, window.innerHeight/4 + 20)
-
-    draw.waveform(audioBuffer.getChannelData(0))
-
-    // DRAW SPECTRUM
-    // const new_spec = spectrum.toSpectrum(audioBuffer.getChannelData(0), sr)
-    // draw.spectrum(new_spec, 0, window.innerHeight * 1/2 + 40)
-    draw.spectrum(new_spec, 0, window.innerHeight * 1/4 + 20, 0, window.innerHeight * 1/2)
-
-    // DRAW FLAIR
-    draw.triangle(
-      lerp(x, 0, 1) * window.innerWidth, 
-      lerp(y, 0, 1) * window.innerHeight - 20,
-      40
-    )
+  // 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)
+  gallery.appendChild(canvas)
+}
+function register(player, i){
+  // console.log('register', player)
+  players.push(player)
+  player.canvas.addEventListener('click', () => {
+    play(i)
   })
+  // gallery.appendChild(player.canvas)
 }
-
-
-
+init()