Movatterモバイル変換

[0]ホーム
URL:

Jump to content
WikipediaThe Free Encyclopedia
Search

2D computer graphics

From Wikipedia, the free encyclopedia
Computer-based generation of digital images
This article has multiple issues. Please helpimprove it or discuss these issues on thetalk page.(Learn how and when to remove these messages)
icon
This articleneeds additional citations forverification. Please helpimprove this article byadding citations to reliable sources. Unsourced material may be challenged and removed.
Find sources: "2D computer graphics" – news ·newspapers ·books ·scholar ·JSTOR(December 2009) (Learn how and when to remove this message)
This articlemay containoriginal research. Pleaseimprove it byverifying the claims made and addinginline citations. Statements consisting only of original research should be removed.(July 2019) (Learn how and when to remove this message)
(Learn how and when to remove this message)

2D computer graphics is thecomputer-based generation ofdigital images—mostly from two-dimensional models (such as2D geometric models, text, and digital images) and by techniques specific to them. It may refer to the branch ofcomputer science that comprises such techniques or to the models themselves.

Raster graphicsprites (left) and masks

2D computer graphics are mainly used in applications that were originally developed upon traditionalprinting anddrawing technologies, such astypography,cartography,technical drawing,advertising, etc. In those applications, the two-dimensionalimage 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 than3D computer graphics (whose approach is more akin tophotography than to typography).

In many domains, such asdesktop publishing,engineering, andbusiness, 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 berendered at differentresolutions to suit differentoutput devices. For these reasons, documents and illustrations are often stored or transmitted as2D graphic files.

2D computer graphics started in the 1950s, based onvector graphics devices. These were largely supplanted byraster-based devices in the following decades. ThePostScript language and theX Window System protocol were landmark developments in the field.

2D graphics models may combinegeometric models (also calledvector graphics), digital images (also calledraster graphics), text to betypeset (defined by content,font style and size, color, position, and orientation), mathematicalfunctions andequations, and more. These components can be modified and manipulated by two-dimensionalgeometric transformations such astranslation,rotation, andscaling.Inobject-oriented graphics, the image is described indirectly by anobject endowed with a self-renderingmethod—a procedure that assigns colors to the imagepixels by an arbitrary algorithm. Complex models can be built by combining simpler objects, in theparadigms ofobject-oriented programming.

Background (geometry)

[edit]
icon
This sectionduplicates the scope of other articles, specificallyTranslation (geometry) andRotation (geometry). Pleasediscuss this issue and help introduce asummary style to the section by replacing the section with a link and a summary or bysplitting the content into a new article.(May 2022)
Further information:Rotations and reflections in two dimensions
A translation moves every point of a figure or a space by the same amount in a given direction.

InEuclidean geometry, atranslation (geometry) moves every point a constant distance in a specified direction. A translation can be described as arigid motion: other rigid motions include rotations and reflections. A translation can also be interpreted as the addition of a constantvector to every point, or as shifting theorigin of thecoordinate system. Atranslation operator is anoperatorTδ{\displaystyle T_{\mathbf {\delta } }} such thatTδf(v)=f(v+δ).{\displaystyle T_{\mathbf {\delta } }f(\mathbf {v} )=f(\mathbf {v} +\mathbf {\delta } ).}

Ifv is a fixed vector, then the translationTv will work asTv(p) =p +v.

IfT is a translation, then theimage of a subsetA under thefunctionT is thetranslation ofA byT. The translation ofA byTv is often writtenA +v.

In aEuclidean space, any translation is anisometry. The set of all translations forms the translation groupT, which is isomorphic to the space itself, and anormal subgroup ofEuclidean groupE(n ). Thequotient group ofE(n ) byT is isomorphic to theorthogonal groupO(n ):

E(n )/ T ≅O(n ).

Translation

[edit]

Since a translation is anaffine transformation but not alinear transformation,homogeneous coordinates are normally used to represent the translation operator by amatrix and thus to make it linear. Thus we write the 3-dimensional vectorw = (wx,wy,wz) using 4 homogeneous coordinates asw = (wx,wy,wz, 1).[1]

To translate an object by avectorv, each homogeneous vectorp (written in homogeneous coordinates) would need to be multiplied by thistranslation matrix:

Tv=[100vx010vy001vz0001]{\displaystyle T_{\mathbf {v} }={\begin{bmatrix}1&0&0&v_{x}\\0&1&0&v_{y}\\0&0&1&v_{z}\\0&0&0&1\end{bmatrix}}}

As shown below, the multiplication will give the expected result:

Tvp=[100vx010vy001vz0001][pxpypz1]=[px+vxpy+vypz+vz1]=p+v{\displaystyle T_{\mathbf {v} }\mathbf {p} ={\begin{bmatrix}1&0&0&v_{x}\\0&1&0&v_{y}\\0&0&1&v_{z}\\0&0&0&1\end{bmatrix}}{\begin{bmatrix}p_{x}\\p_{y}\\p_{z}\\1\end{bmatrix}}={\begin{bmatrix}p_{x}+v_{x}\\p_{y}+v_{y}\\p_{z}+v_{z}\\1\end{bmatrix}}=\mathbf {p} +\mathbf {v} }

The inverse of a translation matrix can be obtained by reversing the direction of the vector:

Tv−1=T−v.{\displaystyle T_{\mathbf {v} }^{-1}=T_{-\mathbf {v} }.\!}

Similarly, the product of translation matrices is given by adding the vectors:

TuTv=Tu+v.{\displaystyle T_{\mathbf {u} }T_{\mathbf {v} }=T_{\mathbf {u} +\mathbf {v} }.\!}

Because addition of vectors iscommutative, multiplication of translation matrices is therefore also commutative (unlike multiplication of arbitrary matrices).

Rotation

[edit]

Inlinear algebra, arotation matrix is amatrix that is used to perform arotation inEuclidean space.

R=[cos⁡θ−sin⁡θsin⁡θcos⁡θ]{\displaystyle R={\begin{bmatrix}\cos \theta &-\sin \theta \\\sin \theta &\cos \theta \\\end{bmatrix}}}

rotates points in thexy-Cartesian plane counterclockwise through an angleθ about the origin of theCartesian coordinate system. To perform the rotation using a rotation matrixR, the position of each point must be represented by acolumn vectorv, containing the coordinates of the point. A rotated vector is obtained by using thematrix multiplicationRv. Since matrix multiplication has no effect on the zero vector (i.e., on the coordinates of the origin), 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 ingeometry,physics, andcomputer graphics. In 2-dimensional space, a rotation can be simply described by anangleθ 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 (seeEuler's rotation theorem), and hence it can be simply described byan 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 arotational displacement, which can be represented by a matrix, but no associated single axis or angle.

Rotation matrices aresquare matrices, withreal entries. More specifically they can be characterized asorthogonal matrices withdeterminant 1:

RT=R−1,detR=1{\displaystyle R^{T}=R^{-1},\det R=1\,}.

Theset of all such matrices of sizen forms agroup, known as thespecial orthogonal groupSO(n).

In two dimensions

[edit]
A counterclockwise rotation of a vector through angleθ. The vector is initially aligned with the x-axis.

In two dimensions every rotation matrix has the following form:

R(θ)=[cos⁡θ−sin⁡θsin⁡θcos⁡θ]{\displaystyle R(\theta )={\begin{bmatrix}\cos \theta &-\sin \theta \\\sin \theta &\cos \theta \\\end{bmatrix}}}.

This rotatescolumn vectors by means of the followingmatrix multiplication:

[x′y′]=[cos⁡θ−sin⁡θsin⁡θcos⁡θ][xy]{\displaystyle {\begin{bmatrix}x'\\y'\\\end{bmatrix}}={\begin{bmatrix}\cos \theta &-\sin \theta \\\sin \theta &\cos \theta \\\end{bmatrix}}{\begin{bmatrix}x\\y\\\end{bmatrix}}}.

So the coordinates (x',y') of the point (x,y) after rotation are:

x′=xcos⁡θ−ysin⁡θ{\displaystyle x'=x\cos \theta -y\sin \theta \,},
y′=xsin⁡θ+ycos⁡θ{\displaystyle y'=x\sin \theta +y\cos \theta \,}.

The direction of vector rotation is counterclockwise if θ is positive (e.g. 90°), and clockwise if θ is negative (e.g. -90°).

R(−θ)=[cos⁡θsin⁡θ−sin⁡θcos⁡θ]{\displaystyle R(-\theta )={\begin{bmatrix}\cos \theta &\sin \theta \\-\sin \theta &\cos \theta \\\end{bmatrix}}\,}.

Non-standard orientation of the coordinate system

[edit]
A rotation through angleθ with non-standard axes

If a standardright-handedCartesian coordinate system is used, with thex axis to the right and they axis up, the rotation R(θ) is counterclockwise. If a left-handed Cartesian coordinate system is used, withx directed to the right buty 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 they-axis down the screen or page.[2]

Seebelow for other alternative conventions which may change the sense of the rotation produced by arotation matrix.

Common rotations

[edit]

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

R(90∘)=[0−110]{\displaystyle R(90^{\circ })={\begin{bmatrix}0&-1\\[3pt]1&0\\\end{bmatrix}}} (90° counterclockwise rotation)
R(180∘)=[−100−1]{\displaystyle R(180^{\circ })={\begin{bmatrix}-1&0\\[3pt]0&-1\\\end{bmatrix}}} (180° rotation in either direction – a half-turn)
R(270∘)=[01−10]{\displaystyle R(270^{\circ })={\begin{bmatrix}0&1\\[3pt]-1&0\\\end{bmatrix}}} (270° counterclockwise rotation, the same as a 90° clockwise rotation)

Scaling

[edit]
icon
This articleneeds additional citations forverification. Please helpimprove this article byadding citations to reliable sources. Unsourced material may be challenged and removed.
Find sources: "2D computer graphics" – news ·newspapers ·books ·scholar ·JSTOR(April 2008) (Learn how and when to remove this message)

InEuclidean geometry,uniform scaling (isotropic scaling,[3]homogeneous dilation,homothety) is alinear transformation that enlarges (increases) or shrinks (diminishes) objects by ascale factor that is the same in all directions. The result of uniform scaling issimilar (in the geometric sense) to the original. A scale factor of 1 is normally allowed, so that congruent shapes are also classed as similar. (Some school text books specifically exclude this possibility, just as some exclude squares from being rectangles or circles from being ellipses.)

More general isscaling with a separate scale factor for each axis direction.Non-uniform scaling (anisotropic scaling,inhomogeneous dilation) is obtained when at least one of the scaling factors is different from the others; a special case isdirectional scaling orstretching (in one direction). Non-uniform scaling changes theshape 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 (the angles between lines parallel to the axes are preserved, but not all angles).

A scaling can be represented by a scaling matrix. To scale an object by avectorv = (vx, vy, vz), each pointp = (px, py, pz) would need to be multiplied with thisscaling matrix:

Sv=[vx000vy000vz].{\displaystyle S_{v}={\begin{bmatrix}v_{x}&0&0\\0&v_{y}&0\\0&0&v_{z}\\\end{bmatrix}}.}

As shown below, the multiplication will give the expected result:

Svp=[vx000vy000vz][pxpypz]=[vxpxvypyvzpz].{\displaystyle S_{v}p={\begin{bmatrix}v_{x}&0&0\\0&v_{y}&0\\0&0&v_{z}\\\end{bmatrix}}{\begin{bmatrix}p_{x}\\p_{y}\\p_{z}\end{bmatrix}}={\begin{bmatrix}v_{x}p_{x}\\v_{y}p_{y}\\v_{z}p_{z}\end{bmatrix}}.}

Such a scaling changes thediameter of an object by a factor between the scale factors, thearea by a factor between the smallest and the largest product of two scale factors, and thevolume by the product of all three.

The scaling is uniformif and only if the scaling factors are equal (vx = vy = vz). If all except one of the scale factors are equal to 1, we have directional scaling.

In the case wherevx = vy = vz = k, the scaling is also called anenlargement ordilation by a factor k, increasing the area by a factor of k2 and the volume by a factor of k3.

Scaling in the most general sense is anyaffine transformation with adiagonalizable 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 (projection), 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

[edit]

Inprojective geometry, often used incomputer graphics, points are represented usinghomogeneous coordinates. To scale an object by avectorv = (vx, vy, vz), each homogeneous coordinate vectorp = (px, py, pz, 1) would need to be multiplied with thisprojective transformation matrix:

Sv=[vx0000vy0000vz00001].{\displaystyle S_{v}={\begin{bmatrix}v_{x}&0&0&0\\0&v_{y}&0&0\\0&0&v_{z}&0\\0&0&0&1\end{bmatrix}}.}

As shown below, the multiplication will give the expected result:

Svp=[vx0000vy0000vz00001][pxpypz1]=[vxpxvypyvzpz1].{\displaystyle S_{v}p={\begin{bmatrix}v_{x}&0&0&0\\0&v_{y}&0&0\\0&0&v_{z}&0\\0&0&0&1\end{bmatrix}}{\begin{bmatrix}p_{x}\\p_{y}\\p_{z}\\1\end{bmatrix}}={\begin{bmatrix}v_{x}p_{x}\\v_{y}p_{y}\\v_{z}p_{z}\\1\end{bmatrix}}.}

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 factors (uniform scaling) can be accomplished by using this scaling matrix:

Sv=[1000010000100001s].{\displaystyle S_{v}={\begin{bmatrix}1&0&0&0\\0&1&0&0\\0&0&1&0\\0&0&0&{\frac {1}{s}}\end{bmatrix}}.}

For each vectorp = (px, py, pz, 1) we would have

Svp=[1000010000100001s][pxpypz1]=[pxpypz1s]{\displaystyle S_{v}p={\begin{bmatrix}1&0&0&0\\0&1&0&0\\0&0&1&0\\0&0&0&{\frac {1}{s}}\end{bmatrix}}{\begin{bmatrix}p_{x}\\p_{y}\\p_{z}\\1\end{bmatrix}}={\begin{bmatrix}p_{x}\\p_{y}\\p_{z}\\{\frac {1}{s}}\end{bmatrix}}}

which would be homogenized to

[spxspyspz1].{\displaystyle {\begin{bmatrix}sp_{x}\\sp_{y}\\sp_{z}\\1\end{bmatrix}}.}

Techniques

[edit]

Direct painting

[edit]

A convenient way to create a complex image is to start with a blank "canvas"raster map (an array ofpixels, also known as abitmap) filled with some uniformbackground color and then "draw", "paint" or "paste" simple patches of color onto it, in an appropriate order. In particular the canvas may be theframe buffer for acomputer display.

Some programs will set the pixel colors directly, but most will rely on some 2Dgraphics library or the machine'sgraphics card, which usually implement the following operations:

  • paste a givenimage at a specified offset onto the canvas;
  • write a string of characters with a specified font, at a given position and angle;
  • paint a simplegeometric shape, such as atriangle defined by three corners, or acircle with given center and radius;
  • draw aline segment,arc, or simple curve with avirtual pen of given width.

Extended color models

[edit]

Text, shapes and lines are rendered with a client-specified color. Many libraries and cards providecolor gradients, which are handy for the generation of smoothly-varying backgrounds, shadow effects, etc. (See alsoGouraud shading). The pixel colors can also be taken from a texture, e.g. adigital image (thus emulating rub-onscreentones and the fabledchecker paint which used to be available only incartoons).

Painting apixel with a given color usually replaces its previous color. However, many systems support painting withtransparent andtranslucent colors, which only modify the previous pixel values. The two colors may also be combined in more complex ways, e.g. by computing theirbitwiseexclusive or. This technique is known asinverting color orcolor inversion, and is often used ingraphical user interfaces for highlighting, rubber-band drawing, and other volatile painting—since re-painting the same shapes with the same color will restore the original pixel values.

Layers

[edit]
A 2D animated charactercomposited with 3D backgrounds using layers
Main article:Layers (digital image editing)

The models used in 2D computer graphics usually do not provide for three-dimensional shapes, or three-dimensional optical phenomena such as lighting,shadows,reflection,refraction, etc. However, they usually can model multiplelayers (conceptually of ink, paper, or film; opaque,translucent, ortransparent—stacked in a specific order. The ordering is usually defined by a single number (the layer'sdepth, or distance from the viewer).

Layered models are sometimes called "21⁄2-D computer graphics". They make it possible to mimic traditional drafting and printing techniques based on film and paper, such as cutting and pasting; and allow the user to edit any layer without affecting the others. For these reasons, they are used in mostgraphics editors. Layered models also allow betterspatial anti-aliasing of complex drawings and provide a sound model for certain techniques such asmitered joints and theeven–odd rule.

Layered models are also used to allow the user to suppress unwanted information when viewing or printing a document, e.g. roads or railways from amap, certain process layers from anintegrated circuit diagram, or hand annotations from a business letter.

In a layer-based model, the target image is produced by "painting" or "pasting" each layer, in order of decreasing depth, on the virtual canvas. Conceptually, each layer is firstrendered on its own, yielding adigital image with the desiredresolution which is then painted over the canvas, pixel by pixel. Fully transparent parts of a layer need not be rendered, of course. The rendering and painting may be done in parallel, i.e., each layer pixel may be painted on the canvas as soon as it is produced by the rendering procedure.

Layers that consist of complex geometric objects (such astext orpolylines) may be broken down into simpler elements (characters orline segments, respectively), which are then painted as separate layers, in some order. However, this solution may create undesirablealiasing artifacts wherever two elements overlap the same pixel.

See alsoPortable Document Format#Layers.

Hardware

[edit]
See also:Video display controller,List of home computers by video hardware, andSprite (computer graphics)

Modern computergraphics card displays almost overwhelmingly use raster techniques, dividing the screen into a rectangular grid ofpixels, due to the relatively low cost of raster-based video hardware as compared with vector graphic hardware. Most graphic hardware has internal support forblitting operations orsprite drawing. Aco-processor dedicated toblitting is known as aBlitter chip.

Classic 2Dgraphics chips andgraphics processing units of the late 1970s to 1980s, used in8-bit to early16-bit,arcade games,video game consoles, andhome computers, include:

Software

[edit]

Manygraphical user interfaces (GUIs), includingmacOS,Microsoft Windows, or theX Window System, are primarily based on 2D graphical concepts. Such software provides a visual environment for interacting with the computer, and commonly includes some form ofwindow manager to aid the user in conceptually distinguishing between different applications. The user interface within individual software applications is typically 2D in nature as well, due in part to the fact that most commoninput devices, such as themouse, are constrained to two dimensions of movement.

2D graphics are very important in the control peripherals such as printers, plotters, sheet cutting machines, etc. They were also used in most earlyvideo games; and are still used for card and board games such assolitaire,chess,mahjongg, etc.

2D graphics editors ordrawing programs are application-level software for the creation of images, diagrams and illustrations by direct manipulation (through the mouse,graphics tablet, or similar device) of 2D computer graphics primitives. These editors generally providegeometric primitives as well asdigital images; and some even support procedural models. The illustration is usually represented internally as a layered model, often with a hierarchical structure to make editing more convenient. These editors generally outputgraphics files where the layers and primitives are separately preserved in their original form.MacDraw, introduced in 1984 with theMacintosh line of computers, was an early example of this class; recent examples are the commercial productsAdobe Illustrator andCorelDRAW, and the free editors such asxfig orInkscape. There are also many 2D graphics editors specialized for certain types of drawings such as electrical, electronic and VLSI diagrams, topographic maps, computer fonts, etc.

Image editors are specialized for the manipulation ofdigital images, mainly by means of free-hand drawing/painting andsignal processing operations. They typically use a direct-painting paradigm, where the user controls virtual pens, brushes, and other free-hand artistic instruments to apply paint to a virtual canvas. Some image editors support a multiple-layer model; however, in order to support signal-processing operations like blurring each layer is normally represented as a digital image. Therefore, any geometric primitives that are provided by the editor are immediately converted to pixels and painted onto the canvas. The nameraster graphics editor is sometimes used to contrast this approach to that of general editors which also handlevector graphics. One of the first popular image editors wasApple'sMacPaint, companion toMacDraw. Modern examples are the freeGIMP editor, and the commercial productsPhotoshop andPaint Shop Pro. This class too includes many specialized editors—for medicine, remote sensing,digital photography, etc.

Developmental animation

[edit]

With the resurgence[4]: 8  of 2D animation, free and proprietary software packages have become widely available for amateurs and professional animators. With software likeRETASUbiArt Framework andAdobe After Effects, coloring and compositing can be done in less time.[citation needed]

Various approaches have been developed[4]: 38  to aid and speed up the process of digital 2D animation. For example, bygenerating vector artwork in a tool likeAdobe Flash an artist may employ software-driven automatic coloring andin-betweening.

Programs likeBlender orAdobe Substance allow the user to do either 3D animation, 2D animation or combine both in its software allowing experimentation with multiple forms of animation.[5]

See also

[edit]
Wikimedia Commons has media related to2D.

References

[edit]
  1. ^Richard Paul, 1981,Robot manipulators: mathematics, programming, and control : the computer control of robot manipulators, MIT Press, Cambridge, MA
  2. ^"Scalable Vector Graphics -- the initial coordinate system",w3.org, 2003
  3. ^Durand; Cutler."Transformations"(PowerPoint). Massachusetts Institute of Technology. Retrieved12 September 2008.
  4. ^abPile, John Jr. (May 2013).2D Graphics Programming for Games. New York, NY: CRC Press.ISBN 978-1466501898.
  5. ^"blender.org - Home of the Blender project - Free and Open 3D Creation Software".blender.org. Retrieved2019-04-24.
Vector graphics
2D graphics
2.5D
3D graphics
Concepts
Graphics software
Algorithms
Visualization of technical information
Fields
Image
types
People
Pre-19th century
19th century
Early 20th century
Mid 20th century
Late 20th century
Early 21st century
Related
topics
Animation topics
By country
Industry
Works
Techniques
Traditional
Stop motion
Computer
2D
3D
Puppetry
Mechanical
Other methods
Variants
History
Related topics
Tools
Hardware
Software
Forms
Notable
artists
Notable
artworks
Organizations,
conferences
Retrieved from "https://en.wikipedia.org/w/index.php?title=2D_computer_graphics&oldid=1338694285"
Categories:
Hidden categories:
[8]ページ先頭
©2009-2026 Movatter.jp