Tag Archives: Relative Points

Relative Points vs. Absolute Points

Muaz Khan Blog, , , , ,

Relative Points:

In simple words, points that are relative to each other are called relative points.

 Absolute 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!)

My all tools contain this feature and personally I use it in my real experiments and projects, too.

Relative points help you in complex animations like flying bird, scene movement (rolling camera), rocket fire or any other kind of animating experiment!

See an example: http://muaz-khan.github.com/Everything/Canvas/Experiments/Flying-Bird/

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.