AvriBubble :

AvriBubble is a little 2D engine which allows you to play with round. It's without Canvas (so elements can't turn on themself !)
It allows you to add gravity, friction and a lot of AvriBubble ;)
You can change the mass, size and speed of each Bubble

Download AvriBubble & AvriContainer :

download uncompressed

Exemple :

demo 1 :
demo 2 :
demo 3 :

Syntax :

  1. // The most easy way : 
  2. //we first define the main container
  3. container = new AvriContainer () ;
  4. //we add some bubble to this container
  5. container.add(new AvriBubbule ('bubble1'));
  6. container.add(new AvriBubbule ('bubble2', {mass: 500, isDraggable: false, step: 1}));
  7. container.add(new AvriBubbule ('bubble3'));
  8. //let's play !
  9. container.start();

Options :

AvriContainer

  • top: 50, // int : The top position of your container !
  • left: 50, // int : The left position of your container !
  • height: 200, // int : The height of your container !
  • width: 300, // int : The widthof your container !
  • speed: 20, // int : define in ms. the time between 2 deplacement of each bubble. (it's a perdical() )
  • randomChange: 1, //int : if 1 : will never change the direction of the speed vector. If <1 will change ! (see demo 3)
  • detectColision: true, //boolean : if true, will detect the colision between the bubble
  • gravity : 1, //int : set the gravity. 0 = no-gravity, 10 and > = very very eavy gravity !!
  • friction : 0.9, //int 0...1set the friction wich occurs at each bounce. 1 = no-friction,
  • displayBorder : true //boolean : if true will add a div with .container class wich has the same dimention than the container.

AvriBubble

  • step: 5, // int : define the initial speed of the bubble
  • mass: 'prop', //int or 'prop' : define the mass of the bubble. If 'prop' will be proportionnel to the radius of the bubble
  • isDraggable: true //boolean : allows to drag the bubble or not

Methods :

AvriContainer

  • start () //start the mouvement
  • stop () //stop the mouvement
  • add (AvriBubble) //add a bubble to the container
  • fireEvent('colision', function (bubble1, bubble2) //throw at each colision. You get a wall if it hurt a wall (wall.el.id ='wall')

ChangeLog :

v 0.1.2 - 29 Avril , 2009

  • Now works with divs and not img (beacause of ie drrag bug)
  • "Snap" remove : you dont have to move the mouse to catch a bubble

v 0.1.1 - 29 Avril , 2009

  • syntax improve
  • fix some little bug

v 0.1 - 28 Avril , 2009

  • first release