GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Wednesday, March 30, 2011

Canvas - Gravitational Forces

<!-- This program provide implementation for gravitational forces using Javascript OOP style -->

<h1>Gravitational Forces</h1>
<canvas id="canvas">Not Supported</canvas>

<script>
function GF(id){
 this.x = 30;
 this.y = 0;
 this.width = 50;
 this.height = 30;
 this.screen_width = 500;
 this.screen_height = 2000;
 this.vo = 0;
 this.vt = 0;
 this.ho = 0;
 this.ht = 0;
 this.canvas = document.getElementById(id);
 this.ctx = this.canvas.getContext('2d');
 this.canvas.height = this.screen_height;
 this.canvas.width = this.screen_width;
 this.g = 10;
 this.t = 0;

}
GF.prototype.drawLine = function(){
 for(var i=0;i<100;i++){
  this.ctx.fillStyle = '#444';
  this.ctx.fillText(i,1,i*30);
 }
}
GF.prototype.down = function(){
 this.ht = this.ho + 0.5 * this.g * this.t * this.t;
 this.vt = this.vo + this.g * this.t;
 this.t = this.t + 0.1;

 this.ctx.clearRect(20, 0, this.screen_width, this.screen_height);
 this.ctx.fillRect(this.x, this.ht, this.width, this.height);

 this.ctx.fillStyle = '#10f';
 this.ctx.fillText('v: '+Math.round(this.vt),this.x+5,this.ht+10);
 this.ctx.fillText('h: '+Math.round(this.ht),this.x+5,this.ht+20);
 this.ctx.fillStyle = '#af0';

 var d = this;
 setTimeout(function(){d.down();},100);

}

var gf = new GF('canvas');
gf.down();
gf.drawLine();

</script>

Share/Bookmark

No comments:

Post a Comment