Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Sep 24, 2013
Embed
What would you like to do?
i wish this was a mustache emporium
{"description":"i wish this was a mustache emporium","endpoint":"","display":"svg","public":true,"require":[],"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/0He58Ph.gif","inline-console":false}
//for Jen, I'm sorry I don't know how to draw mustaches with math.
//http://beesandbombs.tumblr.com/post/62169316636/tropical-squares
d3.select("body").style("background-color", d3.rgb(25, 25, 25));
tributary.duration = 10000;
var numHeight = 11;
var numWidth = 12;
var rectSize = [44, 60];
var margin = {t: 0, l: 0};
//piScale is used with sin to not do a linear animation
var piScale = d3.scale.linear()
.domain([0, 1])
.range([0, Math.PI]);
var sizeScale = d3.scale.linear()
.domain([0, 1])
.range([rectSize[1],rectSize[0]]);
var rotScale = d3.scale.linear()
.domain([0, 1])
.range([0, 360]);
//want to go from color 1 to color 2 to color 1
var colorScale = d3.scale.linear()
.interpolate(d3.interpolateHsl)
.domain([0, 0.5])
.range(["#F70FBF", "#6A3BE4"]);
var svg = d3.selectAll('svg');
svg.selectAll('rect').data(d3.range(numHeight*numWidth)).enter().append('rect')
.attr({
x: function(d,i){return ((i % numWidth) * rectSize[1]) + margin.l},
y: function(d,i){return (Math.floor(i/numWidth) * rectSize[1]) + margin.t;},
height: rectSize[0],
width: rectSize[0],
fill: colorScale(0)
}).classed('one', true);
tributary.run = function(unused, t){
var sinVal = Math.abs(Math.sin(4 * piScale(t)));
svg.selectAll('rect').attr({
height: sizeScale(sinVal),
width: sizeScale(sinVal),
fill: colorScale(Math.abs(0.5-t)),
"transform" : function(d, i){
var rotDir = ((numWidth%2===0 && Math.floor(i/numWidth)%2===0)?(i%2===0?1:-1):(i%2===0?-1:1));
return "rotate(" + (rotDir * rotScale(t)) + "," + (this.x.baseVal.value + (this.height.baseVal.value/2)) + "," + (this.y.baseVal.value + (this.height.baseVal.value/2)) + ")" ;}
});
if (t > 1){
this.t=0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.