timbre.js pendulums

_.md

[ Launch: timbre.js pendulums ] 5893707 by jsundram
[ Launch: timbre.js play midi dots ] 5893390 by enjalot
[ Launch: timbre.js play midi ] 5893333 by enjalot
[ Launch: timbre.js reich ] 5893325 by enjalot
[ Launch: timbre.js reich ] 5893317 by enjalot
[ Launch: timbre.js ] 5893276 by enjalot
[ Launch: timbre.js ] 5893159 by enjalot

config.json

{"description":"timbre.js pendulums","endpoint":"","display":"svg","public":true,"require":[{"name":"supercollider","url":"http://mohayonao.github.io/subcollider.js/builds/subcollider-min.js"},{"name":"timbre-mod","url":"https://gist.github.com/enjalot/5893275/raw/3a9f3430225510d2258381c9e6ab1506ff8bb86f/timbre-mod.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//http://mohayonao.github.io/timbre.js/
//hacky modifications to make it work in tributary
TReset();
TFactory();

var svg = d3.select("svg");
var color = d3.scale.category20c();

var midx = tributary.sw/2;
var xwidth = 200;
var midy = tributary.sh/2;
var xr = 27;
var yr = 45;
var r = 24;
var startNote = 72;
var octave = 12;
var noteOffset = 3;

var notes = d3.range(12).map(function(d,i) {
  return {
    note: startNote + i + noteOffset
  }
})

var msec  = timbre.timevalue("bpm100 l8");

function playMidi(note) {
  var synth = T("OscGen", {mul:0.4, env:T("perc", {r:msec, ar:true})});
  synth.noteOn(note, 50);
  synth.play()
}
//playMidi(60);


tributary.init = function(g) {
  g.append("line").attr({
    x1: midx - xwidth - r,
    y1: 0,
    x2: midx - xwidth - r,
    y2: tributary.sh
  }).style({
    stroke: "#000"
  })
  g.append("line").attr({
    x1: midx + xwidth + r,
    y1: 0,
    x2: midx + xwidth + r,
    y2: tributary.sh
  }).style({
    stroke: "#000"
  })
  
  g.selectAll("circle")
  .data(notes)
  .enter()
  .append("circle")
  .attr({
    cx: function(d,i,j) { return midx },
    cy: function(d,i,j) { return 49 + i * yr },
    r: r,
    fill: function(d,i,j) { return color(i) }
  }).on("mouseover", function(d,i) {
    playMidi(d.note)
  })
}

tributary.run = function(g,t) {
  var theta = Math.PI / 9;
  var freq = 3;
  var lr = -0.999
  var rr = 0.999
  function wave(i) {
    return Math.sin(freq * t + i * theta);
  }
  g.selectAll("circle")
  .attr({
    cx: function(d,i) {
      d.wave = wave(i);
      var x = midx + xwidth * wave(i);
      return x
    }
  })
  .each(function(d,i) {
    if(wave(i) < lr && !d.lastL) {
      playMidi(d.note - octave)
      d3.select(this).attr("fill", "#fff")
      d.lastL = true
    }
    if(wave(i) > lr && !d.lastR) {
      d.lastL = false;
      d3.select(this).attr("fill", color(i))
    }
    if(wave(i) > rr && !d.lastR) {
      playMidi(d.note + octave)
      d3.select(this).attr("fill", "#fff")
      d.lastR = true
    }
    if(wave(i) < rr && !d.lastL) {
      d3.select(this).attr("fill", color(i))
      d.lastR = false;
    }
    
  })
}