Send
Close Add comments:
(status displays here)
Got it! This site "www.robinsnyder.com" uses cookies. You consent to this by clicking on "Got it!" or by continuing to use this website. Note: This appears on each machine/browser from which this site is accessed.
Graphics coordinate systems
1. Graphics coordinate systems
A major consideration when programming graphics and visualizations is the coordinate system used.
The main part of this is the location of the origin.
The horizontal axis always increases going to the right.
The vertical axis, however, may increase going up or going down.
The next part is the measurement units.
Graphics systems use a canvas in two dimensions.
To use a canvas, you should be familiar with the Cartesian coordinate system, named for Rene Descartes in the 1600's.
2. The canvas
The canvas is initially blank. Dimensions are, by default, in pixels (i.e., dots on the screen).
The maximum values in each direction depend on the size of the window.
Note: Some graphics systems, such as Post Script, have the point
(0,0) in the lower left rather than the upper left.
The upper-left corner of the canvas is the position (x=0, y=0), where
x is the horizontal dimension (positive to the right), and
y is the vertical dimension (positive going down).
The notation for a point is (x,y), such as (0,0).
3. Measurement units
There are various ways to "measure" the size of a graphic or image.
A pixel, for "picture element", is a dot on the screen.
4. Dots per inch
The term
DPI (Dots Per Inch) is commonly used for measurement. However, most monitors/systems do not provide a way to reliably get the DPI. This is a perversive problem and there are many ideas and "
tricks" on the Internet to get around this issue.
By convention,
72 dpi is
1 inch.
5. CSS
6. Image presentation
In presenting images in a number of contexts (monitor, mobile device, tablet, etc.) I have found that the best way is to determine the desired height of a row of text or base font in terms of rows, columns, pixels, etc.
All image heights are then expressed (in my system) as a desired number of rows. In a mobile or web page setting, JavaScript can then adjust all text and images to appear as desired.
In documents (docx) and presentations (pptx) the same principle can be used when generating the docx, pptx, etc.
7. End of page
