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

iif ( ! canvasSupport ()) {
return

return ;

}

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 );

ball . velocityx = ball . velocityx - ( ball . velocityx * friction );

ball . velocityy += gravity ;

iif (( ball . y + ball . radius ) > theCanvas . height ) {
ball . velocityy = - ( ball . velocityy ) * ball . elasticity ;

}
ball . y += ball . velocityy ;
ball . x += ball . velocityx ;

context . fillStyle = "#000000" ;
context . beginPath ();
context . arc ( ball . x , ball . y , ball . radius , 0 , Math . PI * 2 , true true );

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

}
var

var speed = 6 ;
var var gravity = . 1 ;

var

var friction = . 008 ;
var var elasticity = . 5 ;

var

var angle = 285 ;
var var radians = angle * Math . PI / 180 ;

var var radius = 15 ;

var var vx = Math . cos ( radians ) * speed ;

var

var vy = Math . sin ( radians ) * speed ;

theCanvas = document . getElementById ( "canvasOne" );
context = theCanvas . getContext ( "2d" );

var var p1 = { x : 20 , y : theCanvas . height - radius };

var var ball = { x : p1 . x , y : p1 . y , velocityx : vx , velocityy : vy , radius : radius ,

elasticity : elasticity };