Array and Canvas of HTML5 in Blogger

For some reasons, I wasn't able to display canvas consist of object with array. Dunnow,...

Seeking solution...

 UPDATE: It seems blogger didn't support prototype, so I have to improvise my code to adapt it.

The Bouncing Ball

The Code for this under the script tag

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init(){
 canvas=myCanvas;
 context= myCanvas.getContext('2d');
 setInterval(draw,10);
 bal=new bola('#007700', 17,dx,dy);
}

function draw(){
   context.clearRect(0,0, 300,300);
   bal.Pantul();
   bal.Create();
   bal.x+=bal.dx;
   bal.y+=bal.dy;
}

function bola(color, r,dx,dy){
     this.canvas  = canvas;
     this.context = canvas.getContext('2d');
     this.r  = r;
     this.x =Math.random()*400+30;
     this.y  = Math.random()*250+30;
     this.dx  = dx;
     this.dy  = dy;
     this.color   = color;
}

bola.prototype.Create = function (){
     this.context.beginPath();
     this.context.fillStyle = this.color;
     this.context.arc(this.x,this.y,this.r,0,Math.PI*2,false);
     this.context.fill();
}

bola.prototype.Pantul = function (){
 if (this.x >= (canvas.width - this.r) || this.x <= this.r) this.dx *= -1;
     if (this.y >= (canvas.height - this.r) || this.y <= this.r) this.dy *= -1; 
}

window.onload = function(){
        init()
}

Bouncing Ball in HTML 5 using Canvas Method

A Result of Trial and Error

Here the code

Bouncing Ball using Array in HTML5

I want to create bouncing ball program that's very easy on Flash, Python or Delphi yet very tricky on html5. The program consist of n ball with random velocity (each) moving in a 2d box (oh yeah, square then :) ) 

I am playing with array in html5 script which is helpful on this program. I don't declare the array using

aBola = new array()

that come  as standart on many language, but prefer

aBola = []

instead, just like list on python. In this program, array's just like container for ball.

In html5, moving an object is a bit tricky and, for some Pascal programmer like me, bringing an old memory of draw-clear-draw-clear... cycle; draw a ball, delete it, draw the same ball but slightly right, delet it, ... and so on. All that kind of tedious job, but it worth for the sake of fast execution and no-need-slow-loading-flash-player thing.

Here's the code under script tag. Keep in mind that many variable's name is in indonesian (ball -> bola, bounce->pantul, collision -> tumbukan )

 
 //bola:ball
 //pantul:bounce
  var context;
  var n=10;

   // membuat bola 
   function bola(color, r,dx,dy){
      this.canvas  = canvas;
      this.context = canvas.getContext('2d');
      this.r  = r;
      this.x =Math.random()*400+30;
      this.y  = Math.random()*250+30;
      this.dx  = dx;
      this.dy  = dy;
      this.color   = color;
   }

   bola.prototype.Create = function (){
      this.context.beginPath();
      this.context.fillStyle = this.color;
      this.context.arc(this.x,this.y,this.r,0,Math.PI*2,false);
      this.context.fill();
   }
   bola.prototype.Pantul = function (){
  if (this.x >= (canvas.width - this.r) || this.x <= this.r) this.dx *= -1;
      if (this.y >= (canvas.height - this.r) || this.y <= this.r) this.dy *= -1; 
   }
   function init(){
    canvas  = document.getElementById("myCanvas")
      context = canvas.getContext('2d');
  // membuat array untuk bola
  //create array for ball
      aBola = [];
  for (i=1;i<=n;i++){
   //membuat bola sejumlah n dengan dx dan dy acak
   //create n balls with random dx and dy
   dx = Math.random()*10-5;
   dy = Math.random()*10-5;
       aBola.push(new bola('#007700', 17,dx,dy)); 
      }
         setInterval(draw,20);
   }
   function draw(){
      context.clearRect(0,0, 500,350);
  for (i in aBola) {
   //menggerakkan bola
   //moving balls
         aBola[i].x += aBola[i].dx;
         aBola[i].y += aBola[i].dy;
         aBola[i].Pantul();
         aBola[i].Create();
       }
    }

(to be continued)

2D/3D Ball Collision

I used on 1D collission problem where, in case of elastic collision, the ball is changing velocity each other. In 2D/3D case however, the collision is not always head-on collision (which is basically 1 dimension collision).

Head-on

The system above's easy too solve, as simple as interchanging velocity (in elastic case).




Not head-on

When two balls are in non-head-on collision we could always using transposed new coordinate where both of ball center are on the new x-axis like below

On the new coordinate, we can treat the velocities along x-axis as one dimensional collision case and let go on other component (y, z) intact.

Below's snippet from python code of balls collision detection; the whole code is code of moving many ball on a box.

###deteksi tumbukan antar bola
for i in arange(jumlah):
  for j in arange(i+1,jumlah):
    jarak=mag(lbola[i].pos-lbola[j].pos)
    if jarak<(lbola[i].radius+lbola[j].radius):
      arah=norm(lbola[j].pos-lbola[i].pos)
      vi=dot(lbola[i].v,arah)
      vj=dot(lbola[j].v,arah)
      tukar=vj-vi
      lbola[i].v=lbola[i].v+tukar*arah
      lbola[j].v=lbola[j].v-tukar*arah
      pantul=lbola[i].radius+lbola[j].radius-jarak
      lbola[i].pos=lbola[i].pos-pantul*arah
      lbola[j].pos=lbola[j].pos+pantul*arah

Moving to HTML5

After years fighting the slow loading flash without alternative software, I begin to think seriously about moving to HTML5 coding. Altough it ain't true software for me, it provide what I need mostly: animation.

HTML5 support canvas, audio ad video tag, javascript. Need array data? No problem. If then else? OK.

So, begin...