Bubblemark Test for HTML5 Canvas

By Geekfish on December 7, 2009

bubble

This is a Bubblemark test clone which I’m developing to test canvas capabilities.
You can see a live example here (requires a canvas compatible browser - excanvas won’t support this).

JavaScript libraries used:
jQuery
Doodle.js
It also uses part of one of the Doodle.js example code for basic bounce physics.

  1. // Initialize when everything on the page is loaded
  2. $(document).ready(function() {
  3.  var canvas = document.getElementById("mycanvas");
  4.  //check for support here:
  5.  if (canvas.getContext){
  6.   init();
  7.  }
  8.  else {
  9.   //javascript fallback
  10.   alert( "Sorry, your browser does not support the canvas element." );
  11.  }
  12. });
  13.  
  14. // Start the application
  15. function init() {
  16.  (function(oo) {
  17.   oo.canvas('#mycanvas');  
  18.  
  19.   //settings
  20.   var numballs;
  21.   var radius = 26;
  22.   var balls = [];
  23.  
  24.   function resetBalls() {
  25.    //reset balls array
  26.    balls.length = 0;
  27.  
  28.    //get new number of balls from user input
  29.    numballs = $( '#numballs' ).val();
  30.  
  31.    for(var i = 0; i < numballs; i++) {
  32.     /**
  33.      * - Create each new ball as an image shape keeping
  34.      * the circle properties for collision detection.
  35.      * - Set coordinates and radius.
  36.      * - Randomize starting velocity
  37.      * - IMPORTANT: For image shapes always define visibility
  38.      */
  39.     var ball = oo.image({src:'./resources/ball.png',
  40.           x: i * 100,
  41.           y: i * 50,
  42.           radius:radius,
  43.           vx: Math.random() * 10 - 5,
  44.           vy: Math.random() * 10 - 5,
  45.           mass:radius,
  46.           coord:'local',
  47.           visible:true});
  48.     //push each ball into the balls array
  49.     balls.push(ball);
  50.    }
  51.   }
  52.  
  53.   resetBalls();
  54.  
  55.   //setting the invisible box boundaries (in this case the canvas)
  56.   Bouncy.boundries = {
  57.    left: 0 - radius, // HACK: boundaries correction for image shapes
  58.    right: oo.canvas().width - radius,
  59.    top: 0 - radius,
  60.    bottom: oo.canvas().height - radius,
  61.   };
  62.  
  63.   // Change the number of balls on button click event
  64.   $( '#numBtn' ).click( function() {
  65.    resetBalls();
  66.   });
  67.  
  68.   //Animate is an endless loop
  69.   oo.animate(function() {
  70.    // check for wall collision
  71.    for(var i = 0; i < numballs; i++) {
  72.     var ball = balls[i];
  73.     ball.modify({x: ball.x + ball.vx,
  74.         y: ball.y + ball.vy});
  75.     Bouncy.check_walls(ball);
  76.    }
  77.    //for each ball…
  78.    for(i = 0; i < numballs; i++) {
  79.     var ball_a = balls[i];
  80.  
  81.     //check for collisions with the current ball
  82.     for(var j = i + 1; j < numballs; j++) {
  83.      var ball_b = balls[j];
  84.      Bouncy.check_collision(ball_a, ball_b);
  85.     }
  86.  
  87.     //redraw the balls
  88.     balls[i].draw();
  89.    }
  90.  
  91.   //set "frames" and make sure to clear canvas
  92.   }, '40fps', true);
  93.  
  94.  })($doodle);
  95. }

Posted in Uncategorized

Leave a Reply

« Juggling routines