Workshop › Scorched Earth-style Artillery › Step 2 of 23

Hills

What we are doing

A sine wave goes smoothly up and down. Adding three of them, a big slow one and two smaller quicker ones, each with a random size and position, gives natural-looking hills that are different every game.

```js
// Hills from three sine waves of random size and position, added together.
  const waves = [1, 2, 3].map((n) => ({ size: (30 / n) * (0.5 + Math.random()), length: W / (n + Math.random()), shift: Math.random() * W }))

    for (const w of waves) y += w.size * Math.sin(((x + w.shift) / w.length) * Math.PI * 2)
    ground.push(Math.max(120, Math.min(H - 20, y)))
```

What it means

Wave n is about 30 / n pixels high and W / n pixels long: the second is half as big and twice as quick.
Math.sin(... * Math.PI * 2) goes once up and down every length pixels; shift slides it sideways.
Math.max(120, Math.min(H - 20, y)) keeps the ground between y = 120 and 20 pixels above the bottom.

Your turn

Above makeGround, write the comment; at its top, make the three waves.
In the loop, add the waves to y, and keep it within the limits when you push it.

Skills: Drawing on a canvas, Loops

← The ground Two tanks →

All steps