timbre.js pendulums

_.md

[ Launch: timbre.js pendulums ] 5893529 by gelicia
[ Launch: timbre.js pendulums ] 5893516 by enjalot
[ 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},"synth.js":{"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.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 = 72;
var octave = 12;
var noteOffset = 3;
var colors = [{top: '#124850', left: '#2eb4c7', right: '#1a6671'},
             {top: '#504112', left: '#C7842E', right: '#71551A'}];
var angle = 34;
var rightAngle = 90;

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

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

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

var env   = T("adsr", {d:300, s:0, r:600});
  var synth = T("SynthDef", {mul:0.45, poly:8});
  synth.def = function(opts) {
    var op1 = T("sin", {freq:opts.freq*6, fb:0.25, mul:0.4});
    var op2 = T("sin", {freq:opts.freq, phase:op1, mul:opts.velocity/128});
    return env.clone().append(op2).on("ended", opts.doneAction).bang();
  };
  var master = synth;
  var mod    = T("sin", {freq:2, add:3200, mul:800, kr:1});
  master = T("eq", {params:{lf:[800, 0.5, -2], mf:[6400, 0.5, 4]}}, master);
  master = T("phaser", {freq:mod, Q:2, steps:4}, master);
  master = T("delay", {time:"BPM60 L16", fb:0.65, mix:0.25}, master);
function playNote(note) {
  
  synth.noteOn(note, 10)
  master.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")
  .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)
  })*/
 console.log(notes);
  for (var i = 0; i < notes.length; i++) {
    createBox(g, {x:117, y:i * 32}, {l:notes[i].note, w:10, h:10}, colors[0], i)
  }

} 

/*tributary.run = function(g,t) {
  var theta = Math.PI / 9;
  var freq = 2;
  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) {
      playNote(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) {
      playNote(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;
    }
    
  })
} */

function createBox(svg, startPoint, rectSize, colors, id){
  
  var top = [{x:startPoint.x, "y":startPoint.y},//0 top
           //1 right
        {"x": startPoint.x + (rectSize.l * Math.cos(angle * (Math.PI/180))),
         "y": startPoint.y + (rectSize.l * Math.sin(angle * (Math.PI/180)))}];
  //2 bottom
  top.push({x: top[1].x + (rectSize.w * Math.cos((180-angle) * (Math.PI/180))),
             y : top[1].y + (rectSize.w * Math.sin((180-angle) * (Math.PI/180)))});  
  //3 left
  top.push({x: top[2].x - (rectSize.l * Math.cos(angle * (Math.PI/180))),
             y : top[2].y - (rectSize.l * Math.sin(angle * (Math.PI/180)))}); 
  
  var left =[{x: top[3].x, y: top[3].y},
             {x: top[2].x, y: top[2].y}];
  
  left.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  left.push({x: top[3].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[3].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  var right =[{x: top[1].x, y: top[1].y},
             {x: top[2].x, y: top[2].y}];
  
  //this doesn't need to be dynamic, it is because I like to play :3
  right.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  right.push({x: top[1].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[1].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  
  
  svg.selectAll("polygon #top" + id)
    .data([top])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.top,
      //'fill-opacity':'0.1',
      id: 'top' + id
    });
  
  svg.selectAll("polygon #left" + id)
    .data([left])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.left,
      id: 'left' + id
    });
  
  svg.selectAll("polygon #right" + id)
    .data([right])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.right,
      id: 'right' + id
    });
}

synth.js

var mml0, mml1;
/*
var master = synth;
var mod    = T("sin", {freq:2, add:3200, mul:800, kr:1});
master = T("eq", {params:{lf:[800, 0.5, -2], mf:[6400, 0.5, 4]}}, master);
master = T("phaser", {freq:mod, Q:2, steps:4}, master);
master = T("delay", {time:"BPM60 L16", fb:0.65, mix:0.25}, master);

mml0 = "t60 l4 v6 q2 o3";
mml0 += "[ [g < b0<d0f+2>> d <a0<c+0f+2>>]8 ";
mml0 += "f+ <a0<c+0f+2>>> b<<b0<d0f+2>> e<g0b2> e<b0<d0g2>> d<f0a0<d2>>";
mml0 += ">a<<a0<c0e2>> d<g0b0<e2>> d<d0g0b0<e2>> d<c0e0a0<d2>> d<c0f+0a0<d2>>";
mml0 += "d<a0<c0f2>> d<a0<c0e2>> d<d0g0b0<e2>> d<c0e0a0<d2>> d<c0f+0a0<d2>>";
mml0 += "| e<b0<e0g2>> f+<a0<c+0f+2>>> b<<b0<d0f+2>> e<<c+0e0a2>> e<a0<c+0f+0a2>>";
mml0 += "eb0<a0<d>e0b0<d0g>> a0<g2.> d0a0<d2.> ]";
mml0 += "e<b0<e0g2>> e<a0<d0f0a2>> e<a0<c0f2>> e<<c0e0a2>> e<a0<c0f0a2>>";
mml0 += "eb0<a0<d>e0b0<d0g>> a0<g2.> d0a0<d2.>";

mml1 = "t60 v14 l4 o6";
mml1 += "[ r2. r2. r2. r2.";
mml1 += "rf+a gf+c+ >b<c+d >a2. f+2.& f+2.& f+2.& f+2.< rf+a gf+c+ >b<c+d >a2.<";
mml1 += "c+2. f+2. >e2.&e2.&e2.";
mml1 += "ab<c ed>b< dc>b< d2.& d2d";
mml1 += "efg acd ed>b <d2.& d2d";
mml1 += "| g2. f+2.> bab< c+de c+de>";
mml1 += "f+2. c0e0a0<c2.> d0f+0a0<d2. ]";
mml1 += "g2. f2.> b<cf edc edc>";
mml1 += "f2. c0e0a0<c2.> d0f0a0<d2.";

/*
T("mml", {mml:[mml0, mml1]}, synth).on("ended", function() {
  this.stop();
}).set({buddies:master}).start();
*/