Part 1

Assume that a mortar in the lower left corner of the canvas is firing shells at a 60 degree angle to the ground whenever the spacebar is pressed. Animate the trajectory of the rounds drawn as small circles. Select a muzzle velocity that keeps the round mostly on the canvas until it touches the ground.

javascript programming
exa_08_physics1

function Shell(pos,vel) {
  this.pos = pos;
  this.vel = vel;
}

function updateAndDraw(dt) {
  console.log("in updateAndDraw, pos.x = "+this.pos.x);
  // update
  this.pos.x += this.vel.x * dt;
  this.pos.y += this.vel.y * dt;
  this.vel.y += g * dt;
  
  // draw
  ctx.beginPath();
  ctx.arc(this.pos.x, canv.height-this.pos.y, 10, 0, 2*Math.PI);
  ctx.stroke();
}

Shell.prototype = { updateAndDraw : updateAndDraw };

var g = -9.8;  // m/s^2
var shells = [];
var deg60 = Math.PI/3;
var muzVel = 50;

function keyPressHandler(event) {
  if ( event.keyCode === " ".charCodeAt(0) ) {
    shells.push( new Shell({x:0,y:0}, {x:muzVel*Math.cos(deg60), y:muzVel*Math.sin(deg60)}) );
  }
}

var canv, ctx;
var lastFrameTime;

function start() {
  canv = document.getElementById("canv");
  ctx = canv.getContext("2d");
  canv.addEventListener("keydown", keyPressHandler);
  requestAnimationFrame( update );
  lastFrameTime = new Date().getTime();
}

function update() {
  ctx.clearRect(0,0,canv.width,canv.height);
  var now = new Date().getTime();
  dt = (now - lastFrameTime)/1000;
  lastFrameTime = now;
  for (let shell of shells)
    shell.updateAndDraw(dt);
  requestAnimationFrame( update );
}
</script>
</head>
<body onload="start();">
<canvas id="canv" width="300" height="200" style="border:1px gray solid;" tabindex='1'></canvas>
</body>
</html>

Part 1

javascript programmingexa_08_physics1

javascript programming
exa_08_physics1