Workshop › Asteroids › Step 3 of 41

Which way it points

What we are doing

The one bit of trigonometry games use every day: a direction at angle a is (Math.cos(a), Math.sin(a)). The ship's nose is SHIP_R pixels from its center in that direction. For now we draw a line from the nose to the center.

```js
const SHIP_R = 14 // the ship's size: distance from its center to its nose

function drawShip() {
  const tip = { x: ship.x + Math.cos(ship.angle) * SHIP_R, y: ship.y + Math.sin(ship.angle) * SHIP_R }
  ctx.beginPath()
  ctx.moveTo(tip.x, tip.y)
  ctx.lineTo(ship.x, ship.y)
  ctx.stroke()
}

  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  drawShip()
```

What it means

tip is the nose: SHIP_R pixels from the center in the direction of ship.angle.
A path: beginPath starts it, moveTo puts the pen down without drawing, lineTo draws a line, stroke paints the lines in strokeStyle (white), lineWidth pixels thick.

Your turn

Under the two canvas lines, after an empty line, write SHIP_R and an empty line.
Above function draw() { write drawShip, followed by an empty line.
In draw, under the black background, leave an empty line and write the three new lines.

Skills: Velocity and gravity, Drawing on a canvas

← Where the ship is A triangle ship →

Which way it points

What we are doing

What it means

Your turn

All steps