Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created September 26, 2013 00:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enjalot/6708323 to your computer and use it in GitHub Desktop.
Save enjalot/6708323 to your computer and use it in GitHub Desktop.
simplified aspiring mustache emporium
{"description":"simplified aspiring 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":true,"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/RhxHgEd.gif","inline-console":false}
//with @slembcke, because my math needs simplification
//(I would have never gotten the matrix transformation in a million years)
//http://beesandbombs.tumblr.com/post/62169316636/tropical-squares
d3.select("body").style("background-color", d3.rgb(25, 25, 25));
tributary.duration = 5000;
var rectSize = 60;
var numHeight = Math.ceil(tributary.sh/rectSize);
var numWidth = Math.ceil(tributary.sw/rectSize)+1;
var margin = {t: 0, l: 0};
//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: -rectSize/2,
y: -rectSize/2,
height: rectSize,
width: rectSize,
fill: colorScale(0)
});
tributary.run = function(unused, t){
svg.selectAll('rect').attr({
fill: colorScale(Math.abs(0.5-(t%1))),
"transform" : function(d, i){
var offset = t%1;
var xBaseCoord = i%numWidth;
var yBaseCoord = Math.floor(i/numWidth);
if(((xBaseCoord + yBaseCoord)%2)===0){
offset = 1-offset;
}
return "matrix(" +[1-offset, -offset, offset, 1-offset, ((xBaseCoord) *rectSize) + margin.l, ((yBaseCoord)*rectSize) + margin.t ] + ")";
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment