CS 4361

Computer Graphics

Module 1
 How do we draw an image?

 Start with geometry

 We have some 3D model and/or environment
in the system, and we want to draw it on the
screen
 The display is, virtually always, only 2D
 Conversion of a 3D scene to a 2D image
- Rendering

2
Graphics Rendering Pipeline

3D model Modeling 3D world Viewing 3D view

Transformation scene Transformation scene

Projection

2D image Rasterization
2D scene

3
Rendering process
 Start: Geometric model
 Compute color of geometry (Shading)
 Based on lighting and surface color
 Project geometry (Projection)
 Clip geometry (Clipping)
 Generate fragments from geometry
(Rasterization)
 Compute pixel colors from fragments
(Fragment processng)
 End: Display pixels

4
Shading

 How do we determine the color of a piece of

geometry?
 In the real world, color depends on the object’s
surface color and the color of the light
 It is the same way in computer graphics
 “Shading” is the process by which color is
assigned to geometry

5
Projection - 3D to 2D

6
Clipping
 The camera doesn’t see the whole scene
 In particular, the camera might only see parts
of objects
 Find objects that cross the edge of the viewing
volume, and “clip” them
 Clip: Cut a polygon into multiple parts, such
that each is entirely inside or outside the
display area

7
Clipping

8
Rasterization
 The process of converting a vector image (shapes) to a
raster image (dots).
 Why?
 Dots are the only things modern displays can
understand!

9
Fragment Processing

 How do we know which fragment to use to color

a given pixel?

10
Rendering process
 Start: Geometric model
 Compute color of geometry (Shading)
 Based on lighting and surface color
 Project geometry (Projection)
 Clip geometry (Clipping)
 Generate fragments from geometry
(Rasterization)
 Compute pixel colors from fragments
(Fragment processng)
 End: Display pixels

11
Graphics System Hardware

Processor
Input Frame Output
Devices Memory Buffer Display

Array
of
Pixels

12
Graphics Input Types
 String: a string of characters followed by a
termination character typed in by the user and stored
in memory.
 Valuator: a real value between 0.0 and 1.0, which
can be used to fix the length of a line, the speed of an
action, or perhaps the size of a picture.

13
Graphics Input Types
 Locator: a coordinate pair (x, y) which enables the
user to point to a position on the display.
 Pick: identifies a portion of a picture for further
processing
 Some graphics packages allow a picture to be
defined in terms of segments, which are groups of
related graphics primitives.

14
Graphics Input Devices
 Keyboard: strings of characters;
 Some keyboards have cursor keys or function keys,
which can be used to produce pick input primitives.
 Buttons. Sometimes a separate bank of buttons is
installed on a workstation. The user presses one of the
buttons to perform a pick input function.

15
Graphics Input Devices
 Joystick and Trackball: locate and valuator devices.

16
Graphics Input Devices
 Pick: Point of sale system (POS)

17
 Graphics Input Devices
 Mouse: changes in position.
 Software keeps track of the mouse's position and
moves a graphics cursor — a small dot or cross —
on the screen accordingly.
 The mouse is most often used to perform a locate
function. There are usually buttons on the mouse that
the user can press to trigger the action.

18
Graphics Input Devices
 Tablet: locate input primitives. A tablet provides an area
on which the user can slide a stylus. The tip of the stylus
contains a micro switch. By pressing down on the stylus
the user can trigger the locate.

19
3-D Graphics Input Devices
 A laser beam scans over the solid object in an x, y raster
pattern, measuring the distance between the image
capture device and the object.

20
3-D Graphics Input Devices
 Capturing motion: a device that can track the position of
many points on a moving body in real-time, saving the
motion for animation or data analysis.

21
Graphics Accelerators

22
Graphics Accelerators

23
Graphics Processing Units

 GPUs devote more transistors for data processing

24
Frame Buffer
 Frame Buffer stores an array of Pixels

 Resolution
number of pixels
 Depth
number of bits/pixel

25
Graphics Display Devices
 Graphics displays are either line-drawing devices or
raster displays.
 Line-drawing devices:
 Pen plotter, which moves an ink pen across a (large)
sheet of paper. (E.g., seismic wave plotters.)
 Vector video device, which moves a beam of
electrons across the screen from any one point to any
other point, leaving a glowing trail.

26
Vector Displays
 Older graphical displays
 They draw line segments
 User/computer:
 Define start and end points
 Display:
 Move electron gun to start point
 Turn electron gun on
 Move electron gun to end point
 Turn electron gun off

27
Cathode Ray Tube

Karl Ferdinand Braun, 1897

Image courtesy of Wikipedia
28
Advantages of Vector Displays

 Require very little memory

 Important on a 64K system
 Conceptually very simple
 No aliasing of lines/curves
 Refresh rate can be very high

29
Disadvantages of Vector Displays
 Really just one: Can only draw line segments
 Time needed to draw a screen increases with
number of lines drawn
 If most of the image isn’t black, you won’t be able to
finish drawing it in time!

30
Rasterization
 Virtually all displays used today are raster
displays
 So, technically, anything that produces an
image on a screen “rasterizes”
 The rendering method used by current graphics
cards

31
Raster Displays
Scan
Line

Pixels
Vertical
Resolution

32
Cathode Ray Tube

1. Electron guns
2. Electron beams
3. Focusing coils
4. Deflection coils
Text 5.
6.
Anode connection
Mask for separating
beams for red, green,
and blue part of
displayed image
7. Phosphor layer with red,
green, and blue zones
8. Close-up of the
phosphor-coated inner
side of the screen

33
Advantages of Raster Displays

 Refresh rate is not dependent on the amount of

pixels drawn
 Very important for drawing any images that
are not 90% black

34
Disadvantages of Raster Displays
 Need a fairly large amount of memory
 Draws the whole screen “at once”
 Need a frame buffer that can hold the
information for a whole image
 Aliasing!

35
Aliasing
 This is what causes “jaggies”
 A signal processing problem:
 The incoming signal (the desired image) can
only be sampled at pixel centers on the
display

36
 Other raster displays
 Liquid Crystal Displays (LCD)

Close-up of pixels
on an LCD display

A single subpixel of an LCD display 37

Hard Copy Raster Devices
 In graphics, to reproduce a scene with colors we
want a color laser or inkjet printer.
 Printers equipped to use PostScript (a page
description language) can generate high quality
text and graphics on a printed page.
 A film recorder uses a strip of photographic
film, exposed by the electron beam as it sweeps
over it (once) in a raster pattern. Film recorders
are frequently used to make high-quality 35-mm
slides, or movies.
38
Graphics System Hardware

39
Chapter 1

40
Introduction
 We’ll look at the following:
 Graphics in Java
 Discrete Nature of Displays
 Device co-ordinate system
 Logical co-ordinate system
 Converting co-ordinates
 Mapping modes
 Drawing a Polygon using a mouse

41
Graphics Rendering Pipeline

3D model Modeling 3D world Viewing 3D view

Transformation scene Transformation scene

Projection

2D image Rasterization
2D scene

42
Graphics in Windows
 In a windowing environment, a picture must be repainted
every time we move, reopen or reshape the window.
 The program must have one “central” place or method
where all the drawing happens.
 The operating system sends a “message” to the program
to repaint its window when necessary.

43
Paint Method
 paint method takes one argument of the type
Graphics:

import java.awt.*;
import javax.swing.*;

public class MyWindow extends JFrame

{
...
public void paint(Graphics g)
{ Defines the graphics
super.paint(g); “context” (location, size,
... coordinates, etc.)
}
}
44
Repaint Method

 Repaint method is called instead whenever you need to

refresh the picture (after adding, moving, or changing
some elements, etc.):

repaint takes no
public class MyCanvas extends JPanel parameters: the
{ graphics context
... is restored and
balloon.move(dx, dy); sent to
repaint(); paintComponent
... automatically

45
Colors
 The color attribute is set by calling g.setColor and stays
in effect until changed:
g.setColor(Color.BLUE);
g.draw...
g.draw...
g.setColor(Color.LIGHT_GRAY);
...

 You can form a color with specified red, green, and blue
(RGB) values:
int rVal = 5, gVal = 255, bVal = 40;
Color yourEyes = new Color (rVal, gVal, bVal);
46
Drawing Basic Shapes
g.drawLine (x1, y1, x2, y2);
g.clearRect (x, y, w, h);
g.drawRect (x, y, w, h);
g.fillRect (x, y, w, h);
g.drawRoundRect (x, y, w, h, horzD, vertD);
g.fillRoundRect (x, y, w, h, horzD, vertD);
g.drawOval (x, y, w, h);
g.fillOval (x, y, w, h);
g.drawArc (x, y, w, h, fromDegr, measureDegrs);

47
Basic Shapes
g.drawPolygon (xCoords, yCoords, nPoints);
g.fillPolygon (xCoords, yCoords, nPoints);
g.drawPolyline (xCoords, yCoords, nPoints);

abc g.drawString (str, x, y);

x, y
 g.drawImage (img, x, y, this);

ImageObserver,
often this

48
Fonts
Font font = new Font (name, style, size);

abc "Serif" int (pixels)

abc "SansSerif"
abc "Monospaced"

Font.PLAIN
g.setFont (font); Font.BOLD
Font.ITALIC

49
Basic Concepts

• Computer Graphics studies the methods for

digitally creating visual contents

• Every computer screen has a fixed number of

picture elements, called pixels

50
51
Basic Concepts
• Screen resolution is determined by the number of
pixels along X multiplied by the number of pixels
along Y

• For example, a 15-inch laptop screen has a

resolution of 1366 x 768

52
 A Simple Program:
Draw the Largest Red Rectangle

53
54
55
Window size: 200 x 100

Canvas size: 192 x 73

 Size vs Index
g.drawLine(0, 0, 10, 4);

Largest size along x: d.width = 11, along y: d.height = 5

Largest index along x: maxX = 10, along y: maxY = 4
Device Coordinates

57
Logical Coordinates

 Suppose that we want the origin at the left-

bottom corner, as in the usual math coordinate
system

 In this case we simply do: y’ = maxY – y

 Note: the x-axis is unchanged since it has the

same direction as in the math coordinate system
58
Contrasting the two coordinate systems

Coordinate Convention Data Value Positive y-

System Type Domain axis
Logical Lower-case float Continuous Upward
letters
Device Upper-case integer Discrete Downward
letters

59
Converting between logical and device
coordinates

60
Converting between logical and device
coordinates
 Rounding:
 int iX(float x){return Math.round(x);} // L -> D
float fx(int X){return (float)X;} // D -> L
E.g. iX(2.8) = 3, fx(3) = 3.0
 Truncating:
 int iX(float x){return (int)x;} // L -> D
float fx(int X){return (float)X + 0.5F;} // D -> L
E.g. iX(2.8) = 2, fx(2) = 2.5
For both above, |x - fx(iX(x))| ≤ 0.5
 Max lost precision is 0.5
 Rounding will be used throughout this book
61
Converting Coordinates

62
Converting Coordinates

63
Converting Coordinates

64
Converting Coordinates

65
 An Important Principle

float  float  float  float

   
int int int int
Rather than:
float float float float
      
int int int in
Mapping of Logical Coordinates to Device
Coordinates

 Can we use:

int iX (float x)
{
return Math.round (x);
}

 to map from logical coordinates 0.0 – 10.0 (reals) to

device coordinates 0 – 9 (integer)?

67
Mapping of Logical Coordinates to Device
Coordinates

 No

 Why?

68
Mapping of Logical Coordinates to Device
Coordinates
 Because the mapping between the device and logical
co-ordinate systems is not 1-to-1
 Example iX(10.0) = 10 (not 9)

69
Mapping of Logical Coordinates to Device
Coordinates

 So, pixel width in terms of logical coordinates is 10/9 =

1.11

 The more accurate conversion method then is:

int ix (float x)
{
return Math.round (x/pixelWidth);
}
70
Mapping of Logical Coordinates to Device
Coordinates

 With this example, 9 = # of pixels 10 = # of logical

intervals (i.e. 0 ≤ x ≤ rWidth)

 It works similarly for vertical (y) coordinates (rHeight)

71
Anisotropic Mapping

72
Isotropic Mapping

73
72
74
Isotropic Mapping (Isotrop.java)

75
76
77
Isotropic Mapping to be used
Final conversion methods:

pixelSize = Math.max(rWidth/maxX, rHeight/maxY);

centerX = maxX/2; centerY = maxY/2;
...
int iX(float x){return Math.round(centerX + x/pixelSize);}
int iY(float y){return Math.round(centerY - y/pixelSize);}
float fx(int x){return (x - centerX) * pixelSize;}
float fy(int y){return (centerY - y) * pixelSize;}
Defining a Polygon using a mouse
Requirements

 The 1st vertex is drawn as a tiny rectangle.

 If a later vertex is inside the tiny rectangle, the drawing of
one polygon is complete.
 Only vertices in the drawing rectangle are drawn.
 The drawing rectangle is either as high or as wide as the
window, yet maintaining its height/width ratio regardless
of the window shape.
 When the user changes the window shape, the size of
the drawn polygon changes in the same way as that of
the drawing rectangle.
The Algorithm Sketch
1. Activate the mouse;
2. When the left mouse button is pressed
2.1. Get x- and y-coordinates at the mouse click;
2.2. If it is the first vertex
Then empty vertex vector;
Else If the vertex is inside the tiny rectangle
(i.e. last vertex)
Then finish the current polygon;
Else store this vertex in vertex vector
(i.e. not last vertex);
3. Draw all vertices in vertex vector.
The Algorithm Sketch (cont’d)
Step 3 - Draw all vertices in vertex vector :

1. Obtain the dimensions of the drawing rectangle based

on logical coordinates;
2. Draw the drawing rectangle;
3. Get the first vertex from vertex vector;
4. Draw a tiny rectangle at the vertex location;
5. Draw a line between every two consecutive vertices
stored in vertex vector.
 How many pixels are drawn using each of the following?
drawLine(10, 20, 15, 25)
drawRect(20, 40, 7, 9)
fillRect(20, 40, 7, 9)
 drawLine(10, 20, 15, 25)
xA = 10, yA = 20, xB = 15, yB = 25
# of pixels = max((xB - xA), (yB - yA)) + 1 = 5 + 1 = 6 pixels
 drawRe
drawRect(20, 7,, 9) x = 20, y = 40, w = 7, h = 9
ct(20, 40, 7
# of pix els = 2 x w + 2 x h = 2 x 7 + 2 x 9 = 32 pixels
pixels
(perimeter of the rectangle)
 fillRect(20, 40, 7, 9) x = 20, y = 40, w = 7, h = 9
# of pixels = w x h = 7 x 9 = 63 pixels (area of the rectangle)

82
80