[ Launch: simplified aspiring mustache emporium ] 6708323 by enjalot
[ Launch: i wish this was a mustache emporium ] 6707845 by gelicia
[ Launch: i wish this was a mustache emporium ] 6690695 by gelicia
-
-
Save enjalot/6708323 to your computer and use it in GitHub Desktop.
simplified aspiring mustache emporium
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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