Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var start = Date.now()
- , n = 6 //number of rings
- , radius = 70 //radius interval
- , deg = 360 //angle (in degrees) we will split
- , width = 21 //width of each box
- , t = 1337 //"time'
- , a = 1
- , ntheta = 2
- , speed_factor = 0.02917
- , opacity = 0.01
- , stroke_opacity = 0.9
- , stroke_width = 2
- , fill_color = "#000000"
- , stroke_colors = ["#ffffff", "#000000"]
- , corners = 0
- var sw = parseInt(d3.select("svg").style("width"))
- //make the sin waves extend past the width a little
- sw += .1 * sw
- var sh = parseInt(d3.select("svg").style("height"))
- var rings = [ ];
- for (i in d3.range(n))
- {
- var speed = i * speed_factor
- rings.push({
- radius: radius*i,
- width: width,
- speed: speed,
- phase: i
- })
- }
- var svg = d3.select("svg")
- svg.append("rect")
- .attr("width", sw)
- .attr("height", sh)
- .attr("fill", "#888888")
- svg = svg.append("svg:g")
- .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
- var ring = svg.selectAll("g")
- .data(rings)
- .enter().append("svg:g")
- .attr("class", "ring")
- .each(ringEnter);
- var updateRing = function(elapsed) {
- rotate = function(d,i) {
- return "rotate(" + (a * d.speed * elapsed) + ")";
- };
- var rings = svg.selectAll("g.ring")
- .attr("transform", rotate)
- .selectAll("rect")
- .attr("transform", rotate)
- .attr("fill", fill_color)
- .attr("fill-opacity", opacity)
- .attr("stroke", function(d,i) {
- return stroke_colors[i % 2];
- })
- .attr("stroke-opacity", stroke_opacity)
- .attr("stroke-width", stroke_width)
- .attr("rx", corners)
- .attr("ry", corners)
- }
- function ringEnter(d, i) {
- //split up the circle into squares
- var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
- k = deg / theta;
- d3.select(this).selectAll("g")
- .data(d3.range(theta).map(function() { return d; }))
- .enter().append("svg:g")
- .attr("class", "square")
- .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
- .append("svg:rect")
- .attr("x", -d.width / 2)
- .attr("y", -d.width / 2)
- .attr("width", d.width)
- .attr("height", d.width);
- }
- updateRing(t)
Add Comment
Please, Sign In to add comment