In order to use BlackBug, you need an HTML page with an HTML5 canvas element. We also need to load in all the BlackBug scripts. You may have to change the src attribute to navigate to the framework's directory. For example:
<html>
<head>
<title>BlackBug Test Page</title>
<script type="text/javascript" src="BlackBug_1_0/general/math.js"></script>
<script type="text/javascript" src="BlackBug_1_0/general/shapes.js"></script>
<script type="text/javascript" src="BlackBug_1_0/general/colors.js"></script>
<script type="text/javascript" src="BlackBug_1_0/particles/particles.js"></script>
<script type="text/javascript" src="BlackBug_1_0/particles/hypervoxels.js"></script>
<script type="text/javascript" src="BlackBug_1_0/particles/particleWorld.js"></script>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<canvas id="canvas" width="700" height="500" style="border: 1px solid black">You're browser does not support the canvas element.</canvas>
</body>
</html>
The canvas ID can be whatever you want. For the purposes of this example, though, I will use "canvas."
From here on out, all code that I will talk about goes in between the script tags in the head section.
We are going to create the world when the page loads. We do this by changing the window's load function:
window.onload = function()
{
var canvas = document.getElementById('canvas');
// Create the world. For a list of properties
// you can set, see the documentation.
var world = new BBParticleWorld();
// The world has to be initiated before doing
// anything else with it.
// Pass the canvas that you want the particles
// to render in.
world.init(canvas);
// Create a particle emitter.
var emitter = new BBParticleEmitter();
// Change some properties. To see all properties
// you can change, see the documentation.
emitter.x = 300;
emitter.y = 300;
emitter.width = 100;
emitter.height = 100;
// Add the emitter to the world.
world.addEmitter(emitter);
// Create hyper voxels.
var hv = new BBHyperVoxelSystem();
// Set the emitter so that the hyper
// voxels will be rendered where the
// particles from the emitter are.
// For a complete list of properties
// you can change, see the documentation.
hv.emitter = emitter;
// Add the emitter to the world.
world.addHyperVoxels(hv);
}