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

Measure the grid

What we are doing

The world is a grid of small cells: 60 columns and 48 rows of 8-pixel cells. We name these numbers once and paint the grid's area a little lighter, leaving a strip at the top for text.

```js
const CELL = 8
const COLS = 60
const ROWS = 48
const TOP = 36

ctx.fillStyle = '#1e293b'
ctx.fillRect(0, TOP, COLS * CELL, ROWS * CELL)
```

What it means

• CELL is the size of a cell in pixels, COLS and ROWS count the columns and rows, TOP is the strip above the grid.
• The grid area starts at x = 0, y = TOP and is COLS * CELL (480) wide and ROWS * CELL (384) tall. * means multiply.

Your turn

1. Under const ctx = ... leave an empty line and write the four constants.
2. At the very end, under the background lines, write the two #1e293b lines. Press Run.

Skills: Drawing on a canvas

← The board One living cell →

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