Algorithms for vector graphics

Jayanta Mukhopadhyay

Department of Computer Science & Engineering

Indian Institute of Technology Kharagpur
[email protected]

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 1 / 24

 Outline

Drawing in a vector graphics display device.

Rasterization

Problem with line drawing

Bresenham line drawing algorithm

Slope issues

Bresenham circle drawing algorithm

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 2 / 24

 Drawing in a vector graphics display device

Basic drawing primitive: A line traced from a starting point (xs , ys ) to

a destination point (xd , yd ).
Line(xs , ys , xd , yd )

Given a curve y = f (x ), generate a sequence of points p0 , p1 , . . . pn

in a discrete grid such that line segments between pi and pi+1 are
drawn one after another from p0 to pn .
Straight line: y = mx + c.
Circle: x 2 + y 2 = r 2 .
Parabola: y 2 = 4ax
x2 y2
Ellipse: a2 + b2 = 1.
x 2 y2
Hyperbola: a2 − b2 = 1.

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 3 / 24

 Rasterization
Convert vector data to raster - pixel or dot format.

Scan conversion: Figuring out which pixels to shade

Courtesy: The remaining slides including this are from Prof. Ayan Chaudhury, Dept. of CSE, IIT Kharagpur.,
Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 4 / 24
 Frame buffer

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 5 / 24

 Frame buffer coordinates

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 6 / 24

 Problem

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 7 / 24

 Scan Conversion

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 8 / 24

 Bresenham

Bresenham’s line drawing algorithm (introduced in 1967)

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 9 / 24

 Bresenham line drawing

A simple line drawing: Draw a line between two points (x1 , y1 ) &
(x2 , y2 ).

General line equation: y = mx + b

We can write:
y1 = mx1 + b, =⇒ b = y1 − mx1
y2 = mx2 + b, =⇒ b = y2 − mx2

Therefore,

y1 − mx1 = y2 − mx2
y1 − y2 = m(x1 − x2 )
∆y = m∆x

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 10 / 24

 Bresenham line drawing
Consider the line: y = ( 13 )x + ( 32 )
We work with x, starting the line at (1,1)

x y round(y)
1 1 1
2 4/3 1
3 5/3 2
4 2 2
5 7/3 2
6 8/3 3
7 3 3
What’s actually being computed here is:

∆y = m∆x , =⇒ yi+1 − yi = m(xi+1 − xi )

=⇒ yi+1 = m + yi , [xi+1 − xi = 1]
Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 11 / 24
 Bresenham line drawing
Problem: If m > 1, the line traced will not be solid. The y-difference will
be large compared to x-difference. So, the role of x & y is to be reversed,
i.e., compute y from x-data.

Bresenham’s algorithm: At xi+1 , we need to choose between yi and yi+1

(the assumption is that, 0 < m < 1 and ∆ = 1)

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 12 / 24

 Bresenham line drawing

Let 0 < m < 1 and ∆ = 1. At xi+1 , we need to choose between yi and

yi+1

y = m(xi+1 ) + b (1)
d1 = y − yi = m(xi+1 ) + b − yi
d2 = yi+1 − y = yi + 1 − m(xi+1 ) − b
And we can write:

d1 − d2 = m(xi+1 ) + b − yi − (yi + 1 − m(xi+1 ) − b)

= 2m(xi + 1) − 2yi + 2b − 1
2∆y
= (xi + 1) − 2yi + 2b − 1
∆x

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 13 / 24

 Bresenham line drawing

=⇒ ∆x (d1 − d2 ) = 2∆yxi + 2∆y − 2∆xyi + 2b∆x − ∆x

Let pi = ∆x (d1 − d2 ). Hence,

pi = 2∆yxi − 2∆xyi + 2∆y + ∆x (2b − 1)

If pi < 0, then d1 < d2 , & yi is closer to y

Otherwise, d1 ≥ d2 & yi+1 is closer to y

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 14 / 24

 Bresenham line drawing

We rewrite the equation of pi in terms of xi+1 , yi+1 :

pi+1 = 2∆yxi+1 − 2∆xyi+1 + 2∆y + ∆x (2b − 1)

& find
pi+1 − pi = 2∆y (xi+1 − xi ) − 2∆x (yi+1 − yi )
But xi+1 = xi + 1. Hence,

pi+1 − pi = 2∆y − 2∆x (yi+1 − yi )

Now we have an iterative mechanism to determine which pixel to turn on,

as we progress on the x axis by steps of 1.

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 15 / 24

 Bresenham line drawing

First task: determine p1 so that the iteration can start:

p1 = 2∆yx1 − 2∆xy1 + 2∆y + ∆x (2b − 1)

Divide by ∆x to obtain:
p1 2∆y 2∆y
= x1 − 2y1 + + (2b − 1)
∆x ∆x ∆x
= 2mx1 − 2y1 + 2m + 2b − 1

2∆y
= 2(mx1 − y1 + b) + (2m − 1) = 2(mx1 − y1 + b) + −1
∆x
2∆y − ∆x
= 2(mx1 − y1 + b) +
∆x

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 16 / 24

 Bresenham line drawing
Now, y1 = mx1 + b =⇒ mx1 − y1 + b = 0

Putting the value in last equation we can obtain,

2∆y − ∆x
p1 = ∆x
∆x
p1 = 2∆y − ∆x
If pi < 0, yi is used for yi+1 , & hence,
pi+1 − pi = 2∆y − 2∆x (yi+1 − yi )
But yi+1 − yi = 0, & we get
pi+1 = pi + 2∆y
If pi ≥ 0, yi + 1 is used as yi+1 , & hence yi+1 − yi = 1. So,
pi+1 = pi + 2∆y − 2∆x

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 17 / 24

 Bresenham line drawing

Algorithm Bresenham(x1 , y1 , x2 , y2 ):

x = x1 , y = y1 ;
dx = x2 − x1 , dy = y2 − y1 ;
p = 2dy − dx ;
while (x ≤ x2 ) {
draw(x , y );
x + +;
if(p < 0)
p = p + 2dy ;
else
p = p + 2dy − 2dx ;
y + +;

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 18 / 24

 Bresenham line drawing
Symmetric cases:

This algorithm performs correctly when the slope of the line to draw is
comprised between 0 and 1. There are 7 other cases that need to be
addressed and symmetries are put to use to perform this (by exchanging x
with y , and/or exchanging ∆x with ∆y , and incrementing/decrementing
the x and y coordinates accordingly). (Homework)

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 19 / 24

 Bresenham circle drawing

The equation of a circle of radius r centered at the origin is given by:

x2 + y2 = r2

Because of symmetries, we just need to compute the pixel coordinates of

one eighth of the circle to draw.

Assume (xc , yc = 0, 0) and start at the top of the circle (0, r ). The current
pixel is (xi , yi ) and the next pixel must be either (xi + 1, yi ) or
(xi + 1, yi − 1).

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 20 / 24

 Bresenham circle drawing

The exact value of y is obtained as,

y 2 = r 2 − (xi + 1)2

We define distances d1 and d2 as

d1 = yi2 − y 2 = yi2 − [r 2 − (xi + 1)2 ]

d2 = y 2 − (yi − 1)2 = r 2 − (xi + 1)2 − (yi − 1)2

pi = d1 − d2 = yi2 − r 2 + (xi + 1)2 − r 2 + (xi + 1)2 + (yi − 1)2
= 2(xi + 1)2 + yi2 + (yi − 1)2 − 2r 2 (2)

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 21 / 24

 Bresenham circle drawing

If (pi < 0), we choose yi for yi+1

Else, we choose yi − 1 for yi+1

pi+1 = 2[(xi + 1) + 1]2 + yi+1

2
+ (yi+1 − 1)2 − 2r 2
= 2(xi + 1)2 + 4(xi + 1) + 2 + (yi+1 )2 + (yi+1 − 1)2 − 2r 2
= pi − yi2 − (yi − 1)2 + 2 + 4(xi + 1) + (yi+1 )2 + (yi+1 − 1)2
= pi + 4xi + 6 + 2[(yi+1 )2 − yi2 ] − 2(yi+1 − yi ) (3)
yi+1 is either yi or yi − 1 depending on the sign of pi

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 22 / 24

 Bresenham circle drawing

The Algorithm:
Begin
x = 0, y = r
p = 3 − 2 ∗ r (put x = 0, y = r in equation 2)
While (x < y )
draw(x , y );
if(p < 0)
p+ = 4 ∗ x + 6; (put yi+1 = yi in equation 3)
else
p+ = 4 ∗ (x − y ) + 10; (put yi+1 = yi − 1 in equation 3)
y − −;
x + +;
end while
end

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 23 / 24

 Summary

Basic drawing primitive for a vector device is drawing a line from one
point to another point.

Given a curve it is needed to generate a sequence of points to draw it

by approximating as a polyline.
In a raster device, it is equivalent to generate a sequence of points in
the discrete grid.
Scan conversion: Figuring out which pixels to shade

Bresenham line algorithm

Bresenham circle algorithm

Both the above algorithms involve only integer arithmetic.

Jayanta Mukhopadhyay (CSE, IIT Kharagpur) Algorithms for vector graphics 24 / 24