Workshop › Asteroids › Step 18 of 41

Drawing the rocks

What we are doing

A rock is drawn as a 10-cornered outline: corner i sits at i / 10 of a full turn, at distance r * scale from the center, found with cos and sin like the ship's corners.

```js
function drawAsteroid(asteroid) {
  ctx.beginPath()
  asteroid.shape.forEach((scale, i) => {
    const angle = (i / asteroid.shape.length) * Math.PI * 2
    const x = asteroid.x + Math.cos(angle) * asteroid.r * scale
    const y = asteroid.y + Math.sin(angle) * asteroid.r * scale
    if (i === 0) ctx.moveTo(x, y)
    else ctx.lineTo(x, y)
  })
  ctx.closePath()
  ctx.stroke()
}

  for (const asteroid of asteroids) drawAsteroid(asteroid)
```

What it means

forEach((scale, i) => ...) runs for every item of shape: scale is the item, i its number.
The first corner moves the pen there, the others draw lines, and closePath joins the last to the first.
In draw, every asteroid is drawn right after the line settings.

Your turn

Above function draw() { write drawAsteroid, followed by an empty line.
In draw, under ctx.lineWidth = 2, write the asteroid line and an empty line.

Skills: Drawing on a canvas, Velocity and gravity

← Four big rocks Jagged rocks →

All steps