2. Introduction 1
Illumination model:
Given a point on a surface, what is the perceived
color and intensity? Known as Lighting Model,
or Shading Model
Surface rendering:
Apply the Illumination model to color all pixels
of the surface.
H&B 17:531-532
4. Introduction 3
Illumination:
• Physics:
– Material properties, light sources, relative
positions, properties medium
• Psychology:
– Perception, what do we see
– Color!
• Often approximating models
H&B 17:531-532
5. Light sources 1
Light source: object that radiates energy.
Sun, lamp, globe, sky…
Intensity I = (Ired , Igreen , Iblue)
If Ired = Igreen = Iblue : white light
H&B 17-1:532-536
6. Light sources 2
Simple model: point light source
• position P and intensity I
• Light rays along straight lines
• Good approximation for small
light sources
H&B 17-1:532-536
7. Light sources 3
Simpler yet: point light source at infinity
• Direction V and intensity I
• Sunlight
V
H&B 17-1:532-536
8. Light sources 4
Damping: intensity of light decreases with distance
Energy is distributed over area sphere, hence
Il = I / d2,
with d distance to light source.
In practice often too ‘agressive’,
hence Il = I / (a0 +a1d+a2d2)
If light source at infinity: No damping with distance
d
H&B 17-1:532-536
9. Light sources 5
Directed light source, spotlight:
Light is primarily send in direction of Vlight .
P
Q
d.
illuminate
is
then
cos
|
|
If
:
Or
d.
illuminate
is
then
cos
cos
If
l
light
l
Q
V
P
Q
P
Q
Q
l
light cone
Vlight
H&B 17-1:532-536
10.
11. Light sources 6
More subtle: Let I decrease with increasing angle .
P
Q
decreases.
light
he
stronger t
the
,
larger
The
.
cos
:
used
Often
n
I
I n
l
l
light cone
Vlight
H&B 17-1:532-536
12.
13. Surface illumination 1
• When light hits a surface, three things can
happen:
reflection
transmission
absorption
H&B 17-2:536-537
14. Surface illumination 2
• Suppose, a light source radiates white light,
consisting of red, green and blue light.
reflection
transmission
absorption
If only red light is reflected,
then we see a red surface.
H&B 17-2:536-537
15. Surface illumination 3
• Diffuse reflection: Light is uniformly reflected in
all directions
• Specular reflection: Light is stronger reflected in
one direction.
specular reflection
diffuse reflection
H&B 17-2:536-537
16. Surface illumination 4
• Ambient light: light from the environment. Undirected
light, models reflected light of other objects.
H&B 17-2:536-537
17. Basic illumination model 1
Basic illumination model:
• Ambient light;
• Point light sources;
• Ambient reflection;
• Diffuse reflection;
• Specular reflection.
H&B 17-3:537-546
V
P of
,
l
a
I
I
s
s
d
a
n
k
k
k
,
)
,
,
(
ts
coefficien
reflection
:
,
,
blue
p,
green
p,
red
p, k
k
k
k
k
k
k
p
s
d
a
18. Basic illumination model 2
• Ambient light: environment light. Undirected light,
models reflected light of other objects.
a
a
amb I
k
I
H&B 17-3:537-546
19. Basic illumination model 3
Perfect diffuse reflector: light is reflected
uniformly in all directions.
dA/cos
cos
cos
/
dA
dA
area.
projected
energy
Intensity
H&B 17-3:537-546
20. Basic illumination model 4
Perfect diffuse reflector: light is reflected
uniformly in all directions.
.
N
L
dA/cos
Lambert’s law:
Reflected energy is
proportional with cos , where
denotes the angle between the
normal N and a vector to the light
source L.
H&B 17-3:537-546
21. Basic illumination model 5
Perfect diffuse reflector: light is reflected
uniformly in all directions.
N
L
|
|
and
1
0
with
0
if
0
0
if
)
(
:
reflection
diffuse
model
Graphics
surf
source
surf
source
diff
l,
P
P
P
P
L
L
N
L
N
L
N
d
l
d
k
I
k
I
Psurf
Psource
H&B 17-3:537-546
22. Basic illumination model 6
Perfect specular reflector: light is only reflected in one
direction. Angle of incidence is angle of reflection.
N
L R
H&B 17-3:537-546
23. Basic illumination model 7
Imperfect specular reflector: light is distributed in the
direction of the angle of reflection, dependent on the
roughness of the surface.
N
L R
N
L R
glad ruw
H&B 17-3:537-546
24. Basic illumination model 8
Phong model: empirical model for specular reflection
N
L
R
V
viewer
direction
:
light
of
ray
reflected
direction
:
,
and
between
angle
:
,
and
between
angle
:
glad),
100
ruw,
(1
smoothness
,
)
(
with
,
cos
)
(
,
V
R
V
R
L
N
s
s
n
l
spec
l
n
k
W
I
W
I s
H&B 17-3:537-546
25. Basic illumination model 9
Phong model: empirical model for specular reflection
N
L
R
V
0
or
0
if
0
0
and
0
if
)
(
,
L
N
R
V
L
N
R
V
R
V s
n
l
s
spec
l
I
k
I
H&B 17-3:537-546
26. Basic illumination model 10
Phong model: calculating the vectors
N
L R
)
2
(
hence
)
2
(
L
N
L
N
R
N
L
N
L
R
L
N.L
V
|
| surf
view
surf
view
P
P
P
P
V
H&B 17-3:537-546
27. Basic illumination model 11
N
L
R
V
H
|
V
L
|
V
L
H
Phong model: variant with halfway vector H.
Use instead of .
)
(
,
s
n
l
s
spec
l I
k
I H
N
If light source and viewer far away:
H constant.
H&B 17-3:537-546
28. Basic illumination model 12
n
l
l
s
l
d
a
a
l
s
l
d
a
a
spec
dif
amb
I
k
I
k
I
k
I
I
k
I
k
I
k
I
I
I
I
1
n
n
s
s
))
,
0
(max(
))
,
0
(max(
:
sources
light
Multiple
))
,
0
(max(
))
,
0
(max(
H
N
L
N
H
N
L
N
All together:
H&B 17-3:537-546
29. Color (reprise):
Light intensity I and reflection coefficients k: (r,g,b) triplets
So for instance:
Plastic: kd is colored (r,g,b), ks is grey (w,w,w)
Metal: kd and ks same color
Basic model: simple but effective.
It can be done much better though…
Basic illumination model 13
)
)
,
0
(max(
,
,
, L
N
R
l
R
d
R
dif I
k
I
H&B 17-3:537-546
31. Transparancy 2
Snell’s law of refraction:
N
i
L R
T
refraction
of
index
:
,
sin
sin
i
r
i
r
i
r
L
N
T
r
i
r
i
r
i
cos
cos
and
for
solve
and
,
,
cos
,
1
.
law,
s
Snell'
Use
:
Derivation
L
N
T
N
T
T
T
r
H&B 17-4:546-549
33. Transparancy 3
Very thin surface:
• Discard shift
opacity
:
1
ncy
transpara
:
1
0
)
1
(
:
model
Simple
trans
refl
t
t
t
t
t
k
k
k
I
k
I
k
I
Poor result for silhouette
edges… H&B 17-4:546-549
37. Rendering polygons 1
Basic illumination model:
Can be used per point, but that’s
somewhat expensive
More efficient:
Illumination model gives color for some
points;
Surface is filled in using interpolation of
these colors.
H&B 17-10:559-564
38. Rendering polygons 2
Constant-intensity rendering aka flat surface rendering:
• Determine color for center of polygon;
• Fill the polygon with a constant color.
Ok if:
• Object consists of planar faces, and
• Light sources are far away, and
• Eye point is far away,
or
• Polygons are about a pixel in size.
H&B 17-10:559-564
39. Rendering polygons 2
Constant-intensity rendering aka flat surface rendering:
• Determine color for center of polygon;
• Fill the polygon with a constant color.
Highlights not visible,
Facetted appearance, increased by Mach banding effect.
H&B 17-10:559-564
40. • Human perception: edges are given
emphasis, contrast is increased near edges.
Mach banding
Angel (2000)
H&B 17-10:559-564
41. Rendering polygons 2
Gouraud surface rendering:
• Determine average normal on vertices;
• Determine color for vertices;
• Interpolate the colors per polygon (incrementally).
N1
N2
N3
N4
V
n
1
k k
n
1
k k
V
N
N
N
H&B 17-10:559-564
42. Rendering polygons 3
Gouraud surface rendering:
• Much better result for curved surfaces
• Errors near highlights
• Linear interpolation still gives Mach banding
• Silhouettes are still not smooth
Gouraud Flat
43. Rendering polygons 4
Phong surface rendering:
• Determine average normal per vertex;
• Interpolate normals per polygon (incrementally);
• Calculate color per pixel.
Fast Phong surface rendering:
Like Phong surface rendering, but use
2nd order approximation of color over
polygon:
f
ey
dx
cy
bxy
ax
y
x
I
2
2
)
,
(
H&B 17-10:559-564
44. Rendering polygons 5
Phong surface rendering:
• Even better result for curved surfaces
• No errors at high lights
• No Mach banding
• Silhouettes remain coarse
• More expensive than flat or Gouraud shading
H&B 17-10:559-564
46. OpenGL Illumination
Glfloat lightPos[] = {2.0, 0.0, 3.0, 0.0};
Glfloat whiteColor[] = {1.0, 1.0, 1.0, 1.0};
Glfloat pinkColor[] = {1.0, 0.5, 0.5, 1.0};
glShadeModel(GL_SMOOTH); // Use smooth shading
glEnable(GL_LIGHTING); // Enable lighting
glEnable(GL_LIGHT0); // Enable light source #0
glLightfv(GL_LIGHT0, GL_POSITION, lightPos); // position LS 0
glLightfv(GL_LIGHT0, GL_DIFFUSE, whiteColor); // set color LS 0
glMaterialfv(GL_FRONT, GL_DIFFUSE, pinkColor); // set surface
// color
glBegin(GL_TRIANGLES);
glNormal3fv(n1); glVertex3fv(v1); // draw triangle, give
glNormal3fv(n2); glVertex3fv(v2); // first normal, followed
glNormal3fv(n3); glVertex3fv(v3); // by vertex
glEnd();
H&B 17-11:564-574
47. OpenGL Light-sources 1
H&B 17-11:564-574
First, enable lighting in general:
glEnable(GL_LIGHTING);
OpenGL provides (at least) eight light-sources:
lightName = GL_LIGHT0, GL_LIGHT1, … , GL_LIGHT7
Enable the one(s) you need with:
glEnable(lightName);
Set properties with
glLight*(lightName, lightProperty, propertyValue);
* = i, f, iv, or fv (i: integer, f: float, v vector)
48. OpenGL Light-sources 2
H&B 17-11:564-574
Position light-source:
Glfloat sunlightPos[] = {2.0, 0.0, 3.0, 0.0};
Glfloat lamplightPos[] = {2.0, 0.0, 3.0, 1.0};
glLightfv(GL_LIGHT1, GL_POSITION, sunlightPos);
glLightfv(GL_LIGHT2, GL_POSITION, lamplightPos);
• Fourth coordinate = 0: source at infinity
• Fourth coordinate = 1: local source
• Specified in world-coordinates, according to the current
ModelView specification – just like geometry. Hence, take
care when you specify the position.
• Light from above looks more natural
49. OpenGL Light-sources 3
H&B 17-11:564-574
Color light-source:
Glfloat greyColor[] = {0.3, 0.3, 0.3, 1.0};
Glfloat pinkColor[] = {1.0, 0.7, 0.7, 1.0};
Glfloat whiteColor[] = {1.0, 1.0, 1.0, 1.0};
glLightfv(GL_LIGHT1, GL_AMBIENT, greyColor);
glLightfv(GL_LIGHT1, GL_DIFFUSE, pinkColor);
glLightfv(GL_LIGHT1, GL_SPECULAR, whiteColor);
• OpenGL light-source has three color properties, dependent on
reflection surface. Not realistic, can be used for special effects.
• If you don’t have ambient light, things often appear black.
• Colors are always 4-vectors here: Fourth coordinate is alpha.
Most cases: set it to 1.0.
• More settings: See book
50. OpenGL Global Lighting
H&B 17-11:564-574
Global parameters:
glLightModel*(paramName, paramValue);
* = i, f, iv, or fv (i: integer, f: float, v vector)
Global ambient light:
Glfloat globalAmbient[] = {0.3, 0.3, 0.3, 1.0};
glLightModelfv(GL_LIGHT_MODEL_AMBIENT, globalAmbient);
More precise specular reflection, take view position into account:
glLightModelI(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);
Two-sided lighting:
glLightModelI(GL_LIGHT_MODEL_TWO_SIDE, GL_TRUE);
52. OpenGL Surface properties 2
H&B 17-11:564-574
If colors are changed often (for instance, per vertex):
glEnable(GL_COLOR_MATERIAL);
glColorMaterial(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE);
glBegin(…);
for i = ...
for j = ...
glColor3f(red(i,j), green(i,j), blue(i,j));
glVertex3f(x(i,j), y(i,j), z(i,j));
glEnd(…);
53. OpenGL Surface properties 3
H&B 17-11:564-574
Transparent surfaces:
• First, draw all opaque surfaces;
• Next, draw transparent surfaces, back to front*, using
something like:
glColor4f(R, G, B, A); // A: alpha, for instance 0.40
glEnable(GL_BLEND);
glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA);
... Draw transparent surfaces.
glDisable(GL_BLEND);
* OpenGL cannot automatically handle transparency, because of the
z-buffer algorithm used for hidden surface removal. More on this
later.
54. OpenGL Surface properties 4
H&B 17-11:564-574
Color Blending (see also H&B: 135-136):
Source: the new graphics object to be drawn;
Destination: the current image built up.
(RS, GS, BS, AS): Source color + alpha
(RD, GD, BD, AD): Destination color + alpha
(SR, SG, SB, SA): Source blending factors
(DR, DG, DB, DA): Destination blending factors
Components of Source and Destination are weighted and added:
(SRRS+ DRRD, SGGS+ DGGD, SBBS+ DBBD, SAAS+ DAAD)
is stored in the current image.
55. OpenGL Surface properties 5
H&B 17-11:564-574
(RS, GS, BS, AS): Source color + alpha
(RD, GD, BD, AD): Destination color + alpha
(SR, SG, SB, SA): Source blending factors
(DR, DG, DB, DA): Destination blending factors
glBlendFunc(sFactor, dFactor): specify the blending factors.
glBlendFunc(GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA);
// Use alpha of source as transparency
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
// Use alpha of source as opacity
More options available for special effects.
56. OpenGL Surface-Rendering 1
H&B 17-11:564-574
glShadeModel(m): specify the rendering method
m = GL_FLAT or m = GL_SMOOTH (Gouraud, default)
glNormal*(Nx, Ny, Nz) : specify the normal vector
Flat version:
glNormal3fv(nV);
glBegin(GL_TRIANGLES);
glVertex3fv(V1);
glVertex3fv(V2);
glVertex3fv(V3);
glEnd();
Smooth version:
glBegin(GL_TRIANGLES);
glNormal3fv(nV1);
glVertex3fv(V1);
glNormal3fv(nV2);
glVertex3fv(V2);
glNormal3fv(nV3);
glVertex3fv(V3);
glEnd();
57. OpenGL Surface-Rendering 2
H&B 17-11:564-574
glShadeModel(m): specify the rendering method
m = GL_FLAT or m = GL_SMOOTH (Gouraud, default)
glNormal*(Nx, Ny, Nz) : specify the normal vector
glEnable(GL_NORMALIZE): Let OpenGL normalize the normals for
you. And, also take care of effects of
scaling, shearing, etc.
63. Hue - Paint Mixing
• Physical mix of
opaque paints
• Primary: RYB
• Secondary: OGV
• Neutral: R + Y + B
64. Hue - Ink Mixing
• Subtractive mix of
transparent inks
• Primary: CMY
• Secondary: RGB
• ~Black: C + M + Y
• Actually use CMYK
to get true black
65. Hue - Ink Mixing
Assumption: ink printed on pure white paper
CMY = White – RGB:
C = 1 – R, M = 1 – G, Y = 1 – B
CMYK from CMY (K is black ink):
K = min(C, M, Y)
C = C – K, M = M – K, Y = Y - K
66. Hue - Light Mixing
• Additive mix of
colored lights
• Primary: RGB
• Secondary: CMY
• White = R + G + B
• Show demonstration
of optical mixing
91. Output Primitives
• The basic objects out of which a graphics
display is created are called.
• Describes the geometry of objects and –
typically referred to as geometric
primitives.
• Examples: point, line, text, filled region,
images, quadric surfaces, spline curves
• Each of the output primitives has its own
set of attributes.
91
94. Output Primitives
• Polylines (open)
• A set of line segments joined end to end.
• Attributes: Color, Thickness, Type
glLineWidth(p);
glBegin(GL_LINE_STRIP);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()
95. Output Primitives
• Polylines (closed)
• A polyline with the last point connected to the first
point .
• Attributes: Color, Thickness, Type
Note: A closed polyline cannot be filled.
glBegin(GL_LINE_LOOP);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()
96. Output Primitives
• Polygons
• A set of line segments joined end to end.
• Attributes: Fill color, Thickness, Fill pattern
Note: Polygons can be filled.
glBegin(GL_POLYGON);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()
98. Output Primitives
• Images
• Attributes: Image Size, Image Type, Color
Depth.
• Image Type:
• Binary (only two levels)
• Monochrome
• Color.
• Color Depth:
Number of bits used to represent color.
98
99. TCS2111
99
Output Primitives
Output Primitive Attributes
Point Size
Color
Line Thickness (1pt, 2pt …)
Type (Dashed, Dotted, Solid)
Color
Text Font (Arial, Courier, Times Roman…)
Size (12pt, 16pt ..)
Spacing
Orientation (Slant angle)
Style (Bold, Underlined, Double lined)
Color
Filled Region Fill Pattern
Fill Type (Solid Fill, Gradient Fill)
Fill Color
Images Color Depth (Number of bits/pixel)
101. Line Drawing
• Line drawing is fundamental to computer graphics.
• We must have fast and efficient line drawing functions.
Rasterization Problem: Given only the two end points, how
to compute the intermediate pixels, so that the set of pixels
closely approximate the ideal line.
102. Line Drawing - Analytical Method
y y
x x
y x
b a
m
b a
c a ma
y
x
y=mx+c
ax bx
A(ax,ay)
B(bx,by)
103. • Directly based on the analytical equation of a line.
• Involves floating point multiplication and addition
• Requires round-off function.
double m = (double)(by-ay)/(bx-ax);
double c = ay - m*ax;
double y;
int iy;
for (int x=ax ; x <=bx ; x++) {
y = m*x + c;
iy = round(y);
setPixel (x, iy);
}
Line Drawing - Analytical Method
104. Compute one point based on the previous point:
(x0, y0)…….…………..(xk, yk) (xk+1, yk+1) …….
I have got a pixel on the line (Current Pixel).
How do I get the next pixel on the line?
Next pixel on next column
(when slope is small)
Next pixel on next row
(when slope is large)
Incremental Algorithms
105. Current
Pixel
(xk, yk)
To find (xk+1, yk+!):
xk+1 = xk+1
yk+1 = ?
(5,2)
(6,1)
(6,2)
(6,3)
• Assumes that the next pixel to be set is on the next column of
pixels (Incrementing the value of x !)
• Not valid if slope of the line is large.
Incrementing along x
106. Digital Differential Analyzer Algorithm is an incremental
algorithm.
Assumption: Slope is less than 1 (Increment along x).
Current Pixel = (xk, yk).
(xk, yk) lies on the given line. yk = m.xk + c
Next pixel is on next column. xk+1 = xk+1
Next point (xk+1, yk+1) on the line yk+1 = m.xk+1 + c
= m (xk+1) +c
= yk + m
Given a point (xk, yk) on a line, the next point is given by
xk+1 = xk+1
yk+1 = yk + m
Line Drawing - DDA
107. • Does not involve any floating point multiplication.
• Involves floating point addition.
• Requires round-off function
Line Drawing - DDA
double m = (double) (by-ay)/(bx-ax);
double y = ay;
int iy;
for (int x=ax ; x <=bx ; x++) {
iy = round(y);
setPixel (x, iy);
y+ = m;
}
108. xk+1 = xk+1
yk+1 = Either yk or yk+1
Midpoint algorithm is an incremental algorithm
Midpoint Algorithm
Assumption:
Slope < 1
Current
Pixel
109. Candidate Pixels
Current Pixel
( xk, yk)
Midpoint
Line
Coordinates of Midpoint = ( xk+1, yk+(1/2) )
( xk+1, yk)
( xk+1, yk+1)
Midpoint Algorithm -
Notations
110. Midpoint Below Line Midpoint Above Line
Midpoint Algorithm:
Choice of the next pixel
•If the midpoint is below the line, then the next pixel is (xk+1, yk+1).
•If the midpoint is above the line, then the next pixel is (xk+1, yk).
111. A(ax,ay)
B(bx,by)
Equation of a line revisited.
y x
y y x x
y a x a
b a b a
Let w = bx ax, and h = by ay.
Then, h (x ax) w (y ay) = 0.
(h, w , ax , ay are all integers).
In other words, every point (x, y) on the line
satisfies the equation F(x, y) =0, where
F(x, y) = h (x ax) w (y ay).
Equation of the line:
112. Midpoint Algorithm:
Regions below and above the line.
F (x,y) > 0
(for any point below line)
F(x,y) < 0
(for any point above line)
F(x,y) = 0
113. F(MP) > 0
0
)
,
(
y
x
f
Midpoint below line
F(MP) < 0
Midpoint above line
Midpoint Algorithm
Decision Criteria
114. Midpoint Algorithm
Decision Criteria
F(MP) = F(xk+1, yk+ ½) = Fk (Notation)
If Fk < 0 : The midpoint is above the line. So the next
pixel is (xk+1, yk).
If Fk 0 : The midpoint is below or on the line. So the
next pixel is (xk+1, yk+1).
Decision Parameter
115. Midpoint Algorithm – Story so far.
Midpoint Below Line
Next pixel = (xk+1, yk+1)
Fk > 0
yk+1 = yk+1
Midpoint Above Line
Next pixel = (xk+1, yk)
Fk < 0
yk+1 = yk
116. Midpoint Algorithm
Update Equation
Fk = F(xk+1, yk+ ½) = h (xk+1 ax) w (yk+½ ay)
But, Fk+1 = Fk + h w (yk+1 yk). (Refer notes)
So,
Fk< 0 : yk+1 = yk. Hence, Fk+1 = Fk + h .
Fk 0 : yk+1 = yk+1. Hence, Fk+1 = Fk + h w.
F0 = h w/2.
Update Equation
117. Midpoint Algorithm
117
int h = by-ay;
int w = bx-ax;
float F=h-w/2;
int x=ax, y=ay;
for (x=ax; x<=bx; x++){
setPixel(x, y);
if(F < 0)
F+ = h;
else{
F+ = h-w;
y++;
}
}
118. Bresenham’s Algorithm
118
int h = by-ay;
int w = bx-ax;
int F=2*h-w;
int x=ax, y=ay;
for (x=ax; x<=bx; x++){
setPixel(x, y);
if(F < 0)
F+ = 2*h;
else{
F+ = 2*(h-w);
y++;
}
}
120. Midpoint Circle Drawing
Algorithm
• To determine the closest pixel position to the
specified circle path at each step.
• For given radius r and screen center position (xc,
yc), calculate pixel positions around a circle path
centered at the coodinate origin (0,0).
• Then, move each calculated position (x, y) to its
proper screen position by adding xc to x and yc
to y.
• Along the circle section from x=0 to x=y in the
first quadrant, the gradient varies from 0 to -1.
120
122. TCS2111
122
Midpoint Circle Drawing Algorithm
Circle function: fcircle (x,y) = x2 + y2 –r2
> 0, (x,y) outside the circle
< 0, (x,y) inside the circle
= 0, (x,y) is on the circle
boundary
{
fcircle (x,y) =
123. TCS2111
123
Midpoint Circle Drawing Algorithm
yk
yk-1
midpoint
Next pixel = (xk+1, yk)
Fk < 0
yk+1 = yk
yk
yk-1
midpoint
Next pixel = (xk+1, yk-1)
Fk >= 0
yk+1 = yk - 1
124. TCS2111
124
Midpoint Circle Drawing Algorithm
We know xk+1 = xk+1,
Fk = F(xk+1, yk- ½)
Fk = (xk +1)2 + (yk - ½)2 - r2 -------- (1)
Fk+1 = F(xk+1, yk- ½)
Fk+1 = (xk +2)2 + (yk+1 - ½)2 - r2 -------- (2)
(2) – (1)
Fk+1 = Fk + 2(xk+1) + (y2
k+1 – y2
k) - (yk+1 – yk) + 1
If Fk < 0, Fk+1 = Fk + 2xk+1+1
If Fk >= 0, Fk+1 = Fk + 2xk+1+1 – 2yk+1
125. TCS2111
125
Midpoint Circle Drawing Algorithm
For the initial point, (x0 , y0) = (0, r)
f0 = fcircle (1, r-½ )
= 1 + (r-½ )2 – r2
= 5 – r
4
≈ 1 – r
126. TCS2111
126
Midpoint Circle Drawing Algorithm
Example:
Given a circle radius = 10, determine the circle octant
in the first quadrant from x=0 to x=y.
Solution:
f0 = 5 – r
4
= 5 – 10
4
= -8.75
≈ –9
128. TCS2111
128
Midpoint Circle Drawing Algorithm
void circleMidpoint (int xCenter, int yCenter, int radius)
{
int x = 0;
Int y = radius;
int f = 1 – radius;
circlePlotPoints(xCenter, yCenter, x, y);
while (x < y) {
x++;
if (f < 0)
f += 2*x+1;
else {
y--;
f += 2*(x-y)+1; }
}
circlePlotPoints(xCenter, yCenter, x, y);
}
129. TCS2111
129
Midpoint Circle Drawing Algorithm
void circlePlotPoints (int xCenter, int yCenter,
int x, int y)
{
setPixel (xCenter + x, yCenter + y);
setPixel (xCenter – x, yCenter + y);
setPixel (xCenter + x, yCenter – y);
setPixel (xCenter – x, yCenter – y);
setPixel (xCenter + y, yCenter + x);
setPixel (xCenter – y, yCenter + x);
setPixel (xCenter + y, yCenter – x);
setPixel (xCenter – y, yCenter – x);
}
131. Antialiasing
131
Antialiasing is a technique used to diminish
the jagged edges of an image or a line, so
that the line appears to be smoother; by
changing the pixels around the edges to
intermediate colors or gray scales.
Eg. Antialiasing disabled:
Eg. Antialiasing enabled:
134. Fill Area Algorithms
• Fill-Area algorithms are used to fill the
interior of a polygonal shape.
• Many algorithms perform fill operations
by first identifying the interior points,
given the polygon boundary.
134
135. Basic Filling Algorithm
135
The basic filling algorithm is commonly used
in interactive graphics packages, where the
user specifies an interior point of the region to
be filled.
4-connected pixels
136. Basic Filling Algorithm
[1] Set the user specified point.
[2] Store the four neighboring pixels in a
stack.
[3] Remove a pixel from the stack.
[4] If the pixel is not set,
Set the pixel
Push its four neighboring pixels into the stack
[5] Go to step 3
[6] Repeat till the stack is empty.
136
138. Basic Filling Algorithm
• Requires an interior point.
• Involves considerable amount of stack
operations.
• The boundary has to be closed.
• Not suitable for self-intersecting
polygons
138
139. Types of Basic Filling Algorithms
• Boundary Fill Algorithm
• For filling a region with a single boundary
color.
• Condition for setting pixels:
• Color is not the same as border color
• Color is not the same as fill color
• Flood Fill Algorithm
• For filling a region with multiple boundary
colors.
• Condition for setting pixels:
• Color is same as the old interior color
139
140. TCS2111
140
void boundaryFill(int x, int y,
int fillColor, int borderColor)
{
getPixel(x, y, color);
if ((color != borderColor)
&& (color != fillColor)) {
setPixel(x,y);
boundaryFill(x+1,y,fillColor,borderColor);
boundaryFill(x-1,y,fillColor,borderColor);
boundaryFill(x,y+1,fillColor,borderColor);
boundaryFill(x,y-1,fillColor,borderColor);
}
}
Boundary Fill Algorithm (Code)
141. TCS2111
141
void floodFill(int x, int y,
int fillColor, int oldColor)
{
getPixel(x, y, color);
if (color != oldColor)
{
setPixel(x,y);
floodFill(x+1, y, fillColor, oldColor);
floodFill(x-1, y, fillColor, oldColor);
floodFill(x, y+1, fillColor, oldColor);
floodFill(x, y-1, fillColor, oldColor);
}
}
Flood Fill Algorithm (Code)
