Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 20th, 2012  |  syntax: None  |  size: 2.27 KB  |  hits: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. var start = Date.now()
  2.     , n = 6         //number of rings
  3.     , radius = 82  //radius interval
  4.     , deg = -129     //angle (in degrees) we will split
  5.     , width = 103    //width of each box
  6.     , t = 1337     //"time'
  7.     , a = 2.56
  8.     , ntheta = 7.04
  9.     , speed_factor = 0.01376
  10.  
  11.     , opacity = 0.19112
  12.     , stroke_opacity = 0.59276
  13.     , stroke_width = 10
  14.     , fill_color = "#000000"
  15.     , stroke_colors = ["#ffffff", "#000000"]
  16.     , corners = 22
  17.  
  18.  
  19.  
  20.  
  21. var sw = parseInt(d3.select("svg").style("width"))
  22. //make the sin waves extend past the width a little
  23. sw += .1 * sw
  24. var sh = parseInt(d3.select("svg").style("height"))
  25.  
  26.  
  27. var rings = [ ];
  28.  
  29. for (i in d3.range(n))
  30. {
  31.     var speed = i * speed_factor
  32.     rings.push({
  33.         radius: radius*i,
  34.         width: width,
  35.         speed: speed,
  36.         phase: i
  37.     })
  38. }
  39.  
  40. var svg = d3.select("svg")
  41.  
  42. svg.append("rect")
  43.     .attr("width", sw)
  44.     .attr("height", sh)
  45.     .attr("fill", "#888888")
  46.  
  47.  
  48. svg = svg.append("svg:g")
  49.     .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");
  50.  
  51. var ring = svg.selectAll("g")
  52.     .data(rings)
  53.   .enter().append("svg:g")
  54.     .attr("class", "ring")
  55.     .each(ringEnter);
  56.  
  57.  
  58. var updateRing = function(elapsed) {
  59.   rotate = function(d,i) {
  60.     return "rotate(" + (a * d.speed * elapsed) + ")";
  61.   };
  62.  
  63.   var rings = svg.selectAll("g.ring")
  64.       .attr("transform", rotate)
  65.     .selectAll("rect")
  66.       .attr("transform", rotate)
  67.       .attr("fill", fill_color)
  68.       .attr("fill-opacity", opacity)
  69.       .attr("stroke", function(d,i) {
  70.           return stroke_colors[i % 2];
  71.       })
  72.       .attr("stroke-opacity", stroke_opacity)
  73.       .attr("stroke-width", stroke_width)
  74.       .attr("rx", corners)
  75.       .attr("ry", corners)
  76.  
  77.  
  78.  
  79. }
  80. function ringEnter(d, i) {
  81.     //split up the circle into squares
  82.     var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
  83.     k = deg / theta;
  84.   d3.select(this).selectAll("g")
  85.       .data(d3.range(theta).map(function() { return d; }))
  86.     .enter().append("svg:g")
  87.       .attr("class", "square")
  88.       .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
  89.     .append("svg:rect")
  90.       .attr("x", -d.width / 2)
  91.       .attr("y", -d.width / 2)
  92.       .attr("width", d.width)
  93.       .attr("height", d.width);
  94. }
  95. updateRing(t)
create a new version of this paste RAW Paste Data