Workshop › Pool › Step 3 of 33

The cue ball

What we are doing

Every ball is the same kind of object: a position, a velocity (zero for now), a color, a number, and whether it is the cue ball. ball(...) builds one. All balls will live in one array, balls, so the physics can treat them alike; cue is a second name for the white one.

```js
const R = 9 // ball radius
const CUE_START = { x: 130, y: 160 }

let balls // { x, y, vx, vy, color, number, cue }
let cue

const ball = (x, y, color, number) => ({ x, y, vx: 0, vy: 0, color, number, cue: number === 0 })

function rack() {
  cue = ball(CUE_START.x, CUE_START.y, '#f8fafc', 0)
  balls = [cue]
}

function reset() {
  rack()
}

reset()
```

What it means

Your turn

  1. Under const BOTTOM = 280 write the new lines, from R down to reset.
  2. Write reset() just above the last line, requestAnimationFrame(loop). Press Run.

Skills: Arrays and objects, Functions

All steps

  1. The room
  2. The table
  3. The cue ball
  4. Draw the balls
  5. The rack
  6. Numbers on the balls
  7. An aim line
  8. Turn the aim
  9. A shot is a velocity
  10. Roll
  11. Friction
  12. Cushions
  13. Aiming and rolling
  14. Hide the aim while rolling
  15. Count the shots
  16. Balls that touch
  17. Swap the push
  18. Six pockets
  19. In the pocket
  20. Scratch
  21. Balls left
  22. Clear the table
  23. Choose the power
  24. A power bar
  25. A slingshot
  26. Press to aim
  27. Pull back and let go
  28. Smaller steps
  29. Predict the hit
  30. Draw the ghost ball
  31. Where the hit ball goes
  32. Your best
  33. Build it yourself: two players