Workshop › Angry Birds-style Slingshot › Step 19 of 47

See the path before you shoot

What we are doing

Aiming blind is frustrating. We know the physics, so we can draw the path before the shot: a dot every 4 frames, from a formula for where the bird will be after t frames.

```js
const { vx, vy } = launchVelocity()

ctx.stroke()
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
for (let t = 4; t <= 60; t += 4) {
  // Where the bird will be after t frames: x grows steadily, y follows a parabola.
  const x = SLING.x + vx * t
  const y = SLING.y + vy * t + (GRAVITY * t * t) / 2
  if (y > GROUND) break
  ctx.fillRect(x - 2, y - 2, 4, 4)
}
```

What it means

The velocity the bird would get is computed first, at the top of the if.
for (let t = 4; t <= 60; t += 4) counts t = 4, 8, 12, ... 60.
(GRAVITY * t * t) / 2 is how far gravity has pulled it down after t frames.
break ends the loop at the first dot below the ground. Each dot is a 4×4 square centered on the point.
The real bird ends up a hair lower than the dots, because the game adds gravity in whole-frame steps; for aiming it does not matter.

Your turn

In draw, right under if (state === 'aiming') {, write the launchVelocity line.
Under the band's ctx.stroke(), write the dots (the fillStyle line and the for loop).

Skills: Velocity and gravity

← The next bird From a point to an aim →

See the path before you shoot

What we are doing

What it means

Your turn

All steps