1 17 Graphics and Multimedia 2006 Pearson Education

1 17 Graphics and Multimedia 2006 Pearson Education, Inc. All rights reserved.

2 One picture is worth ten thousand words. — Chinese proverb Treat nature in terms of the cylinder, the sphere, the cone, all in perspective. — Paul Cezanne Nothing ever becomes real till it is experienced— even a proverb is no proverb to you till your life has illustrated it. — John Keats A picture shows me at a glance what it takes dozens of pages of a book to expound. — Ivan Sergeyevich 2006 Pearson Education, Inc. All rights reserved.

3 OBJECTIVES In this chapter you will learn: § To understand graphics contexts and graphics objects. § To manipulate colors and fonts. § To understand use GDI+ Graphics methods to draw lines, rectangles, strings and images. § To use class Image to manipulate and display images. § To draw complex shapes from simple shapes with class Graphics. Path. § To use Windows Media Player to play audio or video in a C# application. § To use Microsoft Agent to add interactive animated characters to a C# application. 2006 Pearson Education, Inc. All rights reserved.

4 17. 1 Introduction 17. 2 Drawing Classes and the Coordinate System 17. 3 Graphics Contexts and Graphics Objects 17. 4 Color Control 17. 5 Font Control 17. 6 Drawing Lines, Rectangles and Ovals 17. 7 Drawing Arcs 17. 8 Drawing Polygons and Polylines 17. 9 Advanced Graphics Capabilities 17. 10 Introduction to Multimedia 17. 11 Loading, Displaying and Scaling Images 17. 12 Animating a Series of Images 17. 13 Windows Media Player 17. 14 Microsoft Agent 17. 15 Wrap-Up 2006 Pearson Education, Inc. All rights reserved.

5 17. 1 Introduction • Overview of C#’s tools for drawing 2 -D shapes and for controlling colors and fonts – Namespace System. Drawing • Many sophisticated drawing capabilities that make up the. NET resource GDI+ – GDI+ is an application programming interface (API) • For creating 2 -D vector graphics, manipulating fonts and inserting images – Class Image • Store and manipulate images of various formats • Multimedia examples – Build an animation – Use the Windows Media Player control – Use Microsoft Agent • For adding interactive animated characters to applications or Web pages 2006 Pearson Education, Inc. All rights reserved.

6 17. 2 Drawing Classes and the Coordinate System • System. Drawing – Class Graphics • Methods used for drawing strings, lines, rectangles and etc. – Class Pen and/or Brush • Render a specified shape – Color structure • Set colors of various graphical components • Allow to create new colors – Class Font • Contains properties that define unique fonts – Class Font. Family • Contains methods for obtaining font information 2006 Pearson Education, Inc. All rights reserved.

7 Fig. 17. 1 | System. Drawing namespace’s classes and structures. 2006 Pearson Education, Inc. All rights reserved.

8 17. 2 Drawing Classes and the Coordinate System (Cont. ) • GDI’s coordinate system – By default, the upper-left corner of a GUI component has the coordinates (0, 0) – A coordinate pair • x-coordinate – The horizontal distance from the upper-left corner • y-coordinate – The vertical distance from the upper-left corner – Coordinate units are measured in pixels • The smallest units of resolution on a display monitor – Point structure • Represents the x-y coordinates of a point on a two 2 -D plane – Size structure • Represents width and height of a shape 2006 Pearson Education, Inc. All rights reserved.

9 Portability Tip 17. 1 Different display monitors have different resolutions, so the density of pixels on such monitors will vary. This might cause the sizes of graphics to appear different on different monitors. 2006 Pearson Education, Inc. All rights reserved.

10 Fig. 17. 2 | GDI+ coordinate system. Units are measured in pixels. 2006 Pearson Education, Inc. All rights reserved.

11 17. 3 Graphics Contexts and Graphical Objects • Graphics – Graphical context represents drawing surface – Graphics objects contain methods for graphics-related actions – Derived classes of System. Windows. Form inherits virtual On. Paint method • On. Paint method’s argument includes a Paint. Event. Args object to obtain a Graphics object for the Form – Programmers seldom call the On. Paint method directly • Drawing graphics is an event-driven process – Control’s Invalidate method forces a call to On. Paint – By default, controls do not have their own graphics contexts 2006 Pearson Education, Inc. All rights reserved.

12 Performance Tip 17. 1 Calling the Invalidate method to refresh the Control can be inefficient if only a small portion of a Control needs refreshing. Calling Invalidate with a Rectangle parameter refreshes only the area designated by the rectangle. This improves program performance. 2006 Pearson Education, Inc. All rights reserved.

13 17. 4 Color Control • Colors – Are created from a combination of alpha, red, green and blue components (called ARGB values) • All four ARGB components are bytes that represent integer values in the range 0 to 255 • The alpha value determines the opacity of the color • Method From. Argb – Allows you to set these values • Some methods/classes related to color control – Derived classes from abstract class Brush • Define the color of interiors of graphical shapes – Graphics has several overloaded Draw. String methods – Color’s static method From. Name • Create new Color defined by user – Color. Dialog GUI component • A dialog box that allows users to select from a palette of available colors or to create custom colors 2006 Pearson Education, Inc. All rights reserved.

14 Fig. 17. 3 | Color structure static constants and their RGB values. 2006 Pearson Education, Inc. All rights reserved.

15 Fig. 17. 4 | Color structure members. 2006 Pearson Education, Inc. All rights reserved.

16 Fig. 17. 5 | Classes that derive from class Brush. 2006 Pearson Education, Inc. All rights reserved.

Outline 17 private instance variable to store the back rectangle's color Show. Colors. cs private instance (1 variable of 4) to store the front rectangle's color Override On. Paint to customize the graphics operations that are performed Retrieve the Graphics object Create Solid. Brush object to for drawing solid shape 2006 Pearson Education, Inc. All rights reserved.

Outline 18 Create Solid. Brush object for drawing solid shape Show. Colors. cs Give the retrieved Graphics object (2 of 4) a white background using brush Output the background color by drawing to the Graphics object Draw the back rectangle to Graphics object Output the Argb value of front rectangle by drawing to the Graphics object Draw the front rectangle to Graphics object 2006 Pearson Education, Inc. All rights reserved.

Outline 19 Allow user to change background color Show. Colors. cs Call On. Paint to redraw (3 of 4) Allow user to change the front rectangle’s color Call On. Paint to redraw 2006 Pearson Education, Inc. All rights reserved.

Outline 20 Show. Colors. cs (4 of 4) 2006 Pearson Education, Inc. All rights reserved.

Outline 21 Show. Colors Complex. cs (1 of 3) Create a Color. Dialog object Allow user to choose from a variety of colors Check to see if the user pressed “Cancel” 2006 Pearson Education, Inc. All rights reserved.

Outline 22 Change color to user’s selection Show. Colors Complex. cs (2 of 3) Allow user to choose from a variety of colors Change color to user’s selection 2006 Pearson Education, Inc. All rights reserved.

Outline 23 Show. Colors Complex. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

24 17. 5 Font Control • Font – Properties of Font objects cannot be modified • If you need a different Font, must create a new Font object – Size property • Returns the font size as measured in design units – Size. In. Points property • Returns the font size as measured in points – Graphics. Unit enumeration • Unit of measurement that describes the font size • Font. Family – Defines characteristics common to a group of related fonts – Provides several methods to determine the font metrics that are shared by members of a particular family 2006 Pearson Education, Inc. All rights reserved.

25 Fig. 17. 8 | Font class read-only properties. 2006 Pearson Education, Inc. All rights reserved.

26 Common Programming Error 17. 1 Specifying a font that is not available on a system is a logic error. If this occurs, C# will substitute that system’s default font. 2006 Pearson Education, Inc. All rights reserved.

Outline 27 Using. Fonts. cs (1 of 3) Change font style to bold Arial Change font style to Times New Roman 2006 Pearson Education, Inc. All rights reserved.

Outline 28 Change font style to italic Courier New Using. Fonts. cs Change font (2 style to strikeout of 3) Tahoma Output font styles to screen by drawing to graphics. Object 2006 Pearson Education, Inc. All rights reserved.

Outline 29 Output font styles to screen by drawing to graphics. Object Using. Fonts. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

30 Fig. 17. 10 | Font metrics illustration. 2006 Pearson Education, Inc. All rights reserved.

31 Fig. 17. 11 | Font. Family methods that return font-metric information. 2006 Pearson Education, Inc. All rights reserved.

Outline 32 Using. Font Metrics. cs (1 of 3) Create a Font. Family object to determine the front metrics of Arial 2006 Pearson Education, Inc. All rights reserved.

Outline 33 Output font style’s ascent Using. Font Metrics. cs Output font (2 style’s of 3) descent Output font style’s height Output font style’s spacing Change the Font. Family object to determine the front metrics of Sans Serif Output font style’s ascent 2006 Pearson Education, Inc. All rights reserved.

Outline 34 Output font style’s descent Using. Font Metrics. cs Output font style’s height (3 of 3) Output font style’s spacing 2006 Pearson Education, Inc. All rights reserved.

35 17. 6 Drawing Lines, Rectangles and Ovals • Each of the drawing methods has several overloaded versions – Methods that draw hollow shapes • Typically require as arguments a Pen and four ints – Methods that draw solid shapes • Typically require as arguments a Brush and four ints – The first two int arguments represent the coordinates of the upperleft corner of the shape – The last two ints indicate the shape’s width and height – Methods Fill. Rectangle and Draw. Rectangle • Draw rectangles on the screen – Methods Fill. Ellipse and Draw. Ellipse • Draw ellipses on the screen 2006 Pearson Education, Inc. All rights reserved.

36 Fig. 17. 13 | Graphics methods that draw lines, rectangles and ovals. (Part 1 of 2. ) 2006 Pearson Education, Inc. All rights reserved.

37 Fig. 17. 13 | Graphics methods that draw lines, rectangles and ovals. (Part 2 of 2. ) 2006 Pearson Education, Inc. All rights reserved.

Outline 38 Lines. Rectangles Ovals. cs (1 of 3) Draw the back rectangle filled in with blue 2006 Pearson Education, Inc. All rights reserved.

Outline 39 Draw lines to connect the rectangle to make a box Lines. Rectangles Ovals. cs (2 ofrectangle 3) Draw the front Draw the bottom ellipse filled in with red Draw lines to connect the ellipses to make a cylinder 2006 Pearson Education, Inc. All rights reserved.

Outline 40 Draw the top ellipse Lines. Rectangles Ovals. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

41 17. 7 Drawing Arcs • Arcs – Portions of ellipses and are measured in degrees • Begin at a starting angle • Continue for a specified number of degrees (the arc angle) – An arc is said to sweep its arc angle • Begin from its starting angle • Clockwise direction is measured in + degree • Counterclockwise direction is measured in - degree – The Graphics methods used to draw arcs: • Draw. Arc • Draw. Pie • Fill. Pie 2006 Pearson Education, Inc. All rights reserved.

42 Fig. 17. 15 | Ellipse bounded by a rectangle. 2006 Pearson Education, Inc. All rights reserved.

43 Fig. 17. 16 | Positive and negative arc angles. 2006 Pearson Education, Inc. All rights reserved.

44 Fig. 17 | Graphics methods for drawing arcs. 2006 Pearson Education, Inc. All rights reserved.

Outline 45 Drawing. Arcs. cs (1 of 3) Draws a circle 2006 Pearson Education, Inc. All rights reserved.

Outline 46 Draws an arc from 0 to 110 degrees Drawing. Arcs. cs (2 arc of 3) Draws an from 0 to -270 degrees Draws filled circle Draws a filled arc from 270 to -90 degrees Draws a filled arc from 0 to -270 degrees 2006 Pearson Education, Inc. All rights reserved.

Outline 47 Drawing. Arcs. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

48 17. 8 Drawing Polygons and Polylines • Polygons – Multisided shapes – Several Graphics methods used to draw polygons: – Draw. Lines • Draws a series of connected lines – Draw. Polygon • Draws a closed polygon – Fill. Polygon • Draws a solid polygon 2006 Pearson Education, Inc. All rights reserved.

49 Fig. 17. 19 | Graphics methods for drawing polygons. 2006 Pearson Education, Inc. All rights reserved.

Outline 50 Draw. Polygons. cs (1 of 5) Declare a dynamic array to store the vertices of the polygon Store the polygon’s vertices determined by the mouse position 2006 Pearson Education, Inc. All rights reserved.

Outline 51 Draw. Polygons. cs of one 5) point Make sure there is more (2 than Extract an array from an Array. List Determine which option(s) are checked and draw its corresponding shape Clear the points store in the Array. List 2006 Pearson Education, Inc. All rights reserved.

Outline 52 Draw. Polygons. cs (3 of 5) Refresh and redraw 2006 Pearson Education, Inc. All rights reserved.

Outline 53 Check to see if user pressed “Cancel” Draw. Polygons. cs (4 Change of 5) to the appropriate color 2006 Pearson Education, Inc. All rights reserved.

Outline 54 Draw. Polygons. cs (5 of 5) 2006 Pearson Education, Inc. All rights reserved.

55 17. 9 Advanced Graphics Capabilities • Class Linear. Gradient. Brush – Enables users to draw with a color gradient – Linear. Gradient. Mode enumeration • Specifies the gradient’s direction • Class Bitmap – Produce images in color and gray scale – Graphic’s static method From. Image • Retrieves the Graphics object associated with an Image • Class Graphics. Path – Enables the creation of complex shapes from vector-based primitive graphics objects – Method Close. Figure • Attaches the final vector-graphic object end point to the initial starting point for the current figure by a straight line • Then starts a new figure – Method Start. Figure • Begins a new figure within the path without closing the previous figure – Method Add. Line • Append a line to the shape 2006 Pearson Education, Inc. All rights reserved.

Outline 56 Draw. Shapes. cs (1 of 4) Create a Rectangle object Enable user to draw with a color gradient 2006 Pearson Education, Inc. All rights reserved.

Outline 57 Draw a filled gradient ellipse Draw. Shapes. cs (2 of 4) outlined Draw a red rectangle Create a new Bitmap image Retrieves Graphics object associate with an Image Fill Bitmap 2006 Pearson Education, Inc. All rights reserved.

Outline 58 Fill Bitmap Draw. Shapes. cs (3 rectangle of 4) Draw with Bitmap image Draw white pie arc Draw a green line Draw a yellow dashed line 2006 Pearson Education, Inc. All rights reserved.

Outline 59 Draw. Shapes. cs (4 of 4) 2006 Pearson Education, Inc. All rights reserved.

Outline 60 Draw. Stars. Form. cs (1 of 3) Create two arrays of x and y points where stars will be drawn 2006 Pearson Education, Inc. All rights reserved.

Create a Outline Graphics. Path object for a star 61 Draw. Stars. Form. cs (2 ofa 3)star Create Translate to a new origin Move to the next position on the form The rotation angle in degrees Draw rectangle with random color 2006 Pearson Education, Inc. All rights reserved.

Outline 62 Draw. Stars. Form. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

63 17. 10 Introduction to Multimedia • Multimedia applications demand extraordinary computing power – Today’s ultrafast processors make multimedia-based applications commonplace 2006 Pearson Education, Inc. All rights reserved.

64 17. 11 Loading, Displaying and Scaling Images • Image’s static method From. File – Loads an image from a file on the disk • Graphics – Form’s Create. Graphics method • Creates a Graphics object for drawing on the Form – Graphic’s Clear method • Paint the entire Form in the current background color – Graphic’s Draw. Image method • If the width and height do not correspond to the image’s original dimensions, the image is scaled to fit the new width and height 2006 Pearson Education, Inc. All rights reserved.

Outline 65 Display. Logo. Form. cs (1 of 3) Load image from specified location 2006 Pearson Education, Inc. All rights reserved.

Outline 66 Display. Logo. Form. cs (2 of 3) Retrieve the height and width the image should be scaled to Draw image with the specified width and height 2006 Pearson Education, Inc. All rights reserved.

Outline 67 Display. Logo. Form. cs (3 of 3) 2006 Pearson Education, Inc. All rights reserved.

68 17. 12 Animating a Series of Images • 2 -D collision detection – Enables a program to detect whether two shapes overlap or if a point is contained within a shape – Rectangle’s method Contains • Useful for determining whether a point is inside a rectangular area • Artifacts – Unintended visual abnormality in a graphical program 2006 Pearson Education, Inc. All rights reserved.

Outline 69 Logo. Animator. cs (1 of 2) Store and load the images that will be displayed Start by displaying the first image 2006 Pearson Education, Inc. All rights reserved.

Outline 70 Logo. Animator. cs For every Tick event, (2 of 2) display the next image 2006 Pearson Education, Inc. All rights reserved.

71 Performance Tip 17. 2 It is more efficient to load an animation’s frames as one image than to load each image separately. (A painting program, such as Adobe Photoshop®, or Jasc® Paint Shop Pro™, can be used to combine the animation’s frames into one image. ) If the images are being loaded separately from the Web, each loaded image requires a separate connection to the site on which the images are stored; this process can result in poor performance. 2006 Pearson Education, Inc. All rights reserved.

Outline 72 Chess. Piece. cs (1 of 2) Enumeration for chess pieces Define the image location on the chessboard 2006 Pearson Education, Inc. All rights reserved.

Outline 73 Chess. Piece. cs Extract a sub-image that (2 of 2) contains only the current piece’s bitmap data Draws the chess piece Change the chess piece location 2006 Pearson Education, Inc. All rights reserved.

Outline 74 Chess. Game. cs (1 of 11) private instance variables representing the chessboard and pieces 2006 Pearson Education, Inc. All rights reserved.

Outline 75 Chess. Game. cs (2 of 11) Load the chess board tile images from a specified location Load the images for the white chess pieces 2006 Pearson Education, Inc. All rights reserved.

Outline 76 Chess. Game. cs Load the (3 ofimages 11) for the black chess pieces Put the chess pieces in the appropriate position using a switch statement 2006 Pearson Education, Inc. All rights reserved.

Outline 77 Chess. Game. cs (4 of 11) Add the pawns to its appropriate positions 2006 Pearson Education, Inc. All rights reserved.

Outline 78 Chess. Game. cs (5 of 11) Shift the origin of the form by 24 pixels 2006 Pearson Education, Inc. All rights reserved.

Outline 79 Chess. Game. cs (6 of 11) Draw the chessboard tiles Retrieve the piece’s rectangle Determine if the specified point is contained in the rectangles 2006 Pearson Education, Inc. All rights reserved.

Outline 80 Chess. Game. cs (7 of 11) Draw every chess piece Determine if user selected a piece Create a region of 2 tiles from every direction of the mouse cursor 2006 Pearson Education, Inc. All rights reserved.

Outline 81 Set and center the selected piece location to the mouse. Chess. Game. cs cursor position (8 ofthe 11)specified Refresh only region Determine is there is a collision Align the current piece to the closest square and deselect it 2006 Pearson Education, Inc. All rights reserved.

Outline 82 Remove the selected piece Chess. Game. cs (9 of 11) Refresh chessboard 2006 Pearson Education, Inc. All rights reserved.

Outline 83 Chess. Game. cs (10 of 11) 2006 Pearson Education, Inc. All rights reserved.

Outline 84 Chess. Game. cs (11 of 11) 2006 Pearson Education, Inc. All rights reserved.

85 17. 13 Window Media Player • Windows Media Player control – Type Ax. Media. Player – Enables an application to play video and sound in many multimedia formats – URL property • Specifies the file that Windows Media Player is currently using 2006 Pearson Education, Inc. All rights reserved.

Outline 86 Media. Player Test. cs (1 of 2) Allow the user to select a file Specifies the file that Windows Media Player is using 2006 Pearson Education, Inc. All rights reserved.

Outline 87 Media. Player Test. cs (2 of 2) 2006 Pearson Education, Inc. All rights reserved.

88 17. 14 Microsoft Agent • Microsoft Agent – Add interactive animated characters to Windows applications or Web pages – Characters can speak and respond to user input • Via speech recognition and synthesis – The control uses a speech recognition engine • Translates vocal sound input from a microphone to language that the computer understands – Programmers can even create their own animated characters, with the help from: • Microsoft Agent Character Editor • Microsoft Linguistic Sound Editing Tool 2006 Pearson Education, Inc. All rights reserved.

89 Bubble contains text equivalent to words Peedy speaks Fig. 17. 28 | Peedy introducing himself when the window opens. 2006 Pearson Education, Inc. All rights reserved.

90 Look-and-Feel Observation 17. 1 Agent characters remain on top of all active windows while a Microsoft Agent application is running. Their motions are not limited by the boundaries of the browser or application window. 2006 Pearson Education, Inc. All rights reserved.

91 Fig. 17. 29 | Peedy’s Pleased animation. 2006 Pearson Education, Inc. All rights reserved.

92 Pointer clicking Peedy Fig. 17. 30 | Peedy’s reaction when he is clicked. 2006 Pearson Education, Inc. All rights reserved.

93 Fig. 17. 31 | Peedy flying animation. 2006 Pearson Education, Inc. All rights reserved.

94 Pizza style options Tool tip indicates that Peedy is waiting for user input Fig. 17. 32 | Peedy waiting for speech input. 2006 Pearson Education, Inc. All rights reserved.

95 Tool tip indicates recognized speech Fig. 17. 33 | Peedy repeating a request for Seattle-style pizza. 2006 Pearson Education, Inc. All rights reserved.

96 Fig. 17. 34 | Peedy repeating a request for anchovies as an additional topping. 2006 Pearson Education, Inc. All rights reserved.

97 Fig. 17. 35 | Peedy recounting the order. 2006 Pearson Education, Inc. All rights reserved.

98 Fig. 17. 36 | Peedy calculating the total. 2006 Pearson Education, Inc. All rights reserved.

Outline 99 Agent. cs (1 of 8) Load Microsoft agents 2006 Pearson Education, Inc. All rights reserved.

Outline 100 Show and set default agent to Genie Agent. cs (2 of 8) Prompt user for an input for what he/she wants the agent to say Agent will speak the user’s input 2006 Pearson Education, Inc. All rights reserved.

Outline 101 Stop current animation and Agent. cs plays specified animation (3 of 8) Switch Microsoft agent 2006 Pearson Education, Inc. All rights reserved.

Outline 102 Agent. cs (4 of 8) Create an IEnumerator object to iterate through the characters’ animations Clear existing items Add a new command to the current character 2006 Pearson Education, Inc. All rights reserved.

Outline 103 Add the “Move. To. Mouse” command to the agent Agent. cs (5 of 8) Stop current animation and play specified animation Assign the user. Input object to an IAgent. Ctl. User. Input object to identify command 2006 Pearson Education, Inc. All rights reserved.

Outline 104 Agent. cs of 8) Moves the (6 agent to the specified screen position Stop current animation and play specified animation 2006 Pearson Education, Inc. All rights reserved.

Outline Genie performing Writing animation Drop-down list from which you can choose a character animation 105 Agent. cs (7 of 8) Writing animation selected Tool tip indicating that Merlin is listening for a voice command Merlin responding to user spoken animation command. Tool tip shows the words that the speech recognition engine translated to the application 2006 Pearson Education, Inc. All rights reserved.

Outline 106 Agent. cs (8 of 8) Text input Peedy repeating the words entered by the user. Peedy’s speech can be heard through your computer’s speakers. Robby responding to being clicked with the mouse pointer. The commands pop-up window 2006 Pearson Education, Inc. All rights reserved.

107 17. 14 Microsoft Agent (Cont. ) • IAgent. Ctl. Character – Represents the current character – Method Play • Plays an animation – Accepts a string representing one of the predefined animations for the character – Method Speak • Receives a string that the character should speak – Method Move. To • Moves the character to the specified position on the screen 2006 Pearson Education, Inc. All rights reserved.

108 17. 14 Microsoft Agent (Cont. ) • Commands – Method Add • Adds a new command to the command list – Property Commands • List of valid commands that is contained in the IAgent. Ctl. Character – Commands can be viewed in the Commands pop-up window • Displays when the user right-clicks an Agent character – Triggered when the user selects the command from the Commands popup window or speaks the voice input into a microphone • Command logic is handled in the Command event handler of the Ax. Agent control • When a user clicks a character, the Ax. Agent control’s Click. Event event handler executes 2006 Pearson Education, Inc. All rights reserved.