topical media & game development
mobile-graphic-easel-examples-Cache-vday.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Infinite Hearts</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var canvas;
var stage;
var container;
var captureContainers;
var captureIndex;
function init() {
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
var w = canvas.width;
var h = canvas.height;
container = new createjs.Container();
stage.addChild(container);
captureContainers = [];
captureIndex = 0;
// create a large number of slightly complex vector shapes, and give them random positions and velocities:
for (var i=0; i<50; i++) {
var heart = new createjs.Shape();
heart.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*30-45, 100, 50+Math.random()*30));
heart.graphics.moveTo(0,-9).curveTo(0,-20,8,-20).curveTo(16,-20,16,-10).curveTo(16,0,0,12);
heart.graphics.curveTo(-16,0,-16,-10).curveTo(-16,-20,-8,-20).curveTo(0,-20,0,-9);
heart.y = -100;
container.addChild(heart);
}
var text = new createjs.Text("the longer I'm with you\nthe more I love you", "bold 24px Arial", "#312");
text.textAlign = "center";
text.x = w/2;
text.y = h/2;
stage.addChild(text);
for (i=0; i<100; i++) {
var captureContainer = new createjs.Container();
captureContainer.cache(0,0,w,h);
captureContainers.push(captureContainer);
}
// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);
}
function tick(event) {
var w = canvas.width;
var h = canvas.height;
var l = container.getNumChildren();
captureIndex = (captureIndex+1)\%captureContainers.length;
stage.removeChildAt(0);
var captureContainer = captureContainers[captureIndex];
stage.addChildAt(captureContainer,0);
captureContainer.addChild(container);
// iterate through all the children and move them according to their velocity:
for (var i=0; i<l; i++) {
var heart = container.getChildAt(i);
if (heart.y < -50) {
heart._x = Math.random()*w;
heart.y = h*(1+Math.random())+50;
heart.perX = (1+Math.random())*h;
heart.offX = Math.random()*h;
heart.ampX = heart.perX*0.1*(0.2+Math.random());
heart.velY = -Math.random()*2-2;
heart.scaleX = heart.scaleY = Math.random()+1;
heart.rotation = Math.random()*40-20;
heart.alpha = Math.random();
}
heart.y += heart.velY;
heart.x = heart._x + Math.cos((heart.offX+heart.y)/heart.perX*Math.PI*2)*heart.ampX;
}
captureContainer.updateCache("source-over");
// draw the updates to stage:
stage.update(event);
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Infinte Hearts</h1>
<p>Infinte hearts: code poetry for Valentine's day.
</p>
</header>
<!-- background isn't set to black to demonstrate how the darkening applies -->
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400" style="background-color:#312"></canvas>
</div>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
