GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Thursday, March 31, 2011

JS - Simulation Of Gravitational Forces

<h1>Canvas Element</h1>
<p style="font: 12px sans-serif;">height: <span id="h"></span><br/>velocity: <span id="v"></span></p>
<canvas id="canvas" style="border: 1px solid blue;">Not Supported</canvas>




<script>    

var Lucia = Lucia || {};

Lucia.UpDown = function(){

 this.ws = 500; // width screen
 this.hs = 300; // height screen

 this.canvas = document.getElementById('canvas');
 this.dh = document.getElementById('h');
 this.dv = document.getElementById('v');

 this.canvas.width = this.ws;
 this.canvas.height = this.hs;

 this.ctx = this.canvas.getContext('2d');

 this.xo = 10;
 this.hAfter = 1;
 this.width = 30;    // width of the object
 this.height = 20;   // height of the object
 this.vBefore = 70;       // early velocity. default 50
 this.dt = 0.05;     // how fast the speed. default 0.1
 this.g = 10;
 this.vAfter = 0;        // velocity thereafter
 this.hBefore = 0;   //

}

// setting for dt
Lucia.UpDown.prototype.setDeltaT = function(dt){
 this.dt = dt;
}

// set the initial velocity
Lucia.UpDown.prototype.setInitialVelocity = function(v){
 this.vBefore = v;
}

// set the height of the canvas
Lucia.UpDown.prototype.setHeight = function(h){
 this.hs = h;
 this.canvas.height = this.hs;
}

// this function do update for the box drawing
Lucia.UpDown.prototype.move = function(tmo){

  // draw the box
 this.ctx.fillStyle = '#88f';

 // clear the canvas
 this.ctx.clearRect(0, 0, this.ws, this.hs);

 // apply the equation
 this.hAfter = this.hBefore + this.vBefore*this.dt - 0.5*this.g*this.dt*this.dt;
 this.vAfter = this.vBefore-this.g*this.dt;
 
 // update the box
 this.ctx.fillRect(this.xo, (this.hs-this.height-this.hAfter), this.width, this.height);

 // displaying the data to screen
 this.dh.innerHTML = Math.round(this.hAfter);
 this.dv.innerHTML = Math.round(this.vAfter);

 // swapping before and after variable
 this.hBefore = this.hAfter;
 this.vBefore = this.vAfter;

 // set the timer
 var lol = this;
 setTimeout(function(){lol.move(tmo);},tmo); 
}
 var data = new Lucia.UpDown();
 data.setHeight(100)
 data.setDeltaT(0.1)
 data.setInitialVelocity(50)
 data.move(100)  

</script>

Share/Bookmark

No comments:

Post a Comment