README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Copied and expanded from Nunchucks

  

  

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000; }
    svg { width:100%; height: 100% }
    line {
      /*stroke: black;*/
      stroke-width: 5px;
      stroke-linecap: round;
    }
  </style>
</head>

<body>
  <script>
var width = 960;
    var height = 500;
    var scaleFactor = 0.9;
    var svg = d3.select('body').append('svg')
      .attr({width: width, height: height});
    var g = svg.append('g')
      .attr('transform', 'translate('+(width/2)+', '+(height/2)+')')
      .attr('id','master');

    function t(selection){
      selection.append('line')
        .attr('x1', -100)
        .attr('y1', 0)
        .attr('x2', 100)
        .attr('y2', 0);
    }
    var g1 = g.append('g').call(t);
    var g2 = g1.append('g').call(t);
    var g3 = g2.append('g').call(t);
    var g4 = g3.append('g').call(t);
    var g5 = g4.append('g').call(t);
    var g6 = g5.append('g').call(t);
    var g7 = g6.append('g').call(t);
    var g8 = g7.append('g').call(t);
    var g9 = g8.append('g').call(t);
    var g10 = g9.append('g').call(t);
    var g11 = g10.append('g').call(t);
    var g12 = g11.append('g').call(t);
    var g13 = g12.append('g').call(t);
    var g14 = g13.append('g').call(t);

    var rotation = 0;
    var potato = 190;
    var slowtation = 110;
    function animate(){

      g1.attr('transform', 'rotate('+rotation+')');
      g1.selectAll('g').attr('transform', 'translate(100, 0) rotate('+rotation*2+') scale('+scaleFactor+')');
      g1.selectAll('line').attr('x2',(toEq(slowtation)*100)).attr('x1',(toEq(rotation)*100)).attr('stroke','hsla(' + (toEq(potato)*360) + ',100%,50%,1)');

      rotation += .1;
      potato +=0.01;
      slowtation += 0;
      requestAnimationFrame(animate);
    }
    animate();

    function toEq (angle) {
      return Math.sin((angle * (Math.PI / 180)));
    };

  </script>
</body>