Top Banner
1 1 CS 430 Computer Graphics Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science Drexel University 2 Outline Math refresher Line drawing Digital differential analyzer • Bresenhams algorithm XPM file format 3 Geometric Preliminaries Affine Geometry – Scalars + Points + Vectors and their ops Euclidian Geometry – Affine Geometry lacks angles, distance – New op: Inner/Dot product, which gives Length, distance, normalization Angle, Orthogonality, Orthogonal projection Projective Geometry 4 Affine Geometry Affine Operations : Affine Combinations: a 1 v 1 + a 2 v 2 + … + a n v n where v 1 , v 2 , …, v n are vectors and Example: 5 Mathematical Preliminaries Vector: an n-tuple of real numbers Vector Operations Vector addition: u + v = w Commutative, associative, identity element (0) Scalar multiplication: cv Note: Vectors and Points are different Can not add points Can find the vector between two points 6 Linear Combinations & Dot Products A linear combination of the vectors v 1 , v 2 , … v n is any vector of the form a 1 v 1 + a 2 v 2 + … + a n v n where a i is a real number (i.e. a scalar) Dot Product: a real value u 1 v 1 + u 2 v 2 + … + u n v n written as v u
9

Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

Apr 12, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

1

1

CS 430Computer Graphics

Line DrawingWeek 1, Lecture 2

David Breen, William Regli and Maxim PeysakhovDepartment of Computer Science

Drexel University

2

Outline

• Math refresher• Line drawing• Digital differential analyzer• Bresenham’s algorithm• XPM file format

3

Geometric Preliminaries

• Affine Geometry– Scalars + Points + Vectors and their ops

• Euclidian Geometry– Affine Geometry lacks angles, distance– New op: Inner/Dot product, which gives

• Length, distance, normalization• Angle, Orthogonality, Orthogonal projection

• Projective Geometry

4

Affine Geometry

• Affine Operations:

• Affine Combinations: a1v1 + a2v2 + … + anvnwhere v1,v2, …,vn are vectors andExample:

5

Mathematical Preliminaries• Vector: an n-tuple of real numbers• Vector Operations

– Vector addition: u + v = w• Commutative,

associative, identity element (0)

– Scalar multiplication: cv

• Note: Vectors and Points are different– Can not add points– Can find the vector between two points

6

Linear Combinations & Dot Products

• A linear combination of the vectorsv1, v2, … vnis any vector of the forma1v1 + a2v2 + … + anvn

where ai is a real number (i.e. a scalar)

• Dot Product:

a real value u1v1 + u2v2 + … + unvn written as vu •

Page 2: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

2

7

Fun with Dot Products• Euclidian Distance from (x,y) to (0,0)

in general:

which is just:

• This is also the length of vector v: ||v|| or |v|

• Normalization of a vector:• Orthogonal vectors:

22 yx +22

221 ... nxxx +++

x • x

8

Projections & Angles• Angle between vectors,

• Projection of vectors

Pic s /Math courtes y of Dave Mount @ UMD-CP

u ⋅ v = u v cos(θ)

9

Matrices and Matrix Operators• A n-dimensional vector:

• Matrix Operations:– Addition/Subtraction– Identity– Multiplication

• Scalar• Matrix Multiplication

• Implementation issue:Where does the index start?(0 or 1, it’s up to you…)

10

Matrix Multiplication• [C] = [A][B] • Sum over rows & columns• Recall: matrix multiplication

is not commutative• Identity Matrix:

1s on diagonal0s everywhere else

11

Matrix Determinants• A single real number• Computed recursively• Example:

• Uses: – Find vector ortho to two other vectors– Determine the plane of a polygon

bcaddbca

−="#

$%&

'det

det(A) = Ai, j (−1)i+ j Mi, j

j=1

n

12

Cross Product

• Given two non-parallel vectors, A and B• A x B calculates third vector C that is

orthogonal to A and B• A x B = (aybz - azby, azbx - axbz, axby - aybx)

A × B =

x y z

ax ay az

bx by bz

Page 3: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

3

13

Matrix Transpose & Inverse• Matrix Transpose:

Swap rows and cols:• Facts about

the transpose:

• Matrix Inverse: Given A, find B such thatAB = BA = I BèA-1

(only defined for square matrices)

14

Line Drawing

15

Scan-Conversion Algorithms• Scan-Conversion:

Computing pixel coordinates for ideal line on 2D raster grid

• Pixels best visualized as circles/dots– Why? Monitor hardware

1994 Foley/ VanDam / Fi ner / H uges/ Ph il li ps I CG

16

Drawing a Line• y = mx + B• m = ∆y / ∆x• Start at leftmost x and increment by 1➙ ∆x = 1

• yi = Round(mxi + B)• This is expensive and inefficient• Since ∆x = 1, yi+1 = yi + ∆y = yi + m

– No more multiplication!• This leads to an incremental algorithm

17

Digital Differential Analyzer (DDA)

• If |slope| is less then 1§ ∆x = 1§ else ∆y = 1

• Check for vertical line§ m = ∞

• Compute corresponding ∆y (∆x) = m (1/m)

• xk+1 = xk + ∆x• yk+1 = yk + ∆y• Round (x,y) for pixel location • Issue: Would like to avoid

floating point operations1994 Foley/ VanDam / Fi ner / H uges/ Ph il li ps I CG

xk+1

∆xxk

yk+1

yk∆y

Generalizing DDA

• If |slope| is less than or equal to 1– Ending point should be right of starting

point • If |slope| is greater than 1

– Ending point should be above starting point

• Vertical line is a special case∆x = 0

18

Page 4: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

4

19

Bresenham’s Algorithm

• 1965 @ IBM• Basic Idea:

– Only integer arithmetic

– Incremental

• Consider the implicitequation for a line:

1994 Foley/ VanDam / Fi ner / H uges/ Ph il li ps I CG

20

The Algorithm

Assumptions:0 ≤ slope ≤ 1

Pic s /Math courtes y of Dave Mount @ UMD-CP

21

Bresenham’s AlgorithmGiven:implicit line equation:Let:

where r and q are points on the line anddx ,dy are positive

Then:Observe that all of these are integers and: for points above the line

for points below the lineNow…..

Pic s /Math courtes y of Dave Mount @ UMD-CP

22

Bresenham’s Algorithm

• Suppose we just finished – (assume 0 ≤ slope ≤ 1)

other cases symmetric

• Which pixel next?– E or NE

Pic s /Math courtes y of Dave Mount @ UMD-CP

MQ

23

Assume:• Q = exact y value at• y midway between E and NE:Observe:If , then pick EElse pick NEIf ,

it doesn’t matter

Bresenham’s Algorithm

Pic s /Math courtes y of Dave Mount @ UMD-CP

M

Q < M

Q = M

MQ

24

• Create “modified” implicit function (2x)

• Create a decision variable D to select, where D is the value of f at the midpoint:

Bresenham’s Algorithm

Pic s /Math courtes y of Dave Mount @ UMD-CP

M

Page 5: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

5

25

Bresenham’s Algorithm

• If then M is below the line– NE is the closest pixel

• If then M is above the line– E is the closest pixel

M

26

Bresenham’s Algorithm

• If then M is below the line– NE is the closest pixel

• If then M is above the line– E is the closest pixel

• Note: because we multiplied by 2x, D is now an integer---which is very good news

• How do we make this incremental??

• What increment for computing a new D?• Next midpoint is:

• Hence, increment by:27

Case I: When E is next

Pic s /Math courtes y of Dave Mount @ UMD-CP

M

28

Case II: When NE is next

• What increment for computing a new D?• Next midpoint is:

• Hence, increment by:Pic s /Math courtes y of Dave Mount @ UMD-CP

M

29

How to get an initial value for D?

• Suppose we start at:• Initial midpoint is:Then:

Pic s /Math courtes y of Dave Mount @ UMD-CP30

The Algorithm

Assumptions:0 ≤ slope ≤ 1

Pre-computed:Pic s /Math courtes y of Dave Mount @ UMD-CP

Page 6: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

6

31

Generalize Algorithm

• If qx > rx, swap points• If slope > 1, always increment y,

conditionally increment x• If -1 <= slope < 0, always increment x,

conditionally decrement y• If slope < -1, always decrement y,

conditionally increment x• Rework D increments

Generalize Algorithm

• Reflect line into first case• Calculate pixels• Reflect pixels back into original

orientation

32

33

Bresenham’s Algorithm: Example

34

Bresenham’s Algorithm: Example

35

Bresenham’s Algorithm: Example

36

Bresenham’s Algorithm: Example

Page 7: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

7

37

Bresenham’s Algorithm: Example

38

Bresenham’s Algorithm: Example

39

Bresenham’s Algorithm: Example

40

Bresenham’s Algorithm: Example

41

Bresenham’s Algorithm: Example

42

Some issues with Bresenham’s Algorithms

• Pixel ‘density’ varies based on slope– straight lines look

darker, more pixels per unit length

– Endpoint order– Line from P1 to P2

should match P2 to P1– Always choose E when

hitting M, regardless of direction

1994 Foley/ VanDam / Fi ner / H uges/ Ph il li ps I CG

Page 8: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

8

44

XPM Format

• Encoded pixels• C code

• ASCII Text file

• Viewable on Unix w/ display

• On Windows with IrfanVIew• Translate w/ convert 45

XPM Basics

• X PixelMap (XPM)• Native file format in X Windows• Color cursor and icon bitmaps• Files are actually C source code• Read by compiler instead of viewer• Successor of X BitMap (XBM) B-W format

46

XPM Supports Color

47

XPM: Defining Grayscales and Colors

• Each pixel specified by an ASCII char• key describes the context this color should be

used within. You can always use “c” for “color”.

• Colors can be specified:– color name – “#” followed by the RGB code in hexadecimal

• RGB – 24 bits (2 characters ‘0’ - ‘f’) for each color.

48

XPM: Specifying Color

Color Name RGB Colorblack # 00 00 00

white # ff ff ff

# 80 80 80

red # ff 00 00

green # 00 ff 00

blue # 00 00 ff49

XPM Example• Array of C strings• The XPM format assumes the

origin (0,0) is in the upper left-hand corner.

• First string is “width height ncolors cpp”

• Then you have "ncolors" strings associating characters with colors.

• And last you have "height" strings of "width" * "chars_per_pixel" characters

Page 9: Line Drawing - Drexel CCIdavid/Classes/CS430/Lectures/... · 2019-10-04 · Line Drawing Week 1, Lecture 2 David Breen, William Regli and Maxim Peysakhov Department of Computer Science

9

Plain PBM Image files

50 52

Programming assignment 1• Input PostScript-like file• Output B/W XPM• Primary I/O formats for the course• Create data structure to hold points and lines

in memory (the world model) • Implement 2D translation, rotation and

scaling of the world model• Implement line drawing and clipping• Due October 8th• Get started now!

53

Questions?

Go to Assignment 1