Coordinate System

Open the editor to experiment with coordinates live.

Canvas Space

Origin	Top-left corner (0, 0)
X	Increases to the right
Y	Increases downward
Units	CSS pixels (w × h)

Click coordinates (state.clickX / state.clickY) use the same space — no conversion needed.

Grid and Axes

The canvas draws a grid and axes centered at (w/2, h/2) for visual reference. They do not change the coordinate system. Your return values are still absolute canvas pixels from the top-left.

Centering Pattern

Most simulations store offsets from the center, then convert when drawing:

if (!state.init) {
  state.x = 0;   // offset from center
  state.y = 0;
  state.init = true;
}

const cx = w / 2;
const cy = h / 2;

return {
  particles: [
    { x: cx + state.x, y: cy + state.y, r: 10, color: '#8B5CF6' },
  ],
};

Or work entirely in canvas space (state.x as absolute position). Both are valid — be consistent.

Angles

Canvas arc() and trig helpers follow screen space:

Angle	Direction on screen
0	Right
π/2	Down
π	Left
3π/2	Up

Textbook math often treats Y as up. To match that convention when placing particles:

const x = cx + r * Math.cos(theta);
const y = cy - r * Math.sin(theta);  // flip Y

Vectors

Vector x / y are screen components: positive y points down. A green “upward” force in physics terms often needs a negative y component on the canvas.