Skip to content

Instantly share code, notes, and snippets.

@erin-dot-io
Created January 16, 2014 06:56
Show Gist options
  • Save erin-dot-io/8450869 to your computer and use it in GitHub Desktop.
Save erin-dot-io/8450869 to your computer and use it in GitHub Desktop.
spiral wtf
{"description":"spiral wtf","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"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,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/9jEGkue.png"}
var txt;
var n = 158;
var tfactor = 11 * Math.PI;
var afactor = 25 * Math.PI;
var sfactor = -3;
var colors = ["#76E4F3", "#000000"];
var size = -1.88;
var percent = 0.9682550784;
var data = _.map(d3.range(n), function(d,i) {
size *= percent;
return size;
});
tributary.loop = "pingpong";
tributary.init = function(g) {
g.append("rect")
.attr("width", "100%")
.attr("height", "100%");
var squares = g.selectAll("g.square")
.data(data)
.enter().append("svg:g")
.classed("square", true)
.attr("transform", "translate(" + [0,0] + ")");
squares.append("svg:rect")
.attr("rx", 1.2096)
.attr("ry", 3)
.attr("x", 11.5)
.attr("y", -15.5)
.attr("width", 13)
.attr("height", 0.54144)
.attr("transform", function(d, i) { return "scale(" + (d) * -12 + ")"; })
.style("fill", function(d,i) {
return colors[i%1];
});
squares.datum(function(d) {
return {center: [tributary.sw/2,tributary.sh/2], angle: -3};
});
};
tributary.run = function(g,t) {
var squares = g.selectAll("g.square")
squares.attr("transform", function(d, i) {
//d.center[0] += (mouse[0] - d.center[0]) / (i + 5);
//d.center[1] += (mouse[1] - d.center[1]) / (i + 5);
//shoudl be more elegant way to reset this
d.angle += Math.sin((t*tfactor + i) / afactor) * sfactor;
return "translate(" + d.center + ")rotate(" + d.angle + ")";
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment