Fractals/Computer graphic techniques/2D/coordinate

Coordinate of a plane

Types

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))
• 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 :

• 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 )
• device coordinate
  • screen coordinates ( with integer values ) used for pixels of the screen or bitmap or array

Relation between these two types creates new items :

• pixel size ( pixel spacing ) related with zoom
• mapping ( converting) between screen and integer coordinates
• clipping
• rasterisation

These are not:

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

cartesian

Cartesian coordinates are used in Euclidean geometry.

• 
• 
  clipping
• 
  Window-Viewport-Transformation

Cartesian coordinate system

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

Elements

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

Homogenous Coordinates

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): $x,y,w$

Elements

• extended Euclidean plane or the real projective plane

conversions

convertion from homogeneous coordinates $(x,y,w)$ to Cartesian coordinates $(x,y)$, we simply divide each Cartesian coordinate $x$ and $y$ by $w$

$({\frac {x}{w}},{\frac {y}{w}})$

To convert the Cartesian coordinates $(x,y)$ to the homogeneous coordinates, add a third coordinate of 1 at the end :

$(x,y,1)$

The matrix operations in homogeneous coordinates

• interactive guide to homogeneous coordinates by Words and Buttons Online 
• interactive guide to homogeneous coordinates by Words and Buttons Online 
• mathworks : matrix-representation-of-geometric-transformations
• Matrix Operations for Image Processing by Paul Haeberli Nov 1993

2D Convolution Animation

Log-polar coordinates

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

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

$r=e^{\rho }$.

where $r$ is the distance to the origin.

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

$x,y\to \rho ,\theta \to log(\rho ),\theta$

$\rho ={\sqrt {(x-x_{c})^{2}+(y-y_{c})^{2}}}$
$\theta ={\frac {y-y_{c}}{x-x_{c}}}$

where

• where $\rho$ is the radial distance from the center of the image say $(x_{c},y_{c})$
• $\theta$ denotes the angle.

Application

image analysis

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. 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.

Discrete geometry

• 
  Discrete coordinate system in a circular disc given by log-polar coordinates (n = 25)
• 
  Discrete coordinate system in a circular disc that can easily be expressed in log-polar coordinates (n = 25)
• 
  Part of a Mandelbrot fractal showing spiral behaviour

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$\pi$/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

• The coordinate values in an image are always positive
• 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

// 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

See also:

• plane transformations

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 (x, y) 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

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

To Cartesian coordinates

From polar coordinates

${\begin{aligned}x&=r\cos \theta \\y&=r\sin \theta \\[5pt]{\frac {\partial (x,y)}{\partial (r,\theta )}}&={\begin{bmatrix}\cos \theta &-r\sin \theta \\\sin \theta &r\cos \theta \end{bmatrix}}\\[5pt]{\text{Jacobian}}=\det {\frac {\partial (x,y)}{\partial (r,\theta )}}&=r\end{aligned}}$

From log-polar coordinates

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

${\begin{cases}\rho =\ln \left({\sqrt {x^{2}+y^{2}}}\right),\\\theta =\operatorname {atan2} (y,\,x).\end{cases}}$

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

${\begin{cases}x=e^{\rho }\cos \theta ,\\y=e^{\rho }\sin \theta .\end{cases}}$

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

$x+iy=e^{\rho +i\theta }$

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.

${\begin{aligned}x&=e^{\rho }\cos \theta ,\\y&=e^{\rho }\sin \theta .\end{aligned}}$

By using complex numbers $(x,y)=x+iy'$, the transformation can be written as

$x+iy=e^{\rho +i\theta }$

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

From bipolar coordinates

${\begin{aligned}x&=a{\frac {\sinh \tau }{\cosh \tau -\cos \sigma }}\\y&=a{\frac {\sin \sigma }{\cosh \tau -\cos \sigma }}\end{aligned}}$

From 2-center bipolar coordinates

${\begin{aligned}x&={\frac {1}{4c}}\left(r_{1}^{2}-r_{2}^{2}\right)\\y&=\pm {\frac {1}{4c}}{\sqrt {16c^{2}r_{1}^{2}-(r_{1}^{2}-r_{2}^{2}+4c^{2})^{2}}}\end{aligned}}$

From Cesàro equation

${\begin{aligned}x&=\int \cos \left[\int \kappa (s)\,ds\right]ds\\y&=\int \sin \left[\int \kappa (s)\,ds\right]ds\end{aligned}}$

To polar coordinates

From Cartesian coordinates

${\begin{aligned}r&={\sqrt {x^{2}+y^{2}}}\\\theta '&=\arctan \left|{\frac {y}{x}}\right|\end{aligned}}$

Note: solving for $\theta '$ returns the resultant angle in the first quadrant (${\textstyle 0<\theta <{\frac {\pi }{2}}}$). To find $\theta$, one must refer to the original Cartesian coordinate, determine the quadrant in which $\theta$ lies (for example, (3,−3) [Cartesian] lies in QIV), then use the following to solve for $\theta$:

• For $\theta '$ in QI:

  $\theta =\theta '$

• For $\theta '$ in QII:

  $\theta =\pi -\theta '$

• For $\theta '$ in QIII:

  $\theta =\pi +\theta '$

• For $\theta '$ in QIV:

  $\theta =2\pi -\theta '$

The value for $\theta$ must be solved for in this manner because for all values of $\theta$, $\tan \theta$ is only defined for ${\textstyle -{\frac {\pi }{2}}<\theta <+{\frac {\pi }{2}}}$, and is periodic (with period $\pi$). 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

${\begin{aligned}r&={\sqrt {x^{2}+y^{2}}}\\\theta '&=2\arctan {\frac {y}{x+r}}\end{aligned}}$

From 2-center bipolar coordinates

${\begin{aligned}r&={\sqrt {\frac {r_{1}^{2}+r_{2}^{2}-2c^{2}}{2}}}\\\theta &=\arctan \left[{\sqrt {{\frac {8c^{2}(r_{1}^{2}+r_{2}^{2}-2c^{2})}{r_{1}^{2}-r_{2}^{2}}}-1}}\right]\end{aligned}}$

Where 2c is the distance between the poles.

To log-polar coordinates from Cartesian coordinates

${\begin{aligned}\rho &=\log {\sqrt {x^{2}+y^{2}}},\\\theta &=\arctan {\frac {y}{x}}.\end{aligned}}$

Arc-length and curvature

In Cartesian coordinates

${\begin{aligned}\kappa &={\frac {x'y''-y'x''}{({x'}^{2}+{y'}^{2})^{\frac {3}{2}}}}\\s&=\int _{a}^{t}{\sqrt {{x'}^{2}+{y'}^{2}}}\,dt\end{aligned}}$

In polar coordinates

${\begin{aligned}\kappa &={\frac {r^{2}+2{r'}^{2}-rr''}{(r^{2}+{r'}^{2})^{\frac {3}{2}}}}\\s&=\int _{a}^{\varphi }{\sqrt {r^{2}+{r'}^{2}}}\,d\varphi \end{aligned}}$

3-dimensional

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

From spherical coordinates

Main article: spherical coordinates

${\begin{aligned}x&=\rho \,\sin \theta \,\cos \varphi \\y&=\rho \,\sin \theta \,\sin \varphi \\z&=\rho \,\cos \theta \\{\frac {\partial (x,y,z)}{\partial (\rho ,\theta ,\varphi )}}&={\begin{pmatrix}\sin \theta \cos \varphi &\rho \cos \theta \cos \varphi &-\rho \sin \theta \sin \varphi \\\sin \theta \sin \varphi &\rho \cos \theta \sin \varphi &\rho \sin \theta \cos \varphi \\\cos \theta &-\rho \sin \theta &0\end{pmatrix}}\end{aligned}}$

So for the volume element:

$dx\;dy\;dz=\det {\frac {\partial (x,y,z)}{\partial (\rho ,\theta ,\varphi )}}d\rho \;d\theta \;d\varphi =\rho ^{2}\sin \theta \;d\rho \;d\theta \;d\varphi$

From cylindrical coordinates

Main article: cylindrical coordinates

${\begin{aligned}x&=r\,\cos \theta \\y&=r\,\sin \theta \\z&=z\,\\{\frac {\partial (x,y,z)}{\partial (r,\theta ,z)}}&={\begin{pmatrix}\cos \theta &-r\sin \theta &0\\\sin \theta &r\cos \theta &0\\0&0&1\end{pmatrix}}\end{aligned}}$

So for the volume element:

$dV=dx\;dy\;dz=\det {\frac {\partial (x,y,z)}{\partial (r,\theta ,z)}}dr\;d\theta \;dz=r\;dr\;d\theta \;dz$

To spherical coordinates

Main article: spherical coordinates

From Cartesian coordinates

${\begin{aligned}\rho &={\sqrt {x^{2}+y^{2}+z^{2}}}\\\theta &=\arctan \left({\frac {\sqrt {x^{2}+y^{2}}}{z}}\right)=\arccos \left({\frac {z}{\sqrt {x^{2}+y^{2}+z^{2}}}}\right)\\\varphi &=\arctan \left({\frac {y}{x}}\right)=\arccos \left({\frac {x}{\sqrt {x^{2}+y^{2}}}}\right)=\arcsin \left({\frac {y}{\sqrt {x^{2}+y^{2}}}}\right)\\{\frac {\partial \left(\rho ,\theta ,\varphi \right)}{\partial \left(x,y,z\right)}}&={\begin{pmatrix}{\frac {x}{\rho }}&{\frac {y}{\rho }}&{\frac {z}{\rho }}\\{\frac {xz}{\rho ^{2}{\sqrt {x^{2}+y^{2}}}}}&{\frac {yz}{\rho ^{2}{\sqrt {x^{2}+y^{2}}}}}&-{\frac {\sqrt {x^{2}+y^{2}}}{\rho ^{2}}}\\{\frac {-y}{x^{2}+y^{2}}}&{\frac {x}{x^{2}+y^{2}}}&0\\\end{pmatrix}}\end{aligned}}$

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

So for the element:

$d\rho \ d\theta \ d\varphi =\det {\frac {\partial (\rho ,\theta ,\varphi )}{\partial (x,y,z)}}dx\ dy\ dz={\frac {1}{{\sqrt {x^{2}+y^{2}}}{\sqrt {x^{2}+y^{2}+z^{2}}}}}dx\ dy\ dz$

From cylindrical coordinates

Main article: cylindrical coordinates

${\begin{aligned}\rho &={\sqrt {r^{2}+h^{2}}}\\\theta &=\arctan {\frac {r}{h}}\\\varphi &=\varphi \\{\frac {\partial (\rho ,\theta ,\varphi )}{\partial (r,h,\varphi )}}&={\begin{pmatrix}{\frac {r}{\sqrt {r^{2}+h^{2}}}}&{\frac {h}{\sqrt {r^{2}+h^{2}}}}&0\\{\frac {h}{r^{2}+h^{2}}}&{\frac {-r}{r^{2}+h^{2}}}&0\\0&0&1\\\end{pmatrix}}\\\det {\frac {\partial (\rho ,\theta ,\varphi )}{\partial (r,h,\varphi )}}&={\frac {1}{\sqrt {r^{2}+h^{2}}}}\end{aligned}}$

To cylindrical coordinates

From Cartesian coordinates

${\begin{aligned}r&={\sqrt {x^{2}+y^{2}}}\\\theta &=\arctan {\left({\frac {y}{x}}\right)}\\z&=z\quad \end{aligned}}$

${\frac {\partial (r,\theta ,h)}{\partial (x,y,z)}}={\begin{pmatrix}{\frac {x}{\sqrt {x^{2}+y^{2}}}}&{\frac {y}{\sqrt {x^{2}+y^{2}}}}&0\\{\frac {-y}{x^{2}+y^{2}}}&{\frac {x}{x^{2}+y^{2}}}&0\\0&0&1\end{pmatrix}}$

From spherical coordinates

${\begin{aligned}r&=\rho \sin \varphi \\h&=\rho \cos \varphi \\\theta &=\theta \\{\frac {\partial (r,h,\theta )}{\partial (\rho ,\varphi ,\theta )}}&={\begin{pmatrix}\sin \varphi &\rho \cos \varphi &0\\\cos \varphi &-\rho \sin \varphi &0\\0&0&1\\\end{pmatrix}}\\\det {\frac {\partial (r,h,\theta )}{\partial (\rho ,\varphi ,\theta )}}&=-\rho \end{aligned}}$

Arc-length, curvature and torsion from Cartesian coordinates

${\begin{aligned}s&=\int _{0}^{t}{\sqrt {{x'}^{2}+{y'}^{2}+{z'}^{2}}}\,dt\\[3pt]\kappa &={\frac {\sqrt {(z''y'-y''z')^{2}+(x''z'-z''x')^{2}+(y''x'-x''y')^{2}}}{({x'}^{2}+{y'}^{2}+{z'}^{2})^{\frac {3}{2}}}}\\[3pt]\tau &={\frac {x'''(y'z''-y''z')+y'''(x''z'-x'z'')+z'''(x'y''-x''y')}{{(x'y''-x''y')}^{2}+{(x''z'-x'z'')}^{2}+{(y'z''-y''z')}^{2}}}\end{aligned}}$

implementations

wgpu

wgpu uses the coordinate systems of D3D and Metal:

• 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

• user coordinate system
• local coordinate system
• transformation matrix

HTML canvas’ coordinate system

• 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

• 
  The three fundamental steps of a graphics pipeline
• 
  Pipeline OpenGL
• 
  the geometry steps in a graphics pipeline
• 
  3D graphics rendering pipeline

5 different coordinate systems in OpenGL:

• 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"
• the transformation pipeline: local coordinates -> world coordinates -> view coordinates -> clip coordinates -> screen coordinates "Each coordinate system serves a purpose for one or more OpenGL features"
• using
  • homogeneous coordinates
  • 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
  • matrix calculus

OpenCV

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

SVG

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
• 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

p5.js library

2D coordinate system

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

See also

• 2D plane transformations