Skip to content

Instantly share code, notes, and snippets.

@markstar

markstar/Canvas_09.html

Created March 26, 2011 13:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markstar/888290 to your computer and use it in GitHub Desktop.
Save markstar/888290 to your computer and use it in GitHub Desktop.
Download ZIP
An example demonstrating the use of triggers, proper object pooling and toggling the capture property.
Raw
Canvas_09.html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 09</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />
<script src="js/CanvasController.js" type="text/javascript"></script>
<script src="js/DisplayObject.js" type="text/javascript"></script>
<script src="js/DisplayContainer.js" type="text/javascript"></script>
<script src="js/Shape.js" type="text/javascript"></script>
<script src="js/Circle.js" type="text/javascript"></script>
<script src="js/Rectangle.js" type="text/javascript"></script>
<script src="js/Orb.js" type="text/javascript"></script>
<script src="js/Point.js" type="text/javascript"></script>
<script src="js/Bounds.js" type="text/javascript"></script>
<script src="js/Ticker.js" type="text/javascript"></script>
<script src="js/ColorPool.js" type="text/javascript"></script>
<script src="js/ObjectPool.js" type="text/javascript"></script>
<script src="js/FixedVibration.js" type="text/javascript"></script>
<script src="js/VariableVibration.js" type="text/javascript"></script>
<script src="js/ExitBoundsTrigger.js" type="text/javascript"></script>
<script src="js/BehaviourManager.js" type="text/javascript"></script>
<script src="js/TriggerManager.js" type="text/javascript"></script>
<script>
var canvasController = null;
var bounds = null;
var colorPool = new ColorPool( "#FF99FF", "#99FFFF", "#FFFFFF", "#00FFFF", "#FF00FF" );
var objectPool = new ObjectPool( Orb, 50 );
var orbs = new Array();
var behaviours = new BehaviourManager();
var triggers = new TriggerManager();
var count = 0;
function init()
{
objectPool.onCreateObject = onCreateObject;
canvasController = new CanvasController( document.getElementById( "canvas" ) );
bounds = new Bounds( 0, 0, canvasController.canvas.width, canvasController.canvas.height );
var rectangle = new Rectangle();
rectangle.width = 800;
rectangle.height = 500;
rectangle.alpha = 0.05;
canvasController.addChild( rectangle );
canvasController.capture = true;
canvasController.update();
Ticker.add( update );
Ticker.start();
}
function onCreateObject( orb )
{
orb.x = 400;
orb.y = 250;
orb.color = colorPool.getColor();
behaviours.add( new VariableVibration( orb, "x", 0.99, 0.1, 20, true ) );
behaviours.add( new VariableVibration( orb, "y", 0.99, 0.1, 20, true ) );
behaviours.add( new FixedVibration( orb, "scale", 0.95, 0.1, 1.0, 3.0, true ) );
behaviours.add( new FixedVibration( orb, "alpha", 0, 0.2, 0, 0.5, false ) );
triggers.add( new ExitBoundsTrigger( orb, bounds, onExitBounds ) );
orbs.push( orb );
canvasController.addChild( orb );
}
function onExitBounds( orb )
{
canvasController.removeChild( orb );
objectPool.release( orb );
behaviours.removeAllForTarget( orb );
triggers.removeAllForTarget( orb );
}
function update()
{
if( count == 0 )
{
objectPool.request();
count = 3;
}
count--;
behaviours.update();
triggers.update();
canvasController.update();
document.getElementById( "objectCount" ).innerHTML = "Object count: " + objectPool.pool.length;
}
function toggleCapture()
{
canvasController.capture = !canvasController.capture;
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="800" height="500">
This demo uses HTML5 features, please upgrade to a modern browser that supports HTML5.
</canvas>
<br />
<button onclick="toggleCapture()">Toggle Capture</button>
<span id="objectCount">&nbsp;</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment