The Loops

If you’ve not read the Getting Started section, they I’d seriously suggest you read that first as I won’t be re-writing that here, I’ll wait.

Ok you’re back, excellent, now lets get on with the next bit. Using bHive.

bHive wasn’t strictly written to be an application or games framework, it was built so that developers could use the <canvas> tag without the overhead of adding all the event handlers needed to accomplish a simple task.

Setting up

It’s best to run bHive from two custom functions, one that is run when the DOM is ready to be manipulated and one that bHive calls when it’s up and running.

The first function sets up the environment and the objects you need to use, the second function is the Main Loop function that bHive calls every frame to do the grunt work.

The Main Loop

bHive uses a traditional main loop to accomplish its tasks for updating a frame. In its default state, bHive will attempt to process a frame every 33 milliseconds, depending on how intensive your code is, this frame rate will be less.

Within this loop bHive monitors the mouse, keyboard and any event handlers that have been attached.

Depending on your system this frame rate will be drastically affected.

The User Loop

bHive will not actually do anything without a User Loop associated with it. Your User Loop is the doorway to controlling all drawing operations on the <canvas> element.



function myUserLoop() {
 .. your code ..

$(document).ready(function() {
    engine = new bHive({construct});


The above code instructs bHive to call myUserLoop every frame, any drawing operations or code within this loop will be executed every frame update.