🎯 What Are Coordinates in p5.js?

Think of your p5.js canvas like a treasure map.

Coordinates tell the computer exactly where to draw something.

🗺️ The Map Starts in the TOP-LEFT

Unlike math class (where (0,0) is at the bottom),

p5.js starts at the top-left corner:

(0,0)  →  top-left corner

➡️ The X number goes RIGHT

• If X gets bigger, you move to the right.

(0,0)     (100,0)     (200,0)
   ●---------●-----------●

⬇️ The Y number goes DOWN

• If Y gets bigger, you move down the screen.

(0,0)
  ●
  |
  ● (0,100)
  |
  ● (0,200)

🧠 So a coordinate like (150, 80) means:

• Go 150 pixels to the right
• Go 80 pixels down