Lecture 9 Basic Computer Graphics Brad Myers 05

Lecture 9: Basic Computer Graphics Brad Myers 05 -630 / 05 -430 Spring, 2004 1

Why? n n To draw application-specific graphical objects Lines, rectangles, text Mac, Windows, X have approximately the same model There are some complexities that are worth looking at 2

Coordinates for Drawing n Origin n n Different from conventional axes Coordinates of pixels: n n n Typically 0, 0 in top left (incl. VB, Flash) Comes from text handling and raster scan Java 2 D allows customization Center of pixel? Corner of pixel? Matters for lines 3

Issue: Window Coordinates n n Where is 0, 0 with respect to the window’s inside or outside border? Create. Window (10, 100, 100) n n n Inside or outside? Different for point vs. W/H? Size of border? VB: Doesn’t include title bar if you use client area coordinates (default) Not relevant for flash 4

Drawing Primitives n Drawing Objects: n P 1 and P 2 or P 1 and W/H? n e. Graphics. Draw. Rectangle(pen, x, y, width, height) n n n Draws the outline of the specified rectangle Inclusive or exclusive? Which pixels are turned on for Draw. Rectangle (2, 2, 8, 8)? n n Uses the graphics context, send the pen Java: differs for draw vs. fill Suppose you draw another rectangle next to it? Suppose draw filled and outline rectangle with the same coordinates? 5 What about for ellipse?

Primitives, 2 n Draw. Line has similar concerns n n n Thick lines often go to both sides of the coordinates VB: can set Pen. Alignment: Center vs. Inset Draw. Lines vs. Draw. Polygon n n Array of Point structures Endpoints of each segment drawn? Last end-point drawn? Closed vs. open; may draw first point twice 6

Draw Function n n n n 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 Doesn’t work well in color (Not available in Flash) 7

Raster. Op (Bit. Blt, Copy. Area) n Copy an area of the screen n n VB: Graphics. Draw. Image has many versions Often combine with destination using Boolean combinations Useful for moving, scrolling, erasing & filling rectangles, etc. Small. Talk investigated using it for rotate, scaling, etc. Not nearly as useful in color 8

Double Buffering n Save an extra picture offscreen n n Smoother animations Save hidden parts of windows = “Backing store” Use two buffers for special effects, faster refresh VB: provides double buffering from within a class: Public Sub Enable. Double. Buffering() ' Set the value of the double-buffering style bits to true. Me. Set. Style(Control. Styles. Double. Buffer _ Or Control. Styles. User. Paint _ Or Control. Styles. All. Painting. In. Wm. Paint, _ True) Me. Update. Styles() End Sub 9

Line Properties n Line. Styles n n n Width Solid, dashed 111000111000, "doubledashed", patterned Cap-style: butt, round, projecting (by 1/2 linewidth): VB: Even more choices Flash: just sharp or rounded corners 10

Polylines n End-caps: miter, round, bevel: n n Miter = point, can set “Miter. Limit” Round = circle of the line width Bevel = fill in notch with straight line Filled, what parts? n “Winding rule” n n (non-zero) “Odd parity rule” n (even-odd) 11

Path Model n n Define a path first, then draw it Available in Mac, Postscript, Java 2 D, VB, Flash _root. create. Empty. Movie. Clip ("triangle", 1); with (_root. triangle){ begin. Fill (0 x 0000 FF, 50); line. Style (5, 0 x. FF 00 FF, 100); move. To (200, 200); line. To (300, 300); line. To (100, 300); line. To (200, 200); end. Fill(); } n Can create a Path with arbitrary moves, draws, curves, etc, and then call draw. 12

Splines n Curves defined by “cubic” equation n x(t) = axt 3 + bxt 2 + cxt + dx y(t) = ayt 3 + byt 2 + cyt + dy Well-defined techniques from graphics (not covered here – see Foley&van. Dam) Defined to go through (some of) the “control” points Sub Draw. Bezier(pen As Pen, pt 1 As Point, pt 2 As Point, pt 3 As Point, pt 4 As Point) n The Bézier curve is drawn from the first point to the fourth point. The second and third points are control points that determine the shape of the curve. 13

Color Models n n RGB -- Additive color primaries CMY -- Cyan, Magenta, Yellow n n n complements of red, green, blue; subtractive 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) n n Y is luminance, what is shown on black and white TVs I and Q encode chromaticity 14

Color, cont. n HSV -- Hue, Saturation and Value (brightness) n n n 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 Flash: RGB, CMYK, HSV, Grayscale, all plus Alpha VB: RGB + Alpha only 15

Fonts and drawing strings n Font provides description of the shape of a collection of chars n n n Shapes are called “glyphs” Plus information e. g. about how to advance after drawing a glyph And aggregate info for the whole collection 16

Fonts n Typically specified by: n A family or typeface n n n A size (normally in “points”) A style n n n e. g. , courier, helvetica, times roman e. g. , plain, italic, bold & italic other possibles (from mac): underline, outline, shadow VB: Dim my. Font as Font = New Font(“Verdana”, 12, Font. Style. Bold) 17

Font examples 18

Points n An odd and archaic unit of measurement n 72. 27 points per inch n n Postscript rounded to 72/inch n n Origin: 72 per French inch (!) Most have followed Early Macintosh: point==pixel (1/75 th) 19

Reference point and baseline n Each glyph has a reference point n n Draw a character at x, y, reference point will end up at x, y (not top-left) Reference point defines a “baseline” p 20

Ascent and decent n Glyphs are drawn both above and below baseline n n Distance below: “decent” of glyph Distance above: “ascent” of glyph Decent p Ascent 21

Standard ascent and decent n Font as a whole has a standard ascent and standard decent Std Decent p. M Std Ascent 22

Leading n Leading = space between lines of text n n Pronounce “led”-ing after the lead strips that used to provide it space between bottom of standard decent and top of standard ascent n i. e. interline spacing 23

Height n Height of character or font n n ascent + decent + leading not standard across systems: on some systems doesn’t include leading (but does in AWT) n New question: is the leading above or below the text in your graphics system? 24

Other Parameters n n Kerning: overlapping of characters: VA, fl, ff, V. Stroke: Element of a character that would have originally been created with a single pen stroke Em: Equal to the font's point size. So an "Em-dash" in a 18 point font is 18 points wide: (option-shiftunderline on Mac) En: Half font's point size. "En-dash" is 9 points wide in 18 point font: (Mac: option-underline) n DASHES – DASHES—DASHES 25

Types of Fonts n Bitmap fonts: look bad when scaled up. Best appearance at native resolution. Times vs. n n n Sometimes used for dingbats, wingdings Postscript fonts: by Adobe, described by curves and lines so look good at any resolution, often hard to read when small True. Type fonts: similar to Postscript: font is a program 26

Encoding of Characters n Conventional ASCII n n One byte per character Various special characters in lower and upper part of fonts n n Depends on OS, font, etc. Unicode: http: //www. unicode. org n n 16 bits per character All the world’s languages VB uses Unicode Flash: more complicated 27

Anti-Aliasing n n Making edges appear smooth by using blended colors Useful for text and all lines Supported by True. Type fonts and Smoothing. Mode enumeration for shapes For Flash, checkbox turns it on 28

Images n Pictures created externally n n Various encodings n n “Bitmaps”, “Pixmaps” gif, tiff, pict, bmp, jpeg, png, … Issues: n n Origin for when used as a cursor Encodings for transparency n n n Windows cursors and gif files Java uses alpha compositing VB: transparency is difficult: can make one color in the picture transparent, but not the control. VB 6 had single property for Label Transparency VB: Get image from a file: Image. From. File("myfile. gif") Flash: import the image as an object, or use load. Movie(“image. jpg”) 29

Clipping and “Stencils” n Can clip drawing to a set of rectangles n n Must be non-overlapping Important for refresh Can make drawing more efficient VB: can set single clip rectangle or clip to a region 30

“Stencils” n Model is like the stencils used in crafts n n n Only see paint through the “holes” Used for transparency, icons, other effects Uses alpha compositing and shape clip mechanisms in Java 31

Coordinate Transformations n Supports n n n Translate - move Rotate Scale – change size (including flip = -scale) Shear Can modify any shape, including text To fully understand, need matrix algebra: n Affine transformations are based on two-dimensional matrices of the following form: a c tx x b d ty y where x¢ = ax + cy + tx and y¢ = bx + dy + ty 1 32

Units for locations, sizes n Screen (pixels) versus “real” measures (inches) n n Depends on screen resolution Not necessarily known to system n n Java provides inches, millimeters, etc. as a transform n n based on the default system font: one vertical dbu is 1/8 of the font height, and one horizontal dbu is 1/4 of the font's average width Visual Basic n n n Default is pixels Conventional screen = 1280 / 15” = 90 pixels/inch Laser printers are 600 dots/inch Windows = “dialog box units” – DBU n n Easier for Postscript Default is in pixels Also “twip” = 1/20 of a point = 1/1440 inch Flash: screen DPI default is 72, but is system dependent 33

How Parameters are Passed n n How pass parameters for drawing operations? Issue: Lots of parameters control the drawing of objects. n n X drawline has at least 19 How many for VB? n Many are encoded in the Pen, Render. Hints, Region, and other implicit and explicit parameters 34

X Draw. Line Parameters 1. Window in which to 2. 3. 4. 5. 6. 7. 8. 9. 10. draw X 1 Y 1 X 2 Y 2 relative-p line-width draw function background-color foreground-color 11. cap style 12. line style (solid, dashed, double-dashed) 13. dash pattern 14. dash offset 15. stipple bitmap 16. stipple origin X 17. stipple origin Y 18. clip mask 19. plane mask (for drawing on specific planes) 35

How Pass Parameters? n Three basic possibilities n Pass all parameters with each operation n Draw. Line(70, 30, 70, 200, Red, . . . ) - too many parameters Not really used by any modern system 36

Passing Parameters, 2 n All parameters stored in the system n n n Used by Macintosh, Display Postscript, Flash, etc. Sometimes called the “pen” Example (pseudo code): n n Set. Color(Red) Move. To(70, 30) Draw. To(70, 200) + Fewer parameters to calls + Don't have to set properties don't care about - Interrupts, multi-processing, may result in unexpected settings 37

Passing Parameters, 3 n n n Store parameters in an object Pass the object into the function Examples: n X = “graphics context” n n n Can have more than one Windows = “graphics context” and also “pen” Java n n “Graphics” g – just one (so “global”) General. Path – stores path and shape information (only) n Can have more than one path 38