<script type="text/javascript" src="http://office606.org/js/algo.js"></script>

<canvas id="canvas"></canvas>
var NUM = 300;
var param = {
  id: 'canvas',
  width: window.innerWidth,
  height: window.innerHeight
};
var algo = new ALGO( param );
algo.width = window.innerWidth;
algo.height = window.innerHeight;
algo.background = 0xffffff;
algo.backgroundAuto = true;
algo.backgroundAlpha = 0.5;
algo.framerate = 60;
algo.circleResolution = 32;
algo.blendMode = ALGO.BLEND_NONE;

var shapes = [];

var colors = [];

algo.bind('setup', function(){
  var aw = algo.width;
  var ah = algo.height;

  colors = [
    ALGO.ColorUtil.getRandomColorHex(),
    ALGO.ColorUtil.getRandomColorHex(),
    ALGO.ColorUtil.getRandomColorHex()
  ];

  for( var i = 0; i < NUM; i++ ){
    var x = Math.random() * aw;
    var y = Math.random() * ah;
    var angle = Math.floor(Math.random() * 10) + 3;
    var radius = Math.floor(Math.random() * 40) + 10;
    var shape = new ALGO.Polygon( x, y, angle, radius );
    shape.dx = Math.random() * 2;
    shape.dy = Math.random() * 2;
    shape.drot = Math.random();
    shape.color = colors[Math.floor(Math.random() * 3)];
    shape.alpha = 1.0;
    algo.add( shape );
    shapes.push( shape );
  }
});

algo.bind('frame', function(){
  var aw = algo.width;
  var ah = algo.height;

  for( var i = 0; i < NUM; i++ ){
    var shape = shapes[i];
    shape.x += shape.dx;
    shape.y += shape.dy;
    shape.rotate -= shape.drot;
    if(shape.x > aw + shape.radius) shape.x = 0 - shape.radius;
    if(shape.x < 0 - shape.radius) shape.x = aw + shape.radius;
    if(shape.y > ah + shape.radius) shape.y = 0 - shape.radius;
    if(shape.y < 0 - shape.radius) shape.y = ah + shape.radius;
  }
});

algo.bind('resize', function(){
  var w = window.innerWidth;
  var h = window.innerHeight;
  algo.size( w, h );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.