2D computer graphics

• 1. Introduction

  ›

  2D computer graphics began in the 1950s, built on vector graphics devices at a time when computers filled entire rooms and drawing meant machines tracing lines on plotters. What started as a narrow technical discipline has since become the invisible architecture of nearly every screen you look at. The PostScript language and the X Window System protocol each marked turning points in how that architecture was built and shared. Before those milestones, a document stored as a 2D graphic file could shrink to one-thousandth the size of its equivalent digital image, a compression ratio that changed how data moved across networks and between machines. This documentary traces how a field rooted in Euclidean geometry came to underpin typography, cartography, advertising, arcade games, and the graphical interfaces of macOS and Microsoft Windows.

• 2. Geometry Underneath

  ›

  At the foundation of every 2D graphic lies a set of mathematical transformations drawn from Euclidean geometry. A translation moves every point in an image a constant distance in a specified direction; it can be described as adding a constant vector to every point, or equivalently as shifting the origin of the coordinate system. Because a translation is an affine transformation but not a linear transformation, homogeneous coordinates are used to represent it as a matrix, making it behave like a linear operation. A three-dimensional vector such as (wx, wy, wz) is written in four homogeneous coordinates as (wx, wy, wz, 1). The inverse of a translation matrix is obtained simply by reversing the direction of the vector. Because vector addition is commutative, multiplying translation matrices is also commutative, unlike the multiplication of arbitrary matrices. Rotation works differently. A rotation matrix in the xy-Cartesian plane rotates points counterclockwise through an angle theta about the origin. In two-dimensional space, a rotation needs just one angle, but it can also be expressed as four entries in a 2-by-2 matrix. Rotation matrices are square matrices with real entries, specifically orthogonal matrices with determinant 1. The complete set of all such matrices of size n forms the special orthogonal group. These geometric structures, translations, rotations, and also scaling, are the operations by which every 2D model is modified and manipulated.

• 3. Vector vs. Raster

  ›

  Raster-based devices largely supplanted vector graphics hardware in the decades after the 1950s. Modern graphics card displays almost overwhelmingly use raster techniques, dividing the screen into a rectangular grid of pixels. The primary reason is cost: raster-based video hardware is relatively cheap compared to vector graphic hardware. In a raster system, a blank canvas is an array of pixels, called a bitmap, filled with a background color. Programs paint onto it by setting pixel colors directly or by calling a 2D graphics library or the machine's graphics card. Typical operations include pasting an image at a specified offset, writing a string of characters with a specified font at a given position and angle, painting a geometric shape such as a triangle or circle, and drawing line segments or curves with a virtual pen of given width. Vector graphics, by contrast, store shapes as mathematical descriptions rather than fixed pixels. This makes vector files resolution-independent: the same description can be rendered at different resolutions to suit different output devices. In applications like desktop publishing, engineering, and business documents, a vector-based description can be a factor of 1,000 or more smaller than the equivalent digital image.

• 4. Color and Layers

  ›

  Painting a pixel with a given color normally replaces its previous color, but many systems support transparent and translucent colors that only modify the existing pixel values. Two colors can also be combined by computing their bitwise exclusive or, a technique called color inversion. Color inversion is used in graphical user interfaces for highlighting, rubber-band drawing, and other volatile painting: re-painting the same shapes with the same color restores the original pixel values. Color gradients are provided by many libraries and graphics cards for generating smoothly varying backgrounds and shadow effects. Layered models add a further dimension to this. Each layer is conceptually a sheet of ink, paper, or film, opaque or transparent, stacked in an order defined by a single depth number. The target image is produced by painting each layer in order of decreasing depth onto a virtual canvas. Layered models make it possible to edit one layer without touching the others, to suppress unwanted information when viewing or printing, and to enable better spatial anti-aliasing of complex drawings. They also support specific techniques such as mitered joints and the even-odd rule. Roads or railways can be hidden from a map, process layers removed from an integrated circuit diagram, or hand annotations stripped from a business letter, all through layer suppression. Most graphics editors rely on layered models for exactly these reasons.

• 5. Hardware Chips

  ›

  Classic 2D graphics chips from the late 1970s to the 1980s powered the 8-bit to early 16-bit era of arcade games, video game consoles, and home computers. Atari produced the TIA, ANTIC, CTIA, and GTIA chips. Commodore built the OCS. MOS Technology made the VIC and VIC-II. Sega's lineup included the VDP, Super Scaler, the 315-5011 and 315-5012, and the 315-5196 and 315-5197. Texas Instruments contributed the TMS9918, and Yamaha made the V9938, V9958, and YM7101 VDP chips. Capcom's arcade hardware used the CPS-A and CPS-B. Hudson Soft built Cynthia and the HuC6270, while NEC produced the uPD7220 and uPD72120. Ricoh supplied the PPU and S-PPU. Most graphic hardware supports blitting operations or sprite drawing natively. A co-processor dedicated to blitting is called a Blitter chip. These dedicated silicon designs handled the pixel-pushing that general CPUs could not manage at interactive speeds.

• 6. Software Editors

  ›

  MacDraw, introduced in 1984 alongside the Macintosh line of computers, was an early example of what became the 2D graphics editor category. Recent commercial products in this space include Adobe Illustrator and CorelDRAW; free alternatives include xfig and Inkscape. These editors let users create images, diagrams, and illustrations through direct manipulation with a mouse, graphics tablet, or similar device. Internally they typically represent the illustration as a layered model, often with a hierarchical structure to make editing more convenient, and they output graphics files that preserve layers and primitives in their original form. Image editors occupy a related but distinct category. They focus on manipulating digital images through free-hand drawing, painting, and signal-processing operations such as blurring. One of the first popular image editors was Apple's MacPaint, the companion program to MacDraw. Modern examples include the free GIMP editor and the commercial products Photoshop and Paint Shop Pro. Because signal-processing operations require pixel data, geometric primitives in image editors are immediately converted to pixels and painted onto the canvas. Both categories also have specialized variants for medicine, remote sensing, digital photography, electrical and electronic diagrams, topographic maps, and computer font design.

• 7. Animation and GUIs

  ›

  Graphical user interfaces for macOS, Microsoft Windows, and the X Window System are built primarily on 2D graphical concepts. Most common input devices, including the mouse, are constrained to two dimensions of movement, which makes 2D the natural mode for the user interface within individual software applications. 2D graphics also control peripherals such as printers, plotters, and sheet cutting machines. Card and board games like solitaire, chess, and mahjong still run on 2D graphics. With the resurgence of 2D animation, both free and proprietary software packages have become widely available for amateurs and professional animators. Tools like Adobe After Effects enable coloring and compositing in less time than traditional methods required. Generating vector artwork in a tool like Adobe Flash lets an artist use software-driven automatic coloring and in-betweening. Programs like Blender and Adobe Substance go further, letting users combine 2D and 3D animation within a single application. Object-oriented graphics represent one further extension: an image is described by an object with a self-rendering method, a procedure that assigns colors to pixels by an arbitrary algorithm. Complex models can be built by combining simpler objects in the paradigms of object-oriented programming, an approach that keeps the mathematical description separate from the rendered pixel output.