Download Scan Conversion

CSC505
Advanced Computer Graphics
Dr. Craig Reinhart
Objectives
•
•
•
•
•
OpenGL?
Java 3D API?
Direct3D
VRML?
None of the above!
– or at least very little
Objectives
• Demonstrate an understanding of the
principles and concepts (mathematical and
logical) underlying advanced graphical
techniques.
• Implement the principles and concepts
(mathematical and logical) to produce
sophisticated computer graphical displays
and special effects.
• I think that these objectives will be more
meaningful even if you don’t intend to do
further work in computer graphics.
Class Layout
• In class
– Lectures
– Labs
– Demonstrations of your work
• Out of class
– Reading assignments (papers)
– Programming assignments
Preliminaries
• Since we’re not going to cover the 3D
graphics API you’ll need a way to
demonstrate your work
• BMP files for still pictures is one possibility
– We’ll cover this format tonight
• AVI files for animations
– We’ll discuss a tool for creating them
• Live demonstrations (application programs
that you wrap your algorithms with)
Still Image Files
• Microsoft’s “bitmap” file format
• Many varieties
– 8 bit with color palette
– 16 bit RGB
– 24 bit RGB
– Compressed/uncompressed
• We’ll stick with 24 bit as it is the
simplest
– 16,777,216 possible colors – should be
ample for our purposes
24-Bit Color Image
24-bit color
8-bit red
8-bit green
8-bit blue
24-Bit Color Image
Each 24-bit pixel is made up of one
red, one green, and one blue 8-bit pixel
24-Bit BMP File Format
• Bitmap file header
– Data structure that tells the reader that it is
a BMP file
• Bitmap information header
– Data structure that tells the reader the
format of the image
• Image data
– The picture elements (pixels) that make up
the picture
Bitmap File Header Fields
• bfType – 2 bytes, always set to ‘B’ and ‘M’
• bfSize – 4 bytes, size of the file in bytes (file
header + image header + pixels)
• bfReserved1 – 2 bytes, reserved for future
usage
• bfReserved2 – 2 bytes, reserved for future
usage
• bfOffBits – 4 bytes, number of bytes in file
before image starts (file header + image
header)
Bitmap Information Header Fields
•
•
•
•
•
•
•
biSize – 4 bytes, size in bytes of this structure (40)
biWidth – 4 bytes (signed), number of pixels per row
biHeight – 4 bytes (signed), number of rows per image
biPlanes – 2 bytes, number of image planes (1)
biBitCount – 2 bytes, number of bits per pixel (24)
biCompression – 4 bytes, type of compression (0)
biSizeImage – 4 bytes, number of pixels in the file
– Not always (biWidth * biHeight * 3) because image rows must be a
multiple of 4 bytes (to support fast transfer on a 32-bit bus)
• biXPelsPerMeter – 4 bytes (signed), for printer usage (ignore)
• biYPelsPerMeter – 4 bytes (signed), for printer usage (ignore)
• biClrUsed – 4 bytes, number of colors actually used in images
with less than 24 bits per pixel (0)
• biClrImportant – 4 bytes, number of “important” colors in images
with less than 24 bits per pixel (0)
Bitmap File Image Data
• Pixels are stored in Blue-Green-Red
order
• Rows of pixels must be multiples of 4
bytes
• Bottom row of image is stored first, top
row is stored last
– i.e. image is stored upside down
BMP File Writer
• I have placed code to write BMP files on the class website
• Both Java and C++ versions are there
– If you want VB (or anything else) you’ll have to study the
code Java or C++ code and make your own
• The may not be the most efficient but they work
• In the Java version, there are two different Write methods … the
one that takes 3 separate image planes (red, green, and blue) is
probably the easiest to use.
• Java also has an API to write images (ImageIO) and I would
guess that C# and VB do too.
Still Image Files
• JPEG
• A scheme for created compressed still image
files (both lossy and lossless)
• Most JPEG writers use the lossy method
• This will not be suitable for many graphics
applications as fine details are “lost” to the
compression scheme
Video Image Files
• AVI video files are nothing more than a series
of BMP files (less the bitmap file header)
grouped together with some additional
header information
• QuickTime (for you Mac users) is much more
involved – 1000’s of pages of documentation
exist
• MPEG files contain frame-to-frame
dependence to achieve compression
AVI File Format
• Rather than dig into this, we’ll use a tool
to create them from a sequence of BMP
files (or various other image file formats)
• Bink & Smacker from RAD Game Tools
– http://www.radgametools.com – Bink Video
link then download link
– It’s FREE!
– I don’t think there is one for MacOSX but
iMovie might work
Creating An AVI File
• Write your code to create a sequence of
BMP files names <filename>NNN.BMP
where NNN ranges from 000 to
however many images (minus 1) in your
sequence
• Use Bink & Smacker to assemble the
individual BMP files into an AVI file
• You can also add sound tied to frame
numbers
Creating An AVI File
• Create the BMP files (e.g. file000.BMP to
file471.BMP)
• Run Bink & Smacker
• Browse to the folder storing the BMP files
• Select file000.BMP
• Press “Convert a File” button
– Bink should recognize the sequence – confirm sequence
• On the Bink Converter screen, press “Convert”
• On the Video Compression screen select “Full Frames
(Uncompressed)”
• Press “Done” – you should now have a file called
file.AVI in the same folder as the BMP files
Scan Conversion
The first “real” topic
Reference
• Just about any book on computer
graphics (e.g. Foley, Van Dam, Feiner,
and Hughes)
• “Using Program Transformations to
Derive Line Drawing Algorithms”,
Robert F. Sproull, ACM Transactions on
Graphics, Vol. 1, No. 4, October 1982,
pp. 259 – 273 (posted on class website)
Scan Conversion
• Also known as rasterization
• In our programs objects are represented
symbolically
– 3D coordinates representing an object’s position
– Attributes representing color, motion, etc.
• But, the display device is a 2D array of pixels
(unless you’re doing holographic displays)
• Scan Conversion is the process in which an
object’s 2D symbolic representation is
converted to pixels
Scan Conversion
• Consider a straight line in 2D
– Our program will [most likely] represent it as
two end points of a line segment which is not
compatible with what the display expects
(X1, Y1)
Program Space
(X1, Y1)
Display Space
(Xn, Yn)
(X0, Y0)
(X0, Y0)
– We need a way to perform the conversion
Drawing Lines
• Equations of a line
– Point-Slope Form: y = mx + b (also Ax + By + C = 0)
Y
∆y
∆x
X
b
m=
∆y
∆x
• As it turns out, this is not
very convenient for scan
converting a line
Drawing Lines
• Equations of a line
– Two Point Form:
y

y y

 x  y
x
x x
1
0
0
1
0
0
– Directly related to the point-slope form but now
it allows us to represent a line by two points –
which is what most graphics systems use
Drawing Lines
• Equations of a line
– Parametric Form:
x  x  x  x t
y  y  y  y t
0
0
1
1
0
0
– By varying t from 0 to 1we can compute all of the
points between the end points of the line segment
– which is very convenient
Issues With Line Drawing
• Line drawing is such a fundamental algorithm that it must be
done fast
– Use of floating point calculations does not facilitate speed
– Division operations (even integer) are also time consuming
• Furthermore, lines must be drawn without gaps
– Gaps look bad
– If you try to fill a polygon made of lines with gaps the fill will
leak out into other portions of the display
– Eliminating gaps through direct implementation of any of the
standard line equations is difficult
• Finally, we don’t want to draw individual points more than once
– That’s wasting valuable time
Bresenham’s Line Drawing
Algorithm
• Jack Bresenham addressed these issues with the
Bresenham Line Scan Convert algorithm
– This was back in 1965 in the days of pen-plotters
• All simple integer calculations
– Addition, subtraction, multiplication by 2 (shifts)
• Guarantees connected (gap-less) lines where each
point is drawn exactly 1 time
• Also known as the midpoint line algorithm
Bresenham’s Line Algorithm
• Consider the two point-slope forms:
F x, y   Ax  By  C  0
y
y  xb
x
algebraic manipulation yields:
y  x  x  y  x  b  0
where:
y  ( y  y ); x  ( x1  x0)
yielding:
1
0
A  y; B  x
Bresenham’s Line Algorithm
• Assume that the slope of the line segment is
0≤m≤1
• Also, we know that our selection of points is restricted to the grid
of display pixels
• The problem is now reduced to a decision of which grid point to
draw at each step along the line
– We have to determine how to make our steps
Which point should
we choose next?
Bresenham’s Line Algorithm
• What it comes down to is computing how close the
midpoint (between the two grid points) is to the actual
line
(xp, yp)
(xp+1, yp+½)
Bresenham’s Line Algorithm
• Define F(m) = d as the discriminant
– (derive from the equation of a line Ax + By + C)
1
F m   d m  F ( x p  1, y  )
p
2
1
F (m)  d m  A  ( x p  1)  B  ( y  )  C
p
2
• if (dm > 0) choose the upper point, otherwise choose
the lower point
Bresenham’s Line Algorithm
• But this is yet another relatively
complicated computation for every point
• Bresenham’s “trick” is to compute the
discriminant incrementally rather than
from scratch for every point
Bresenham’s Line Algorithm
• Looking one point ahead we have:
m2
m1
(xp, yp)
m
Bresenham’s Line Algorithm
• If d > 0 then discriminant is:
3
3
F ( x p  2, y  )  d m 2  A  ( x p  2)  B  ( y  )  C
p
p
2
2
• If d < 0 then the next discriminant is:
1
1
F ( x p  2, y  )  d m1  A  ( x p  2)  B  ( y  )  C
p
p
2
2
• These can now be computed incrementally given the
proper starting value
Bresenham’s Line Algorithm
• Initial point is (x0, y0) and we know that it is on the line
so F(x0, y0) = 0!
• Initial midpoint is (x0+1, y0+½)
• Initial discriminant is
F (x0+1, y0+½) = A(x0+1) + B(y0+½) + C
= Ax0+By0+ C + A + B/2
= F(x0, y0) + A + B/2
• And we know that F(x0, y0) = 0 so
B
x
d initial  A  2  y  2
Bresenham’s Line Algorithm
• Finally, to do this incrementally we need
to know the differences between the
current discriminant (dm) and the two
possible next discriminants (dm1 and
dm2)
Bresenham’s Line Algorithm
We know:
1
1

F
(

1
,

)

A

(

1
)

B

(

y p 2)  C
d current x p y p 2
xp
1
1
d
m1
 F ( x p  2, y  )  A  ( x p  2)  B  ( y  )  C
p
p
2
2
3
3

F
(

2
,

)

A

(

2
)

B

(

)C
y
y
d m2
xp
xp
p
p
2
2
We need (if we choose m1):
d
m1
 d current  A  ( y  y )  y  E
1
0
or (if we choose m2):
d
m2
 d current  A  B  ( y  y )  ( x1  x0)  y  x  NE
1
0
Bresenham’s Line Algorithm
• Notice that ΔE and ΔNE both contain only
constant, known values!
d
d
m2
m1
 d current  A  ( y  y )  E
1
0
 d current  A  B  ( y  y )  ( x1  x0)  NE
1
0
• Thus, we can use them incrementally – we
need only add one of them to our current
discriminant to get the next discriminant!
Bresenham’s Line Algorithm
• The algorithm then loops through x values in the
range of x0 ≤ x ≤ x1 computing a y for each x – then
plotting the point (x, y)
• Update step
– If the discriminant is less than/equal to 0 then increment x,
leaving y alone, and increment the discriminant by ΔE
– If the discriminant is greater than 0 then increment x,
increment y, and increment the discriminant by ΔNE
• This is for slopes less than 1
• If the slope is greater than 1 then loop on y and
reverse the increments of x’s and y’s
• Sometimes you’ll see implementations that the
discriminant, ΔE, and ΔNE by 2 (to get rid of the
initial divide by 2)
• And that is Bresenham’s algorithm
Drawing Circles
• Bresenham also came up with a similar
scheme for drawing circles
– Similar scheme for determining next grid
point
– Uses x2 + y2 - r2 = 0 for computing the
discriminants
– Similar algebraic manipulations
– Draws all 4 quadrants of the circle at the
“same” time to reduce the work load
Drawing Ellipses
• Others have extended Bresenham’s
work to drawing axis-aligned ellipses
too.
Summary
• Why did we go through all this?
• Because it’s an extremely important
algorithm
• Because the problem demonstrates the
“need for speed” in computer graphics
• Because it relates mathematics to
computer graphics (and the math is
simple algebraic manipulations)
• Because it presents a nice
programming assignment…
Assignment
•
•
•
•
•
Design and implement your own algorithm to draw a line using one of
the standard forms (point-slope, two-point, parametric)
– Input to the algorithm will be the two endpoints of the segment (x0, y0) and
(x1, y1)
Implement Bresenham's approach for drawing straight lines
Design and implement your own algorithm to draw a circle using the
standard forms (center, radius)
– Input to the algorithm will be a center point (xo, yo) and radius
Implement Bresenham’s circle algorithm (search the web for
references)
In all cases allow for input of the width of the line (i.e. input a brush
size)
Assignment
•
•
•
•
Write a paper
– Describing your algorithms for scan converting lines/circles
– Comparing your approaches (for lines and circles) to Bresenham’s
in terms of quality of the resultant objects (i.e. did your approach
have gaps and, if not, how did you get rid of them, did your code
write some points more than one time) and implementation
(number of operations, floating point operations, special conditions,
amount of code, complexity, etc.)
Create a video sequence to show in class
– Demonstrate lines of various slopes, lengths, and brush widths
– Demonstrate circles of various locations, radii, and brush widths
– Be creative
Due date – Next week – Turn in:
– Video to be shown in class
– All program listings
– Write-up of the comparison of techniques
Grading will be on completeness (following instructions) and timeliness
(late projects will be docked 10% per week)