HTML5 Canvas Machines Vortex

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="300"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

function initArcs() {
        var arcs = [];

// create 20 arcs
        for( n = 0; n < 20; n++) {
          var radius = (n + 1) * 10;
          var width = (n + 1) * 6;
          // between 0 and 2 PI
          var startingAngle = Math.random() * 2 * Math.PI;
          // 1 to 3 revolutions per second
          var speed = (Math.random() * 2) + 1;
          // between 0 and 1
          var opacity = (n / 20) * 0.75;

arcs.push({
            radius: radius,
            startingAngle: startingAngle,
            width: width,
            opacity: opacity,
            speed: speed
          });
        }

return arcs;
      }
      function drawArcs(canvas, arcs) {
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;

for( n = 0; n < arcs.length; n++) {
          context.save();
          context.beginPath();
          var thisArc = arcs[n];

context.globalAlpha = thisArc.opacity;
          context.arc(centerX, centerY, thisArc.radius, thisArc.startingAngle, thisArc.startingAngle + Math.PI, true);
          context.lineWidth = thisArc.width;
          // line width
          context.strokeStyle = 'black';
          context.stroke();
          context.closePath();
          context.restore();
        }
      }
      function updateArcs(arcs, timeDiff) {
        for( n = 0; n < arcs.length; n++) {
          var thisArc = arcs[n];
          var angleDiff = thisArc.speed * timeDiff / 1000;
          thisArc.startingAngle -= angleDiff;
        }
      }
      function animate(canvas, arcs, lastTime) {
        var context = canvas.getContext('2d');

// update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        updateArcs(arcs, timeDiff);

// clear
        context.clearRect(0, 0, canvas.width, canvas.height);

// draw
        drawArcs(canvas, arcs);

// request new frame
        requestAnimFrame(function() {
          animate(canvas, arcs, time);
        });
      }
      
      var canvas = document.getElementById('myCanvas');
      var arcs = initArcs();
      var time = (new Date()).getTime();
      animate(canvas, arcs, time);

</script>
  </body>
</html>

< Color Picker Harmonic Oscillator >

More Examples

Modified on January 9th, 2013 by Eric Rowell