The Processing coordinate system

The Cartesian coordinate system puts the point (0, 0) in the center of the graph, with the x-axis pointing to the right and the y-axis pointing up.

The coordinate system for pixels on a computer puts the point (0, 0) at the top left. The x-axis points to the right (same as on the Cartesian plan), but the y-axis points down.

Related to notes / Using the Cartesian coordinate system in a Processing sketch

Here’s how Processing understands coordinates:

Processing coordinate system code example

size(400, 400);
background(245);
fill(20);
textSize(8);

stroke(100);
text("0", 4, 12);

for (int x=25; x<width; x+=25) {
  line(x, 0, x, 4);
  text(str(x), x, 12);
}

for (int y=25; y<height; y+=25) {
  line(0, y, 4, y);
  text(str(y), 6, y);
}

// save("processing_coordinate_system.png");

References

Shiffman, Daniel. “Coordinate System and Shapes.” 2008. https://processing.org/tutorials/coordinatesystemandshapes .