inequality client

10 files changed, 1218 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
index de0aedf..fb70dfd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,5 @@ node_modules
 *.wav
 
 data/
+samples
 
diff --git a/client/data.js b/client/data.js
new file mode 100644
index 0000000..4eab9d3
--- /dev/null
+++ b/client/data.js
@@ -0,0 +1,29 @@
+const files = [
+  "housing-costs-and-income-inequality",
+  "income-inequality-over-time",
+  "shares-of-wealth",
+  "weekly-earnings",
+  "household-wealth",
+]
+
+const dataPromises = files.map(name => {
+  return fetch('./data/' + name + '.csv').then(rows => {
+    return rows.text()
+  }).then(text => {
+    let lines = text.split('\n').map(line => line.split(','))
+    const h = lines.shift()
+    return {
+      name: name.replace(/-/g, ' '),
+      h,
+      lines: lines.filter(s => !!s)
+    }
+  })
+})
+const allPromises = Promise.all(dataPromises).then(data => {
+  return data.reduce((a,b) => { a[b.name.replace(/-/g, '_')] = b; return a }, {})
+})
+const load = () => {
+  return allPromises
+}
+
+export { load }
\ No newline at end of file
diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..e6f0716
--- /dev/null
+++ b/client/index.js
@@ -0,0 +1,333 @@
+import Tone from 'tone'
+import WebMidi from 'webmidi'
+import Nexus from 'nexusui'
+import keys from './lib/keys'
+import kalimba from './lib/kalimba'
+import scales from './lib/scales'
+import { requestAudioContext, ftom, dataURItoBlob } from './lib/util'
+import { saveAs } from 'file-saver/FileSaver'
+
+import * as data from './data'
+
+const MidiWriter = require('midi-writer-js')
+
+const DEFAULT_BPM = 60
+
+const nx = window.nx = {}
+
+let midi
+let exporting = false
+let recording = false
+let recorder = null
+
+const note_values = [
+  [8, '8 measures', 8 * 512],
+  [4, '4 measures', 4 * 512],
+  [2, '2 measures', 2 * 512],
+  [1, 'whole note', 512],
+  [1/2, 'half note', 256],
+  [1/3, 'third note', [170, 170, 171]],
+  [1/4, 'quarter note', 128],
+  [1/5, 'fifth note', [51,51,51,51,52]],
+  [1/6, 'sixth note', [85, 85, 86, 85, 85, 86]],
+  [1/8, 'eighth note', 64],
+  [1/10, 'tenth note', [25,26,26,25,26,25,26,26,25,26]],
+  [1/12, 'twelfth note', [21,21,22, 21,21,22, 21,21,22, 21,21,22]],
+  [1/16, 'sixteenth note', 32],
+  [1/32, 'thirtysecond note', 16],
+]
+
+WebMidi.enable(midi_ready)
+function midi_ready(err) {
+  if (err) {
+    console.error('webmidi failed to initialize')
+    return
+  }
+  if (!WebMidi.outputs.length) {
+    console.error('no MIDI output found')
+    return
+  }
+  console.log(WebMidi.inputs)
+  console.log(WebMidi.outputs)
+  if (WebMidi.outputs.length > 1) {
+    const filtered = WebMidi.outputs.filter(output => output.name.match(/prodipe/i))
+    if (filtered.length) {
+      // midi = filtered[0]
+    }
+  }
+  // midi = midi || WebMidi.outputs[0]
+  // console.log(midi.name)
+}
+
+let i = 0, datasets = {}, dataset = {}, bounds = {}, diff = []
+let play_fn = play_sequence
+data.load().then(lists => {
+  // nx.dataset.choices = Object.keys(lists)
+  console.log(lists) 
+  datasets = lists
+  pick_dataset('housing costs and income inequality')
+  requestAudioContext(ready)
+})
+
+function pick_dataset(key){
+  console.log('pick dataset:', key)
+  i = 0
+  dataset = datasets[key]
+  bounds = get_bounds(dataset)
+  diff = get_diff_bounds(bounds.rows)
+}
+var behaviors = {
+  sequence: { name: 'Sequence', fn: play_sequence },
+  interval: { name: 'Intervals', fn: play_interval_sequence },
+}
+function pick_behavior(name){
+  play_fn = behaviors[name].fn
+}
+function play_next(){
+  let note_time = 120000 / Tone.Transport.bpm.value * note_values[nx.timing.active][0] * nx.duration.value
+  setTimeout(play_next, note_time)
+  let [new_i, notes] = play_fn(i, note_time)
+  i = new_i
+  if (recording) {
+    let timing = note_values[nx.timing.active][2]
+    if (timing.length) timing = timing[i % timing.length]
+    recorder.addEvent(new MidiWriter.NoteEvent({ pitch: notes, duration: 't' + timing }))
+  }
+}
+function play_sequence(i, note_time) {
+  const { rows, min, max } = bounds
+  const count = rows.length * rows[0].length
+  if (i >= count) i = 0
+  const y = Math.floor(i / rows[0].length)
+  const x = i % rows[0].length
+  if (!x) console.log(y)
+  const n = rows[y][x]
+  i += 1
+  if (i >= count) i = 0
+  const midi_note = play( norm(n, min, max) * nx.multiply.value, note_time)
+  return [i, [midi_note]]
+}
+function play_interval_sequence(i, note_time) {
+  const { rows, min, max } = bounds
+  const count = rows.length
+  if (i >= count) i = 0
+  const y = i % count
+  const row = rows[y]
+  if (! row) { i = 0; return }
+  const row_min = Math.min.apply(Math, row)
+  // const row_max = Math.max.apply(Math, row)
+  const row_f0 = norm(row_min, min, max)
+  const row_root = row_f0 * nx.multiply.value
+  const notes = row.map(n => {
+    const note = row_root + norm(n - row_min, diff.min, diff.max) * nx.interval.value
+    play(note, note_time)
+  })
+  i += 1
+  return [i, notes]
+}
+
+function norm(n, min, max){
+  return (n - min) / (max - min)
+}
+function get_diff_bounds(rows){
+  const diffs = rows.map(row => {
+    const row_min = Math.min.apply(Math, row)
+    const row_max = Math.max.apply(Math, row)
+    return row_max - row_min
+  })
+  const min = Math.min.apply(Math, diffs)
+  const max = Math.max.apply(Math, diffs)
+  return { min, max }
+}
+function get_bounds(dataset){
+  let rows = dataset.lines
+  rows.forEach(row => row.shift())
+  rows = rows.map(a => a.map(n => parseFloat(n)))
+  const max = rows.reduce((a,b) => {
+    return b.reduce((z,bb) => {
+      return Math.max(z, bb)
+    }, a)
+  }, -Infinity)
+  const min = rows.reduce((a,b) => {
+    return b.reduce((z,bb) => {
+      return Math.min(z, bb)
+    }, a)
+  }, Infinity)
+  return { rows, max, min }
+}
+function play(index, duration){
+  // console.log(index)
+  const scale = scales.current()
+  const freq = scale.index(index + Math.round(nx.offset.value), nx.octave.value)
+  let midi_note = ftom(freq)
+  let cents = midi_note % 1
+  if (cents > 0.5) {
+    midi_note += 1
+    cents -= 1
+  }
+  cents *= 2
+  midi_note = Math.floor(midi_note)
+  if ((midi || exporting) && midi_note > 127) return 0
+  const note = Tone.Frequency(Math.floor(midi_note), "midi").toNote()
+  if (exporting || midi) {
+    duration = duration || 60000 / Tone.Transport.bpm.value
+    if (! exporting) {
+      midi.playNote(note, "all", { duration })
+      midi.sendPitchBend(cents, "all")
+    }
+  } else {
+    kalimba.play(freq)
+  }
+  return note
+}
+
+function update_value_on_change(el, id, is_int, fn) {
+  const label = document.querySelector(id + ' + .val')
+  const update = v => {
+    label.innerHTML = is_int ? parseInt(v) : v.toFixed(2)
+    fn && fn(v)
+  }
+  el.on('change', update)
+  update(el.value)
+  el.update = update
+}
+function update_radio_value_on_change(el, id, values, fn) {
+  let old_v = el.active
+  const label = document.querySelector(id + ' + .val')
+  const update = v => {
+    if (v === -1) {
+      v = el.active = old_v
+    } else {
+      old_v = v
+    }
+    label.innerHTML = values[v][1]
+    fn && fn(v)
+  }
+  el.on('change', update)
+  update(el.active)
+  el.update = update
+}
+function build_options(el, lists, fn) {
+  Object.keys(lists).forEach(key => {
+    const list = lists[key]
+    const option = document.createElement('option')
+    option.innerHTML = list.name
+    option.value = key
+    el.appendChild(option)
+  })
+  el.addEventListener('input', function(e){
+    fn(e.target.value)
+  })
+}
+function ready () {
+  scales.build_options(document.querySelector('#scale'))
+  build_options(document.querySelector('#dataset'), datasets, pick_dataset)
+  build_options(document.querySelector('#behavior'), behaviors, pick_behavior)
+  // nx.colorize('#f4d142')
+
+	Tone.Transport.bpm.value = DEFAULT_BPM
+  nx.tempo = new Nexus.Dial('#tempo', {
+    min: 10,
+    max: 300,
+    step: 1,
+    value: DEFAULT_BPM,
+  })
+  update_value_on_change(nx.tempo, '#tempo', true, v => Tone.Transport.bpm.value = v)
+
+  nx.timing = new Nexus.RadioButton('#timing', {
+    size: [400,25],
+    numberOfButtons: note_values.length,
+    active: 6,
+  })
+  update_radio_value_on_change(nx.timing, '#timing', note_values)
+
+  nx.duration = new Nexus.Dial('#duration', {
+    min: 0,
+    max: 2,
+    step: 0.01,
+    value: 0.8,
+  })
+  update_value_on_change(nx.duration, '#duration', false)
+
+  nx.offset = new Nexus.Dial('#offset', {
+    min: -24,
+    max: 24,
+    step: 1,
+    value: 0,
+  })
+  update_value_on_change(nx.offset, '#offset', true)
+
+  nx.octave = new Nexus.Dial('#octave', {
+    min: -4,
+    max: 4,
+    step: 1,
+    value: 0,
+  })
+  update_value_on_change(nx.octave, '#octave', true)
+
+  nx.multiply = new Nexus.Dial('#multiply', {
+    min: -64,
+    max: 64,
+    step: 1,
+    value: 7,
+  })
+  update_value_on_change(nx.multiply, '#multiply', true)
+
+  nx.interval = new Nexus.Dial('#interval', {
+    min: -64,
+    max: 64,
+    step: 1,
+    value: 10,
+  })
+  update_value_on_change(nx.interval, '#interval', true)
+
+  const export_midi_button = document.querySelector('#export_midi')
+  export_midi_button.addEventListener('click', export_pattern_as_midi)
+
+  const record_midi_button = document.querySelector('#record_midi')
+  record_midi_button.addEventListener('click', () => {
+    if (recording) {
+      record_midi_button.innerHTML = 'Record MIDI'
+      document.body.classList.remove('recording')
+      recording = false
+      const writer = new MidiWriter.Writer([recorder])
+      const blob = dataURItoBlob(writer.dataUri())
+      saveAs(blob, 'Recording - ' + dataset.name + '.mid')
+    } else {
+      record_midi_button.innerHTML = 'Save Recording'
+      document.body.classList.add('recording')
+      recording = true
+      recorder = new MidiWriter.Track()
+      recorder.setTempo(nx.tempo.value)
+    }
+  })
+
+  document.querySelector('.loading').classList.remove('loading')
+  play_next()
+}
+function export_pattern_as_midi(){
+  const behavior = document.querySelector('#behavior').value
+  const { rows } = bounds
+  let count = behavior === 'sequence' ? rows[0].length * rows.length : rows.length
+  let notes
+  let note_time
+  let timing = note_values[nx.timing.active][2]
+  exporting = true
+  let midi_track = new MidiWriter.Track()
+  midi_track.setTempo(nx.tempo.value)
+  for (let i = 0, len = count; i < len; i++) {
+    notes = play_fn(i)[1]
+    if (timing.length) note_time = timing[i % timing.length]
+    else note_time = timing
+    midi_track.addEvent(new MidiWriter.NoteEvent({ pitch: notes, duration: 't' + note_time }))
+  }
+  const writer = new MidiWriter.Writer([midi_track])
+  const blob = dataURItoBlob(writer.dataUri())
+  saveAs(blob, 'Recording - ' + dataset.name + '.mid')
+  exporting = false
+}
+
+keys.listen(index => {
+  nx.offset.value = index
+  nx.offset.update(index)
+})
diff --git a/client/lib/color.js b/client/lib/color.js
new file mode 100644
index 0000000..bd5b7ce
--- /dev/null
+++ b/client/lib/color.js
@@ -0,0 +1,31 @@
+
+const palettes = [
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.00, 0.33, 0.67]],
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.00, 0.10, 0.20]],
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 1.0], [0.30, 0.20, 0.20]],
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 1.0, 0.5], [0.80, 0.90, 0.30]],
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [1.0, 0.7, 0.4], [0.00, 0.15, 0.20]],
+  [[0.5, 0.5, 0.5], [0.5, 0.5, 0.5], [2.0, 1.0, 0.0], [0.50, 0.20, 0.25]],
+  [[0.8, 0.5, 0.4], [0.2, 0.4, 0.2], [2.0, 1.0, 1.0], [0.00, 0.25, 0.25]],
+]
+
+let palette = palettes[0]
+
+function channel (t, a, b, c, d, add, mul) {
+  return a + b * Math.cos(2 * Math.PI * (c * t + d)) * mul + add
+}
+
+function color (t, add, mul) {
+  let a, b, c, d
+  const rgb = []
+  for (var i = 0; i < 3; i++) {
+    a = palette[0][i]
+    b = palette[1][i]
+    c = palette[2][i]
+    d = palette[3][i]
+    rgb[i] = Math.round(channel(t, a, b, c, d, add, mul) * 255)
+  }
+  return 'rgb(' + rgb + ')'
+}
+
+export default color
diff --git a/client/lib/intonation.js b/client/lib/intonation.js
new file mode 100644
index 0000000..e5465af
--- /dev/null
+++ b/client/lib/intonation.js
@@ -0,0 +1,162 @@
+module.exports = (function(){
+  var Intonation = function(opt){
+    opt = this.opt = Object.assign({
+      name: "",
+      root: 440,
+      octave: 0,
+      interval: 2,
+      tet: 0,
+      intervals: null,
+    }, opt || {})
+    this.generate()
+  }
+  Intonation.prototype.generate = function(opt){
+    opt = Object.assign(this.opt, opt || {})
+    if (opt.scl) {
+      this.generate_scl()
+    }
+    else if (opt.tet) {
+      this.generate_tet()
+    }
+    else if (opt.intervals) {
+      this.generate_intervals()
+    }
+  }
+  Intonation.prototype.generate_intervals = function(){
+    var root = this.opt.root
+    var interval_list = this.opt.intervals
+    if (typeof interval_list == "string") {
+      interval_list = interval_list.split(" ")
+    }
+    this.name = this.opt.name || "interval list"
+    this.intervals = interval_list
+    this.interval = this.opt.interval = parseInterval.call(this, interval_list.pop() )
+    this.scale = interval_list.map( parseIntervalString.bind(this) ).filter(function(v){
+      return !! v
+    })
+  }
+  Intonation.prototype.generate_tet = function(){
+    var scale = this.scale = []
+    var root = this.opt.root
+    var tet = this.opt.tet
+    var interval = this.interval = this.opt.interval
+    var ratio = Math.pow( interval, 1/tet )
+    var n = root
+    scale.push(n)
+    for (var i = 0; i < tet-1; i++) {
+      n *= ratio
+      scale.push(n)
+    }
+    this.name = this.opt.name || tet + "-tone equal temperament"
+    this.intervals = null
+  }
+  Intonation.prototype.generate_scl = function(){
+    var root = this.opt.root
+    var scl = this.parse_scl( this.opt.scl )
+    this.intervals = scl.notes
+    this.interval = scl.notes.pop()
+    this.name = this.opt.name || scl.description
+    this.scale = scl.notes.map(function(v){
+      return v * root
+    })
+  }
+  Intonation.prototype.parse_scl = function(s){
+    var scl = {}
+    scl.comments = []
+    scl.notes = []
+    s.trim().split("\n").forEach(function(line){
+      // Lines beginning with an exclamation mark are regarded as comments
+      // and are to be ignored.
+      if ( line.indexOf("!") !== -1 ) {
+        scl.comments.push(line)
+      }
+      // The first (non comment) line contains a short description of the scale.
+      // If there is no description, there should be an empty line. (nb: which is falsey)
+      else if ( ! ('description' in scl) ) {
+        scl.description = line
+      }
+      // The second line contains the number of notes.
+      // The first note of 1/1 or 0.0 cents is implicit and not in the files.
+      else if ( ! scl.notes.length) {
+        scl.notes.push(1)
+      }
+      else {
+        // If the value contains a period, it is a cents value, otherwise a ratio.
+        var note = line.replace(/^[^-\.0-9]+/,"").replace(/[^-\/\.0-9]+$/,"")
+        if ( note.indexOf(".") !== -1 ) {
+          note = Math.pow( 2, (parseFloat(note) / 1200) )
+        }
+        else {
+          note = parseInterval(note)
+        }
+        if (note) {
+          scl.notes.push(note)
+        }
+      }
+    })
+    return scl
+  }
+  Intonation.prototype.index = function(i, octave){
+    octave = octave || this.opt.octave
+    var f = this.scale[ mod(i, this.scale.length)|0 ]
+    var pow = Math.floor(norm(i, 0, this.scale.length)) + octave
+    f *= Math.pow(this.interval, pow)
+    return f
+  }
+  Intonation.prototype.range = function(min, max){
+    var a = []
+    for (var i = min; i < max; i++) {
+      a.push( this.index(i) )
+    }
+    return a
+  }
+  Intonation.prototype.set_root = function(f){
+    this.opt.root = f
+    this.generate()
+  }
+  Intonation.prototype.quantize_frequency = function(f){
+    if (f == 0) return 0
+    var scale_f = f
+    var pow = 0
+    var interval = this.interval
+    var scale = this.scale
+    while (scale_f < root) {
+      scale_f *= interval
+      pow -= 1
+    }
+    while (scale_f > root * interval) {
+      scale_f /= interval
+      pow += 1
+    }
+    for (var i = 0; i < scale.length; i++) {
+      if (scale_f > scale[i]) continue
+      scale_f = scale[i]
+      break
+    }
+    scale_f *= Math.pow(2, pow)
+    return scale_f
+  }
+  Intonation.prototype.quantize_index = function(i){
+    return mod(index-1, this.scale.length)|0
+  }
+  var parseInterval = Intonation.prototype.parse_interval = function (s) {
+    if (typeof s == "number") return s
+    if (! s.indexOf("/") == -1) return parseInt(s)
+    var pp = s.split("/")
+    var num = parseInt(pp[0])
+    var den = parseInt(pp[1])
+    if (isNaN(num)) return 1
+    if (isNaN(den) || den == 0) return num
+    if (num == den) return 1
+    return num / den
+  }
+  var parseIntervalString = Intonation.prototype.parse_interval_string = function(s){
+    if (s.indexOf("/") !== -1) return parseInterval(s) * this.opt.root // intervals
+    if (s.indexOf("f") !== -1) return parseFloat(s)    // pure frequencies
+    return parseFloat(s)
+  }
+  function norm(n,a,b){ return (n-a) / (b-a) }
+  function mod(n,m){ return n-(m * Math.floor(n/m)) }
+
+  return Intonation
+})()
diff --git a/client/lib/kalimba.js b/client/lib/kalimba.js
new file mode 100644
index 0000000..60a50a9
--- /dev/null
+++ b/client/lib/kalimba.js
@@ -0,0 +1,47 @@
+import Tone from 'tone'
+import { choice } from './util'
+
+const player_count = 2
+
+const compressor = new Tone.Compressor(-30, 3).toMaster()
+
+const samples = [
+  { root: 226, fn: 'samples/380737__cabled-mess__sansula-01-a-raw.mp3', },
+  { root: 267, fn: 'samples/380736__cabled-mess__sansula-02-c-raw.mp3', },
+  { root: 340, fn: 'samples/380735__cabled-mess__sansula-03-e-raw.mp3', },
+  { root: 452, fn: 'samples/380733__cabled-mess__sansula-06-a-02-raw.mp3', },
+//  { root: 507, fn: 'samples/380734__cabled-mess__sansula-07-b-h-raw.mp3', },
+//  { root: 535, fn: 'samples/380731__cabled-mess__sansula-08-c-raw.mp3', },
+//  { root: 671, fn: 'samples/380732__cabled-mess__sansula-09-e-raw.mp3', },
+]
+
+samples.forEach((sample) => {
+  sample.players = []
+  sample.index = -1
+  for (let i = 0; i < player_count; i++) {
+    let fn = sample.fn
+    if (window.location.href.match(/asdf.us/)) {
+      fn = '//asdf.us/kalimba/' + fn
+    }
+    let player = new Tone.Player({
+      url: fn,
+      retrigger: true,
+      playbackRate: 1,
+    })
+    player.connect(compressor)
+    sample.players.push(player)
+  }
+})
+
+function play (freq) {
+  const best = { sample: choice(samples) }
+  best.sample.index = (best.sample.index + 1) % player_count
+
+  const player = best.sample.players[ best.sample.index ]
+  player.playbackRate = freq / best.sample.root
+  console.log(player)
+  player.start()
+}
+
+export default { play }
+
diff --git a/client/lib/keys.js b/client/lib/keys.js
new file mode 100644
index 0000000..c9e51ac
--- /dev/null
+++ b/client/lib/keys.js
@@ -0,0 +1,39 @@
+const keys = {}
+const key_numbers = {}
+const letters = "zxcvbnmasdfghjklqwertyuiop"
+const numbers = "1234567890"
+
+let callback = function(){}
+
+letters.toUpperCase().split("").map(function(k,i){
+  keys[k.charCodeAt(0)] = i
+})
+
+numbers.split("").map(function(k,i){
+  keys[k.charCodeAt(0)] = i+letters.length
+  key_numbers[k.charCodeAt(0)] = true
+})
+
+window.addEventListener("keydown", keydown, true)
+function keydown (e) {
+  if (e.altKey || e.ctrlKey || e.metaKey) {
+    e.stopPropagation()
+    return
+  }
+  if (document.activeElement instanceof HTMLInputElement &&
+      (e.keyCode in key_numbers)) {
+    e.stopPropagation()
+    return
+  }
+  if (! (e.keyCode in keys)) return
+  var index = keys[e.keyCode]
+  if (e.shiftKey) index += letters.length
+  index -= 7
+  callback(index)
+}
+
+function listen (fn) {
+  callback = fn
+}
+
+export default { listen }
\ No newline at end of file
diff --git a/client/lib/scales.js b/client/lib/scales.js
new file mode 100644
index 0000000..d85fe08
--- /dev/null
+++ b/client/lib/scales.js
@@ -0,0 +1,299 @@
+import Intonation from './intonation'
+
+const meantone = `! meanquar.scl
+!
+1/4-comma meantone scale. Pietro Aaron's temperament (1523)
+ 12
+!
+ 76.04900
+ 193.15686
+ 310.26471
+ 5/4
+ 503.42157
+ 579.47057
+ 696.57843
+ 25/16
+ 889.73529
+ 1006.84314
+ 1082.89214
+ 2/1
+`
+
+const shares = `! shares.scl
+!
+A scale based on shares of wealth
+!
+1.
+5.
+15.
+32.
+52.
+78.
+116.
+182.
+521.
+1000.
+`
+
+const shares_sum = `! shares_sum.scl
+!
+A scale based on summing shares of wealth
+!
+1
+6.0
+21.0
+53.0
+105.0
+183.0
+299.0
+481.0
+1002.0
+2/1
+`
+
+const mavila = `! mavila12.scl
+!
+A 12-note mavila scale (for warping meantone-based music), 5-limit TOP
+ 12
+!
+-30.99719
+ 163.50770
+ 358.01258
+ 327.01540
+ 521.52028
+ 490.52310
+ 685.02798
+ 654.03080
+ 848.53568
+ 1043.04057
+ 1012.04338
+ 1206.54826
+`
+
+const carlos_alpha = `! carlos_alpha.scl
+!
+Wendy Carlos' Alpha scale with perfect fifth divided in nine
+ 18
+!
+ 78.00000
+ 156.00000
+ 234.00000
+ 312.00000
+ 390.00000
+ 468.00000
+ 546.00000
+ 624.00000
+ 702.00000
+ 780.00000
+ 858.00000
+ 936.00000
+ 1014.00000
+ 1092.00000
+ 1170.00000
+ 1248.00000
+ 1326.00000
+ 1404.00000
+`
+
+const lamonte = `! young-lm_piano.scl
+!
+LaMonte Young's Well-Tempered Piano
+12
+!
+567/512
+9/8
+147/128
+21/16
+1323/1024
+189/128
+3/2
+49/32
+7/4
+441/256
+63/32
+2/1
+`
+
+const colundi = `! colundi.scl
+!
+Colundi scale
+10
+!
+9/8
+171/140
+137/112
+43/35
+3/2
+421/280
+213/140
+263/150
+66/35
+2/1
+`
+
+const liu_major = `! liu_major.scl
+!
+Linus Liu's Major Scale, see his 1978 book, "Intonation Theory"                 
+ 7
+!
+ 10/9
+ 100/81
+ 4/3
+ 3/2
+ 5/3
+ 50/27
+ 2/1
+`
+const liu_pentatonic = `! liu_pent.scl
+!
+Linus Liu's "pentatonic scale"                                                  
+ 7
+!
+ 9/8
+ 81/64
+ 27/20
+ 3/2
+ 27/16
+ 243/128
+ 81/40
+`
+
+const liu_minor = `! LIU_MINor.scl
+!
+Linus Liu's Harmonic Minor                                                      
+ 7
+!
+ 10/9
+ 6/5
+ 4/3
+ 40/27
+ 8/5
+ 50/27
+ 2/1
+`
+
+const liu_melodic_minor = `! liu_mel.scl
+!
+Linus Liu's Melodic Minor, use 5 and 7 descending and 6 and 8 ascending         
+ 9
+!
+ 10/9
+ 6/5
+ 4/3
+ 3/2
+ 81/50
+ 5/3
+ 9/5
+ 50/27
+ 2/1
+`
+
+const scales = [
+  {
+    intervals: '1/1 9/8 5/4 4/3 3/2 5/3 15/8 2/1',
+    name: "harmonic scale",
+  },
+  {
+    root: 450,
+    intervals: '1/1 9/8 5/4 4/3 3/2 5/3 15/8 2/1',
+    name: "harmonic scale @ 450",
+  },
+  {
+    tet: 5,
+  },
+  {
+    tet: 12,
+  },
+  {
+    tet: 17,
+  },
+  {
+    intervals: '1/1 81/80 33/32 21/20 16/15 12/11 11/10 10/9 9/8 8/7 7/6 32/27 6/5 11/9 5/4 14/11 9/7 21/16 4/3 27/20 11/8 7/5 10/7 16/11 40/27 3/2 32/21 14/9 11/7 8/5 18/11 5/3 27/16 12/7 7/4 16/9 9/5 20/11 11/6 15/8 40/21 64/33 160/81 2/1',
+    name: "harry partch scale",
+  },
+  {
+    scl: lamonte,
+  },
+  {
+    scl: meantone,
+  },
+  {
+    scl: mavila,
+  },
+  {
+    scl: carlos_alpha,
+  },
+  {
+    scl: colundi,
+  },
+  {
+    scl: shares,
+  },
+  {
+    scl: shares_sum,
+  },
+  {
+    scl: liu_major,
+  },
+  {
+    scl: liu_minor,
+  },
+  {
+    scl: liu_melodic_minor,
+  },
+  {
+    scl: liu_pentatonic,
+  }
+].map( (opt) => new Intonation(opt) )
+
+let scale = scales[0]
+let handleChange = function(){}
+
+function build () {
+  scales.forEach( (scale, i) => {
+    scale.heading = document.createElement('div')
+    scale.heading.innerHTML = scale.name
+    scale.heading.classList.add('heading')
+    scale.heading.addEventListener('click', function(){
+      pick(i)
+    })
+    scale_list.appendChild(scale.heading)
+  })
+  pick(0)
+}
+function build_options(el) {
+  scales.forEach( (scale, i) => {
+    const option = document.createElement('option')
+    option.innerHTML = scale.name
+    option.value = i
+    el.appendChild(option)
+  })
+  el.addEventListener('input', function(e){
+    pick(e.target.value)
+  })
+  pick(0)
+}
+
+function pick (i) {
+  if (scale) {
+    scale.heading && scale.heading.classList.remove('selected')
+  }
+  scale = scales[i]
+  scale.heading && scale.heading.classList.add('selected')
+	handleChange(scale)
+}
+
+function current () {
+  return scale
+}
+
+function onChange (fn) {
+	handleChange = fn
+}
+
+function names () {
+	return scales.map( scale => scale.name )
+}
+
+
+export default { scales, current, build, build_options, pick, names, onChange }
diff --git a/client/lib/startAudioContext.js b/client/lib/startAudioContext.js
new file mode 100644
index 0000000..f3a9793
--- /dev/null
+++ b/client/lib/startAudioContext.js
@@ -0,0 +1,181 @@
+/**
+ *  StartAudioContext.js
+ *  @author Yotam Mann
+ *  @license http://opensource.org/licenses/MIT MIT License
+ *  @copyright 2016 Yotam Mann
+ */
+(function (root, factory) {
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+   } else if (typeof module === 'object' && module.exports) {
+        module.exports = factory();
+  } else {
+    root.StartAudioContext = factory();
+  }
+}(this, function () {
+
+  /**
+   * The StartAudioContext object
+   */
+  var StartAudioContext = {
+    /**
+     * The audio context passed in by the user
+     * @type {AudioContext}
+     */
+    context : null,
+    /**
+     * The TapListeners bound to the elements
+     * @type {Array}
+     * @private
+     */
+    _tapListeners : [],
+    /**
+     * Callbacks to invoke when the audio context is started
+     * @type {Array}
+     * @private
+     */
+    _onStarted : [],
+  };
+
+
+  /**
+   * Set the context
+   * @param {AudioContext} ctx
+   * @returns {StartAudioContext}
+   */
+  StartAudioContext.setContext = function(ctx){
+    StartAudioContext.context = ctx;
+    return StartAudioContext;
+  };
+
+  /**
+   * Add a tap listener to the audio context
+   * @param  {Array|Element|String|jQuery} element
+   * @returns {StartAudioContext}
+   */
+  StartAudioContext.on = function(element){
+    if (Array.isArray(element) || (NodeList && element instanceof NodeList)){
+      for (var i = 0; i < element.length; i++){
+        StartAudioContext.on(element[i]);
+      }
+    } else if (typeof element === "string"){
+      StartAudioContext.on(document.querySelectorAll(element));
+    } else if (element.jquery && typeof element.toArray === "function"){
+      StartAudioContext.on(element.toArray());
+    } else if (Element && element instanceof Element){
+      //if it's an element, create a TapListener
+      var tap = new TapListener(element, onTap);
+      StartAudioContext._tapListeners.push(tap);
+    } 
+    return StartAudioContext;
+  };
+
+  /**
+   * Bind a callback to when the audio context is started. 
+   * @param {Function} cb
+   * @return {StartAudioContext}
+   */
+  StartAudioContext.onStarted = function(cb){
+    //if it's already started, invoke the callback
+    if (StartAudioContext.isStarted()){
+      cb();
+    } else {
+      StartAudioContext._onStarted.push(cb);
+    }
+    return StartAudioContext;
+  };
+
+  /**
+   * returns true if the context is started
+   * @return {Boolean}
+   */
+  StartAudioContext.isStarted = function(){
+    return (StartAudioContext.context !== null && StartAudioContext.context.state === "running");
+  };
+
+  /**
+   * @class  Listens for non-dragging tap ends on the given element
+   * @param {Element} element
+   * @internal
+   */
+  var TapListener = function(element){
+
+    this._dragged = false;
+
+    this._element = element;
+
+    this._bindedMove = this._moved.bind(this);
+    this._bindedEnd = this._ended.bind(this);
+
+    element.addEventListener("touchmove", this._bindedMove);
+    element.addEventListener("touchend", this._bindedEnd);
+    element.addEventListener("mouseup", this._bindedEnd);
+  };
+
+  /**
+   * drag move event
+   */
+  TapListener.prototype._moved = function(e){
+    this._dragged = true;
+  };
+
+  /**
+   * tap ended listener
+   */
+  TapListener.prototype._ended = function(e){
+    if (!this._dragged){
+      onTap();
+    }
+    this._dragged = false;
+  };
+
+  /**
+   * remove all the bound events
+   */
+  TapListener.prototype.dispose = function(){
+    this._element.removeEventListener("touchmove", this._bindedMove);
+    this._element.removeEventListener("touchend", this._bindedEnd);
+    this._element.removeEventListener("mouseup", this._bindedEnd);
+    this._bindedMove = null;
+    this._bindedEnd = null;
+    this._element = null;
+  };
+
+  /**
+   * Invoked the first time of the elements is tapped.
+   * Creates a silent oscillator when a non-dragging touchend 
+   * event has been triggered.
+   */
+  function onTap(){
+    //start the audio context with a silent oscillator
+    if (StartAudioContext.context && !StartAudioContext.isStarted()){
+      var osc = StartAudioContext.context.createOscillator();
+      var silent = StartAudioContext.context.createGain();
+      silent.gain.value = 0;
+      osc.connect(silent);
+      silent.connect(StartAudioContext.context.destination);
+      var now = StartAudioContext.context.currentTime;
+      osc.start(now);
+      osc.stop(now+0.5);
+    }
+
+    //dispose all the tap listeners
+    if (StartAudioContext._tapListeners){
+      for (var i = 0; i < StartAudioContext._tapListeners.length; i++){
+        StartAudioContext._tapListeners[i].dispose();
+      }
+      StartAudioContext._tapListeners = null;
+    }
+    //the onstarted callbacks
+    if (StartAudioContext._onStarted){
+      for (var j = 0; j < StartAudioContext._onStarted.length; j++){
+        StartAudioContext._onStarted[j]();
+      }
+      StartAudioContext._onStarted = null;
+    }
+  }
+
+  return StartAudioContext;
+}));
+
+
diff --git a/client/lib/util.js b/client/lib/util.js
new file mode 100644
index 0000000..e47b343
--- /dev/null
+++ b/client/lib/util.js
@@ -0,0 +1,96 @@
+import Tone from 'tone'
+import StartAudioContext from './startAudioContext'
+
+const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+const isIpad = (navigator.userAgent.match(/iPad/i))
+const isAndroid = (navigator.userAgent.match(/Android/i))
+const isMobile = isIphone || isIpad || isAndroid
+const isDesktop = ! isMobile
+
+document.body.classList.add(isMobile ? 'mobile' : 'desktop')
+
+const browser = { isIphone, isIpad, isMobile, isDesktop }
+
+function choice (a){ return a[ Math.floor(Math.random() * a.length) ] }
+function mod(n,m){ return n-(m * Math.floor(n/m)) }
+
+function requestAudioContext (fn) {
+	if (isMobile) {
+    const container = document.createElement('div')
+    const button = document.createElement('div')
+    button.innerHTML = 'Tap to start - please unmute your phone'
+    Object.assign(container.style, {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: '10000',
+      top: '0px',
+      left: '0px',
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    })
+		Object.assign(button.style, {
+		  position: 'absolute',
+		  left: '50%',
+		  top: '50%',
+			padding: '20px',
+		  backgroundColor: '#7F33ED',
+		  color: 'white',
+		  fontFamily: 'monospace',
+		  borderRadius: '3px',
+		  transform: 'translate3D(-50%,-50%,0)',
+		  textAlign: 'center',
+			lineHeight: '1.5',
+    })
+    container.appendChild(button)
+    document.body.appendChild(container)
+    StartAudioContext.setContext(Tone.context)
+    StartAudioContext.on(button)
+    StartAudioContext.onStarted(_ => {
+      container.remove()
+			fn()
+  	})
+	} else {
+		fn()
+	}
+}
+
+function dataURItoBlob(dataURI) {
+  // convert base64 to raw binary data held in a string
+  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+  var byteString = atob(dataURI.split(',')[1]);
+
+  // separate out the mime component
+  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+
+  // write the bytes of the string to an ArrayBuffer
+  var ab = new ArrayBuffer(byteString.length);
+
+  // create a view into the buffer
+  var ia = new Uint8Array(ab);
+
+  // set the bytes of the buffer to the correct values
+  for (var i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+  }
+
+  // write the ArrayBuffer to a blob, and you're done
+  var blob = new Blob([ab], {type: mimeString});
+  return blob;
+
+}
+function ftom(f) {
+  // return (Math.log(f) - Math.log(261.626)) / Math.log(2) + 4.0
+  return 69 + 12 * Math.log2(f / 440)
+}
+function mtof(m) {
+  return 440 * Math.pow(2, (m - 69) / 12)
+}
+function tap (fn) {
+  return (e) => {
+    if (browser.isMobile) fn()
+    else if (e.press) fn()
+  }
+}
+
+export { choice, mod, browser, requestAudioContext, ftom, mtof, tap, dataURItoBlob }
+