Unlocking Unique Visuals- Demystifying Screen & Cartesian Coordinates for Front-End Devs

Hello, fellow developer! This is the first article on this series of front-end development applied maths.

The goal of this article is to provide you with some tools that will give you more control when working with positions. But first, I want to stop and think a little bit about the tools that are already provided to us.

In web development, we are used to relying on HTML and CSS to scaffold responsive complex layouts in the shortest time possible. The default static position of HTML elements prioritizes flexibility over precision, and for some of us, this is a lifesaver.

However in modern web development, if you want to achieve something visually unique, you may find yourself turning to SVG or Canvas or, adjusting the HTML element position to absolute, fixed, or sticky. This is where a solid understanding of the Cartesian coordinate system can help you. But before let's see how screen position works.

How does the screen coordinate system work?

Giving a point A where (x, y) = (3, 1):

You can observe that:

• A point placed at the coordinates (3, 1) will be close to the top left.
• The origin (0, 0) is located in the top left corner and we end at (screen width, screen height) at the bottom right corner.

One important observation to make is that the y coordinate direction is top to bottom. Imagine that you want to make a physics simulation with gravity, you have to think upside down 🙃.

Of course, you can get away, the majority of the time you intend to do some animation/positioning.

Still, I find it easier to reason about some effects on a more suited coordinate system. And this is why I think it is important to understand the Cartesian Coordinate System.

Cartesian coordinate system

How it works

Fundamentally in the Cartesian coordinate we have two differences from the screen coordinate system, at least in its most basic form:

• The origin is defined at the center
• The Y coordinate grows from the bottom to the top

To visualize this better, let's represent the point from the previous example (x, y) = (3, 1) in the cartesian plane:

Notice that with this coordinate system, the point is positioned completely differently on the plane.

At this time you can understand that if you want to do some kind of simulation of the real world, it would be way easier to use the Cartesian coordinate system since in the real world we have the floor you put our feet on granted and nothing else (the sky is the limit 😆).

Quadrants and Origin

One other concept that I want you to be aware of is quadrants. Their main purpose is to divide the plane into 4 distinct zones. When you are doing animations or visual effects you can use to apply different rules on each quadrant for example. Furthermore, if you fix your origin on a specific point you can apply different rules on every quadrant relative to a specific point.

The Cartesian plane is divided into four quadrants, numbered from I to IV, as shown in the figure below:

If we want to translate this into code, the logic is really simple:

function getQuadrant(x, y) {
   // on the top of the axis.
   if (x == 0 || y == 0) return 0;

   if (x > 0) return y > 0 ? 1 : 4;
   
   return y > 0 ? 2 : 3;
}

Transformations between Screen and Cartesian coordinates

Let’s look at what we want to achieve with the help of the following illustration: var a => 0

function toCartesian(width, height, x, y) { 
   //[0, width] becomes [-width/2, width/2]
   const cartesianX = x - width * 0.5; 
   // [height, 0] becomes [-height/2, height/2]
   const cartesianY = height * 0.5 - y; 

   return [cartesianX, cartesianY];
}

Transforming back to the screen is just performing the inverse operation on the coordinates.

function toScreen(width, height, x, y) { 
   const cartesianX = x + width * 0.5; //  [0, width]
   const cartesianY = y - height * 0.5; // [-height, 0]

   return [cartesianX, cartesianY];
}

What about manipulating the space to have different coordinates or placing the center at a specific point on the screen instead of the center?

We will revisit this in the next article. At the moment, I believe it would only add confusion. However, with the knowledge we will gain in the next article, it will be a piece of 🍰.

Future Considerations

• Initially, we mapped the origin to the screen center, but we can now center it to any point on the screen. Why? With more knowledge in the future, we can transform elements relative to a specific point on a specific element.
• We began building our math framework with two functions that convert screen coordinates to cartesian coordinates and vice versa. In the next article, we will introduce more useful building blocks and simplify this functions.

See you in the next article fellow developer!!!