timbre.js

_.md

[ Launch: timbre.js ] 5893610 by enjalot
[ Launch: timbre.js ] 5893594 by ejfox
[ Launch: timbre.js ] 5893584 by enjalot
[ Launch: timbre.js ] 5893159 by enjalot

config.json

{"description":"timbre.js","endpoint":"","display":"svg","public":true,"require":[{"name":"timbrejs","url":"http://mohayonao.github.io/timbre.js/timbre.js"},{"name":"supercollider","url":"http://mohayonao.github.io/subcollider.js/builds/subcollider-min.js"},{"name":"supercollider","url":"http://mohayonao.github.io/subcollider.js/builds/subcollider-min.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,"thumbnail":"http://i.imgur.com/rTHWnMq.png"}

inlet.js

var svg = d3.select("svg");
T.reset();
//http://mohayonao.github.io/timbre.js/

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

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

midis = [64, 63, 64, 63, 64, 59, 62, 60, 57].reverse()
var notes1 = midis.map(function(d,i) {
  return {
    note: d
  }
})
var notes2 = midis.map(function(d,i) {
  return {
    note: d
  }
})

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

var env = T("perc", {a:57, r:500});
var synth = T("PluckGen", {env:env, mul:0.25}).play();

function playNote(note) {
  synth.noteOn(note, 100)
  synth.play()
}
//playNote(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.c1")
  .data(notes1)
  .enter()
  .append("circle").classed("c1", true)
  .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) },
    'class': "c1"
  }).on("mouseover", function(d,i) {
    playNote(d.note)
  })
  
    g.selectAll("circle.c2")
  .data(notes2)
  .enter()
  .append("circle").classed("c2", true)
  .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) },
    'class': "c1"
  }).on("mouseover", function(d,i) {
    playNote(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(d.wave < lr && !d.lastL) {
      playNote(d.note - octave)
      d3.select(this).attr("fill", "#fff")
      d.lastL = true
    }
    if(d.wave > lr && !d.lastR) {
      d.lastL = false;
      d3.select(this).attr("fill", color(i))
    }
    if(d.wave > rr && !d.lastR) {
      playNote(d.note + octave)
      d3.select(this).attr("fill", "#fff")
      d.lastR = true
    }
    if(d.wave < rr && !d.lastL) {
      d3.select(this).attr("fill", color(i))
      d.lastR = false;
    }
    
  })
}