i
i
i
i
i
i
i
i
512 19. Building Interactive Graphics Applications
containing GUI elements that affect/echo the entir e a pplication state, TheModel
component, and all the view/controller pairs.
Since Maya is a 3D media creation system, TheModel componentcontains 3D
content information (e.g. scene graph, 3D geometry, material properties, lighting,
camera, animation, etc.). Once again, the rest of the components in the MainUI-
Window are designed to facilitate the user’s view an d to change TheModel. Here
is the functionality of the four view/controller pairs:
• GraphPane. The view component displays the scene graph of the 3D con-
tent; the controller component supports navigating the graph and selecting
scene nodes in the graph.
• CameraPane. The view component renders the scene graph from a cam-
era viewing position; the controller component supports manipulating the
camera view and selecting objects in the scene.
• MaterialPane. The view component displays all the defined materials; the
controller component supports selecting and editing materials.
• OutlinePane. The view component displays all the transform nodes in the
scene; the controller component supports manipulating the transforms (e.g.
create/change parent-child relationships, etc.).
Once again, the coherency among the different view/controller pairs can be main-
tained while servicing the application timer events.
We do not speculate that PowerPoint or Maya is implemented according to
our framework. These are h ighly sophisticated commercial applications and the
underlying implementation is certainly much more complex. However, based on
the knowledge we have gained from this chapter, we can begin to understand how
to approach discussing, designing, and building such interactive graphics appli-
cations. Remember that the important lesson we want to learn from this chapter
is how to organize the func tionality of an interactive graphics application into
components and understand how the components interact so that we can better
understand, maintain, modify, and expand an interactive graphics application.
Notes
I first learned about the model view controller framework and event-driven pro-
gramming from SmallTalk (Goldberg & Robson, 1989) (You may also want to
refer to the SmallTalk web site (http://www.smalltalk.org/main/).) Both Design
Patterns—Elements of Reusable Object-Oriented Design (Gamma et al., 1995)
i
i
i
i
i
i
i
i
19.5. Applying Our Results 513
and Pattern-Oriented Software Architecture (Buschmann et al., 1996) are excel-
lent sources for finding out more about design patterns and software architec-
ture frameworks in general. I recommend 3D Game Engine Architecture (Eberly,
2004) as a good source for discussions on issues relating to implementing real-
time graphics systems. I learned MFC and Direct3D mainly by referring to the
online Microsoft Developer Network pages (http://msdn.microsoft.com). In addi-
tion, I find Prosise’s book Programming Windows with MFC (Prosise, 1999) to be
very helpful. I refer to the OpenGL Programming Guide (Shreiner et al., 2004),
Reference Manual (Shreiner, 2004), and FLTK on-line help (http://www.fltk.org/)
when developing my OpenGL/FLTK programs.
Exercises
1. Here is the specification for dragging out a line:
• Left mouse button (LMB) clicks define the center of the lin e.
• LMB drags out a line such that the line extends in two directions. The
first direction extends fro m the center (LMB c lick) position toward the
current mouse position. The second direction extends in the opposite
direction from the first with exactly the same length.
• Right mouse button (RMB) click-drag moves the line such that the
center of the line follows the current mouse position.
(a) Follow the steps outlined in Section 19.2.3 and desig n an event-driven
programming solution for this specification.
(b) Implement your design with FLTK and OpenGL.
(c) Implement your design with MFC and Direct-3D.
Notice that in this case the useful application internal state information (the
center position of the line) and the drawing presentation requirements (en d
points of the line) do not coincide exactly. When defining the application
state, we should pay attention to what is the most important and convenient
information to store in order to support the specified functionality.
2. For the line defined in Exercise 1, define a velocity that is the same as
the slop e of the line: once created, the line will travel along the direction
defined by its slope. Use the length of the line as the speed. (Note that
longer lines travel faster than shorter lines).
i
i
i
i
i
i
i
i
514 19. Building Interactive Graphics Applications
3. Here is the specification for dragging out a rectangle:
• LMB click defines the center of the rectangle.
• LMB drag out a rectangle such that the rectangle extends from the
center position and one of the corner positions of the rectangle always
follows the current mouse position.
• RMB click-drag moves the rectangle such that the center of the rect-
angle follows the current mouse position.
(a) Follow the steps outlined in Section 19.2.3 and design an event-driven
programming solution for this specification.
(b) Implement your design with FLTK and OpenGL.
(c) Implement your design with MFC and Direct-3D.
4. For the rectangle in Exercise 3:
(a) Support the definition of a velocity similar to that of HeroBall velocity
in Section 19.1: once created, the rectangle will travel along a direc-
tion that is the vector defined from its center towards the LMB release
position.
(b) Design and implement collision between two rectangles (this is a sim-
ple 2D bound intersection check).
5. With results from Exercise 4, we can approximate a simple Pong game:
• The paddles are rectangles;
• A pong-ball is drawnas a circle but we will use the bounding square (a
square that centers at the center of the circle, with dimension defined
by the diameter of the circle) to approximate collision with the paddle.
Design and implement a single-player pong-game where a ball (circle)
drops under gravitational force and the user must manipulate a paddle to
bounce the ball upward to prevent it from dropping below the application
window. You should:
(a) design a specification (similar to that of Section 19.1) for this pong
game;
(b) follow the steps outlined in Section 19.2.3 to design an event-driven
programming solution;
(c) implement your design either with OpenGL or Direct-3D.
i
i
i
i
i
i
i
i
19.7. Exercises 515
6. Extend the ApplicationView in Figure 19.12 to include functionality for
setting a world coordinate window bound. The world coordinate window
bound defines a rectangular region in the world for displaying in the View-
port. Define a method for setting the world coordinate window bound and
modify the ApplicaitonView::DeviceToWorldXform() function to support
transforming mouse clicks to world coordinate space.
7. Integrate your results from Exercise 6 into the two-view ball shooting pro-
gram from Figure 19.14 such that the small view can be focused around the
current HeroBall. When there is no current HeroBall, the small view should
display nothing. When user LMB click-drags, or when user RMB selects a
HeroBall, the small view’s world coordinate window bound should center
at the HeroBall center and include a region that is 1.5 times the HeroBall
diameter.
i
i
i
i
i
i
i
i
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.