public
Last active

An example demonstrating the use of triggers, proper object pooling and toggling the capture property.

  • Download Gist
Canvas_09.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.