Math, Physics, and Animation - HTML5 Canvas - page 331

return return ;

}

formElement = document . getElementById ( "canvasWidth" )
formElement . addEventListener ( 'change' , canvasWidthChanged , false false );

formElement = document . getElementById ( "canvasHeight" )
formElement . addEventListener ( 'change' , canvasHeightChanged , false false );

function function drawScreen () {

context . fillStyle = '#EEEEEE' ;
context . fillRect ( 0 , 0 , theCanvas . width , theCanvas . height );
//Box
context . strokeStyle = '#000000' ;
context . strokeRect ( 1 , 1 , theCanvas . width - 2 , theCanvas . height - 2 );

//Place balls
context . fillStyle = "#000000" ;
var var ball ;

for for ( var var i = 0 ; i < balls . length ; i ++ ) {

ball = balls [ i ];
ball . x += ball . xunits ;
ball . y += ball . yunits ;

context . beginPath ();
context . arc ( ball . x , ball . y , ball . radius , 0 , Math . PI * 2 , true

true );

context . closePath ();
context . fill ();

iif ( ball . x > theCanvas . width || ball . x < 0 ) {
ball . angle = 180 - ball . angle ;
updateBall ( ball );
} else else iif ( ball . y > theCanvas . height || ball . y < 0 ) {

ball . angle = 360 - ball . angle ;
updateBall ( ball );

}

}

}

function function updateBall ( ball ) {

ball . radians = ball . angle * Math . PI / 180 ;
ball . xunits = Math . cos ( ball . radians ) * ball . speed ;