Understanding Coordinate Systems in Mathematics and Programming Language

by

In traditional mathematics, the Cartesian coordinate system is commonly used and is defined as follows:

  • Origin: The origin (0, 0) is located at the centre of the plane.
  • Axes: The x-axis runs horizontally, with positive values to the right and negative values to the left. The y-axis runs vertically, with positive values going upwards and negative values going downwards.

This system is intuitive for plotting functions, geometric shapes, and understanding spatial relationships. It’s the standard used in mathematics textbooks and many scientific contexts.

Coordinate Systems in Programming

In computer graphics and many programming environments (including p5.js, HTML5 Canvas, and most graphical user interfaces), a different coordinate system is used:

  • Origin: The origin (0, 0) is at the top-left corner of the canvas or window.
  • Axes: The x-axis runs horizontally to the right, similar to the mathematical system. However, the y-axis runs vertically downward, opposite to the mathematical convention.

This system is more intuitive for rendering elements on screens, where the top-left corner is considered the starting point for layout. It aligns with how most devices render images, from top to bottom and left to right.

Transforming the Coordinate System in p5.js

In p5.js, the default coordinate system has the origin at the top-left corner and the y-axis increasing downwards. If you want to simulate a more familiar mathematical coordinate system (origin in the center, y-axis upwards), you can use transformations to modify this behavior.

Using applyMatrix to Change the Coordinate System

The applyMatrix() function in p5.js allows you to apply a custom transformation matrix to the canvas, changing how the coordinate system behaves. Here’s how you can move the origin to the center of the canvas and invert the y-axis to match the mathematical convention:

function setup() {
  createCanvas(400, 400);

  // Move the origin to the center and flip the y-axis
  applyMatrix(1, 0, 0, -1, width / 2, height / 2);
}

Explanation of applyMatrix()

The applyMatrix(a, b, c, d, e, f) function applies a 2D transformation matrix to the current coordinate system. The parameters (a, b, c, d, e, f) correspond to the following transformation matrix:

| a  c  e |
| b  d  f |
| 0  0  1 |

This matrix allows for scaling, rotating, and translating (moving) the coordinate system.

In the example:

  • applyMatrix(1, 0, 0, -1, width / 2, height / 2):
  • 1, 0: Scales the x-axis by 1 (no change).
  • 0, -1: Flips the y-axis by scaling it by -1.
  • width / 2, height / 2: Translates the origin to the center of the canvas.

Drawing in the New Coordinate System

After applying this transformation:

  • The origin (0, 0) is at the center of the canvas.
  • The x-axis runs horizontally with positive values to the right and negative values to the left.
  • The y-axis runs vertically with positive values upwards and negative values downwards.

Creating a show_text Function for the New Coordinate System

To simplify drawing text in this modified coordinate system, you can create a helper function, show_text(x, y, text), which handles the necessary transformations to display text correctly.

function setup() {
  createCanvas(400, 400);
  ellipseMode(RADIUS);
  angleMode(DEGREES);
  rectMode(CORNER);
}

function draw() {
  background(220);
  applyMatrix(1, 0, 0, -1, width / 2, height / 2);
  mx=mouseX - width / 2;
  my=height/2-mouseY;
}

function show(textContent,x,y) {
  push();
  scale(1, -1); // Correct the text orientation
  //textAlign(CENTER, CENTER);
  text(textContent, x, -y);
  pop();
}

Explanation:

  • show_text(x, y, textContent): This function takes the desired x and y coordinates (in the adjusted coordinate system) and the text content to display.
  • push() and pop(): These functions save and restore the drawing state, ensuring that the transformations only apply to the text being drawn.
  • scale(1, -1): This corrects the text orientation so that it is not flipped.
  • textAlign(CENTER, CENTER): Centers the text at the specified coordinates.
  • text(textContent, x, -y): The y-coordinate is inverted to place the text correctly in the flipped coordinate system.

Conclusion

Understanding the differences between mathematical and programming coordinate systems is crucial for correctly positioning elements in graphical applications. By using applyMatrix() in p5.js, you can adjust the default coordinate system to match the familiar mathematical convention. Additionally, creating a helper function like show_text() simplifies the process of drawing text in this transformed coordinate system, making your code more intuitive and easier to manage.

Leave a Comment