## Are you sure?

This action might not be possible to undo. Are you sure you want to continue?

1

Introduction

Computer Graphics involves display, manipulation and storage of

pictures and experimental data for proper visualization using a computer.

Typical graphics system comprises of a host computer with support of fast processor, large memory, frame buffer and • Display devices (color monitors), • Input devices (mouse, keyboard, joystick, touch screen, trackball) • Output devices (LCD panels, laser printers, color printers. Plotters etc.) • Interfacing devices such as, video I/O,TV interface etc.

2

3

4

5

Classification of Computer Graphics by Object and Picture Type of Object 2D 3D Pictorial representation Line drawing Gray scale image Color image Line drawing (or wire-frame) Line drawing, with various affects Shaded, color image with various effects Interactive Graphics

6

Computer Graphics is about animation (films)

**Major driving force now
**

7

Games are very important in Computer Graphics

8

Medical Imaging is another driving force

**Much financial support Promotes linking of graphics with video, scans, etc.
**

9

Computer Aided Design too

10

Scientific Visualisation

To view below and above our visual range

11

History

12

Ivan Sutherland (1963) - SKETCHPAD

**• pop-up menus • constraint-based drawing • hierarchical modeling
**

13

Display hardware

• vector displays – 1963 – modified oscilloscope – 1974 – Evans and Sutherland Picture System • raster displays – 1975 – Evans and Sutherland frame buffer – 1980s – cheap frame buffers → bit-mapped personal computers – 1990s – liquid-crystal displays → laptops – 2000s – micro-mirror projectors → digital cinema • other – stereo, head-mounted displays – autostereoscopic displays – tactile, haptic, sound

14

Input hardware

• 2D – light pen, tablet, mouse, joystick, track ball, touch panel, etc. – 1970s & 80s - CCD analog image sensor + frame grabber – 1990s & 2000’s - CMOS digital sensor + in-camera processing

[Nayar00]

→

→

→ high-X imaging (dynamic range, resolution, depth of field,…)15

• negative film = 130:1 (7 stops) • paper prints = 46:1 • [Debevec97] = 250,000:1 (18 stops)

→

16

• 2D – light pen, tablet, mouse, joystick, track ball, touch panel, etc. – 1970s & 80s - CCD analog image sensor + frame grabber – 1990s & 2000’s - CMOS digital sensor + in-camera processing → high-X imaging (dynamic range, resolution, depth of field,…) • 3D – 3D trackers – multiple cameras – active rangefinders • other – data gloves – voice

Input hardware

17

Rendering

• 1960s - the visibility problem – Roberts (1963), Appel (1967) - hidden-line algorithms – Warnock (1969), Watkins (1970) - hidden-surface algorithms – Sutherland (1974) - visibility = sorting

18

• 1960s - the visibility problem – Roberts (1963), Appel (1967) - hidden-line algorithms – Warnock (1969), Watkins (1970) - hidden-surface algorithms – Sutherland (1974) - visibility = sorting • 1970s - raster graphics – Gouraud (1971) - diffuse lighting – Phong (1974) - specular lighting – Blinn (1974) - curved surfaces, texture – Catmull (1974) - Z-buffer hidden-surface algorithm – Crow (1977) - anti-aliasing

19

• 1960s - the visibility problem – Roberts (1963), Appel (1967) - hidden-line algorithms – Warnock (1969), Watkins (1970) - hidden-surface algorithms – Sutherland (1974) - visibility = sorting • 1970s - raster graphics – Gouraud (1971) - diffuse lighting – Phong (1974) - specular lighting – Blinn (1974) - curved surfaces, texture – Catmull (1974) - Z-buffer hidden-surface algorithm 20 – Crow (1977) - anti-aliasing

**• early 1980s - global illumination
**

– Whitted (1980) - ray tracing – Goral, Torrance et al. (1984), Cohen (1985) radiosity – Kajiya (1986) - the rendering equation

21

• early 1980s - global illumination – Whitted (1980) - ray tracing – Goral, Torrance et al. (1984), Cohen (1985) - radiosity – Kajiya (1986) - the rendering equation • late 1980s - photorealism – Cook (1984) - shade trees – Perlin (1985) - shading languages – Hanrahan and Lawson (1990) - RenderMan

22

• early 1990s - non-photorealistic rendering – Drebin et al. (1988), Levoy (1988) - volume rendering – Haeberli (1990) - impressionistic paint programs – Salesin et al. (1994-) - automatic pen-and-ink illustration – Meier (1996) - painterly rendering

23

• early 1990s - non-photorealistic rendering – Drebin et al. (1988), Levoy (1988) - volume rendering – Haeberli (1990) - impressionistic paint programs – Salesin et al. (1994-) - automatic pen-and-ink illustration – Meier (1996) - painterly rendering

24

**Basic raster graphics algorithms for drawing 2d primitives.
**

How do things end up on the screen?

25

**Architecture Of A Graphics System
**

Display Processor Memory

Frame Buffer

Video Controller

Monitor

CPU

Display Processor

System Memory

System Bus

26

**Output Devices • There are a range of output devices currently available:
**

– Printers/plotters – Cathode ray tube displays – Plasma displays – LCD displays – 3 dimensional viewers – Virtual/augmented reality headsets

27

**Basic Cathode Ray Tube (CRT)
**

• Fire an electron beam at a phosphor coated screen

28

**Raster Scan Systems
**

Draw one line at a time

29

Colour CRT

• An electron gun for each colour – red, green and blue

30

**Plasma-Panel Displays
**

Applying voltages to crossing pairs of conductors causes the gas (usually a mixture including neon) to break down into a glowing plasma of electrons and ions

31

**Liquid Crystal Displays
**

• Light passing through the liquid crystal is twisted so it gets through the polarizer • A voltage is applied using the crisscrossing conductors to stop the twisting and turn pixels off

32

Scan Conversion

• A line segment in a scene is defined by the coordinate positions of the line endpoints y

(7, 5)

(2, 2)

x

33

• But what happens when we try to draw this on a pixel based display?

**• How do we choose which pixels to turn on?
**

34

**• Considerations to keep in mind:
**

– The line has to look good

• Avoid jaggies

**– It has to be lightening fast!
**

• How many lines need to be drawn in a typical scene? • This is going to come back to bite us again and again

35

Line Equations

• Let’s quickly review the equations involved in drawing lines Slope-intercept line y equation:

yend

y = m⋅ x +b

where:

y0 x0 xend

x

yend − y0 m= xend − x0 b = y0 − m ⋅ x0

36

• The slope of a line (m) is defined by its start and end coordinates • The diagram below shows some examples of lines and their slopes

m = -4 m = -2 m = -1 m = -1/2 m = -1/3 m=0 m=∞ m=4 m=2 m=1 m = 1/2 m = 1/3 m=0

37

**• Find corresponding y coordinate for each unit x coordinate example:
**

y

5

(7, 5)

2

(2, 2) x

38

2

7

5

4

3

2

1

0 0 1 2 3 4 5 6 7

39

y 5

(7, 5)

• First work out m and b:

2

(2, 2) 2 3 4 5 6 7

5−2 3 m= = 7−2 5

x

3 4 b = 2− ∗2 = 5 5

**• Now for each x value work out the y value:
**

3 4 3 y (3) = ⋅ 3 + = 2 5 5 5 3 4 4 y (5) = ⋅ 5 + = 3 5 5 5 3 4 1 y ( 4) = ⋅ 4 + = 3 5 5 5 3 4 2 y ( 6) = ⋅ 6 + = 4 5 5 5

40

**Now just round off the results and turn on these pixels to draw our line
**

7 6 5 4 3 2 1 0 0 1 2 3 4 5 6 7 8

3 y (3) = 2 ≈ 3 5 1 y ( 4) = 3 ≈ 3 5 4 y (5) = 3 ≈ 4 5 2 y ( 6) = 4 ≈ 4 5

41

However, this approach is just way too slow In particular look out for: The equation y = mx + b requires the multiplication of m by x – Rounding off the resulting y coordinates We– need a faster solution In the previous example we chose to solve the parametric line equation to give us the y coordinate for each unit x coordinate What if we had done it the other way around? So this gives us:

•

where:

and

**y − b x = m m= yend −y0 xend −x0
**

b = y0 −m ⋅ x0

42

Leaving out the details this gives us:

2 x(3) = 3 ≈ 4 3

We can see easily that this line doesn’t look very good! We choose which way to work out the line pixels based on the slope of the line 7 6 5 4 3 2 1 0 0

1 x ( 4) = 5 ≈ 5 3

1

2

3

4

5

6

7

8

43

If the slope of a line is between -1 and 1 then we work out the y coordinates for a line based on it’s unit x coordinates Otherwise we do the opposite – x coordinates are computed based on unit y coordinates

m = -4 m = -2 m = -1 m = -1/2 m = -1/3 m=0 m=∞ m=4 m=2 m=1 m = 1/2 m = 1/3 m=0

44

#include <stdio.h> #include <graphics.h> void main(void) { int graphdriver = DETECT, graphmode, color, n, m; initgraph(&graphdriver, &graphmode, "c:\\tc"); /* detect and initialize graphics system */ for(n=0; n<50; n++) { putpixel(250+n,350,BLUE); /* draw a horizontal line */ } for(m=0; m<5; m++) { for(n=0; n<5; n++) { putpixel(250+n,250+m,RED); } } }

45

**Initializes the graphics system Declaration:
**

void far initgraph(int far *graphdriver,int far *graphmode, char far *pathtodriver);

Remarks: To start the graphics system, you must first call initgraph. initgraph initializes the graphics system by loading a graphics driver from disk (or validating a registered driver) then putting the system into graphics mode. initgraph also resets all graphics settings (color, palette, current position, viewport, etc.) to their defaults, then resets graphresult to 0.

***graphdriver : Integer that specifies the graphics driver to be used. You
**

can give graphdriver a value using a constant of the graphics_drivers enumeration type.

46

*graphmode :Integer that specifies the initial graphics mode (unless *graphdriver = DETECT). If *graphdriver = DETECT, initgraph sets *graphmode to the highest resolution available for the detected driver. You can give *graphmode a value using a constant of the graphics_modes enumeration type.

**pathtodriver : Specifies the directory path where initgraph looks fo
**

graphics drivers (*.BGI) first. þ If they're not there, initgraph looks in the current directory. þ If pathtodriver is null, the driver files must be i the current directory.This is also the path settextstyle searches for the stroked character font files (*.CHR).

*graphdriver and *graphmode must be set to valid graphics_drivers and

graphics_mode values or you'll get unpredictable results. (The exception is graphdriver = DETECT.) After a call to initgraph, *graphdriver is set to the current graphics driver, and *graphmode is set to the current graphics mode.

Return Value:

initgraph always sets the internal error code. On success, initgraph sets the code to 0 On error, initgraph sets 47 *graphdriver to-2, -3, -4, or -5, and graphresul returns the same value.

**Towards the Ideal Line
**

• We can only do a discrete approximation

**• Illuminate pixels as close to the true path as possible, consider bi-level display only
**

– Pixels are either lit or not lit

48

**What is an ideal line
**

• Must appear straight and continuous

– Only possible axis-aligned and 45o lines

**• Must interpolate both defining end points • Must have uniform density and intensity
**

– Consistent within a line and over all lines – What about antialiasing?

**• Must be efficient, drawn quickly
**

– Lots of them are required!!!

49

Simple Line

Based on slope-intercept algorithm from algebra: y = mx + b Simple approach: increment x, solve for y Floating point arithmetic required

50

Does it Work?

It seems to work okay for lines with a slope of 1 or less, but doesn’t work well for lines with slope greater than 1 – lines become more discontinuous in appearance and we must add more than 1 pixel per column to make it work. Solution? - use symmetry.

51

Modify algorithm per octant

**OR, increment along x-axis if dy<dx else increment along y-axis
**

52

DDA algorithm

Start point - ( x1 , y1 ) End point - ( x2 , y2 )

x(t ) = x1 + t ( x2 − x1 ) y (t ) = y1 + t ( y2 − y1 )

53

DDA Algorithm

• • • •

x(t ) = x1 + t ( x2 − x1 ) y (t ) = y1 + t ( y2 − y1 )

dx xnew = xold + dt dy ynew = yold + dt

**Start at t = 0 At each step, increment t by dt Choose appropriate value for dt Ensure no pixels are missed:
**

– Implies:

dx <1 dt

and

dy <1 dt

**• Set dt to maximum of dx and dy
**

54

DDA algorithm

line(int x1, int y1, int x2, int y2) { float x,y; int dx = x2-x1, dy = y2-y1; int n = max(abs(dx),abs(dy)); float dt = n, dxdt = dx/dt, dydt = dy/dt; x = x1; y = y1; while( n-- ) { point(round(x),round(y)); x += dxdt; y += dydt; } } n - range of t.

55

• Again the values calculated by the equations used by the DDA algorithm must be rounded to match pixel values

(xk+1, round(yk+m)) (xk, yk) (xk+1, yk+m) (xk, round(yk))

(round(xk+ 1/m), yk+1) (xk, yk) (xk+ 1/m, yk+1) (round(xk), yk)

56

DDA algorithm

• Still need a lot of floating point arithmetic.

– 2 ‘round’s and 2 adds per pixel.

**• Is there a simpler way ? • Can we use only integer arithmetic ?
**

– Easier to implement in hardware.

57

Observation on lines.

while( n-- ) { draw(x,y); move right; if( below line ) move up; }

58

**Testing for the side of a line.
**

Need a test to determine which side of a line a pixel lies. • Write the line in implicit form: •

F ( x, y ) = ax + by + c = 0

• Easy to prove F<0 for points above the line, F>0 for points below.

59

**Testing for the side of a line.
**

F ( x, y ) = ax + by + c = 0

dy y = mx + b and so y = x+b dx

F ( x, y ) = dy.x − dx. y + c = 0

60

Decision variable.

Evaluate F at point M

1 d = F ( x p + 1, y p + ) 2

Referred to as decision variable

NE

**M E Previous Pixel (xp,yp) Choices for Current pixel Choices for Next pixel
**

61

Decision variable.

Evaluate d for next pixel, Depends on whether E or NE Is chosen :

If E chosen :

d new

1 1 = F ( x p + 2, y p + ) = a ( x p + 2) + b( y p + ) + c 2 2

But recall :

NE M E Previous Pixel (xp,yp) Choices for Current pixel Choices for Next pixel

1 d old = F ( x p + 1, y p + ) 2 1 = a ( x p + 1) + b( y p + ) + c 2

So :

**d new = d old + a = d old + dy
**

62

Decision variable.

If NE was chosen :

3 3 d new = F ( x p + 2, y p + ) = a ( x p + 2) + b( y p + ) + c 2 2

M NE

So :

**d new = d old + a + b = d old + dy − dx
**

Choices for Next pixel

E Previous Pixel (xp,yp) Choices for Current pixel

63

**Summary of mid-point algorithm
**

• Choose between 2 pixels at each step based upon the sign of a decision variable. • Update the decision variable based upon which pixel is chosen. • Start point is simply first endpoint (x1,y1). • Need to calculate the initial value for d

64

Initial value of d.

Start point is (x1,y1)

d start 1 1 = F ( x1 + 1, y1 + ) = a( x1 + 1) + b( y1 + ) + c 2 2 b = ax1 + by1 + c + a + 2 b = F ( x1 , y1 ) + a + 2

But (x1,y1) is a point on the line, so F(x1,y1) =0

d start = dy − dx / 2

Conventional to multiply by 2 to remove fraction ⇒ doesn’t effect sign.

65

Bresenham algorithm

void MidpointLine(int x1,y1,x2,y2) { int dx=x2-x1; int dy=y2-y1; int d=2*dy-dx; int increE=2*dy; int incrNE=2*(dy-dx); x=x1; y=y1; WritePixel(x,y);

while (x < x2) { if (d<= 0) { d+=incrE; x++

} else { d+=incrNE; x++; y++; } WritePixel(x,y); } }

66

**Bresenham was (not) the end!
**

2-step algorithm by Xiaolin Wu: (see Graphics Gems 1, by Brian Wyvill) Treat line drawing as an automaton , or finite state machine, ie. looking at next two pixels of a line, easy to see that only a finite set of possibilities exist. The 2-step algorithm exploits symmetry by simultaneously drawing from both ends towards the midpoint.

67

**Two-step Algorithm
**

Possible positions of next two pixels dependent on slope – current pixel in blue: Slope between 0 and ½ Slope between ½ and 1 Slope between 1 and 2 Slope greater than 2

68

Circle drawing.

E M SE

Previous Pixel

Choices for Current pixel

**Choices for Next pixel
**

69

Circle drawing.

f (

x

,

y

)

(

x

x

c

)

2

(

y

y

c

)

2

If SE is chosen d new = d old + (2 x p − 2 y p + 5) If E is chosen d new = d old + (2 x p + 3)

r

**Functions are linear equations in terms of (xp,yp)
**

–Termed point of evaluation

70

2

**Problems with Bresenham algorithm
**

• Pixels are drawn as a single line ⇒ unequal

line intensity with change in angle.

**Pixel density = √2.n pixels/mm
**

Can draw lines in darker colours according to line direction. -Better solution : antialiasing ! -(eg. Gupta-Sproull algorithm)

**Pixel density = n pixels/mm
**

71

**Summary of line drawing so far.
**

• Explicit form of line

– Inefficient, difficult to control.

**• Parametric form of line.
**

– Express line in terms of parameter t – DDA algorithm

**• Implicit form of line
**

– Only need to test for ‘side’ of line. – Bresenham algorithm. – Can also draw circles.

72

73

74

75

76

77

78

79

**Circle Midpoint Algorithm
**

x+ y+

**draw pixels in this octant
**

(0,-R) (draw others using symmetry)

**Implicit function for circle F ( x, y ) = x 2 + y 2 − R 2
**

(R,0)

(-R,0)

**F ( x, y ) = 0 on circle F ( x, y ) < 0 inside F ( x, y ) > 0 outside
**

80

(0,R)

**Choosing the Next Pixel
**

decision variable d

(x, y) (x+1, y) E M SE (x+1, y+1)

d = F ( M ) = F ( x + 1, y + 1 / 2) F ( x + 1, y + 1 / 2) > 0choose F ( x + 1, y + 1 / 2) ≤ 0choose

E SE

81

**Change of d when E is chosen
**

(x, y) (x+1, y) E Mold SE (x+1, y+1)

2

(x+2, y) Mnew (x+2, y+1)

2 2

d new = ( x + 2) + ( y + 1 / 2) − R d old = ( x + 1) + ( y + 1 / 2) − R

2 2 2

**∆d = d new − d old = 2 x + 3
**

82

**Change of d when SE is chosen
**

d new = ( x + 2) + ( y + 3 / 2) − R

2 2 2

(x, y)

(x+1, y) E Mold SE

d old = ( x + 1) + ( y + 1 / 2) − R

2 2

2

∆d = d new − d old = 2 x + 2 y + 5

Mnew (x+1, y+2) (x+2, y+2)

83

Initial value of d

(0,-R) (1,-R) M0 (1,-R+1)

d0 = F (M 0 ) d 0 = F (1,− R + 1 / 2) d 0 = (1) + (− R + 1 / 2) − R

2 2 2

d0 = 5 / 4 − R

84

**Midpoint Circle Algo
**

x = 0; y = -R; d = 5/4 – R; /* real */ setPixel(x,y); while (y > x) { if (d > 0) { /* E chosen */ d += 2*x + 3; x++; } else { /* SE chosen */ d += 2*(x+y) + 5; x++; y++; } setPixel(x,y); }

85

**New Decision Variable
**

• • • • Our circle algorithm requires arithmetic with real numbers. Let’s create a new decision variable h

h=d-1/4

Substitute h+1/4 for d in the code. Note h > -1/4 can be replaced with h > 0 since h will always have an integer value.

86

**New Circle Algorithm
**

x = 0; y = -R; h = 1 – R; setPixel(x,y); while (y > x) { if (h > 0) { /* E chosen */ h += 2*x + 3; x++; } else { /* SE chosen */ h += 2*(x+y) + 5; x++; y++; } setPixel(x,y); }

87

**Second-Order Differences
**

• Note that d is incremented by a linear expression each time through the loop.

– We can speed things up a bit by tracking how these linear expressions change. – Not a huge improvement since multiplication by 2 is just a leftshift by 1 (e.g. 2*x = x<<1).

88

**2nd Order Difference when E chosen
**

• When E chosen, we move from pixel (x,y) to (x+1,y).

∆Eold = 2 x + 3 ∆Enew = 2( x + 1) + 3 ∆Enew − ∆Eold = 2

**∆SEold = 2( x + y ) + 5 ∆SEnew = 2( x + 1 + y ) + 5 ∆SEnew − ∆SEold = 2
**

89

**2nd Order Difference when SE chosen
**

• When SE chosen, we move from pixel (x,y) to (x+1,y+1).

∆Eold = 2 x + 3 ∆Enew = 2( x + 1) + 3 ∆Enew − ∆Eold = 2

∆SEold = 2( x + y ) + 5 ∆SEnew = 2( x + 1 + y + 1) + 5 ∆SEnew − ∆SEold = 4

90

**New and Improved Circle Algorithm
**

x = 0; y = -R; h = 1 – R; dE = 3; dSE = -2*R + 5; setPixel(x,y); while (y > x) { if (h > 0) { /* E chosen */ h += dE; dE += 2; dSE += 2; x++; } else { /* SE chosen */ h += dSE; dE += 2; dSE += 4; X++; y++; } setPixel(x,y); }

91

92

93

94

95

96

97

98

99

100

101

102

103

- Computer Graphics - Question Bank
- Computer Graphics
- 2dviewingpost
- Computer Graphics
- ElipseDrawing
- Intro_Pre
- Ellipse Pre
- Computer Graphics-Output Primitives
- Computer Graphics - Input-output Devices and Interaction Techniques
- Attributes
- 3D Display Methods
- computer graphics
- 37188108 Computer Graphics Lab Manual
- Lect 1
- 3D_Conceptspre
- Out Put Primitives
- Lecture03-GraphicsPrimitives
- Line Algorithm Pre
- It Sem7 Cs2401nol
- Graphics Notes
- Line Drawing
- Computer Graphics Principles and Practice
- computer graphics
- Mastering.Photoshop.Web.Design_July 2010
- Anti Aliasing Pre
- Introduction to File Input and Output
- Text Book for Computer Graphics
- Output Primitives
- Line Circle
- computer notes Filled Area Primitives I

- UT Dallas Syllabus for atec3327.001.11f taught by Marcus Shetter (mds075000)
- tmp94EE.tmp
- Augmented Hair in Deus Ex Universe Projects – TressFX 3.0
- tmp46B1.tmp
- UT Dallas Syllabus for atec3327.502 06s taught by Matthew Battaglia (mxb058100)
- UT Dallas Syllabus for cs4392.001 05s taught by Rafael Lacambra (rml021000)
- UT Dallas Syllabus for atec4730.502 05f taught by Jenny Macy (jmm053100)
- A Survey of Texture Synthesis Various Techniques

Sign up to vote on this title

UsefulNot usefulRead Free for 30 Days

Cancel anytime.

Close Dialog## Are you sure?

This action might not be possible to undo. Are you sure you want to continue?

Close Dialog## This title now requires a credit

Use one of your book credits to continue reading from where you left off, or restart the preview.

Loading