Graphics in Java Part I

1
Graphics in JavaPart I
2
Lecture Objectives

• Understand the basic concepts of Computer
  Graphics
• Learn about Computer Graphics Applications
• Learn about the Coordinate System of Computer
  Graphics
• Learn about the basic and advanced
  transformations in Computer Graphics

3
Lecture Objectives

• Outline
• Graphics Applications
• What is Computer Graphics?
• Representations in Graphics
• Supporting Disciplines
• Coordinate Systems
• Basic and Advanced Transformations

4
Graphics Applications

• Entertainment Cinema

A Bugs Life (Pixar)
Pixar Monsters Inc.
5
Graphics Applications (Contd)

• Medical Visualization

MIT Image-Guided Surgery Project
6
Graphics Applications (Contd)

• Computer Aided Design (CAD)

• Scientific Visualization

7
Graphics Applications (Contd)

• Training

Designing Effective Step-By-Step Assembly
Instructions (Maneesh Agrawala et. al)
8
Graphics Applications (Contd)

• Game Modeling and Simulation

GT Racer 3
Polyphony Digital Gran Turismo 3, A Spec
9
Graphics Applications (Contd)

• The major application that we will be dealing
  with extensively in the next coming lectures is
  that of developing graphical user interfaces
• Windows
• Menus
• Buttons
• Textboxes
• ...

10
What is Computer Graphics?

• Computer graphics generating 2D images of a 3D
  world represented in a computer.
• Main tasks
• modeling (shape) creating and representing the
  geometry of objects in the 3D world
• rendering (light, perspective) generating 2D
  images of the objects
• animation (movement) describing how objects
  change in time

11
Representations in Graphics

• A) Vector Graphics
• Image is represented by continuous geometric
  objects lines, curves, etc.
• B) Raster Graphics
• Image is represented as a rectangular grid of
  colored pixels
• PIXEL PIcture ELement

X
12
Raster Graphics

• Generic
• Image processing techniques
• Geometric Transformation loss of information
• Relatively high processing time
• in terms of the number of pixels
• Realistic images, textures, ...
• Examples Paint, PhotoShop, ...

13
Sample Image Processing Techniques
Raster Graphics (Contd)

• Edge Detection
• Image Denoising

14
Vector graphics
Vector Graphics

• Graphics objects geometry color
• Relatively low processing time
• in terms of the number of graphic objects
• Geometric transformation possible without loss of
  information (zoom, rotate, )
• Examples PowerPoint, CorelDraw, SVG, ...

15
Scalable Vector Graphics (SVG)

• lt?xml version"1.0" standalone"no"?gt
• lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
• "http//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dt
  d"gt
• ltsvg width"12cm" height"4cm" viewBox"0 0 1200
  400"
• xmlns"http//www.w3.org/2000/svg"
  version"1.1"gt
• ltdescgtExample polygon01 - star and
  hexagonlt/descgt
• lt!-- Show outline of canvas using 'rect'
  element --gt
• ltrect x"1" y"1" width"1198" height"398"
• fill"none" stroke"blue"
  stroke-width"2" /gt
• ltpolygon fill"red" stroke"blue"
  stroke-width"10"
• points"350,75 379,161 469,161
  397,215
• 423,301 350,250 277,301
  303,215
• 231,161 321,161" /gt
• ltpolygon fill"lime" stroke"blue"
  stroke-width"10"
• points"850,75 958,137.5 958,262.5
• 850,325 742,262.6 742,137.5"
  /gt
• lt/svggt

16
From Modeling to Processing
Image Analysis (pattern recognition)
Image
Math. Model
Image Synthesis(Rendering)
Modeling
Image processing
17
Supporting Disciplines

• Computer science (algorithms, data structures,
  software engineering, )
• Mathematics (geometry, numerical, )
• Physics (Optics, mechanics, )
• Psychology (Colour, perception)
• Art and design

18
Computer Graphics Transformations

• Types of transformations
• Screen and World Coordinate Systems
• Matrix representations of transformations
• 2D Transformations
• 3D Transformations

19
Graphical Transformations Basics

• There are several standard graphics
  transformation.
• All involve plotting images on the screen in
  terms of points and the lines connecting those
  points.
• Each programming language has its own particular
  constructs for drawing items on the screen.
• "screen" here includes printer output and
  invisible background buffers for efficient cached
  graphics (see Double buffering later)
• Regardless of language particulars, the various
  graphics transformations themselves remain
  logically the same.
• Here, will deal with the logic of the
  transformations.
• Consult language books/manuals re how to do the
  mechanics of the actual drawing.

20
Graphical Transformations Basics (Contd)

• Translation moving an item from one location to
  another, e.g., moving thru a room or landscape.
• Rotation changing the orientation of an item at
  a given location, e.g., spinning around.
• Scaling changing the size of an item as it
  appears on the screen, e.g., an item gets
  larger or smaller.
• Clipping knowing where to stop drawing an item
  because it partially extends beyond the screen.

21
Graphical Transformations Advanced

• More advanced operations
• Hidden surface algorithms dealing with
  (removing) aspects of items that are hidden from
  view.
• Representing 3D shapes how to represent 3D
  items in a 2D medium.
• Displaying depth relationships how to achieve
  realistic perspective.
• Shading, reflection, ambient lighting how to
  achieve realistic lighting effects.
• In this lecture, will deal only with basics
  translation, scaling, and rotation.

22
World and Viewport
Basic ideas World vs. Viewport
The representation of the world

• Representation of world stays the same.
• View of world changes as you move around in it,
  i.e., the viewport moves.

23
Coordinates

• Both viewport and the "world" have coordinate
  systems.
• The entire computer screen is a set of pixels
  (short for picture elements). So is a window on
  the desktop of a screen. So is a canvas inside a
  window.
• Pixels form a two-dimensional grid with the
  coordinates (0,0) being the upper-left and the
  max number of pixels in each dimension forming
  the lower-right (say, your system provides
  1024,768).
• So the screen coordinates are as follows

24
World Coordinates

• The lines to be drawn are given in world
  coordinates with the origin fixed at the center
  of the computer screen, e.g., (1024, 768
  resolution means a center point of 512, 384)
• All the transformations are
• applied to the world coordinates
• then mapped to the real (screen) coordinates.
• This allows of computation of the logical
  transformations to be separated from hard details
  of viewing surface.
• Do not want to tie the model to available
  resolution. Mapping from world coordinates to
  screen coordinates allows us to keep two levels
  of abstraction separate model vs. device

25
World Coordinates (Contd)
To visualize it
(512, 384, 0)
y-axis
x-axis
z-axis
(512, -384, 0)
(0, 0, 0) in world coordinates(512,384,0) in
real coordinates

• Note that the Z-axis comes "at you" out of the
  computer screen, perpendicular to both the
  X-axis and the Y-axis.

26
World Coordinates (Contd)

• For example
• world point (0,0,0) is really (512, 384) when
  you plot (display) it.
• world point (100, -20,0) is really (612, 404)
  when you plot it.
• Notice real X coordinate gets larger with
  positive X world coordinates.
• Notice real Y coordinates gets larger with
  negative Y world coordinates.

27
Translation
Basic transformations (for simplicity,
2D) Translation x' x Dx
y' y Dy where Dx is relative
distance in x dimension, Dy is
relative distance in y dimension,
prime indicates new point in space. Computation
x' y' x y Dx Dy
P' P T
28
Translation (Contd)
Each point gets translated
x' y' x y Dx Dy
29
Scaling
Scaling x' x Sx
y' y Sy where Sx is scale factor for x
dimension, Sy is scale factor for y
dimension, prime indicates new point
in space. Computation
defining S as Sx 0
0 Sy x' y' x y
Sx 0 0
Sy P' P S
30
Scaling (Contd)
x' y' x y Sx 0
0 Sy
Question What about stretching unequally in two
dimensions?
31
Rotation
Rotation x' xcos ? - ysin ?
y' xsin ? ycos ? where ? is angle of
rotation and prime indicates new point in
space. Computation x' y' x
y cos ? sin ?
-sin ? cos ? P' P
R Note positive angles are counter-clockwise
from x toward y for negative angles (clockwise)
use identities cos(- ?) cos ? , and
sin(- ?) -sin ?
32
Rotation (Contd)
x' y' x y cos ? sin ?
-sin ? cos ?
33
Rotation Around a Fixed Point

• Notes on Rotation
• There is a difference between
• "rotation around center point of object
• and "rotation around origin of Cartesian
  world" Example
• Imagine a ball on a tether mounted to pole
• Do you want the ball itself to spin around on
  the end of the tether?
• Or do you want the ball-and-tether to rotate
  around the pole?To rotate an object about its
  own center point
• first translate object to origin,
• then do rotation
• then translate back

34
2D Transformations Summary

• Translation P' PT
• Scaling P' PS
• Rotation P' PR
• Problem
• Have heterogeneous ops (add and multiply)
• Want homogeneous ops (all multiply) so
  transformations can be combined...
• Example
• Scale an object while it is moving (i.e.,
  translation) closer or further, while it is
  spinning (i.e., rotation).
• Want to do one complex operation, not three
  separate ones.