unit waves canvas

_.md

[ Launch: unit waves canvas ] 6724171 by enjalot
[ Launch: unit circle ] 6723241 by enjalot
[ Launch: unit circle ] 6723094 by enjalot
[ Launch: unit circle ] 6722845 by enjalot
[ Launch: unit circle ] 5211082 by ptvans
[ Launch: unit circle ] 5210686 by enjalot

config.json

{"description":"unit waves canvas","endpoint":"","display":"canvas","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":true,"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/4dLDkoK.gif","controls":{"Amplitude Top":30,"Frequency Top":1,"function":"sin","offset":30}}

inlet.js

//Trigonmetry
//sin = a * Math.sin( t * freq )
//cos = a * Math.cos( t * freq )

tributary.duration = 5000;


var cx = tributary.sw/2;
var cy = tributary.sh + 200;
var linewidth = tributary.sh + 300

var samples = 150;

var xoffset = 0;
var yoffset = 0;

var lineAttr = {
  fill: "none",
  stroke: "#FFFFFF",
  "stroke-width": 5,
  "stroke-opacity": 0.496,
  "stroke-linecap":"round"
}

var amplitude = tributary.control({name: "Amplitude Top", min: 10, max: 200, step: 2 });
var frequency = Math.round(tributary.control({name: "Frequency Top", min: 1, max: 8, step: 1 }));
var fnTop = tributary.control({name: "function", options: ["sin", "cos", "tan"]});
var phase = 1;
var offset = tributary.control({name: "offset", min: 20, max: 60 })
fns = {
  "sin": Math.sin,
  "cos": Math.cos,
  "tan": Math.tan
}

var trigFns = ["sin", "cos", "tan"]
var waves = d3.range(20).map(function(i) {
  return {
    a: amplitude + (10 * i) / 10,
    fn: fns[fnTop],
    freq: frequency,
    phase: Math.PI * 1,
    offset: -300 + i*offset
  }
})
tributary.duration = 5000;

var linescale = d3.scale.linear()
.domain([0, samples])
.range([0, linewidth]);

var waveline = d3.svg.line()
.x(function(d) {
  return d.x;
})
.y(function(d) {
  return d.y
})

/*
var lines = svg.append("g")
.selectAll("path.trippy")
.data(waves)
lines.enter().append("path")
.classed("trippy", true)
*/

var theta = tributary.anim(0.0001, 2*Math.PI)

var ctx = tributary.ctx;
ctx.globalCompositeOperation = "xor";
ctx.fillRect(0, 0, tributary.sw, tributary.sh);

ctx.lineWidth = 4;
var data;
for(var i = 0; i < waves.length; i++) {
  data = xSample(waves[i], theta + i * Math.PI *0.1);
  ctx.beginPath();
  ctx.moveTo(data[0].x, data[0].y);
  for(var j = 0; j < data.length; j++) {
    ctx.lineTo(data[j].x, data[j].y);
  }
  ctx.stroke();
}


/*
lines.attr("d", function(d, i) {
  return waveline(xSample(d, theta + i * Math.PI *0.1))
})
.style(lineAttr)
*/


function xSample(fn, t) {
  return sample(trig(fn), {start: t+2*Math.PI, end: t, n: samples})
    .map(function(d,i) {
      return {
        x: d + cx,
        y: -linescale(i) + cy + yoffset - fn.a
      }
    })
}
function ySample(fn, t) {
  return sample(trig(fn), {start: t+2*Math.PI, end: t, n: samples})
    .map(function(d,i) {
      return {
        x: linescale(i),// + cx + xoffset + fn.a,
        y: d + cy/2
      }
    })
}



//opts = {
// start: x0, start of x domain
// end: x1, start of y domain
// n: number of samples
//}
function sample(y, opts) {
  if(!opts) opts = {};
  var start = opts.start || 0;
  var end = opts.end || 1;
  var n = opts.n || 50;
  var step = (end - start) / n;
  var data = d3.range(n);
  return data.map(function(i) {
    return y(start + i * step)
  })
}

//build a trig function from an object
function trig(eqn) {  
  var fn = function(t) {
    return eqn.offset + eqn.a * eqn.fn(t * eqn.freq + eqn.phase)
  }
  return fn;
}

style.css

path.line {
  fill: none;
}