Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created September 27, 2013 04:53
Show Gist options
  • Save enjalot/6724331 to your computer and use it in GitHub Desktop.
Save enjalot/6724331 to your computer and use it in GitHub Desktop.
unit waves canvas
{"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/8hw8PPk.gif","controls":{"Amplitude Top":64,"Frequency Top":4,"function":"cos","offset":32}}
//Trigonmetry
//sin = a * Math.sin( t * freq )
//cos = a * Math.cos( t * freq )
var ctx = tributary.ctx;
ctx.globalCompositeOperation = "xor";
ctx.fillStyle = "#49668A"
ctx.fillRect(0, 0, tributary.sw, tributary.sh);
ctx.lineWidth = 9;
ctx.strokeStyle = "#FF3A3A";
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 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 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;
}
path.line {
fill: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment