Fractals/Computer graphic techniques/2D/coordinate

Coordinate of a plane

Types edit

general types

  • linear/nonlinear ( scale of the axis )
  • dimensions : 1D, 2D, 3D, ...
  • orientation for 3D:
    • Handedness ( Right Hand Coordinate System (RHS) or Left Hand Coordinate System (LHS))[1]
  • origin location
    • top-left origin coordinate system ( the origin is the upper-left corner of the screen and x and y go positive to the right and down)
    • bottom-left origin coordinate system ( The origin is the lower-left corner of the window or client area)
    • middle = center origin coordinate system ( The 0,0 coordinate is in the middle. x increases from left to right. y increases from bottom to top.)

There are different 2D coordinate systems :[2]

  • cartesian coordinates ( rectangular, orthogonal)
  • elliptic coordinate ( Curvilinear )
  • parabolic
  • polar
  • Log-polar coordinates
  • Bipolar coordinates
  • normalized homogeneous coordinates

types in computer graphic

  • world coordinates ( with floating point values )[3]
  • device coordinate[4]
    • screen coordinates ( with integer values ) used for pixels of the screen or bitmap or array

Relation between these two types creates new items :

  • pixel[5] size ( pixel spacing ) related with zoom
  • mapping ( converting) between screen and integer coordinates[6][7]
  • clipping
  • rasterisation

These are not:

  • geospatial coordinates
    • geographic coordinate system (GCS)
    • spatial reference system (SRS) or coordinate reference system (CRS)

cartesian edit

Cartesian coordinates are used in Euclidean geometry.

Cartesian coordinate system

  • 1D, 2D, 3D, ...
  • linear scale on each axis ( preserve the shape )
  • coordinate
    • orthogonal ( rectangular)
    • polar


  • origin (0,0) and it's location
  • units
  • orientation
  • width, height

Homogenous Coordinates edit

Homogeneous coordinates or projective coordinates, introduced by August Ferdinand Möbius in 1827 are a system of coordinates used in projective geometry.

Rational Bézier curve – polynomial curve defined in homogeneous coordinates (blue) and its projection on plane – rational curve (red)

They have the advantage that:

  • the coordinates of points, including points at infinity, can be represented using finite coordinates
  • formulas involving homogeneous coordinates are often simpler and more symmetric than their Cartesian counterparts
  • Homogeneous coordinates have a range of applications, including computer graphics and 3D computer vision, where they allow affine transformations and, in general, projective transformations to be easily represented by a matrix
  • The use of normalized homogeneous coordinates avoids overflow and underflow errors in the iteration of rational functions

In homogeneous coordinates a point on a 2D plane is a 3-tuple ( a finite ordered list (sequence) of 3 numbers)[8]:  


  • extended Euclidean plane or the real projective plane

conversions edit

convertion from homogeneous coordinates   to Cartesian coordinates  , we simply divide each Cartesian coordinate   and   by  [9]


To convert the Cartesian coordinates   to the homogeneous coordinates, add a third coordinate of 1 at the end :


The matrix operations in homogeneous coordinates edit

2D Convolution Animation

Log-polar coordinates edit

In mathematics, log-polar coordinates (or logarithmic polar coordinates) is a coordinate system in two dimensions, where a point is identified by two numbers:

  • one for the logarithm of the distance to a certain point
  • one for an angle

Log-polar coordinates are closely connected to polar coordinates, which are usually used to describe domains in the plane with some sort of rotational symmetry. In areas like harmonic and complex analysis, the log-polar coordinates are more canonical than polar coordinates. See also Exponential mapping

Definition edit

Log-polar coordinates in the plane consist of a pair of real numbers (ρ,θ), where ρ is the logarithm of the distance between a given point and the origin and θ is the angle between a line of reference (the x-axis) and the line through the origin and the point. The angular coordinate is the same as for polar coordinates, while the radial coordinate is transformed according to the rule


where   is the distance to the origin.

Log polar mapping: the approximate mapping from Cartesian space ( x,y) to polar space or (ρ,θ) space[10]



  • where   is the radial distance from the center of the image say  
  •   denotes the angle.

Application edit

image analysis edit

Already at the end of the 1970s, applications for the discrete spiral coordinate system were given in image analysis ( image registration ) . To represent an image in this coordinate system rather than in Cartesian coordinates, gives computational advantages when rotating or zooming in an image. Also, the photo receptors in the retina in the human eye are distributed in a way that has big similarities with the spiral coordinate system.[11] It can also be found in the Mandelbrot fractal (see picture to the right).

Log-polar coordinates can also be used to construct fast methods for the Radon transform and its inverse.[12]

Discrete geometry edit

In order to solve a PDE numerically in a domain, a discrete coordinate system must be introduced in this domain. If the domain has rotational symmetry and you want a grid consisting of rectangles, polar coordinates are a poor choice, since in the center of the circle it gives rise to triangles rather than rectangles.

However, this can be remedied by introducing log-polar coordinates in the following way:

  • Divide the plane into a grid of squares with side length 2 /n, where n is a positive integer
  • Use the complex exponential function to create a log-polar grid in the plane. The left half-plane is then mapped onto the unit disc, with the number of radii equal to n. It can be even more advantageous to instead map the diagonals in these squares, which gives a discrete coordinate system in the unit disc consisting of spirals, see the figure to the right.

screen or image or device coordinate edit

  • The coordinate values in an image are always positive[13]
  • The origin = point 90,0) is located at the upper left corner of the screen
  • The coordinates are integer values
  • the coordinate system on the screen is left-handed, i.e. the x coordinate increases from left to right and the y coordinate increases from top to bottom.

Raster 2D graphic

world coordinate edit

// from screen to world coordinate ; linear mapping
// uses global cons
double GiveZx (int ix)
  return (ZxMin + ix * PixelWidth);

// uses globaal cons
double GiveZy (int iy)
  return (ZyMax - iy * PixelHeight);
}				// reverse y axis

complex double GiveZ (int ix, int iy)
  double Zx = GiveZx (ix);
  double Zy = GiveZy (iy);

  return Zx + Zy * I;


  // modified code using center and radius to scan the plane 
  int height = 720;
  int width = 1280;
  double dWidth;
  double dRadius = 1.5;
  double complex center= -0.75*I;
  double complex c;
  int i,j;

  double width2; // = width/2.0
  double height2; // = height/2.0
  width2 = width /2.0;
  height2 = height/2.0;

complex double coordinate(int i, int j, int width, int height, complex double center, double radius) {
  double x = (i - width /2.0) / (height/2.0);
  double y = (j - height/2.0) / (height/2.0);
  complex double c = center + radius * (x - I * y);
  return c;

for ( j = 0; j < height; ++j) {
    for ( i = 0; i < width; ++i) {
      c = coordinate(i, j, width, height, center, dRadius);
      // do smth 

or simply :

 double pixel_spacing = radius / (height / 2.0);
 complex double c = center + pixel_spacing * (x-width/2.0 + I * (y-height/2.0));

coordinate transformations edit

See also:

There are often many different possible coordinate systems for describing geometrical figures. The relationship between different systems is described by coordinate transformations, which give formulas for the coordinates in one system in terms of the coordinates in another system. For example, in the plane, if Cartesian coordinates (xy) and polar coordinates (rθ) have the same origin, and the polar axis is the positive x axis, then the coordinate transformation from polar to Cartesian coordinates is given by x = r cosθ and y = r sinθ.

With every bijection from the space to itself two coordinate transformations can be associated:

  • Such that the new coordinates of the image of each point are the same as the old coordinates of the original point (the formulas for the mapping are the inverse of those for the coordinate transformation)
  • Such that the old coordinates of the image of each point are the same as the new coordinates of the original point (the formulas for the mapping are the same as those for the coordinate transformation)

For example, in 1D, if the mapping is a translation of 3 to the right, the first moves the origin from 0 to 3, so that the coordinate of each point becomes 3 less, while the second moves the origin from 0 to −3, so that the coordinate of each point becomes 3 more. This is a list of some of the most commonly used coordinate transformations.

2-dimensional edit

Let (x, y) be the standard Cartesian coordinates, and (r, θ) the standard polar coordinates.

To Cartesian coordinates edit

From polar coordinates edit


From log-polar coordinates edit

The formulas for transformation from Cartesian coordinates to log-polar coordinates are given by


and the formulas for transformation from log-polar to Cartesian coordinates are


By using complex numbers (xy) = x + iy, the latter transformation can be written as


i.e. the complex exponential function.

From this follows that basic equations in harmonic and complex analysis will have the same simple form as in Cartesian coordinates. This is not the case for polar coordinates.


By using complex numbers  , the transformation can be written as


That is, it is given by the complex exponential function.

From bipolar coordinates edit


From 2-center bipolar coordinates edit


From Cesàro equation edit


To polar coordinates edit

From Cartesian coordinates edit


Note: solving for   returns the resultant angle in the first quadrant ( ). To find  , one must refer to the original Cartesian coordinate, determine the quadrant in which   lies (for example, (3,−3) [Cartesian] lies in QIV), then use the following to solve for  :

  • For   in QI:
  • For   in QII:
  • For   in QIII:
  • For   in QIV:

The value for   must be solved for in this manner because for all values of  ,   is only defined for  , and is periodic (with period  ). This means that the inverse function will only give values in the domain of the function, but restricted to a single period. Hence, the range of the inverse function is only half a full circle.

Note that one can also use


From 2-center bipolar coordinates edit


Where 2c is the distance between the poles.

To log-polar coordinates from Cartesian coordinates edit


Arc-length and curvature edit

In Cartesian coordinates edit


In polar coordinates edit


3-dimensional edit

Let (x, y, z) be the standard Cartesian coordinates, and (ρ, θ, φ) the spherical coordinates, with θ the angle measured away from the +Z axis (as [1], see conventions in spherical coordinates). As φ has a range of 360° the same considerations as in polar (2 dimensional) coordinates apply whenever an arctangent of it is taken. θ has a range of 180°, running from 0° to 180°, and does not pose any problem when calculated from an arccosine, but beware for an arctangent.

If, in the alternative definition, θ is chosen to run from −90° to +90°, in opposite direction of the earlier definition, it can be found uniquely from an arcsine, but beware of an arccotangent. In this case in all formulas below all arguments in θ should have sine and cosine exchanged, and as derivative also a plus and minus exchanged.

All divisions by zero result in special cases of being directions along one of the main axes and are in practice most easily solved by observation.

To Cartesian coordinates edit

From spherical coordinates edit


So for the volume element:


From cylindrical coordinates edit


So for the volume element:


To spherical coordinates edit

From Cartesian coordinates edit


See also the article on atan2 for how to elegantly handle some edge cases.

So for the element:


From cylindrical coordinates edit


To cylindrical coordinates edit

From Cartesian coordinates edit


From spherical coordinates edit


Arc-length, curvature and torsion from Cartesian coordinates edit


implementations edit

wgpu edit

wgpu uses the coordinate systems of D3D and Metal:[14]

  • Render: center is 0, and radius is 1, so right upper is (1,1) and left lower point is ( -1,-1)
  • Texture: 0 is left upper point, right upper is (1,0), left lower is (0,1)

CSS box model for HTML edit

  • user coordinate system
  • local coordinate system
  • transformation matrix

HTML canvas’ coordinate system [15]

  • s a two-dimensional grid
  • x increases from left to right: from x=0 (far left) to x=+960 (far right)
  • y decreases from bottom to top: goes from y=+720 (bottom) to y=0 (top).
  • The origin = 0,0 coordinate is in the top left ( The upper-left corner of the canvas )

OpenGL edit

5 different coordinate systems in OpenGL:[16]

  • Local or Object
  • World
  • View or Eye
  • Clip
  • Screen

OpenGl :

  • "OpenGL is right handed in object space and world space, But in window space (aka screen space) we are suddenly left handed"[17]
  • the transformation pipeline: local coordinates -> world coordinates -> view coordinates -> clip coordinates -> screen coordinates[18] "Each coordinate system serves a purpose for one or more OpenGL features"[19]
  • using
    • homogeneous coordinates[20]
    • Normalized Device Coordinates ( NDC) only coordinates (x,y,z) : -1 ≤ x,y,z ≤ +1. Any coordinates that are outside this range will be discarded or clipped = won't be visible on screen[21]
    • matrix calculus

OpenCV edit

  • The origin of the OpenCV image coordinate system is at the top-left corner of the image

SVG edit

SVG coordinate systems

  • The default coordinate system in SVG is much the same as in HTML
  • canvas the space or area where all SVG elements are drawn[22]
  • viewport defines a drawing region characterized by size (width, height), and an origin, measured in abstract user units. Term SVG viewport is distinct from the "viewport" term used in CSS
  • viewBox[23]

p5.js library edit

2D coordinate system[24]

  • canvas
  • origin ( 0,0) it's location

See also edit

References edit

  1. Coordinate Systems by Dr. John T. Bell
  2. wikipedia : Coordinate_system
  3. computergraphics stackexchange question: what-is-the-difference-between-world-coordinate-viewing-coordinate-and-device-c
  4. javatpoint : computer-graphics-window
  5. A Pixel Is Not A Little Square by Alvy Ray Smith
  6. How to convert world to screen coordinates and vice versa
  7. How to transform 2D world to screen coordinates OpenGL
  8. An interactive guide to homogeneous coordinates by Words and Buttons Online — a collection of interactive
  9. Homogeneous Coordinates by Yasen Hu
  10. Image Registration Using Log Polar Transform and Phase Correlation to Recover Higher Scale JIGNESH NATVARLAL SARVAIYA, Dr. Suprava Patnaik, Kajal Kothari JPRR Vol 7, No 1 (2012); doi:10.13176/11.355
  11. Weiman, Chaikin, Logarithmic Spiral Grids for Image Processing and Display, Computer Graphics and Image Processing 11, 197–226 (1979).
  12. Andersson, Fredrik, Fast Inversion of the Radon Transform Using Log-polar Coordinates and Partial Back-Projections, SIAM J. Appl. Math. 65, 818–837 (2005).
  13. ronny restrepo : point cloud coordinates
  14. raphlinus: wgpu
  15. w3schools : canvas coordinates
  16. learnopengl : Coordinate-Systems
  17. stackoverflow question: is-opengl-coordinate-system-left-handed-or-right-handed
  18. learnopengl : Coordinate-Systems
  19. The OpenGL transformation pipeline by Paul Martz
  20. Homogeneous Coordinates by Song Ho Ahn
  21. Python & OpenGL for Scientific Visualization Copyright (c) 2018 - Nicolas P. Rougier
  22. SVG Coordinate Systems and Units by ASPOSE
  23. svg-coordinate-systems by Sara Soueidan
  24. 2D coordinate systems University of London, Goldsmiths, University of London