CS2007: Graphics 2

1
CS2007 Graphics 2

• Animation (prev lecture)
• Coordinate Systems
• Flash
• Lifelike graphics
• Reading Malik, chap 13, websites

2
Prog Aside Names

• You should use meaningful names in your code
• Variables, methods, classes, widgets
• Example of good names
• loansAmount, loansCombo, loansString
• Example of bad names
• num1, jComboBox1, s

3
Prog aside names

• Why?
• Because it makes it easier for other people to
  understand your code
• Also makes it easier for you to understand your
  code!

4
Graphics checklist

• Create NB project
• new JFrame form (main GUI)
• new Java class (graphics panel)
• new package (image files)

5
Main GUI

• In your main GUI (JFrame)
• Add a panel (make it big)
• Click on the panel, select code propertiies, set
  custom creation code to
• new XXXXX()
• XXXX is the name of the graphics panel class

6
Images

• In My Computer (File Manager), find the directory
  for the image package this will be under src in
  the NB project directory
• The directory name will be the same as the
  package name
• Copy all images (png, gif, etc) into this
  directory

7
Graphics panel

• Change graphics panel class so that it extends
  JPanel
• Add paint component method
• public void paintComponent (Graphics g)
• super.paintComponent(g)
• Graphics2D g2 (Graphics2D) g
• // insert drawing code here

8
Graphics Panel

• All drawing must be in the paintComponent method
• Not in the constructor!
• To load an image named card.png(assuming the
  images package is called images), use
• Image im ImageIO.read(getClass().getResource(/i
  mages/card.png))

9
Coordinate system

• By default, coordinates and sizes are specified
  in pixels.
• Better to set up a user coordinate sytem that
  is independent of actual size
• Always goes from 0 to 100 (for example),
  regardless of actual size in pixels
• Adapts if user resizes window (?)
• Use scale

10
Scale example

• // establish 0..100, 0..100 coordinate system
• // (0,0) is top-left
• g2.scale(getWidth()/100.0,getHeight()/100.0)
• // establish 0..100, 0..100 coordinate system
• // (0,0) is bottom-left
• g2.scale(getWidth()/100.0,-getHeight()/100.0)
• g2.translate(0.0,-100.0)

11
Coordinate Systems

• With coord system, (50,50) is always middle of
  the canvas, and 20 is always 20 of canvas
• No need to worry about how many pixels there are
  in a cm (which varies depending on display
  settings)

12
Coordinate Systems

• Major difference between MS paint and drawing
  with Java code
• Becomes more important with more complex graphics
• 3-D graphics needs 3-D coord system
• Photo-realism requires specs of light source,
  viewer position in coord system

13
Transformations

• Transformations
• Rotation
• Translate origins
• Scale
• Shear
• See API and tutorials for details
• See also image transforms in Paint
• Gets mathematical

14
Rotate Example

• // draw goodbye rotated 90 degrees from (10,10)
• g2.rotate(Math.PI/2, 10, 10)
• g2.drawString("goodbye", 10,10)

15
Saving transform

• To temporarily apply a transform (such as rotate)
• save current transform first
• apply new transform
• Draw
• Restore original transform

16
Saving transform

• g2.drawString("hello",10,10)
• AffineTransform oldTransform
  g2.getTransform()
• g2.rotate(Math.PI/2, 10, 10)
• g2.drawString("goodbye", 10,10)
• g2.setTransform(oldTransform)
• g2.drawString("hello again", 20, 20)

17
Warning

• Point object from MouseClick event is in pixels,
  not transformed coordinate
• Must explicitly transform this point into coord
  system
• Use transform method of AffineTransform class
• Bit messy, wont discuss here

18
Transformations

• Essential to complex graphics
• Discussed in much greater detail (and math
  rigour) in CS4024

19
More Complex Graphics

• Java Graphics
• Graphics-oriented programming languages (Flash)
• OK for simple games
• Lifelike 3D graphics
• For leading edge games
• Covered in CS4024

20
Java Facilities

• Java 3D
• Also Java interface to OpenGL
• Media Framework (media player)
• Advanced Imaging (image processing)
• Successfully used in many games
• Runescape

21
Flash

• Flash graphics programming language
• Good drawing tools
• Layers superimposed on each other
• Bottom layer for static background, top layer for
  moving objects?
• Manipulate graphic objects (symbols) instead of
  shapes or pixels
• Support tools (debuggers, etc)

22
Flash animations

• Several ways
• Define frames explicitly
• Define how objects change in frames
• Define key frames, ask Flash to interpolate
  between them
• Eg, Frame 1 has object at left, frame 10 has
  object at right, Flash will interpolate
• Effects (eg, blurring)

23
Flash interaction

• Mouse-sensitive shapes
• Like Java widgets
• Action handlers
• Written in ActionScript, derivative of JavaScript
  (ie, like Java), with primitives for controlling
  graphics

24
ActionScript

• Graphics prog language
• Similar to JavaScript (Java)
• Compiled, downloaded from server, executed in
  client by interpreter
• Just like Java applets (much more successful)
• Good graphics support

25
Simple ActionScript Example

• package
• import
• public class HelloWorld2 extends Sprite
• public function HelloWorld2()
• var txtTextField new TextField()
• txt.textColor 0xFFFFFF
• txt.text "Hello World welcome!
• addChild(txt)

26
Flash summary

• Java-like language and environment for graphics
  programming
• Fairly easy to learn for people who can program
  in Java
• Used by many students in 4th year (sometimes 3rd
  yr) projects
• Used in many simple games

27
Lifelike 3D graphics

• How do we create life-like animated 3-D graphics,
  perhaps with interaction?
• Hollywood movies
• Computer games
• Need
• Models
• Rendering algorithms
• Fast computers

28
Digital Horses

• model of horse
• Object model Geometry of horse
• Light model fur
• Variation model different horses
• Movement model muscles, etc
• Interaction model monster attacks
• Created by
• Drawing, models, tracking real horses
• Integrated with video of real horses

29
Object Models

• Object models
• Specify 3-D shape of object (complex)
• Need complete shape in case camera moves
• Specify objects 3-D position in virtual world
• Also position of camera, light sources
• Specify how light interacts with object
• Not just colour, also texture, transparency, etc

30
Random Models

• Need random variation
• Eg, trees shouldnt be identical
• Generic Tree model with random parameters
• Simulate tree growth, using biological models?
• Ecological constraints

31
Movement Models

• Specify how objects move
• Eg, how a persons arm moves
• Based on human physiology (eg, muscles)
• Also need for horses
• Hard to do for person, real animals
• Easier for fantasy creatures
• Since no expectations of how they move
• Why fantasy so popular in animation, games?

32
Interaction Models

• Specify how objects interact
• Eg, stepping in a puddle causes ripples
• Exact spec of realistic ripples
• Or physics-based model from which ripples can be
  deduced
• What happens when a sword hits a person
• Effect on person
• Including indirect effects, eg, on movements
• Effect on sword

33
Simulated Worlds

• Need in-depth simulated worlds to build good
  models for complex graphics?
• Humans muscle and bone structures
• Ecology of forests
• Physics of puddles
• Etc, etc

34
Rendering

• What does a camera at location X and orientation
  Y see in the world
• Called rendering
• Complex
• Depends on light sources
• Shadows
• Perceived colour
• Transparent objects

35
Ray tracing

• Trace the path of photons from the camera back to
  light source
• Normally will bounce off objects along the way
• Compute intensity, colour of photon
• Computationally expensive, but accurate

36
Hardware

• Need lots of computing power for life-life 3-D
  animation
• Complex object models
• Complex movement, interaction
• Complex rendering

37
Hollywood movies

• Can do 3-D animated lifelife graphics right in
  movies
• Millions of dollars to build models
• Millions of dollars to buy computers
• Real-time animation not needed
• Can edit, fix bugs

38
Computer Games

• Must cheat
• Need real-time animation on one computer
• Limited budget for modelling (although growing)
• Cannot post-edit
• So (partially) use simple techniques
• Simple scene models
• Simple movement, interaction
• Only a few objects have complex shapes
• Can have lots of objects with simple shapes
• Simple rendering
• Ignore diffraction, translucency, other
  complexities

39
Simple 2D Graphics

• Useful for communicating information
• Especially numbers
• Needed for direct manipulation
• But can be annoying if over-used
• Especially animation

40
Complex 3D Graphics

• Create lifelike virtual worlds
• Movies
• Computer games
• Hard to do
• Very complex world models
• Lots of compute power needed
• Getting better each year!