Workshop › Conway's Game of Life › Step 16 of 32

A generation every few frames

What we are doing

Pressing N for every generation gets tiring. The loop runs 60 times a second, which is too fast to follow, so we count frames and step only on every 6th one: 10 generations a second.

```js
const SPEED = 6 // frames per generation while playing

let frames

function reset() {
  grid = emptyGrid()
  randomize()
  frames = 0
}

function update() {
  frames += 1
  if (frames % SPEED === 0) step()
}
```

What it means

• SPEED is how many frames one generation lasts. frames counts frames; reset sets it to 0.
• update adds one frame and steps when frames % SPEED === 0: on frames 6, 12, 18 ...

Your turn

1. Under const TOP = 36 write the SPEED line.
2. Under let generation write let frames.
3. At the end of reset, write frames = 0.
4. Above function draw() { write update, with an empty line between them.

Skills: The game loop

← Count the living Let it live →

All steps

1. The board
2. Measure the grid
3. One living cell
4. A function that draws
5. The world in memory
6. Draw every living cell
7. A random soup
8. Count the neighbours
9. Four rules
10. Draw again and again
11. Next generation with N
12. Count the generations
13. Show the generation
14. A world without edges
15. Count the living
16. A generation every few frames
17. Let it live
18. Running or not
19. One place for the buttons
20. Space to play, N to step
21. Clear and shuffle
22. Where is the pointer?
23. Which cell?
24. Click a cell
25. Paint or erase?
26. Drag to paint
27. Patterns from text
28. The glider gun
29. Fire the gun
30. Buttons on the screen
31. Tap the buttons
32. Build it yourself: a world at rest