Previous Lecture     . . .      Next Lecture

# Introduction to 2-D Graphics

## Why?

• To draw application-specific graphical objects
• Lines, rectangles, text
• Mac, Windows, X have approximately the same model
• There are some complexities that are worth teaching

## Coordinates

• Typically 0,0 in top left
• Comes from text handling
• Different from conventional axes
• Coordinates of pixels:
• Center of pixel
• Corner of pixel
• Matters for lines

## Primitives

• Which pixels are turned on for DrawRectangle (2,2, 8,8)?
• Suppose you draw another rectangle next to it?
• Suppose draw filled and outline rectangle with the same coordinates?
• DrawLine has similar concerns
• Thick lines often go to both sides of the coordinates
• DrawPolyline takes a sequence of points
• Endpoints of each segment drawn?
• Last end-point drawn?
• Closed vs. open; draw first point twice
• Draw functions
• Replace (COPY)
• XOR
• And, OR, NOT, etc.
• Makes it important to do the points only once

• Anything XOR BLACK = inverted anything, XOR again and get original:
• AND useful for making holes
• Ellipse
• Start angle, end angle, bounding box

## Properties

• LineStyles
• Width
• Solid, dashed, "double-dashed", patterned
111000111000111000
• Cap-style: butt, not-last, round, projecting:
• Polylines
• End-caps: miter, round, bevel:
• Filled, what parts?
• "Winding rule"
• "odd parity rule"

• Extra picture to determine parts to draw
• color+white or color+not-drawn
• Picture is repeated "tiled" to fill the space
• origin of the tiles at window, screen or object

## Colors

• Color map, color table
• Number of colors on screen vs. number of total colors
• 8 bits for each of 3 colors = 24 bits
• 224 colors, but screen has only 214 to 220 pixels
• so provide 16 256 colors in "video look-up table" or "color table" or "color map"
• Color map tricks
• Color animation
• Position animation
• Cursors, etc.
• Transparency
• Full color
• Extra planes
• Z buffer
• What color when XOR, AND?

## Color Models (from Foley&van Dam, 2nd edition, pp. 584-599)

• RGB -- Additive color primaries
• CMY --  Cyan, Magenta, Yellow
• complements of red, green, blue; substractive primaries
• colors are specified that are removed from white light, instead of added to black (no light) as in RGB
• YIQ  -- used in color TVs in US (NTSC)
• Y is luminance, what is shown on black and white TVs
• I and Q encode chromaticity

• HSV -- Hue, Saturation and Value (brightness)
• user oriented, intuitive appear of artist's hint, shade, tone
• simple algorithm in text to convert, but not a linear mapping
• Interpolating between colors can be done using different models, with different resulting intermediate colors

## Text

• Baseline, descender, ascent, line spacing:
• extra space usually built into characters (height & width)
• Kerning: overlapping of characters: VA, ff, V.
• Stroke: Element of a character that would have originally been created with a single pen stroke
• Leading: pronounced "ledding": vertical distance between lines of type, from baseline to baseline, measured in points. Term derives from thin strips of lead placed between lines in the days of hot-metal type setting.
• Em: Equal to the font's point size. So an "Em-dash" in a 18 point font is 18points wide: (option-shift-underline)
• En: Half font's point size. "En-dash" is 9 points wide in 18 point font: (option-underline)
• Types of fonts:
• Bitmap fonts: look bad when scaled up. Best appearance at native resolution.
• Postscript fonts: by Adobe, described by curves and lines so look good at any resolution, often hard to read when small
• TrueType fonts: similar to Postscript: font is a program, Apple format

## RasterOp

• called "BitBlt", copyPixel in text
• Copy an area of the screen
• Combine with destination in various ways
• Useful for moving, scrolling, erasing & filling rectangles, etc.
• SmallTalk investigated using it for rotate, scaling, etc.
• Not nearly as useful in color

## Double Buffering

• Save an extra picture offscreen
• Smoother animations
• Save hidden parts of windows
• = "Backing store"
• Use two buffers for special effects, faster refresh
• "Save-under" for pop-ups

## Window Manipulation

• CreateWindow (10, 10, 100, 100)
• Inside or outside?
• Size of border?
• Move, change size, destroy, iconize, maximize, top, bottom, etc.

## Special features

• Clipping rectangles
• Redrawing damaged parts
• Window refresh
• Scrolling using coordinate transformations
• Using clipping rectangles or sub-windows