rsadwick · July 18, 2013 15:47
diff --git a/canvas_animation b/canvas_animation
 <!DOCTYPE html>
 <html> 
    <head></head>
    <body onLoad="init();">
        <p>demo</p>

        <canvas id="demoCanvas" width="640" height="480">
        	alternate crap for junk ass users
    	</canvas>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.1/TweenMax.min.js"></script>

     	<script>

  	var canvas, stage;
 		
     	function init()
     	{
 		canvas = document.getElementById("demoCanvas");
 		stage = new createjs.Stage(canvas);
 		var container = new createjs.Container();
 		stage.addChild(container);

 		colors = ["#b0326f", "#d74e8e", "#dd5794", "#e39a91", "#a87ccbi", "#e36e9b", "#00e2eb", "#f48228"];

     		for (var i = 0; i < 500; i++)
 		{
 			var circle = new createjs.Shape();
 			container.addChild(circle);
 			circle.graphics.beginFill(colors[ Math.floor(Math.random() * colors.length) ]).drawCircle(0, 0, 10);
 			circle.x = canvas.width * Math.random()|0;
 			circle.y = canvas.height * Math.random()|0;
 	
 			var tween = new TweenMax(circle, 1,  {x: Math.sin( circle.x * Math.random(300) ) * 192 + 256, y: Math.cos( circle.y * Math.random(300) * 0.9 ) * 192 + 256, scaleX:0.1,  scaleY: 0.1, rotation: 720, repeat:-1, yoyo:true, ease:Circ.easeInOut});
 			
 			stage.update();
 		}
 			
 		TweenMax.ticker.addEventListener("tick", draw);
     	}
     	

     	function draw()
     	{
     		stage.update();
     	}
    	
     	</script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head></head>
	<body onLoad="init();">
	<p>demo</p>

	<canvas id="demoCanvas" width="640" height="480">
	alternate crap for junk ass users
	</canvas>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
	<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.1/TweenMax.min.js"></script>

	<script>

	var canvas, stage;

	function init()
	{
	canvas = document.getElementById("demoCanvas");
	stage = new createjs.Stage(canvas);
	var container = new createjs.Container();
	stage.addChild(container);

	colors = ["#b0326f", "#d74e8e", "#dd5794", "#e39a91", "#a87ccbi", "#e36e9b", "#00e2eb", "#f48228"];

	for (var i = 0; i < 500; i++)
	{
	var circle = new createjs.Shape();
	container.addChild(circle);
	circle.graphics.beginFill(colors[ Math.floor(Math.random() * colors.length) ]).drawCircle(0, 0, 10);
	circle.x = canvas.width * Math.random()\|0;
	circle.y = canvas.height * Math.random()\|0;

	var tween = new TweenMax(circle, 1, {x: Math.sin( circle.x * Math.random(300) ) * 192 + 256, y: Math.cos( circle.y * Math.random(300) * 0.9 ) * 192 + 256, scaleX:0.1, scaleY: 0.1, rotation: 720, repeat:-1, yoyo:true, ease:Circ.easeInOut});

	stage.update();
	}

	TweenMax.ticker.addEventListener("tick", draw);
	}


	function draw()
	{
	stage.update();
	}

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