Mouse Interactivity

How to use the Mouse Position

Burst stores the mouse position in Burst.mouseX & Burst.mouseY. These variables are updated every time the mouse moves over a Canvas that has Burst running inside. It's updated with a javascript attach function that I adapted from Resig's Processing.js.

Introducing "angleTo()"

angleTo() is a new function I have added to make it very simple to point one object in the direction of another. When using angleTo(), there are a couple of facts that should be considered. angleTo() is a method of a shape object that returns the angle to another object it is passed. 0 degrees is north. So if you have drawn an arrow, the top should be pointing to the top of your page if you want the rotation to appear correctly without any manual degree adjustments. angleTo() calculates from the center of a shape/timeline object to the center of the object passed.

arrow.rot = arrow.angleTo( spiral );

Introducing "always()"

always() allows you to pass a function to the Burst Engine to be run every frame, or to be to be run only in a specific timeline. For example: if you wwanted to get really frustrated, you could type:

annoy=function(){
  alert("Wow these alerts are really annoying!");
}
Burst.always(annoy); 

This would run in every single frame, no matter which timeline(s) were playing. If you wanted to be more specific and only needed to run the code in the frames of each timeline you would type:

annoy=function(){
  alert("Wow these alerts are really annoying!");
}
Burst.timeline("alertsSuck").always(annoy);

In the "Mouse Tricks" demo, we are using always() to make sure the arrow always points at the mouse and that the spiral is always tracking the XY position of the mouse.

NOTE: The always function is called BEFORE the graphics are drawn for that timeline-frame/shape-object.

The Script & SVGs

SVGs Used:

1. blue-spiral.svg
2. triangle.svg

As you can see, Burst is making things VERY easy.

function myBurstScript(Burst){
  Burst.timeline("mouseTricks",1,100,1,true)          
    .shape("spiral","blue-spiral.svg","svg",0,0,.5,0)
      .track("rot").key(0,0,"linear").key(100,-360)
    .shape("arrow","triangle.svg","svg",320,240,1,0)
  ;
      
  Burst.always(function(){      
      var spiral=Burst.timeline("mouseTricks").shape("spiral");
      spiral.left=Burst.mouseX;
      spiral.top=Burst.mouseY;
      var arrow=Burst.timeline("mouseTricks").shape("arrow");
      arrow.rot=arrow.angleTo(spiral);
  });
    
  Burst.start("mouseTricks");
}
newBurst('BurstCanvas', myBurstScript);