Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created February 15, 2013 23:34
Show Gist options
  • Save enjalot/4964495 to your computer and use it in GitHub Desktop.
Save enjalot/4964495 to your computer and use it in GitHub Desktop.
#308 twenty-five suns march
{"description":"#308 twenty-five suns march","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":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,"thumbnail":"http://i.imgur.com/vWZmT9A.png"}
//geometry daily challenge
//http://geometrydaily.tumblr.com/post/34901916113/308-twenty-five-suns-a-new-minimal-geometric
//with @tmcw:
//and @sel
var nsuns = 5; //number of suns per row
var n = 20;
var w = 89;
var spacing = 0;
var rots = [0,1,0,1,3,2,3,3,0,0,1,0,3,1,2,1,2,1,2,1,2,3,2,3,2];
var cx = 63;
var cy = 50;
tributary.loop_type = "pingpong";
tributary.duration = 3500;
var theta = Math.PI / 2 / (n-1);
//var blur = 7;
//blur *= 0.1;
var pathStyle = {
fill: "none",
stroke: "#ff0000",
"stroke-opacity": 0.2,
"stroke-width": 3,
"stroke-linecap":"round"
}
var svg = d3.select("svg");
function drawSun(g) {
var lines = g.selectAll("line.ray")
.data(d3.range(n))
lines
.enter()
.append("line").classed("ray", true);
lines.attr({
x1: 0,
y1: w,
x2: function(d,i){
var x;
if(theta * i < Math.PI/4) {
x = w
} else {
x = w * Math.cos(theta * i) / Math.sin(theta*i);
}
return x;
},
y2: function(d,i) {
var y;
if(theta * i >= Math.PI/4) {
y = 0;
} else {
y = w - w * Math.sin(theta * i) / Math.cos(theta*i);
}
return y
}
})
.style(pathStyle)
}
tributary.init = function(g) {
var suns = g.selectAll("g.sun")
.data(d3.range(nsuns*nsuns));
suns
.enter()
.append("g").classed("sun", true)
.attr("transform", function(d,i) {
var x = cx + (i % nsuns) * (w+spacing);
var y = cy + parseInt(i/nsuns) * (w+spacing);
var rot = rots[i] * 90;
return "translate(" + [x,y] +")" + "rotate(" + [rot, w/2, w/2] + ")";
})
.each(function(d) {
drawSun(d3.select(this))
})
}
tributary.run = function(g, t) {
//-0.08 -> 0.027
theta = Math.PI / 2 / (n-1) + -0.12 + t * 0.135;
//var r = rots.pop();
//rots.unshift(r)
g.selectAll("g.sun")
.attr("transform", function(d,i) {
var x = cx + (i % nsuns) * (w+spacing);
var y = cy + parseInt(i/nsuns) * (w+spacing);
var rot = (rots[i] + t) * 90 * t;
return "translate(" + [x,y] +")" + "rotate(" + [rot, w/2, w/2] + ")";
})
.each(function(d) {
drawSun(d3.select(this))
})
}
/*
.attr("filter", "url(#morph)")
var defs = svg.append('defs')
var filter = defs.append('filter')
.attr('id','morph')
filter
.append("svg:feGaussianBlur")
.attr("in", "SourceGraphic")
.attr("stdDeviation", blur)
.attr("result", "blurout")
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment