In simple words, points that are relative to each other are called relative points.
Absolute points contain exact values.
I started using the concept of “Relative Points” while within my first tool “Curvature” (I continued using it in “Canvas Designer“!) – where I allowed end-users to get auto-generated code in relative/absolute formats. Relative points helped them move/drag shapes easily by just changing two objects: x and y. (x-y coordinating system!)
Relative points help you in complex animations like flying bird, scene movement (rolling camera), rocket fire or any other kind of animating experiment!
The process of “Relative Points”:
I get topmost x-y coordinates and then I extract all other points from those coordinates accordingly.
In case of additional complex shapes like Bezier/quadratic curves, I get topmost four points (one starting point, two control points and one ending point) and I set these values to four variables and use them accordingly. You can see it in action in my tool “Curvature“.
An absolute point specifies a unique point on the screen as measured from the top-left corner of the screen.
The difference between the two types of coordinates is their origin.
Absolute coordinates are always measured from the origin (top-left corner of the screen or a specific object), and relative coordinates are measured from the current position (or a specific position), where this might be.
Following statement draws a line using absolute coordinates:
context.moveTo(20, 20); context.lineTo(500, 500);
Following statement draws a line using relative coordinates:
var x = 20, y = 20;context.moveTo(x, y); context.lineTo( x + 480, y + 480);
Relative coordinates are using frequently in drawing closed shapes, be it’s easier to define an endpoint by its distance from the previous one.