RasterizationPresenters:

o Ahmed Adel Abdelwaneso Ahmed Mostafa Oufo Ahmed Youssef Fouado Belal Mohammedo Mohamed Ahmed Bahnasawio Youssef Mohamed Ramzy

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• The output of the Interpolation Block is series output , So this block will be slow as it includes four modules (2 Dividers & 2 FIFOs) .

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Line Drawing Algorithms:o The Cartesian equation of a line is:

Where And as the line between and

• It is noted that for the particular case when, there will be exactly one pixel turned on in every column between and ; and exactly one pixel turned on in every row between and .

• It is desirable that for , there is exactly one pixel in every column and at least one pixel in every row.

• Similarly, for , there will be exactly one pixel in every row and at least one pixel in each column.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

A straightforward line drawing algorithm1. Start at the pixel for the left-hand

endpoint 2. Step along the pixels horizontally

until we reach the right-hand end of the line,

3. For each pixel compute the corresponding y value

4. round this value to the nearest integer to select the nearest pixel

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• The algorithm performs a floating-point multiplication for every step in x.• This method therefore requires an enormous number of floating-point• multiplications, and is therefore expensive.

The incremental DDA AlgorithmThe differential equation of a straight line is given by: , The solution of the finite difference approximation is:

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• We need only compute m once, as the start of the scan-conversion.• The DDA algorithm runs rather slowly because it requires real arithmetic

(floating-point operations).

The incremental DDA Algorithm (Cont.)DDA algorithm for lines with -1 < m < 1

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Switching the roles of x and y when m>1

• Gaps occur when m > 1

• Reverse the roles of x and y using a unit step in y, and 1/m for x.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Midpoint Algorithm• Data we have: start point between and

By using midpoint algorithmy = ya

For (x= xa to xb)

Draw(x,y)If( condition)y = y+1

If we draw a pixel at (x,y) where x,are the pixel center.

so the next eligible pixel would be (x+1,y) or (x+1,y+1)

so the midpoint would be (x+1,y+0.5)

So what we need to do is to determine whether the mid point is above the line(on its left) or below the line (on its right)

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Midpoint Algorithm (Cont.)

So what we need to do is to determine whether the mid point is above the line(on its left) or below the line (on its right)

to do this we get f(x,y+0.5) if it’s > 0 so it’s above and we will draw y+1 if it’s < 0 so it’s below then we will draw y.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Midpoint Algorithm (Cont.)Assuming our line

equation is:+

• It will be very difficult to substitute in it for each point so we use the incremental method

• which that we use the computation from the previous iteration.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Bresenham AlgorithmThis algorithm uses only integer

arithmetic, and runs significantly faster. • Key idea: distance between the actual line and the nearest grid locations (error).• Initialize error: • Error is given by: • Reinitialize error: when

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Bresenham Algorithm (Cont.)

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Bresenham Algorithm (Cont.)However, this algorithm does not lead to

integer arithmetic. Scaling by: 2* dx

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Double Step Midpoint Algorithm• This algorithm draws one of four possible

pixel patterns.• The four pixel patterns that can occur for

a line with • pattern 1 and pattern 4 cannot occur on

the same line .• If the slope is less than 1/2 , pattern 4

cannot occur (similarly for a slope greater than 1/2 , pattern 1 cannot occur).

• These properties mean that one of three patterns can be drawn for a given line,either 1,2,3 or 2,3,4.

• Assuming that the slope is between 0 and 1/2 , only patterns 1,2,3 need to be considered.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Double Step Midpoint Algorithm (Cont.)

• pattern 1 is chosen•

either of 2 or 3 are chosen

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Some points worth considering :o Intensity of a line depending on the slope

It can be noted that lines with slopes near to -1 or 1 appear to be fainter than those with slopes near to 0 or ∞. This discrepancy can be solved by varying the intensity of the pixels according to the slope.o Antialiasing

Due to the discrete nature of the pixels, diagonal lines often appear jaggied. This staircasing effect is called aliasing, and techniques which try to solve, or at least minimize this problem are called antialiasing. For example, a line can be treated as a one-pixel thick rectangle and the intensity of the pixels is set according to a function of the area the rectangle covers over that particular pixel.o Endpoint Order

It must be ensured that a line drawn from (xa; ya) to (xb; yb) must be identical to the line drawn from to In the midpoint/Bresenham algorithm, the point E is chosen when the selection criterion C = 0. (i.e. when the line passes through the midpoint of NE and E.) Thus it must be ensured that when the line is plotted from right to left, the point SW (not W) is selected when the criterion does not specify an obvious choice.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

The Symmetry of a Circle• Due to the eight way symmetry of a

circle, it is necessary to calculate the positions of the pixels of only one octant.

• Up to eight points can thus be plotted simultaneously:

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

A Straightforward Circle Drawing Algorithm• The Cartesian circle equation can be used to implement a

straightforward but very inefficient algorithm for scan converting circles.• This algorithm is extremely inefficient due to excessive °oating

point computation.

For x := 0 to Round (r / Sqrt (2)) dobegin

y := Round (Sqrt (r*r - x*x));PlotCirclePixels (x, y)

end;

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Use of parametric polar form equation• The equation of a circle may be

expressed in parametric polar form as follows:

• where r is the radius of the circle.Additionally, the length of an arc

corresponding to an angular displacement is given by: • To avoid gaps in our circle, we should

use an increment value , which corresponds to an increment value

• This algorithm still makes excessive use of floating point arithmetic, and may still cause points to be plotted more than once.

• A value for could be used to generate dotted circles.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Ellipses• The Cartesian equation of

an ellipse with Centre semi major axis , and semi minor axis is:

Or

or in polar parametric form,

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Circle drawing techniques can be adapted to draw ellipses. Note, however, that ellipses in general do not possess 8-way symmetry, but only 4-way symmetry.

• When using the mid-point and Bresenham techniques, it cannot be assumed that the same two choices for the next point are valid throughout; in previous cases, these choices were only adopted after taking the gradient into consideration. In the case of an ellipse quadrant, the approach has to be changed as the gradient crosses the m = 1 boundary.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Targets1. Setting colour and z value of the vertices of

the triangle.

2. Interpolate colours of pixels which is found inside the triangle after testing their presence inside or outside it.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Steps1.Edge walking.

2.Edge equations step.

3.Barycentric coordinate step.

And these are the three modules needed to be implemented to design a triangle rasterization stage.

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Edge walking idea(steps)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Scan the highest vertex and the lowest one to determine scan line order.

• Walk edges using edge slope to update coordinates incrementally.

Edge walking idea(steps) (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• On each scan line scan left to right setting pixels.

• Stop when the bottom vertex or edge reached(if a bottom edge found.

Edge walking idea(steps) (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Advantages: very simple and easy to be implemented.

Disadvantages:

Can’t be parallelized as we set one pixel each time. There is some special cases which can cause some problems.Example:

In the first triangle we can’t determine the top vertex and bottom vertex at the second one.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Edge equationsIntroduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Compute edge equations using vertices of the triangle.

• Scan each pixel against edge equation to determine whether it is inside the triangle or outside it.

• A pixel will be set if its coordinates is inside the triangle and this happens if all edge equations are > 0.

Edge equations (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Behavioural code for one edge comparison :Input x,y,A,B,C;Wire eq,decide;Output position;Assign eq=Ax+By+C;Assign decide =(sign bit of eq)? 1’b0:1’b1;Assign position=(decide)? 1’b1:1’b0;//position=1 means pixel inside the triangle//position=0 means pixel outside the triangle//her if equation=0 this means that pixel lies on the edge and it will be considered positive and inside the triangle due to the code and this will be fixed.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Which pixels will be examined?Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

A question appears here which is are we going to test for the presence of all pixels found in the screen view?

Is there a way to reduce the number of pixels examined ?

The answer is yes and we are going to discuss that in the next slide.

Which pixels will be examined? (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Steps to reduce no of pixels examined:1. Form a boundary box by determining 4 points ymax ,ymin , xmax and xmin .

2. Compute edge equations.3. Scan through each pixel found inside the boundary box against the equations of the three edges of the triangle.

4.Set the pixels which lie inside the triangle.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

How pixel is colored ?Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• The previous steps was all about determining if the pixels lie inside or outside the triangle we are rasterizing but how are we going to set the color of the pixel ?

• The answer is that pixels are colored by using means of barycentric coordinates which is a different system for Cartesian coordinates.

• So in graphics we want to assign a property like color to triangle vertex and then interpolate this colors across all the pixels of the triangle.

• This will be achieved using the Barycentric coordinates.

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Barycentric coordinatesIntroduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Barycentric coordinates are triples of numbers  corresponding to masses placed at the vertices of a reference triangle . These masses then determine a point , which is the geometric centroid of the three masses and is identified with coordinates.

• We can define barycentric coordinates as non orthogonal coordinates where the coordinate origin is a and the vectors from a to b and c are the basis vectors. With that origin and those basis vectors, any point p can be written as:

p = a + β(b − a) + γ(c − a).

Barycentric coordinates (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• Equation cans be simplified to :

p = (1 − β − γ)a + βb + γc.A new variable can be defined:

α ≡ 1 − β − γ.which yields the equation:p(α, β, γ) = αa + βb + γc.

with the constraint that:α + β + γ = 1.

• Notes:• α, β, γ are called the barycentric

coordinates.

• A point M = αP + βQ +γR is inside the triangle if and only if:

α +β +γ = 1,andα, β, γ ≥ 0.

If 1 coordinate of the barycentric coordinates=0 then the pixel lies on the edge of the triangle and if 2 coordinates=0 then the pixel is one of the vertices of the triangle.

Barycentric coordinates (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Barycentric coordinates (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• If we think about each vertex that ithas its own value of RGB (red , green ,blue) we can determine the RGB value by finding coefficients of the color equationand this is achieved by calculating the ratio between the triangle representingthe color and the whole triangle which represents how close is the point to each vertex. α = Aa/A, β = Ab/A,γ = Ac/A,

Barycentric coordinates (Cont.)Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• How the area of the triangle calculated:

sinθ = h / ||v|| Area computation:A(PQTR) = ||u|| h= ||u|| ||v|| sin θ= ||u×v|| A(∆PQR) = ½ ||u×v||

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Coloring triangleIntroduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Steps:

1. Compute the barycentric coordinate of M.

2. Combine colors using those coordinates: cM = α cP + β cQ + γ cR

Contents:o Architecture of Rasterization ?o Line Drawing

1) Algorithms1) A straightforward line drawing algorithm & The incremental DDA Algorithm .2) The Midpoint Line Drawing Algorithm - Pitteway (1967)3) The Bresenham Line Drawing Algorithm4) The Double Step Midpoint Line Drawing Algorithm

2) Some points worth consideringo Circle Drawing .

1) The Symmetry of a Circle2) A Straightforward Circle Drawing Algorithm3) Use of parametric polar form equation

o Ellipses .o Triangle Rasterization:

1) Targets & Steps .2) Edge walking idea(steps).3) Edge equations4) Which pixels will be examined?5) How pixel is colored ?6) Barycentric coordinates7) Coloring triangle8) Shared edges

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Shared edgesIntroduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

• A problems appears if two triangles share an edge as we don’t want to draw the edge two times especially if the triangles are transparent and we don’t want to skip it.

• The solution is to use off screen point algorithm where a point is identified always (-1,-1) coordinates and the edge is drawn as part of the triangle whose third vertex(not the two vertices of the shared edge) is at the same side or the opposite side of the off screen point(specified by the designer).

Introduction

Architecture Line Drawing

Triangle RasterizationCircle Drawing

Ellipses

Any Questions ?