CSC470 Computer Graphics Table of Contents I Course Organization II Assignments III Midterm Project IV Final Project V Visual BASIC tutorial: A paint program VI Trispectives: A full featured 3D modeling tool. CSC470 Computer Graphics Course Outline Instructor: Dr. Walter Johnson, Jr. Office; Graphics Building #3 Phone: 546-8383 e-mail: wjohnson@shawu.edu Class location: SCIENCE Build 3015 Time: 2:15-3:45 Course Objectives: • To study the theory of fundamental methods used in computer graphics • To explore some advanced methods and current research problems in computer graphics. • To gain practice in developing event-driven programs, designing graphical user interfaces, and developing useful graphics programs. Course Organization: The course will be organized by two themes: theory and practice. The theory component will be presented in a traditional lecture-based classroom format. In the first half of the course we will cover fundamentals as well as propose some possible research topics. We will follow this outline: 1. Basic methods of raster graphics o Scan-conversion of lines and circles o Clipping methods o Fill methods 2. Transformations o Homogeneous coordinates o 2D transformations o 3D transformations o Perspective and parallel projections 3. Modeling o Bezier curves and surfaces o Boundary representations o Object hierarchies o Constructive solid geometry 4. Hidden surface removal o Z-buffering o List priority o Area subdivision 5. Ray tracing o Ray/intersection methods o Illumination models o Accelerated ray tracing In this course we will consider some advanced topics in rendering, modeling, scientific visualization, and computer animation. Some of the material presented in the course will be dictated by your interests, as determined by the projects you choose to work on. The purpose of this course’s practical component will be to introduce you to two program development environment with relative shallow learning curves. It will be possible for you to develop a sophisticated project using either of these tools without prior experience, in the relatively short time frame of this course. If you are already familiar with a more complex development environment such as C++ you are welcome to work with such a system. The two development environments we will look into are Visual BASIC and Trispective. Visual BASIC and Trispective both run on PC’s. Both tools support event-driven programming and specification of graphical user interfaces through a visual programming environment. Moreover, both provide relatively powerful programming languages: Visual BASIC’s programming language is a much-enhanced version of BASIC. For this class we will enjoy a hands-on tutorial of Visual BASIC and a demonstration of Trispective a 3D application. Projects Two programming projects will be required for the course. The first will involve the implementation of a simple paint program. This first project will also provide you with a chance to work with a programming environment such as Visual BASIC. The second programming project will be less confining. You choose from a number of topics. Here are some examples: o A drawing program o A ray tracer o An interesting game o Several hidden surface removal methods o A modeling system (eg. CSG, or a Bezier surface editor) A detailed handout describing each of these pro0jects is included in this booklet. Course Requirements Class participation (20% of total grade) Midterm Programming project (40%) Final Programming project (40%) A Word of Caution In a course like this, which mixes theory and programming, students often have a tendency to spend too much time programming and too little time on theory. The theory is an important element of the course. Please keep up with the material covered in lectures. Introduction to Visual BASIC o What is Visual BASIC o Elements of the opening screen o Event-driven programming Developing a Paint Program in Visual BASIC o Creating a Canvas o Controls for Drawing Lines and Circles o Adding a Message Bar o A Control for Clearing the Picture o A Control for Changing the Pen Width o Rubberbanding Lines o Rubberbanding Circles o A Control for Updating Stroke Color o A Control for Updating Fill Color o Producing a Stand-Alone Application What is Visual BASIC Visual BASIC is visual programming environment designed to run in the Windows environment; the applications it produces also run in Windows. It was first released by Microsoft in mid-1991, and subsequent releases have appeared about a year apart ever since. Visual BASIC supports the following: o An 9interactive application development process o An easy approach to Windows programming, without the need to master the Windows application programming interface (API) o Event-driven programming, in which objects respond to messages they are sent. o The use of a visual programming environment for the development of Graphical User Interfaces (GUI) o An extensive library of useful controls such as buttons, list boxes, editable text fields and dialogue boxes. o The use of the Visual BASIC textual programming language, a simple yet powerful descendent of Basic. Elements of the Opening Screen o Title bar-the horizontal bar across the top of the screen containing the name of the application and the current mod. o Menu bar-The horizontal bar containing eight or so, drop-down menus. o For window-The large window in the center of the screen. In design mod, the form window is where you place controls such as text boxes and buttons. In run mode or when the compiled application is run, the form is the window that the user sees. o Toolbar-The horizontal row, of icons near the top of the screen. The icons give easy access to frequently used commends. o Toolbox-The vertical column of icons along the left of the screen. The toolbox provides a set of controls that you place onto your application’s forms. o Project window-This window lists the files, forms and modules that comprise the current application. o Properties window-This window shows the properties (or attributes) associated with the selected form or control. You can use this window to ascertain or modify the value of nay design mode property. Modes Visual BASIC provides three modes which together support an interactive development process. o Design mode-While in design mode you develop your application: place controls on forms, write procedures, set property values, and so forth. o Run mode-You enter run mode in order to try your application out. o Break mode-You enter break mode by suspending your application while it is running in run mode. While in break mode you can use various debugging tools. You can switch between modes by either using the RUN menu on the menu bar, or by using the Run mode, and Stop buttons of the toolbar. Visual BASIC serves as an interpreted, highly interactive environment for application development. You will generally switch back and forth between modes frequently during the application development process. You make a change or add an enhancement to the application in Design mode, then enter Run mode to test the procedure calls, or set breakpoints. Event-Driven Programming Visual BASIC is an event-driven language. This means that as you develop your application, you define a number of objects. In Visual BASIC, the primary objects are forms and controls An object combines state land behavior: o The state of an object consists of the current values of all its properties. o The behavior of an object is determined by the event procedures defined for the objects. The method consists of a sequence of program statements, that is, Visual BASIC instructions. o An object performs an action (i.e. Behaves) in response to the message it receives. Whenever an object receives a message, it responds to the message by invoking the appropriate event procedure. o For example, one object might be a button with the name Button1. Part of Button1’s state is described by the following property values: Name Button1 Caption “Push Me” When you click on Button1, the event procedure Button1_Click is automatically invoked. Thus the button behaves and executes the code stored in this event procedure. Paint Programs and Draw Programs A paint program is an application for creating pictures on the screen and editing at the level of individual pixels. Pictures are stored only in the frame buffer (the screen’s memory). Once an object is drawn, the paint program “forgets’ the object it does not maintain an internal data structure of objects. For instance, once a line is drawn, the line loses its integrity as an object: it cannot be selected, moved, resized, and so forth. Paint programs support such operations as painting various filled and unfilled graphics primitives into the frame buffer, copying rectangular or irregular regions of pixels, and food-fill operations. A draw program is an application for creating pictures on the screen and editing them at the level of graphics objects and groups of objects. Objects are stored in an internal data structure that the draw program maintains. Once an object is defined and drawn, the line remains a line: it can be selected, moved, resized, and duplicated; its endpoints can be repositioned. Draw programs support such operations as selecting, duplicating, deleting, transforming, and grouping and ungrouping primitives, as well as modifying the attributes and/or geometry of a primitive after it has been drawn. Creating a Canvas 1. Let us develop the paint program outlined at the beginning of the talk. First set the property value for the form: Name frm1 Caption Canvas 2. In the code window, encode the following event procedure: Sub Form_Load() DrawingLine = False End Sub Procedure Form_Load is automatically invoked when the application is launched and the window is opened. 3. In the general declarations section of the code window, add this declaration: Dim DrawingLine As Single Dim FirstX As Single Dim FirstY As Single 4. The canvas, in which all drawing takes place, will be implemented by a picture box. Place a picture box on the form and set some of its property values: Name Picture1 ScaleMode Pixel AutoRedraw True MousePointer 2-Cross The Picture Box’s Coordinate System A graphic container is a control that contains graphic objects. The primary containers for graphics are forms and picture boxes. Inside a container, locations are specified by a pair (x,y) consisting of an x-coordinate and y-coordinate. The upper-left hand corner of the container is at location (0,0); x-coordinate increase to the right and y-coordinate increase toward the bottom. The coordinate system for a graphic container is depicted on the next page. The scale is determined by the value of the container’s ScaleMode property. (0,0) Drawing Lines 1. In the code window add this event procedure: Picture1_MouseDown(….) If Not DrawingLine Then FirstX = x FirstY = y DrawingLine = True Else Picture1.Line (FirstX, FirstY) – (x,y) DrawingLine = False End If End Sub 2. Now we can draw lines in the picture box! We fix the first endpoint of a line by clicking in the picture boix; we fix the second endpoint of the line by clicking in the picture box once again. The value of variable DrawingLine indicates the significance of each click: DrawingLine=True if and only if one endpoint has been fixed but the other has not yet been fixed. 3. The procedure call gc.Line (x1,y1) -(x2,y2) draw a line from (x1,y1) to (x2,y2) in the graphic container gc. Here points are given in the graphic container’s coordinate system. Drawing Lines and Circles We will use a command button to select a drawing tool. Place a new command button on the form and set some of its property values: Name cmdLine Caption Line Place another command button on the form and set its property vales: Name cmdCircle Caption Circle The buttons are used to set the global variables CurTool. In the Code Window add these event procedures: Sub cmdline_Click() CurTool = LineTool End Sub Sub cmdCircle_Click() CurTool = CircleTool End Sub And declare variable CurTool and constants LinTool and CircleTool in the general declarations section: Const LineTool = 0 Const CircleTool = 1 Dim CurTool As Integer Drawing Lines and Circles To initiate variable CurTool, insert the following line into the event procedure Form_Load CurTool = LineTool The event procedure Picture1_MouseDown must behave differently, depending on the current tool (line or circle). Rather than doing all the work in this event procedure, let us define a general procedure for each possible tool. Then Picture1_MouseDown need only call the correct general procedure, based on the value of CurTool. Copy the bidy of Picture1_mouseDown, and past it into the body of a new general procedure having this skeleton: Sub MakeLine ( X As Single, Y As Single) … End Sub Next update Picture1_MouseDown: Sub Picture1_Mouse (…) If CurTool = LineTool Then Call MakeLine(X,Y) ElseIf CurTool= CircleTool Then Call MakeCircle(X,Y) End If End Sub Public Sub MakeCircle (X ass single, Y as single) If not Drawingcircle then CenterX =X CenterY=Y DrawingCircle=true Else Dx=CenterX-x Dy=CenterY=y Radius=sqr(Dx*Dx+Dy*Dy) Picture1.Circle (Centerx,CenterY), Radius DrawingCilcle=false End If End Sub Dim DrawingCircle as Integer Dim CenterX as Single Dim CenterY as Single Drawing Lines and Circles Adding a Message Bar Let us add a horizontial message bar along the bottom of the form, to indicate the current drawing tool. Place a label control onto the form. Rename the label by setting the name property: Name lblMsg The label’s Caption property contains the string to be displayed. We will set and update this property at runtiime rather than in design-time. In event procedure Form_Load, add the following line to initialize the label’s caption: LblMsg.caption = “Line Tool” The message should be updated whenever the user selects the cmdLine or cmdCircle button. Add the following line to procedure cmdLine_Click: LblMsg.Caption = “Lint Tool” And add this line to event procedure cmdCircle_Click: LblMsg.Caption = “Circle” Observe that when lblMsg.Caption is assigned a new value, the message display is automatically updated. Adding a Message Bar Let us add a horizontal message bar along the bottom of the form, to indicate the current drawing tool. Place a lable control onto the form. Name lblMsg The lable caption property contains the string to be displayed. We will set and update this property at run-time, rather than in design-time. In event procedure Form-Load, add the following line to initialize the lable’s Caption: LblMsg.Caption = “Line ool” And add this line to event procedure cmdCircle_Click: LblMsg.Caption = “Circle Tool” Observe that when lblMsg.Caption is assigned a new value, the message display is automatically updated. Clearing the Picture We need a button for clearing the picture box. Place a new button onto the form and set its properties thus: Name cmdClear Caption Clear Next code the following event procedure: Sub cmdClear_Click () Picture1.Cls End Sub In general, the procedure gc.Cls clears the graphic container gc. Modifying Pen Width Let us add a combo box for selecting a pen width. Place a new combo box onto the form and assign it these property values: Name cmbPenWidth Text 1 Style 2-Dropdown list The items in the combo box are added at run time. We shall let Form_Load procedure insert these items, since this procedure is invoked when the program is launched. Add the following ibstructions to event procedure Form_Load: CmbPenWidth.AddItem “1” CmbPenWidth.AddItem “2” CmbPenWidth.AddItem “3” CmbPenWidth.AddItem “4” CmbPenWidth.ListIndex=0 Picture1.DrawWidth =1 The ListIndex property specifies the index of the currently selected item. Since indexing begins at 0, the last command above initializes the selected item to the string “1”. At run-time, the selected item is displayed in a non-editable text box ( it is non-editable because of the value (2) of the combo box’s Style property). The property DrawWidth of a graphic container contains the width the width of a pen in the container’s ScaleMode. The last instruction above sets the picture box’s pen width to one pixel. Modifying pen Width To indicate the combo box’s function, place beside it a label with these properties: Name lblPenWidth Caption Pen Width Whenever the user selects a new item from the combo box, the pen width should be changed accordingly. This is done by the event procedure cmbPenWidth_Click, which gets invoked whenever the user selects (clicks on) an item in the combo box: Sub cmbPenWidthg_Click() Picture1.DrawWidth = cmbPenWidth.ListIndex + 1 End Sub The procedure exploits the fact that the list-index of each item is one less than the item’s value (ie. The item “3” has index 2). Creating a stand-alone Application There are numerous advantages to saving your application as a stand-alone executable file, including: Others can only run your application without the need to for Visual Basic The compiled version runs faster than the interpreted version Others users cannot read your source code. Before saving the application under development as an independent executable file, we should provide the user with a way to quite the application. Place a button onto the form and assign it these property values: Name cmdQuit Caption Quit Encode the event procedure cmdQuit_Click thus: Sub cmdQuit_Click () End End Sub To create the executable file, select the item “make EXE File” from the File menu. Enter the name of the file in the dialog box. Let us call it Paint.exe. We are now able to quit Visual Basic and run our paint program from the File Manager by invoking Paint.exe. The dynamic link library VBRUN300.DLL must be present on your system for the stand-alone application to run. Adding Stroke Color Add the following variable declarations to the general declarations section of the Cod Window: Dim StrokeColor as long Dim FillCir as long To initialize these variables on start-up, add these lines to the event procedure Form-Load: StrokeClr = RGB(0,0,0) FillClr = RGB(0,0,0) To ensure that procedures MakeLine ands MakeCircle employ the current stroke color when drawing, insert the following instruction in both procedures Pic1.foreColor = StrockeClr Place s common dialog control on the form. The default name for this is CMDialog1, which is fine. There is no need to mody this control’s properties. The common dialog control provides access to a set of standard dialog boxes often used in Windows. We shall be using the Color Dialog Box. Note that the common dialog control is not visable during run-time it is visible only during design-time. Add a new label to the form and assign its properties these values: Name lblStrokeColor Caption (empty string) BorderStyle 1-Fixed Single This label will be used both as button for evoking the color dialog box and as an indicator for the current stroke color. Add another label beneath it and set Caption Stroke Insert these lines of code into procedure Form_Load: lblStrokeColor.BackColor = StrokeClr pic1.ForeColor = StrokeClr Code event procedure lblStrokeColor_Click, which gets called whenever the label is clicked, as follows: Sub blbStrokeColor_Click () CMDialog1.Action =3 StrokeClr = CMDialog1.Color LblStrokeColor.BackColor = StrokeClr Pic1.ForeColor= StrokeClr End sub The first instruction tells the commopn dialog control to bring up a Color Dialog Box. The assigned value (in this case 3) indicates the type of dialog box. The remaining instructions set the stroke color from the common dialog control’s Color property, wqhose value is set by the user’s interaction. Adding Fill Color We will use a checkbox control to specify whether circles should be filled with the current fill color. If the checkbox is checked, subsequent circles are filled; is the checkbox is unchecked, subsequent circles are unfilled (ie. their interiors are transparent). Give the checkbox the following property values: Name chkFill Caption Fill Initialize the checkbox by adding the following instructions to procedure Form_Load: chkFill.Value = 0 `(when unchecked) pic1.FillStyle = 1 ` ( transparent) Whenever the state of the checkbox is toggled, we will update the property FillStyle of the picture box. Code the following event procedure: Sub chkFill_Click () If chkFill.Value = then pic1.FillStyle = 0 `(this means solid) Else Pic1.FillStyle =1 `(transparent) End if End Sub Whenever the user checks the checkbox, its value property is set to 1 and the event procedure chkFill_Click is called. Similarly, whenever the user unchecks the checkbox, its value property is cleared to 0 and the event procedure is called. Enabling a fill color is analogous to enabling a stroke color. Add a label to the form and assign its properties these values: Name lblFillColor Caption (empty string) BorderStyle 1-Fixed Single This label will be used both as a button for evoking the color dialog box and as an indicator for the current stroke color. Add another label beneath it set: Caption Fill Insert these instructions to procedure Form_Load: lblFillColor.BackColor = FillClr pic1.FillColor = FillClr Code event procedure blbFillColor_Click , which gets called whenever the label is chicked, as follows: Sub lblFillColor_Click () CMDialog1.Action =3 FillClr = CMDialog1.Color lblFillColor.BackColor = FillClr pic1.FillColor = FillClr End Sub Note that the same common dialog control can be used for setting fill color and stroke color.