[ Launch: mustache phase ] 6708450 by gelicia
[ Launch: mustache phase ] 6708338 by enjalot
[ Launch: mustache phase ] 6708324 by slembcke
[ Launch: i wish this was a mustache emporium ] 6707845 by gelicia
[ Launch: i wish this was a mustache emporium ] 6690695 by gelicia
-
-
Save gelicia/6708450 to your computer and use it in GitHub Desktop.
mustache phase
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":"mustache phase","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/9Rz0NbP.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 | |
//http://beesandbombs.tumblr.com/post/62169316636/tropical-squares | |
tributary.duration = 2000; | |
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.append("rect").attr({ | |
x:0, | |
y:0, | |
height: tributary.sh, | |
width: tributary.sw | |
}); | |
svg.selectAll('rect.content').data(d3.range(numHeight*numWidth)).enter().append('rect') | |
.attr({ | |
x: -rectSize/2, | |
y: -rectSize/2, | |
height: rectSize, | |
width: rectSize, | |
fill: colorScale(0) | |
}).classed("content", true); | |
tributary.run = function(unused, t){ | |
svg.selectAll('rect.content').attr({ | |
fill: colorScale(Math.abs(0.5-(t%1))), | |
"transform" : function(d, i){ | |
var xBaseCoord = i%numWidth; | |
var yBaseCoord = Math.floor(i/numWidth); | |
var dx = xBaseCoord - numWidth/2; | |
var dy = yBaseCoord - numHeight/2; | |
var phase = Math.sqrt(dx*dx + dy*dy)/11.759999999999998; | |
var offset = (t + phase)%1; | |
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