2D computer graphics

2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models and by techniques specific to them. It may refer to the branch of computer science that comprises such techniques or to the models themselves.
File:Blit dot.gif|thumb|Raster graphic sprites and masks
2D computer graphics are mainly used in applications that were originally developed upon traditional printing and drawing technologies, such as typography, cartography, technical drawing, advertising, etc. In those applications, the two-dimensional image is not just a representation of a real-world object, but an independent artifact with added semantic value; two-dimensional models are therefore preferred, because they give more direct control of the image than 3D computer graphics.
In many domains, such as desktop publishing, engineering, and business, a description of a document based on 2D computer graphics techniques can be much smaller than the corresponding digital image—often by a factor of 1/1000 or more. This representation is also more flexible since it can be rendered at different resolutions to suit different output devices. For these reasons, documents and illustrations are often stored or transmitted as 2D graphic files.
2D computer graphics started in the 1950s, based on vector graphics devices. These were largely supplanted by raster-based devices in the following decades. The PostScript language and the X Window System protocol were landmark developments in the field.
2D graphics models may combine geometric models, digital images, text to be typeset, mathematical functions and equations, and more. These components can be modified and manipulated by two-dimensional geometric transformations such as translation, rotation, and scaling.
In object-oriented graphics, the image is described indirectly by an object endowed with a self-rendering method—a procedure that assigns colors to the image pixels by an arbitrary algorithm. Complex models can be built by combining simpler objects, in the paradigms of object-oriented programming.

Background (geometry)

In Euclidean geometry, a translation moves every point a constant distance in a specified direction. A translation can be described as a rigid motion: other rigid motions include rotations and reflections. A translation can also be interpreted as the addition of a constant vector to every point, or as shifting the origin of the coordinate system. A translation operator is an operator such that
If v is a fixed vector, then the translation T_v will work as T_v = p + v.
If T is a translation, then the image of a subset A under the function T is the translation of A by T. The translation of A by T_v is often written A + v.
In a Euclidean space, any translation is an isometry. The set of all translations forms the translation group T, which is isomorphic to the space itself, and a normal subgroup of Euclidean group E. The quotient group of E by T is isomorphic to the orthogonal group O:

Translation

Since a translation is an affine transformation but not a linear transformation, homogeneous coordinates are normally used to represent the translation operator by a matrix and thus to make it linear. Thus we write the 3-dimensional vector w = using 4 homogeneous coordinates as w =.
To translate an object by a vector v, each homogeneous vector p would need to be multiplied by this translation matrix:
As shown below, the multiplication will give the expected result:
The inverse of a translation matrix can be obtained by reversing the direction of the vector:
Similarly, the product of translation matrices is given by adding the vectors:
Because addition of vectors is commutative, multiplication of translation matrices is therefore also commutative.

Rotation

In linear algebra, a rotation matrix is a matrix that is used to perform a rotation in Euclidean space.
rotates points in the xy-Cartesian plane counterclockwise through an angle θ about the origin of the Cartesian coordinate system. To perform the rotation using a rotation matrix R, the position of each point must be represented by a column vector v, containing the coordinates of the point. A rotated vector is obtained by using the matrix multiplication Rv. Since matrix multiplication has no effect on the zero vector, rotation matrices can only be used to describe rotations about the origin of the coordinate system.
Rotation matrices provide a simple algebraic description of such rotations, and are used extensively for computations in geometry, physics, and computer graphics. In 2-dimensional space, a rotation can be simply described by an angle θ of rotation, but it can be also represented by the 4 entries of a rotation matrix with 2 rows and 2 columns. In 3-dimensional space, every rotation can be interpreted as a rotation by a given angle about a single fixed axis of rotation, and hence it can be simply described by an angle and a vector with 3 entries. However, it can also be represented by the 9 entries of a rotation matrix with 3 rows and 3 columns. The notion of rotation is not commonly used in dimensions higher than 3; there is a notion of a rotational displacement, which can be represented by a matrix, but no associated single axis or angle.
Rotation matrices are square matrices, with real entries. More specifically they can be characterized as orthogonal matrices with determinant 1:
The set of all such matrices of size n forms a group, known as the special orthogonal group.

In two dimensions

In two dimensions every rotation matrix has the following form:
This rotates column vectors by means of the following matrix multiplication:
So the coordinates of the point after rotation are:
The direction of vector rotation is counterclockwise if θ is positive, and clockwise if θ is negative.

Non-standard orientation of the coordinate system

If a standard right-handed Cartesian coordinate system is used, with the x axis to the right and the y axis up, the rotation R is counterclockwise. If a left-handed Cartesian coordinate system is used, with x directed to the right but y directed down, R is clockwise. Such non-standard orientations are rarely used in mathematics but are common in 2D computer graphics, which often have the origin in the top left corner and the y-axis down the screen or page.
See below for other alternative conventions which may change the sense of the rotation produced by a rotation matrix.

Common rotations

Particularly useful are the matrices for 90° and 180° rotations:

Scaling

In Euclidean geometry, uniform scaling is a linear transformation that enlarges or shrinks objects by a scale factor that is the same in all directions. The result of uniform scaling is similar to the original. A scale factor of 1 is normally allowed, so that congruent shapes are also classed as similar.
More general is scaling with a separate scale factor for each axis direction. Non-uniform scaling is obtained when at least one of the scaling factors is different from the others; a special case is directional scaling or stretching. Non-uniform scaling changes the shape of the object; e.g. a square may change into a rectangle, or into a parallelogram if the sides of the square are not parallel to the scaling axes.
A scaling can be represented by a scaling matrix. To scale an object by a vector v =, each point p = would need to be multiplied with this scaling matrix:
As shown below, the multiplication will give the expected result:
Such a scaling changes the diameter of an object by a factor between the scale factors, the area by a factor between the smallest and the largest product of two scale factors, and the volume by the product of all three.
The scaling is uniform if and only if the scaling factors are equal. If all except one of the scale factors are equal to 1, we have directional scaling.
In the case where v_x = v_y = v_z = k, the scaling is also called an enlargement or dilation by a factor k, increasing the area by a factor of k² and the volume by a factor of k³.
Scaling in the most general sense is any affine transformation with a diagonalizable matrix. It includes the case that the three directions of scaling are not perpendicular. It includes also the case that one or more scale factors are equal to zero, and the case of one or more negative scale factors. The latter corresponds to a combination of scaling proper and a kind of reflection: along lines in a particular direction we take the reflection in the point of intersection with a plane that need not be perpendicular; therefore it is more general than ordinary reflection in the plane.

Using homogeneous coordinates

In projective geometry, often used in computer graphics, points are represented using homogeneous coordinates. To scale an object by a vector v =, each homogeneous coordinate vector p = would need to be multiplied with this projective transformation matrix:
As shown below, the multiplication will give the expected result:
Since the last component of a homogeneous coordinate can be viewed as the denominator of the other three components, a uniform scaling by a common factor s can be accomplished by using this scaling matrix:
For each vector p = we would have
which would be homogenized to

Techniques

Direct painting

A convenient way to create a complex image is to start with a blank "canvas" raster map filled with some uniform background color and then "draw", "paint" or "paste" simple patches of color onto it, in an appropriate order. In particular the canvas may be the frame buffer for a computer display.
Some programs will set the pixel colors directly, but most will rely on some 2D graphics library or the machine's graphics card, which usually implement the following operations:

paste a given image at a specified offset onto the canvas;
write a string of characters with a specified font, at a given position and angle;
paint a simple geometric shape, such as a triangle defined by three corners, or a circle with given center and radius;
draw a line segment, arc, or simple curve with a virtual pen of given width.