HTML5 Canvas Quantum Squiggle

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: black;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 363
      });

var layer = new Kinetic.Layer();
      var width = stage.getWidth();
      var height = stage.getHeight();
      var colors = ['red', 'orange', 'green', 'blue', 'purple'];
      var maxMoveDist = 5;
      var maxOpacityChange = 0.01

// create 5 strings
      for(var n = 0; n < 5; n++) {
        var points = [];
        // generate 10 random points
        for(var i = 0; i < 20; i++) {
          var max = i % 2 === 0 ? width : height;
          points[i] = Math.random() * max;
        }

var worm = new Kinetic.Spline({
          points: points,
          strokeWidth: 10,
          stroke: colors[n],
          lineCap: 'round',
          opacity: Math.random()
        });

layer.add(worm);
      }

stage.add(layer);

var anim = new Kinetic.Animation(function(frame) {
        var worms = layer.getChildren();

for(var n = 0; n < worms.length; n++) {
          var worm = worms[n];
          var points = worm.getPoints();
          var newPoints = [];
          var newOpacity = worm.getOpacity() + (2 * Math.random() * maxOpacityChange) - maxOpacityChange;

if(newOpacity < 0) {
            newOpacity = 0;
          }
          else if(newOpacity > 1) {
            newOpacity = 1;
          }

for(var i = 0; i < points.length; i++) {
            newPoints.push({
              x: points[i].x + (2 * Math.random() * maxMoveDist) - maxMoveDist,
              y: points[i].y + (2 * Math.random() * maxMoveDist) - maxMoveDist
            });
          }
          worm.setPoints(newPoints);
          worm.setOpacity(newOpacity);
        }
      }, layer);

anim.start();

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

< Oscillating Blobs Scatter Plot >

More Examples

No Related Post

Modified on January 11th, 2013 by Eric Rowell