Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.

Shirley, S. Baer

Goals
 Give student some idea what this
class is about
 Start Event Driven Programming
if possible

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

What is this class about

 Building interactive graphics
applications
 Ask:
 "What is interactive"?

real time
 "What is graphics"?

visualization of geometry
 human as IO device
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

What is non-interactive
application?
 Show ray tracer and output
 BumpScene/color.jpg - the color file
 BumpScene/CommandFile.Bump - to bump
the file
 BumpScene/BumpImage.Color.jpg - color
rendered image
 BumpScene/BumpImage.BumpOut.jpg -
bumped file
 sacrifice time for quality (always true)
 animated movies are not done with "real
time interactive"
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Results: Demo
 Demo a couple of previous year's
project

FORMS! need to sign form to have projects
posted.
 major difference with simple games: we
do LOTS of unnecessary work!!. e.g.,

transformation

multiple views

real collision

proper software architectural structure
 Our projects also lack in fun!
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Results: Expectations
 Past good students get job at games
company:
 Difficult to get graphics (or game) specific
jobs
 This is A LOT of work!
 Make sure you understand each
assignment!
 the assignments build on each other)
 Large source code
 it helps if you like programming!
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Our approach:
 Learn concepts (transformation)
 See how implemented
 You:
 Use the implementation in more
complex applications
 Implement some of the concepts not
shown in tutorials

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Language and API

 Language: JavaScript
 Java, C#, C++
 trick is lanaguge, GUI and Graphics API are tightly
related.
 GUI API: HTML5 + AngularJS
 WinForm (for C#), MFC/WPF (C++),
 GLUT/FLTK (OpenGL)
 Swing (Java)
 Graphics API: WebGL
 D3D: C++ and Microsoft
 OpenGL: C++ the rest of the world
 XNA Framework or MonoGame (only with C#)
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Tutorials:
 Start simple (few files) builds up over
the quarter (100+ files)
 Most of the code will be provided to you
 In the forms of software library:

We will build this over the quarter

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Provided source code:

 You NEED to understand the
implementation of the source code
provided to you!
 If your program does not work
because of the library:

it is your fault!

Source is provide for you, you should fix
the problem!

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Learning from source

code:
 User of source code

Learn how to build applications by calling
the provided functions
 Evaluator of the source code

Use the provided source code, and

Evaluate: what is good, why is it bad
 Developer of your own system

Use the provided source as an example
prototype

Develop your own supporting library

MOST REWARDING! Time demanding!
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Let begin!
 Ball shooting program (Tutorial
5.6)
 Ask ourselves, what are needed to
implement this program?

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Control driven programs

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

More detailed parsing …

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Concerns
 Complexity of our code
 Number of events!
 Un-handled events! (expose, iconize,
…)

 Efficiency
 constantly waiting for the user
 Repeating of similar work across
applications (e.g., iconize)
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event driven programming

 No notion of main() function!
 Instead: have a MainEventLoop()
function
 …

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Main Event Loop

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Interesting differences
 MainEventLoop() is not ours!
 We as programmer, we cannot change this function!!

 Instead, we have to program _with_ this function!

 What happens at Label A? and
 How to define “service routine”?

 Interesting points:
 Label B: loop forever!!

When will your program ever quit?
 Label C: wait (instead of busy loop)
 Label D: every event has a default action

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event Driven Program

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Pseudo Code …

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event Program structure

 Application State
 Well defined
 Persist over function calls
 Service of Events
 To change the application state
 Optional: kind of nice to have
 displaying of application state

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event: Origin and Handling

 Operating System and Window
Manager

Windows (Integrated system)

Unix + X Windows with twm, mwm, etc.
 GUI API

Graphical User Interface

Application Programming Interface

Define GUI Element for handling events
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

GUI Elements:
 Virtual/Abstract IO devices
 Windows, Buttons, Slider bars, etc.
 Associated with each GUI element,
there are a set of defined events:
 E.g., Button: click, release, double click, etc.
 E.g., Window: mouse over, mouse move,
etc.
 As programmer, we can:
 Ignore events from a GUI element or
 Service events from a GUI element
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Events:Categories
 User: generated events

Application specific: LMB click/drag

We should service this

General: iconize

Window manager will service this
 Application generated events

Timer: we should service this
 External:

GUI state change:

E.g., SystemInitialization()

Select interested ones to service

Window Environment:

E.g., Exposure

Select interested ones to service

Request Collaboration:

E.g., Redraw events

Must service!

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event Service registration

 Callback function registration (A2)
 Define the call back functions (D1)

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event Service Routines

 Service one state and return
 Stateless!!
 Should not contain presistent
variables
 Verify invocation conditions
 Error checking
 Our tutorials has serious problem with
lack of error checking!!
Intro and Chapter 1
Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event Service: Ball Shoot

 Application state + Registration

Intro and Chapter 1

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.
Shirley, S. Baer

Event service: Ball shoot

Intro and Chapter 1