05-830, User Interface
Software, Spring, 1999
Lecture 10, March 15,
Copyright © 1999 - Brad
Lecture . . .
Introduction to 2-D Graphics
- To draw application-specific graphical objects
- Mac, Windows, X have approximately the same model
- There are some complexities that are worth teaching
- 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
- 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?
- What about for ellipse?
- 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)
- And, OR, NOT, etc.
- Makes it important to do the points only once
XOR BLACK = inverted anything, XOR again and get original:
- AND useful for making holes
- Start angle, end angle, bounding box, chord or pie-slice
- Solid, dashed, "double-dashed",
- Cap-style: butt, round, projecting (by 1/2
- End-caps: miter, round, bevel:
- Miter = point, up to 11 degrees
- Round = circle of the line width
- Bevel = fill in notch with straight
- 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
- Color map, color table
- Number of colors on screen vs. number of total colors
- 8 bits for each of 3 colors = 24 bits
- 2^24 colors, but screen has only 2^14 to 2^20 pixels
- so provide 16 to 256 colors in "video look-up table" or "color table"
or "color map"
- Color map tricks
- Color animation
- Position animation
- Cursors, etc.
- Full color
- 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
- 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
- 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:
- Types of fonts:
- Bitmap fonts: look bad when scaled up. Best appearance
- 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
- 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
- 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
- CreateWindow (10, 10, 100, 100)
- Inside or outside?
- Size of border?
- Move, change size, destroy, iconize, maximize, top, bottom, etc.
- Clipping rectangles
- Redrawing damaged parts
- Window refresh
- Scrolling using coordinate transformations
- Using clipping rectangles or sub-windows
Back to 05-830 main page