danma

MENUMENU
  • Fine Art
    • Installation Art
    • Photography
    • Sculpture
    • Video
    • Wall Mounted Art
  • CV
  • Contact

Ship Simulation for HTML5 Studies

February 5, 2013 by danma Leave a Comment

Match angular velocity to x & y:

vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);

Match angular acceleration to x & y:

ax = force * Math.cos(angle);
ay = force * Math.sin(angle);

Acceleration to velocity:

vx += ax;
vy += ay;

Velocity & position:

object.x += vx;
object.y += vy;

Remove an out-of-bounds object:

if (object.x -object.width / 2 > right ||
object.x + object.width / 2 < left || object.y - object.height / 2 > bottom ||
object.y + object.height / 2 < top) { //code to remove object }

 

Regenerate an out-of-bounds object:

if (object.x -object.width / 2 > right ||
object.x + object.width / 2 < left || object.y - object.height / 2 > bottom ||
object.y + object.height / 2 < top)  { //code to reset object position and velocity }

 

Screen wrapping:

if (object.x - object.width / 2 > right) {object.x = left - object.width / 2;}
else if (object.x + object.width / 2 < left) {object.x = right + object.width / 2;} if (object.y - object.height / 2 > bottom) {object.y = top - object.height / 2 < top} else if (object.y + object.height / 2 < top) {object.y = bottom + object.height / 2;}

 

Friction the correct way:

speed = Math.sqrt(vx * vx + vy * vy);
angle = Mathlatan2(vy, vx);

if (speed > friction) {speed -= friction;}
else {speed = 0;}

vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

 

Friction the easy way:

vx *= friction;
vy *= friction;

 

DEMO

Apress. Foundation HTML5 Animation with JavaScript. N.p., n.d. Web. 02 Jan. 2013.

Related

Filed Under: HTML resources

Leave a Reply Cancel reply

Copyright © 2023 danma ::