Elements of Computer Graphic

Computer Animation
Contents
o Introduction
o Key points and intermediate points
o Classic animation
o Current animation
o Automate animation - fragmentation
o Linear interpolation
o Speed control and linear interpolation
o Curve interpolation - Spline
o Movement control on the curve trajectory
o Orientation interpolation
o Camera movement
o Complex objects animation
o Articulated structures kinematics
o Other animations: morphism, movement caption, particle system,
groups
Elements of Computer Assisted Graphics 2

Introduction
o Pixar, 1978, Graphics Group, Ed Catmul – cofounder
o 1986 – acquired by Apple, 2006 – acquired de Walt
Disney Company.
Toy Story (1995) Ratatouille (2007)

A Bug's Life (1998) WALL-E (2008)
Toy Story 2 (1999) Up (2009)
Monsters, Inc. (2001) Toy Story (2010)
Finding Nemo (2003) Cars 2 (2011)
The Incredibles (2004) Brave (2012),
Cars (2006) Monsters University (2013)

Introducere
o DreamWorks, 1994
o Movies:
Antz (1998),
Shrek (2001), Shrek 2 (2004), Shrek 3 (2007), Shrek Forever After
(2010),
Spirit: Stallion of the Cimarron (2002),
Madagascar (2005), Madagascar: Escape 2 Africa (2008), Over the
Hedge (2006), Flushed Away (2006), Bee Movie (2007),
Kung Fu Panda (2008), Kung Fu Panda 2 (2011),
Monsters Vs. Aliens (2009), How to Train Your Dragon (2010),
Megamind (2010), Puss in Boots (2011),
Madagascar 3 (2012), Rise of the Guardians (2012), The Croods (2013),
Turbo (2013), How to Train Your Dragon 2 (2014),
Penguins of Madagascar (2014), Home (2015)
Bridge of Spies (2015)

Introducere
o Walt Disney Company
o Cartoons:
The Little Mermaid (1989)
Beauty and the Beast (1991)
Aladdin (1992)
The Lion King (1994)
Hercules (1997)
Mulan (1998)
Tarzan (1999)
Monsters, Inc. (2001)
The Lost Empire (2001)
WALL-E (2007)
The Princess and the Frog (2009)
Winnie the Pooh (2011)
Frozen (2013)
Big Hero 6 (2014)
Cinderella (2015)
Zootopia (2016)
Jungle Book (2016)

Introducere
o Animation – movement illusion by rapid display of different image
sequence
o Classic approach:
1. Define a sequence of keyframes
2. Render the intermediate frames computed by the first and the
last keyframes

Introducere
o Calcularea cadrelor intermediare creaza senzatia de animatie,
modificand:
o Atributele obiectelor (pozitie, forma, culoare etc)
o Atributele camerei de luat vederi (pozitia, orientarea etc)
o Atributele surselor de lumina (intensitate luminoasa, pozitie,
culoare etc).
o Calcularea valorilor intermediare intre doua valori limita (ex. pozitie,
culoare, orientare, intensitate, etc) se realizeaza prin interpolare: liniara,
curbilinie etc.
v2 v1, v2
v
v1 u1, u2
v
Interpolator
u
u1 u u2

Calcularea pozitiilor cheie
o Cinematica directa
o Cinematica inversa
o Modelarea sistemelor fizice
o Modelarea bazata pe constringeri
o Modelarea procedurala
o Modelarea bazata pe comportament
o Captarea pozitiilor cheie prin senzori montati pe obiectele reale

Calcularea pozitiilor intermediare
Modificarea unor caracteristici ale sistemului de vizualizare.
1. Pentru obiectele din scena:
Pozitia
Orientarea
Dimensiunea
Forma
Culoarea
Transparenta
2. Pentru camera de luat vederi:

Punctul de vedere
Punctul de interes
Unghiul de vedere
3. Pentru sursa de lumina:

Pozitia
Intensitatea luminii

ui = u0 + i ∆u
vi = v0 + i ∆v vn
vi
unde
v0
∆u = (un – u0)/n
∆v = (vn – v0)/n
Intr-o forma iterativa: u0 ui un
ui+1 = ui + ∆u
vi+1 = vi + ∆v

Generalizand in spatiul valorilor Pn
Pi
P0
Fie P0, Pn valorile parametrului sau atributului P in cadrele 0 si n.

Pi = P0 + i ∆P, unde ∆P = (Pn – P0)/n
Pi = P0 + i ∆P = P0 + i/n (Pn – P0)
daca notam u = i/n, u є [0, 1]
Pi = P0 + u (Pn – P0), ecuatia parametrica a variatiei liniare
Intr-o forma iterativa:
Pi+1 = Pi + ∆P
Exemple: P poate fi unghi de orientare, viteza, acceleratie, pozitie,
dimensiune, intensitatea luminii, nivelul de transparenta etc.

Morfism
o Transformarea unei forme in alta
Pi Pn
P0

Animatia clasica
Tehnica traditionala de animatie este foarte laborioasa:
1. Definirea unui scenariu
2. Desenarea cadrele cheie care definesc actiunea (desenator principal)
3. Desenarea cadrele intermediare pentru a completa animatia (echipa de
desenare)

Animatia actuala
1. Lansarea unei idei de poveste de animatie.
2. Elaborarea unui document care descrie principala idee a povestii
animate.
3. Benzi desenate care schiteaza principalele secvente de actiuni si
dialoguri. Se evidentiaza principalele trairi emotionale ale personajelor.
4. Se inregistreaza vocile initiale (ex. ale membrilor echipei de desenatori si
scenaristi). Acestea vor fi inlocuite ulterior de vocile unor actori.
5. Realizarea primei videobenzi care contine deja materialele din care se va
edita filmul de animatie.
6. Departamentul de arta creaza aspectul grafic (ex. Look and feel) al
mediului si al presonajelor.
7. Modelarea 3D a personajelor.
Referinta: Metodologia Pixar, http://www.pixar.com/howwedoit/index.html

Animatia actuala (2)
8. Se creaza instante 3D ale scenelor semnificative ale pozitiilor si starilor
emotionale ale personajelor. Aceste instantieri sunt fotografiate.
9. Instantele sunt animate. Animatorii nu deseneaza sau coloreaza
personajele. Ei sunt ca niste actori sau papusari. Folosind unelte
software specializate animatorii creaza coregrafia miscarilor si
expresiilor faciale ale personajelor, in fiecare scena. Acestea sunt cadre
cheie. Cadrele intermediare sunt realizate de catre calculator.
10. Se creaza umbrele si texturile pe suprafetele obiectelor. Forma
obiectelor a fost data de catre model (pasul 7).
11. Sunt introduse surse de lumina si se creaza efectele speciale de lumini.
12. Calcularea animatiei de catre sistemul de calcul, folosind toate
informatiile specificate pana acum. Sunt create cel putin 24 de cadre
pentru o secunda de film. Calcularea unui cadru dureaza cateva ore
(ex. De la cateva la zeci de ore).
13. Sunt adaugate efectele speciale de sunet si animatie.

Animatia automata - fragmentarea
o Calcularea cadrelor intermediere prin algoritmi de interpolare
o Cadrele cheie corespund valorilor parametrilor in anumite momente de
timp
o Calitatea fragmentarii este mai slaba decit cea obtinuta manual
o Solutii: (a) mai multe cadre intermediare, (b) “netezirea” trecerilor de
la un cadru la altul

Interpolarea liniara
o Cea mai folosita tehnica de calculare a valorilor intermediare pentru un
interval dat
o Fie doua valori p0 si p1 ale parametrului p la momentele t0 si t1, o
valoare intermediara este:
p1
p
t 1- t t - t0 p0
p(t) = p0 + p1 (1)
t 1- t 0 t 1- t 0
sau alte forme ale aceleiasi expresii:

t - t0 t0 t t1
p(t) =p0 + (p1 - p0) (2)
t 1- t 0
p 0 t1 - p 1 t0 p1 - p0
p(t) = +t (3)
t 1- t 0 t 1- t 0
p1 - p0
p(t + ∆t) = p(t)+ ∆t (4)
t 1- t 0

o Avantaje:
n Modificarea valorii uni parametru de-a lungul unui segment este
liniara (3).
n Rata schimbarii de-a lungul unui segment este constanta si poate
fi controlata (4).
n Calcularea valorii la momentul t+∆t se face simplu prin adunarea
unei constante la valoarea precedenta la momentul t.
o Dezavantaje:
n Exista discontinuitati in toate pozitiile de conectare a segmentelor
(ex. Cadre/ pozitii cheie Po, P1, P2).
P0(x0, y0, t0) P2(x2, y2, t2)

P0(x0, y0, t0) P2(x2, y2, t2)
P1(x1, y1, t1) P1(x1, y1, t1)

Controlul vitezei
o Fiind data o functie de modificare a unui parametru (1-4) se doreste
controlul acestei modificari (animatii) in functie de variabila timp.
o In functie de timp se poate controla o viteza variabila de modificare a
parametrului (animatie).
o Fie aceasta functie τ = f(t). Se trece la variabila τ in expresia de

interpolare liniara:
f(t1) – f(t) f(t) – f(t0)

p(τ) = p(f(t)) = p0 + p1
f(t1) – f(t0) f(t1) – f(t0)

Interpolarea Spline
o Alaturi de interpolarea liniara se foloseste intepolarea curbilinie pe baza
curbelor Spline (curbe parametrice).
o Avantaje:
n Permite un control continuu al modificarii
n Numarul de cadre intermediare poate fi determinat in functie de calitatea
ceruta pentru animatie
o Dezavantaje:
n Calculul punctelor de control al curbelor spline se face pe baza unor
constringeri de interpolare definite pentru punctele de control
n Sunt necesare informatii suplimentare (Ex. vectorii tangenta la capete)
n Calcularea curbelor spline dureaza mai mult

n Implementare mai dificila

Interpolarea Spline

Curbe Spline
B-splines: permit control automat al continuitatii, insa doar aproximeaza
punctele de control, fara a trece prin ele. Permit control local.
Modificarea unui punct de control afecteaza numai partea din
vecinatatea acelui punct de control.
Non-uniform B-spines: necesare pentru a intrerupe continuitatea.
Non-uniform rational B-splines (NURBS): permit controlul local
suplimentar al formei curbei.
Bézier: necesita informatii suplimentare pentru fiecare segment si nu mentin
automat continuitatea. Interpoleaza insa, capetele segmentelor.
Ajustarea cuplarii netede se face prin punctele de control de la capete.
Hermite: necesita definirea vectorilor tangenta pentru fiecare cadru cheie.
Ajustarea cuplarii netede se face prin reglarea tangentelor de la capete.
Catmull-Rom: asigura continuitatea primei derivate (traiectorie neteda).
Catmull-Rom permit controlul local.
Beta-splines: permit continuitatea automata, controlul asupra tangentei si
aproximeaza lungimea arcului fiecarui segment.

Controlul pe traiectorie
o Pentru deplasarea pe traiectorie sunt necesare doua facilitati de baza:
1. Controlul independent al vitezei de-a lungul traiectoriei
2. Controlul continuitatii
o Curbele spline permit controlul continuitatii, insa controlul vitezei este
mai dificil.
o Interpolarea pozitiei pe curba spline permite controlul continuitatii
pozitiilor, insa:
n Un increment egal al parametrului spline nu corespunde
intotdeauna unui increment egal in distanta de-a lungul curbei.
n Segmente diferite ale curbei spline, corespunzatoare aceleiasi
lungimi parametrice, pot avea lungimi fizice diferite.
n Daca curba spline este parametrizata direct in functie de variabila
timp, animatia va fi cu viteza ne-uniforma.

Parametrizarea distantei pe curba
Se parcurg urmatorii pasi de transformare:
1. Fiind dat un pas spline P(u) = | x(u), y(u), z(u)|, se calculeaza
lungimea arcului spline ca o functie de u: s = A(u).
2. Se determina functia inversa A(u): u = A-1(s).
3. Se substituie u = A-1(s) din P(u) pentru a afla parametrizarea caii de
miscare prin lungimea arcului, s: P(s) = P(A-1(s)).
Observatie: parametrul u (si astfel s) trebuie sa fie parametru global pentru
toate segmentele curbei spline initiale.

Controlul vitezei pe curba
Controlul vitezei de-a lungul traiectoriei spline:
o Fie s = f(t) definitia distantei pe curba spline, ca o functie de timpul t.
o Functia f(t), ca o valoare scalara, poate fi prelucrata printr-o tehnica de
animatie functionala (ex. o alta curba spline).
o Functia f(t) poate fi exprmata ca o integrala a functiei viteza, v(t) =
df(t)/dt.
Observatie: integrala unei functii spline poate fi calculata analitic, prin
intermediul punctelor de control.
o Pasul de miscare ca o functie de timp este data de:
P(s) = P(f(t)) = P(A-1(f(t)))

Interpolarea orientarii
o Interpolarea orientarii se calculeaza indirect prin interpolarea
unghiurilor si nu prin matrici de transformare:
n In 2D orientarea e definita de un singur unghi, iar animarea este
relativ simpla
n In 3D se utilizeaza trei unghiuri, iar topologia este a unei sfere in
patru dimensiuni. Interpolarea este mai greu de vizualizat.
o Metode pentru interpolarea orientarii obiectelor

n Unghiuri Euler
n Quaterni
n Interpolarea sferica si liniara

Unghiuri Euler
o Se folosesc trei unghiuri: rotatie dupa x, apoi rotatie dupa y si apoi
rotatie dupa z.
o Dezavantaje: dificil de rezolvat problema inversa – fiind data
orientarea, care sunt unghiurile?
o Avantaje: Larg folosita in practica, usor de implementat, metoda
necostisitoare.

Quaterni
o Patru elemente analoage numerelor complexe. Calculele se bazeaza pe
operatii cu vectori si numere complexe.
o Dezavantaje: necesita matematica mai multa, interpolare costisitoare.
o Avantaje: rezolvare simpla a problemei inverse, interfata utilizator
simpla.

Miscarea camerei de luat vederi
o Animatia camerei poate fi realizata prin combinarea interpolarii
pozitiilor si a orientarii. Exista totusi citeva cerinte specifice cum ar fi:
n Camera trebuie sa fie intotdeauna orizontala, daca nu se specifica
alta directie.
n Imaginile obiectelor de interes trebuie sa fie stabile in planul
filmului.
n Specificarea miscarii camerei trebuie sa respecte anumite conditii
cinematice.

Animatia obiectelor cu forme complexe
o Fiind dat un model cu un foarte mare numar de virfuri, acestea pot fi
grupate si prelucrate ca o unitate. Exemplu, punctele care descriu
antebratul se misca mai mult sau mai putin ca un corp rigid.
o Conectivitatea intre grupuri poate fi reprezentata prin legarea fiecarui
grup la un „os” care face parte dintr-un „schelet” articulat.
o Oasele si virfurile asociate sunt tratate ca un singur obiect rigid in
operatiile de transformare.
o Miscarea oaselor este constrinsa de legaturile din schelet. Scheletul
este o structura articulta.
o Diferitele forme de conexiune (rotatie, unghi, sfera) permit diferite
forme de miscare.
o Animatia poate fi vizualizata rapid folosind trasarea doar a scheletului.
In final modelul este vizualizat fara oase.

Ref: Automatic Splicing for Hand and Body Animations Majkowska, A., Zordan, V. B., Faloutsos, P.
ACM SIGGRAPH/Eugorgraphics Symposium on Computer Animation (SCA) 2006

Cinematica structurilor articulate
o Cinematica: studiul miscarii independenta de fortele care determina
miscarea. Considera pozitia, viteza si acceleratia.
1. Cinematica directa (φ, β, ω -> P(x,y,z))
2. Cinematica inversa (P(x,y,z) -> φ, β, ω )
P(x,y,z)

Cinematica directa
o Forward Kinematics
o Se calculeaza pentru toate legaturile dintr-un model articulat:
o Pozitiile
o Vitezele
o Acceleratiile
o Se dau:
o Pentru nodul radacina:
n Pozitia
n Viteza
n Acceleratia
o Toate transformarile dintre legaturi.
o Cinematica directa este importanta in animatia bazata pe cadre
scheletizate. Este o metoda relativ usor de implementat.

Cinematica inversa
o Inverse Kinematics
o Determinarea miscarii legaturilor intermediare dintr-un corp articulat
fiind data miscarea unor legaturi cheie.
o Caracteristici ale metodei bazate pe cinematica inversa:
n Neliniara, nedeterminata.
n Complexitatea determinarii solutiei este proportionala cu numarul
legaturilor libere.
n Imbinare libera dintre doua legaturi fixe poate fi rezolvata eficient
numai prin sacrificarea unui grad de libertate.
n Sunt necesare constringeri suplimentare pentru a obtine o solutie
unica si stabila. Exemplu, considerarea fortei gravitationale,
constringerile impuse de unele tipuri de articulatii (rotatie vs
sferica, genunchi vs umar).
n Obiective suplimentare de optimizare. Rezulta problema de
optimizare rezolvata iterativ ca un proces de animatie.
Exemplu: minimizarea energiei cinetice a structurii.
Tehnici alternative de animatie
o Transformare morfologica (Morfing)
o Captarea miscarii
o Sisteme de particule
o Grup (Flocking)

Transformarea morfologica

o Este transformarea de interpolare intre imagini (anii ‘70).
o Efecte bune la un cost redus.
o Pasii principali:
1. Partitionarea imaginilor in piese corespunzatoare. Exemplu, ochi
cu ochi, etc.
2. Interpolarea pieselor (geometria)
3. Interpolarea atributelor (pixeli, culori)
4. Filtrare

Captarea miscarii

Captarea miscarii

Captarea miscarii
o Animatiile complexe necesita o multime de cadre cheie (exemplu,
mersul unei persoane).
o Captarea pozitiilor cheie de la obiecte reale. Sunt inregistrate in model
pozitiile unor puncte cheie de pe obiectul real (ex. un actor).
o Tehnologii de urmarire a pozitiei:
n Senzori electromagnetici pentru pozitie si orientare. Necesita cabluri la
fiecare senzor. Citirea poate fi perturbata de cimpuri magnetice. Spatiul de
miscare este limitat.
n Triangulatie prin ultrasunete. Simplu dar mai putin precis decit senzorii
magnetici.
n Triangulatie optica. Sunt atasati emitatori pe obiectul urmarit. Doua camere
determina pozitia. Poate urmari mai multe puncte, fara a folosi cabluri.
n Costume de corp. Senzori care determina unghiurile din incheieturi sunt
inserati in tesatura hainelor.

Aplicatia Facerig
o Permite urmarirea expresiilor faciale folosind camera web
(https://facerig.com/).
o Urmarirea se face fara utilizarea unor markere (markerless tracking).
Recunoaste si urmareste trasaturile fetei cum ar fi narile, colturile
buzelor si ale ochilor, sau ridurile.

Sisteme de particule

o Se pot modela obiecte „fuzzy” (vagi) cum ar fi:
n Obiecte cu margini neclare
n Obiecte cu margini care se schimba
n Obiecte cu comportament haotic. Exemple: nori, foc, apa, iarba, blana, etc.
o Pricipiul: modeleaza obiectele fuzzy ca multimi de particule.

o Fiecare particula are proprietati cum ar fi:
n Geometrie (punct, sfera, segment de dreapta)
n Pozitie
n Vector viteza
n Dimensiune
n Culoare
n Transparenta
n Stare
n Durata de viata

Animatia sistemelor de particule
o Noi particule se nasc, cele vechi mor
o Informatia de stare descrie tipul particulei
o La fiecare moment:
n Actualizeaza atributele tuturor particulelor
n Sterge particulele vechi
n Creaza noi particule
n Afiseaza starea curentìr a tuturor particulelor
o Pentru antialiasing, deseneaza un segment de dreapta din vechea spre

noua pozitie
o Pentru a desena iarba sau blana, deseneaza intreaga traiectorie a
particulei

Animatia grupurilor de animale

o Animatia grupurilor de animale: stoluri de pasari (flocks), pesti, turme
de animale etc.
o Sunt prea multi indivizi pentru a fi animat fiecare prin cadre cheie.
o Elemente mai putine decit in sistemele de particule, dar cu mai multe
interactiuni.
o Se impune evitarea ciocnirilor cu alte obiecte (ex. cladiri, copaci) sau
intre ele.
o Grupul are un centru: fiecare membru incearca sa ramina membru al
grupului, centrul grupului este unul global, nu permite divizarea
grupului pentru a trece un obstacol.

Boids
o Operatii ale grupului
1. Separare
Evitarea aglomerarii
2. Aliniere
Alinierea la orientarea medie a grupului
local
3. Coeziune
Deplasare spre pozitia medie a grupului
local
o Ref.: Craig Reynolds, Boids,
http://www.red3d.com/cwr/boids/ (1986).

Questions and proposed problems
1. Exemplify the animation by modifying the object’s attributes.
2. Exemplify the animation by modifying the camera’s attributes.
3. Exemplify the animation by modifying the light source’s attributes.
4. Exemplify the value space for temperature, and an animation by
modifying the temperature. What could be the reference variable and
the value for a linear interpolation within the value space?
5. What is the main advantage in linear interpolation if the step of the
variable is a constant? How are computed the intermediate values?
6. Explain a solution for animated morphism of a triangle into a pentagon.
How do you control the transformation to be achieved by the same: (a)
time; (b) speed.
7. Explain a solution for animated morphism of a cube into a sphere. How
do you control the transformation to be achieved by the same: (a)
time; (b) speed.

8. Describe and exemplify the steps of the actual cartoon video
development methodology to animate a talking person.
9. Why initially to register the voices is necessary, even finally they will
be replaced?
10. Explain what means to build up the 3D model of the characters in the
cartoon video development methodology?
11. Explain and exemplify how are created the key frames for a cartoon
movie?
12. Why to animate a faster movement you need to register more than 24
frames per second? Explain why the movie does not replay all the
details of the movement?
13. Explain why the 12th step of the cartoon video development
methodology requires so high performance computation resources?
14. Explain the linear interpolation of the movement if the reference
variable is the time. The animation is performed between the time t1
and t2.

15. Describe what are the main issues on connecting two intervals of linear
interpolation movement? How do you achieve constant speed on the
trajectory?
16. Explain why the user cannot control the animation by the abstract
parameter u, on the parametric definition of the linear movement?
What parameters support the user control of the animation?
17. Exchange the abstract variable u to time, in order to control the
animation along a spline trajectory by the time.
18. Why the animation on the spline trajectory is controlled by difficulty?
What are the main issues?
19. Give examples in real life for direct and inverse kinematics.
20. Exemplify and explain a morphism for animating the development of a
leaf, movement cloud, and jumping ball.

Projections
Contents
 Conceptual model of 3D viewing process
 Taxonomy of geometric projections
 Projections
 Viewing transformation
 Remarks

Conceptual model of 3D viewing process
View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport
Window definition Viewport definition Window’s content Scan conversion onto the
in projection plane in projection plane inside the viewport raster screen

Viewing transformations pipeline
3D 3D Shadow 3D Project onto

Transform
computation, viewing plane,
to viewing
Clip against Clip against
World coordinates Viewing Viewing
view volume window
Coordinates Coordinates Coordinates
2D Transform to 2D Scan conversion,

2D Rendering,
viewport Transformation to
Viewing Normalized device coordinates Physical
Coordinates Coordinates Device
Coordinates

Taxonomy of geometric projection
Planar Geometric projections
Parallel Perspective
Oblique Orthographic One- Two- Three-

point point point
Cabinet Cavalier Others Top Front Side Axonometric
Isometric Others

Parallel and perspective projections
 Perspective projection
 Projection rays converge into the center of projection.
 Usually the viewer is located onto the center of projection.
 Parallel projection
 Parallel projection rays. Convergence point at infinity.
 Viewer’s position at infinity.
A
Projection Projection
plane plane
A’ A
A’
8
Center of B
Center of B B’
B’ projection
projection

Parallel projection
 Orthographic
 Direction of projection is perpendicular onto the projection plane
 Direction of projection is parallel with the normal to the projection
plane
 Oblique
 Direction of projection is different than the normal vector
plane plane
A’ A’
B’ A B’
A n
n B
B

Orthographic projection
 Top-elevation
 Projection plane is perpendicular
to the y axis
 Front-elevation
Top-elevation
to the z axis
y
 Side-elevation
to the x axis
Front-elevation
Side-
elevation

Orthographic projections - examples

 Axonometric
 Projection plane is not normal to a principal
axis
 Shows several faces of the object at once
 Preserves the parallelism of lines but not
the angles
Axonometric
 Isometric projection
 Commonly used axonometric projection
 Projetion plane normal (and direction of
projection) makes egual angles with each
principal axis
 If the projection plane normal is (dx, dy,
dz), it requires that |dx|=|dy|=|dz|,
or ±dx= ±dy= ±dz
Isometric

Axonometric and isometric projections
y
Axonometric z
Isometric z

Oblique projection
y xp = x + L cos φ
Pp (xp, yp, zp)
yp = y + L sin φ
L β Usually the angle φ is 30° and 45°.

φ Let be L1 the projection onto L of the unit of
Q(x,y,0)
the z axis:
x tg β = z/L = 1/L1, L=z L1
xp = x + z L1 cos φ
yp = y + z L1 sin φ
zp = 0
P(x,y,z)
z
xp 1 0 L1 cosφ 0 x
yp 0 1 L1 sinφ 0 y
=
zp 0 0 0 0 z
1 0 0 0 1 1

Oblique projection
 Cavalier projection
tg β = 1, z/L = 1/L1, L=z L1, therefore z=L, 1=L1

β = 45°
 Cabinet projection
tg β = 2, z/L = 1/L1=2, L=z L1, therefore z=2L, 1=2L1

β = 63.4°

Oblique projection
y y
Cavalier L L
L
L
β=45°, tgβ=1
z
z
L L
φ=45° φ=30°
x x
y
y
L L
Cabinet L/2 L/2
β=63.4°, tgβ=2 z
z L
L
φ=45° φ=30°
x x

Perspective projection
Let us consider the PQ line equation:
Center of P = (1-u) P + uQ, 0≤u≤1
projection
Q(0,0,-d)
or:
y
xp = (1-u) x + u∙0 = x - xu
yp = (1-u) y + u∙0 = y - yu
Pp (xp, yp, 0) 0 = (1-u) z - u∙d = z – (z+d)u
x
Therefore:
P(x,y,z) u = z/(z+d)
xp = x – xz/(z+d) = x[1/(1+z/d)]
yp = y – yz/(z+d) = y[1/(1+z/d)]
zp = 0
z

xp = x – xz/(z+d) = x[1/(1+z/d)]
Center of yp = y – yz/(z+d) = y[1/(1+z/d)]
projection
Q(0,0,-d)
zp = 0
y
Pp (xp, yp, 0) xp 1 0 0 0 x
x
yp 0 1 0 0 y
=
zp 0 0 0 0 z
P(x,y,z)
w 0 0 1/d 1 1
Pp = [x, y, 0, z/d +1]
z Pp = [xp, yp, zp, 1]
= [x/(1+z/d), y/(1+z/d), 0, 1]

Vanishing points
One-point Two-point
perspective projection perspective projection

Vanishing points
Three-point perspective projection

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport

Viewing coordinates transformation

Transform
to viewing
view volume window

2D Rendering,
Coordinates

Left-handed viewing system
V
yv
N
U zv
xv
Projection
plane

Transformation to viewing system
yw v
Pw
Pv=(xv,yv,zv)
Tv
n
u
zw xw
Pw = Tv + Pv = Tv + RvPv
Pv = Rv-1 (Pw - Tv)

yw yw yw
xv yv xv yv
zv yv
zv xv
zv
xw xw xw
zw zw zw
(a) Original orientation of world and (b) Invert viewing (c) Translate viewing
viewing coordinate systems z axis origin to world origin
yw yw yw
yv
xv yv
xv
yv xv
zv
zv xw
xw xw
zw zv zw zw
(d) Rotate about world x axis (e) Rotate about the world (f) Rotate about the world
to bring viewing z axis into y axis to align z axis to align the two
the xz plane of the world system the two z axes viewing systems

2D Clipping
Contents
o Point
o Line Clipping
o Polygon Clipping
o Text Clipping

Real objects to image on the screen
View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Window and viewport
Pw(xw,yw) → Pv(xv,yv)
Window
ywmax
Viewport
yvmax
ywmin
yvmin
xwmin xwmax xvmin xvmax
World Coordinates Normalized Device Coordinates
Window definition: (xwmin, xwmin, xwmax, ywmax) Viewport def: (xvmin, xvmin, xvmax, yvmax)
xw- xwmin xv- xvmin xvmax- xvmin

= xv = (xw- xwmin) + xvmin
xwmax- xwmin xvmax- xvmin xwmax- xwmin
xv = sx (xw- xwmin) + xvmin yvmax- y vmin

yv = (yw- y wmin) + yvmin
yv = sy (yw- y wmin) + yvmin ywmax- y wmin

Window and viewport - specification
yw
(-60.5, 82.5) (41.25, 82.5)
1
Window 0.87
Viewport
0.50
0 xw
(-60.5, -20.75) (41.25, -20.75) (0, 0) 0.37 0.74 1
World Coordinates Normalized Coordinates

Window and viewport transformations
1 ymax
1 xmax
0 1
WC NDC PDC

Window and viewport types
o multiple windows / viewports
o multiple workstations
o polygonal windows / viewports 2
1
o zooming / panning
o blanking 0

Point clipping
o Inside outside test:

xmin ≤ x ≤ xmax
ymin ≤ y ≤ ymax

Line clipping
y P8 y
P2
P7 Window Window
ywmax ywmax
P3
P9 P3 P4 P1 P4 P1
P’9
P10
P’10
P5 P5
ywmin ywmin
P6 P’6
xwmin xwmax x xwmin xwmax x
Before clipping After clipping

Line Clipping
Line definitions
Set of points ->
point clipping
Vector ->
endpoints clipping
binary clipping
parametric line clipping
Cohen-Sutherland algorithm

Endpoints clipping
Could be two cases:
1. trivially accepted (AB)
2. trivially rejected (CD)
y
C D
ywmax
B
A
ywmin
xwmin xwmax x

Binary clipping
1. step: AB
2. step: AC, CB (tr. rejected)
3. 3 step: AD (tr. acc), DC
4. ...
ywmax B
D
A C
ywmin
xwmin xwmax x

Cohen-Sutherland clipping algorithm
Basic Idea
n Encode the line endpoints
n Successively divide the line segments so that they are

completely contained in the window or completely lies
outside window
n Division occurs at the boundary of window

Region outcodes:
1001 1000 1010
0001 0000 0010 left

right
0101 0100 0110
below
above

1000
D
1001 C
1010 S
B G H R
F
A 0000
0001 Q 0010
E P
N
M
0101 0100 0110

Cohen-Sutherland Algorithm
procedure CSDecLinie( x0, y0, x1, y1,
min, xmax, ymin, ymax: real;
color: integer);
{ Cohen-Sutherland clipping algorithm for line P0(x0,y0) to P1(x1,y1), and clip
rectangle with diagonal from (xmin, ymin) to (xmax, ymax) }
type edge = (LEFT, RIGHT, BOTTOM, TOP);
outcode = set of edge;
var accept, done : boolean;

outcod0, outcod1, outcodt : outcode; {outcodes for P0, P1, and
whichever point lies outside
the clipping rectangle}
x, y : real;
procedure CompOutCode( x, y: real; var code: outcode);

{ computes outcode for the point (x,y)}
begin
code := [];
if y > ymax then code:= [TOP]
else if y < ymin then code:= [BOTTOM];
if x > xmax then code:= code+[RIGHT]
else if x < xmin then code:= code+[LEFT]
end;

Begin
accept := false; done := false;
CompOutCode(x0, y0, outcod0);
repeat
if (outcod0 = []) and (outcod1 = []) then {trivially accepted}
begin accept := true; done := true end {end exit}
else if (outcod0 * outcod1) <> [] then
done := true {Logical intersection is true, so trivial reject and exit}
else
{Failed both tests, so calculate the line segment to clip:
from an outside point to an intersection with clip edge}
begin {at least one endpoint is outside the clip rectangle; pick it.}
if outcod0 <> [] then
outcodt := outcod0 else outcodt := outcod1;
{now find intersection point; use formulas
y = y0 + slope * (x- x0),
x = x0 + (1/slope) * (y-y0)}
if TOP in outcodt then
begin
{divide line at top of clip rectangle}
x := x0+(x1-x0)*(ymax-y0)/(y1-y0);
y := ymax
end
else if BOTTOM in outcodt then
begin
{ divide line at bottom of clip rectangle }
x := x0+(x1-x0)*(ymin-y0)/(y1-y0);
y := ymin
end

else if RIGHT in outcodt then
begin
{ divide line at right of clip rectangle }
y := y0+(y1-y0)*(xmax-x0)/(x1-x0);
x := xmax
end
else if LEFT in outcodt then
begin
{ divide line at left of clip rectangle }
y := y0+(y1-y0)*(xmin-x0)/(x1-x0);
x := xmin
end;
{Now we move outside point to intersection point to clip,
and get ready for next pass. }
if (outcodt = outcod0) then
begin
x0 := x; y0 := y;
CompOutCode(x0, y0, outcod0)
end
else
begin
x1 := x; y1 := y;
end
end {Subdivide}
until done;
if accept then MidpointLineReal(x0, y0, x1, y1, color)
{draw a line with real endpoint coordinates}
End; {CSDecLinie Cohen Sutherland clipping algorithm}

Parametric line clipping
o
P1
tline
V4 tedge V3
P0
V1 V2

Cyrus-Beck algorithm
o Outside Inside
clipping clipping
rectangle rectangle
Edge Ei
PEi
P1
Ni ∙ [Pi(t) – PEi] < 0

Pi(t) - PEi
Ni ∙ [Pi(t) – PEi] = 0
Ni ∙ [Pi(t) – PEi] > 0

P0
Ni


P1
φ
t=1
N
PE P1 P1
N
φ Line 2 t=1 t=1
PL PL
PL PE Line 1
P0 Line 3
t=0
P0 PL
t=0
PE
Clipping rectangle
PE
P0
t=0

Cyrus-Beck algorithm - pseudocode
Begin
precalculate Ni and select a PEi for each edge;
for each line segment to be clipped
if P1 = P0 then
line degenerates to a point, so clip as a point;
else
begin
tE = 0; tL = 1;
for each candidate compute intersection with a clipping edge
if Ni * D <> 0 then { ignore edges parallel to line for now}
begin
calculate t;
use sign of Ni * D to categorize as
PE (potentially entering) or PL (potentially leaving);
if PE then tE = max (tE , t);
if PL then tL = min (tL , t);
end;
if tE > tL then
return nil
else
return P(tE ) and P(tL ) as true clip intersections
end
End

Intersection: line–convex polyhedron
Obs: triangle is always convex polygon
max(tE) < min(tL)
n A
n
E1 L1
P Q E2
B
n
Computing normal vector of the edge: C
1. Compute the normal vector of the plane
N = AB x BC
(cross product of two consecutive edges)
2. Normal vector of the edge
n = AB x N
(cross product of the edge and normal
vector of the plane)

requires a convex polygon!
D
E1 L3
Q E2 L1 E3
P B
E

P1
P5
View tnear,1 tfar,3

ray
tnear,2 tfar,2 tfar,1
P2
P4
P3
Cyrus-Beck algorithm:
Classify the edge/face by frontface and backface;
For each edge/face compute intersection with view ray;
Compute max(tnear) and max(tfar);
If max(tnear) < max(tfar) there is intersection;

Liang-Barsky line clipping algorithm
o Published in 1984 by Liang, Y-D., Barsky, B.A., “A New Concept and Method for
Line Clipping”, ACM TOG, vol 3(1).
o Simplifies the Cyrus-Beck algorithm for the particular case of clipping window as
an horizontal rectangle:
1. One coordinate of each normal is 0.
2. The dot product Ni ∙ (P0 – PEi) determining whether the endpoint P0 lies
inside or outside a specific edge, reduces to the directed horizontal or
vertical distance from the point to the edge.
3. The denominator dot product Ni ∙ D, which determines whether the

intersection is potentially entering or leaving, reduces to ±dx or dy:
If dx >0, the line moves from left to right and is PE for the left edge, PL
for the right edge, and so on.
4. The parameter t, the ratio of numerator and denominator, reduces to the

distance to an edge divided by dx or dy, exactly the constant of
proportionality we could calculate directly from the parametric line
formulation.

Liang-Barsky algorithm - parameters
Calculation for parametric line clipping algorithm.
Clip edgei Normal Ni PEi P0 - PEi t = Ni ∙ [P0 – PEi ] / (- Ni ∙ D)
left:x=xmin (-1,0) (xmin,y) (x0-xmin, y0-y) -(x0-xmin)/ (x1-x0)
right:x=xmax (1,0) (xmax,y) (x0-xmax, y0-y) (x0-xmax)/-(x1-x0)
bottom:y=ymin (0,-1) (x,ymin) (x0-x, y0-ymin) -(y0-ymin)/ (y1-y0)
top:y=ymax (0,1) (x,ymax) (x0-x, y0-ymax) (y0-ymax)/ -(y1-y0)

Liang-Barsky algorithm - pseudocode
Procedure Clip2D (var x0,y0,x1,y1: real; var visible: boolean);
{clip a line with endpoints (x0,y0) and (x1,y1), against the rectangle with corners (xmin,ymin) and
(xmax,ymax). The flag visible is true if a clipped segment is returned in the var endpoint
parameters. If the line is rejected, the endpoints are not changed and visible is set to false}
var tE,tL,dx,dy: real;
function ClipPoint(denom, num:real; var tE,tL: real): boolean;

{computes a new value of tE or tL for an interior intersection of a line segment and edge.
Parameter denom is –(Ni ∙ D), which reduces to ±∆x, ∆y for upright rectangle. Its sign
determines whether the intersection is PE or PL. parameter num is Ni ∙ D(P0-PEi) for a particular
edge/line combination, which reduces to directed horizontal and vertical distances from P0 to
an edge; If the line segment can be trivially rejected, false is returned; if it cannot be, true is
returned and the value of tE or tL is adjusted, if needed, for the portion of the segment that is
inside the edge}
var t: real; accept: boolean; {accept will be returned as value of ClipPoint;
accept line until find otherwise}

begin
accept:=true;
if denom>0 then {PE intersection}
begin
t:=num/denom; {value of t at the intersection }
if t>tL then {tE and tL crossover}
accept:=false; {so prepare to reject line}
else if t>tE then {a new tE has been found }
tE:=t
end
else if denom<0 then {PL intersection}
begin
if t<tE then {tE and tL crossover}
else if t<tL then {a new tL has been found }
tL:=t
end
else
if num>0 then {line on outside of edge }
accept:=false;
ClipPoint:=accept
end; {ClipPoint }

Begin
dx:=x1-x0; dy:=y1-y0;
visible ;= false; { output is generated only if line is inside all four edges}
{ first test for degenerate line and clip the point; ClipPoint returns true if the point lies inside the
clip rectangle.}
if (dx=0) and (dy=0) and ClipPoint(x0,y0) then
visible:=true
else
begin
tE = 0;
tL = 1;
if ClipPoint(dx, xmin-x0, tE, tL) then {inside against left edge}
if ClipPoint(-dx, x0-xmax, tE, tL) then {inside against right edge}
if ClipPoint(dy, ymin-y0, tE, tL) then {inside against bottom edge}
if ClipPoint(-dy, y0-ymax, tE, tL) then {inside against top edge}
begin
visible:=true;
if tL<1 then
begin {compute PL intersection, if tL has moved}
x1:=x0+tL*dx;
y1:=y0+tL*dy
end;
if tE>0 then
begin {compute PE intersection, if tE has moved}
x0:=x0+tE*dx;
y0:=y0+tE*dy
end;
end
end
End; {Clip2D}

Conclusions
o Cohen-Sutherland algorithm is efficient when:
n Outcode testing can be done cheaply, e.g. by doing bitwise operations in
assembly language
n Trivial acceptance or rejection is applicable to the majority of line segments
o Parametric line clipping is efficient when:
n Many line segments need to be clipped, since the actual calculations of the
coordinates of the intersection points is postponed until needed, and testing
can be done on parameter values.
o Liang-Barsky algorithm is more efficient than Cyrus-Beck
n Trivial rejection testing can avoid calculation of all four parameter values for
lines that do not intersect the clip rectangle.

Polygon Clipping
o Polygon definition:
n set of points ® point clipping
n set of lines ® line clipping
n sequence of lines ®
Sutherland – Hodgman algorithm
Weiler-Atherton algorithm
o General definition:
n Sequence of vertices with implicit relationships
n By clipping: 1 polygon (v1, v2, …., vn) ®
p polygons (A11, A12, …, A1k; …Ap1, Ap2, …,Apq)
o Display:
n set of points
n set of lines (wire-frame)
n closed multicolor polyline
n set of polygons
n filled polygons

Sutherland Hodgman algorithm
o Reentrant polygon clipping

o Published in 1974 by Sutherland, I.E., Hodgman, G.W., “Reentrant
Polygon Clipping”, CACM, vol 17(1).
Before Clipping After Clipping Before Clipping After Clipping

Original
Polygon
Clip Clip Clip Clip

Left Right Bottom Top

Window – polygon edge relationships
I
P S P
S
P S
I
P S
Save P Save I No points saved Save I, P

(a) (b) (c) (d)

Input vertex list: inv[] = {v1, v2,..., vn}
Output vertex list: outv[ ] = {v1', v2',..., vp'}
algorithm ClippingSH( vertex_list inv, outv;

window_edge clipping_edges[4])
{
for( j = 0; j < 4; j++){
EdgeClippingSH( inv, outv, clipping_edges[j]);
inv = outv; /* update the current edge list */
}
}

algoritm EdgeClippingSH( vertex_list inv, outv;
window_edge clipping_edge)
{
vertex i,p,s;
s = the last vertex in inv;
for( each vertex p from inv) {
if( ToWindow(p, clipping_edge)) /* case a and d */
if( ToWindow(s, clipping_edge)) /* case a */
write vertex p into outv;
else{
i = Intersection(s, p, clipping_edge);
write intersection i into outv;
}
else if( ToWindow(s, clipping_edge)){ /* case b */
} /* for case c don’t write anything */
s = p; /* update the start vertex */
}
} /* end of the EdgeClippingSH algorithm*/

SH clipping - Examples
Window
3
Window
2 3 1’ 2’
2’ (8’)
2 1’
1 4 3’
5 4’
1 4
3’ 5’
6 6’
5’ 7’
6 4’
7
5 (a) (b)

Before Clipping
After Clipping

Weiler-Atherton clipping algorithm
o The Weiler-Atherton algorithm produces separate polygons for
each visible fragment
o 4 cases:
2
a) out - > in
b) in -> in
c) in -> out 1
d) out - > out
e) follow clip edge
4 3

2 2 2
2
1’ 1’ 1’ 1’
3’ 3 3
3
3’
Follow clip edge until

Case: Out -> In Case: In -> Out
Case: In -> In (a) new crossing found
Add clip vertex (1’) Add clip vertex (3’)
Add end vertex (3) (b) Reach vertex already
Add end vertex (2) Cache old direction
added

2 2 2 2
1’ 1’ 1’ 1’
3 3’ 3 3’ 3 3’ 3
4 4 4
3’
4 4’ 4’ 4’
5 5 5
5’ 5’
Case: In -> Out Follow clip edge until

Continue from Case: Out -> In
Add clip vertex (5’) (a) new crossing found
cached vertex and Add clip vertex (4’)
Cache old direction (b) Reach vertex already
direction Add end vertex (5)
added

2 2 2
1’
1’ 1 1’
3 3 3’ 3
3’ 3’ 4’
4 4 4’ 5
4’ 5 5
6 6 5’
5’ 5’
Final Result:
Continue from Nothing added. 2 unconnected
cached vertex and Finished polygons
direction

Weiler-Atherton alg. implementation
Polygon A
A1 Polygon B
vertices
vertices
A10
A A1 B1
A4
A5 A2 B2
B5
B1 A3 B3
B A4 B4
A2 A3 A6 A5 B5
A7
A6
B4
A7
B2 A8 A9
A8
A9
B3 A10

Polygon A
A1 Polygon B
vertices
vertices
A10
A A1 B1
A4
A5 A2 B2
C1 B5
B1 A3 B3
C2
B A4 B4
A2 A3 C3 A6 A5 B5
A7
A6
B4
A7
B2 A8 A9
C4 A8
A9
B3 A10

A1 A10
A Add vertex C1
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A1 A10 Add vertex C2
A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A1 A10
A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
Entering vertex
Leaving vertex
A9
A10

Rules for capturing the clipped

polygons:
A1
o Start at an entering vertex C1 B1
A2
o If you encounter a leaving B2
vertex swap to right hand (clip A3
polygon) loop C2
B3
A4
o If you encounter an entering B4
vertex swap to left hand C3
A5
(polygon) loop B5
o A loop is finished when you A6

arrive back at start C4
A7
o Repeat whilst there are
entering vertices A8
Entering vertex
Leaving vertex
A9
Clipped polygons
A10

A1 A10
A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
Clipped polygons: A8
Polygon 1: C1, A2, A3, C2
Polygon2: C3, A7, A8, C4, B5 A9
A10

Text Clipping
STRING1
All or none
text clipping
STRING2 STRING2
Before Clipping After Clipping
STRING1 ING1
All or none
character clipping
STRING3 TRING3
STRING4 STRING4
STRING1 STRING1
Clipping individual
character

1. What are the main differences between clipping against view volume
and clipping against window?
2. How is modified the image is the viewport is defined in such a way that
xvmin > xvmax? Similarly for yvmin > yvmax. What is the result if both
conditions are true?
3. How can be used the relation between window and viewport to achieve
operations such as zoom in, zoom out, symmetry. What other
operations could be achieved?
4. Give examples of using the window as drawing area, and as mask.
5. Explain how the endpoints clipping algorithm can be used for clipping
the alphanumeric characters.
6. Give an example where the binary clipping algorithm is more efficient
than other line clipping algorithms.
7. Describe a line clipping algorithm similar with Cohen-Sutherland
algorithm if the window is a triangle.

algorithm if the window is a rectangle with edge not parallel with
coordinate axes.
coordinate axes.
10. How could you apply the Cohen-Sutherland algorithm to clip a triangle?
How may you display the result? Can it be filled in?
11. Let us consider the convex polygon in figure 1, in the plain, and a line
given by two points P and Q, oriented from P toward Q. Specify an
approach to compute the normal vectors to the polygon’s edges.
12. Classify the edges of the polygon in figure 1, as entering and leaving
type.
13. Specify the mathematical approach to compute the intersections
between the PQ line and the polygon’s edges.

Figure 1
E
B
P Q Q1 Q2
C D
14. Determine by the Cyrus-Beck algorithm if the line PQ intersects the

polygon, in figure 1.
15. Determine by the Cyrus-Beck algorithm what is the intersection
between the line PQ and the polygon in figure 1.
16. Generalize the previous problem for any line and any convex polygon,
in the plane.

17. Determine by the Cyrus-Beck algorithm what is the visible intersection
point between the line PQ and the polygon in figure 1. Viewer lies on P.
between the line segment PQ and the polygon in figure 1.
19. Analyze the previous problem for different line segments: (a) PQ1; (b)
PQ2.
20. Exemplify and explain why the Cyrus-Beck algorithm does not work for
concave polygons.
21. Explain the Sutherland - Hodgman polygon clipping algorithm on the
following polygon A and rectangular window (Figure 2).
Figure 2


following particular cases of polygon A and rectangular window (Figure
3).
A
A
b.
a.
Figure 3
c.


4).
a. b.
Figure 4

24. Explain the Weiler-Atherton polygon clipping algorithm on the following

particular cases of polygon A and rectangular window (Figure 5).
a. b.
Figure 5


particular cases of polygons A and B (Figure 6).
c.
a. B
A b. B
A
B
Figure 6

26. Explain an extension of the Weiler-Atherton polygon clipping algorithm
on the following three polygons A, B and C (Figure 7).
Figure 7

Figure 8
C

Scan Conversion Algorithms (3)
Contents
o Basic approach
o Fill area scan conversion
o Polygon scan conversion
o Scan Conversion
n Ordered Edge List Algorithm
n Edge Fill Algorithm
n Fence Fill Algorithm
n Edge Flag Algorithm
o Seed Filling

Basic approach
o Scan conversion
o Seed filling
o Needs information about each pixel: position, color,

intensity, alfa attribute, etc.

Jordan Theorem
1 2 3 4 5 6 7 8 9 10 11 12

Data structures
o Real-time scan conversion
Using geometry and visual attributes
o Run-length encoding
(intensity, run length)…○4●4○4●9……
o Cell-organization
o Frame buffer
Pixel pattern Frame Buffer

Real-time scan conversion
B Polygon’s edges
o Less memory Scan line
o High computation time 1
o Complex geometric processing C
o Flexibility 2
A
3
D
Edge list 1: Edge list 2: Edge list 3:
1 2 3 1 2 3 1 2 3
BC ← b BC BC BA ← b BA ← b BA BD ← b BD ← b BD ← b
BA BA ← b BA BC BC BC BA BA BA
BD ← e BD BD ← b BD ← e BD BD ← b BC ← e BC BC
CD CD ← e CD CD CD ← e CD CD CD ← e CD
AD AD AD ← e AD AD AD ← e AD AD AD ← e
The edge lists must be ordered to intersect consecutive edges.

Ordered by:
1. Max y of starting vertex (e.g. B, C, A)
2. Max y of ending vertex (e.g. C, A, D)

Run-length encoding
o BW encoding: (intensity, run length) o Data compression
o Color encoding: (R,G,B, run length) o High processing time
0 30
0 7 1 8 0 15
0 1 1 2 0 20 1 2 0 5

Cell encoding

Cell encoding - pseudographics
Pixel pattern X Reflexion Translation Masking
Complex object B
A
OR
C
A B

Frame buffer
o Large memory
o High speed
o Time consuming for graphical processing
o Image complexity does not depend on the performance of the display
processor

Scan line approach
1 12 11 2 3 10 9 4 5 8 7 6
o Scan line coherence

Adjacent pixels are likely to have the same characteristics
o Intersection points:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
o Ordered sequence:
1, 12, 11, 2, 3, 10, 9, 4, 5, 8, 7, 6
o Ordered pairs:
(1,12), (11,2), (3,10), (9,4), (5,8), (7,6)

Scan line approach – particular cases
1 2 3 4
1 2
1 2 3 4
1 2,3 4,5 6
1 2 3 4
1 2,3 4,5 6

Computation issues
Polygon to Resulted Pixel position, Intersection
be drawn polygon Intersection points
points Scan line
5 5
4 4
3.5
3 3
2.5
2 2
1.5
1 1
0 1 2 3 4 5 6 0 1 2 3 4 5 6
Integer domain: Integer domain:

1. Polygon vertices 1. Polygon vertices
2. Scan line y coordinate 2. Pixel position
3. Intersection coordinates
4. Pixel position Real domain:
1. Scan line y coordinate

Ordered Edge List Algorithm
8
P5
6 P3
Edge sorting on
y coordinate
4
P4
2
P2
P1
0 2 4 6 8 10

Ordered edge list - Data structures
Scan line
Linked list of polygon edge data Scan line
y-bucket
y-bucket
8 Edge P4P5 Edge P5P1

7
x45 ∆x45 ∆y45 x51 ∆x51 ∆y51
6
5 x23 ∆x23 ∆y23 x34 ∆x34 ∆y34
4
2
1
0 P5
List address 8
Link
x ∆x ∆y Pointer
8 6 P3
7 1 1.5 1 3 2
6 1
5 3 2 1 0 5 4
4
3 8 0 4 4 P4
3 2
2 4 7.5 -1 2 P2
P1
1
0 0 2 4 6 8 10

Active edge list
8 Active edge list
P5 Scan line 5:
P3 x45+∆x45, ∆x45, ∆y45 -1
6
x51+∆x51, ∆x51, ∆y51 -1
x23, ∆x23, ∆y23
4 x34, ∆x34, ∆y34
Scan line 4:
2 P4
x45+2∆x45, ∆x45, ∆y45 -2
x51+2∆x51, ∆x51, ∆y51 -2
P2
P1 x23+∆x23, ∆x23, ∆y23 -1
0 2 4 6 8 10 x34+∆x23, ∆x34, ∆y34 -1
8 Active edges Scan line 3:

7 x ∆x ∆y x45+3∆x45, ∆x45, ∆y45 -3
6 x51+3∆x51, ∆x51, ∆y51 -3
5 x45 ∆x45 ∆y45 x23+2∆x23, ∆x23, ∆y23 -2
4 x51 ∆x51 ∆y51 x34+2∆x23, ∆x34, ∆y34 -2
3
2 x23 ∆x23 ∆y23 Scan line 2:
1 x51+4∆x51, ∆x51, ∆y51 -4
x34 ∆x34 ∆y34 x23+3∆x23, ∆x23, ∆y23 -3
0

Active edge list
Intersection points Pixel list
x ∆x ∆y
ordered by x coordinate
8
7
6 1.5 1 3 1 1.5 (1,6)
1 0 5
5 2.5 1 2 1 2.5 7.5 8 (1,5), (2,5), (7,5)
1 0 4
8 0 4
7.5 -1 2
1 3.5 6.5 8 (1,4), (2,4), (3,4),
4 3.5 1 1
(6,4), (7,4)
1 0 3
8 0 3
6.5 -1 1
(1,3),(2,3),(3,3),(4,3),
3 4.5 1 0 1 4.5 5.5 8
(5,3),(6,3),(7,3)
1 0 2
8 0 2
5.5 -1 0
1 8 (1,2),(2,2),(3,2),(4,2),
2 1 0 1
(5,2),(6,2),(7,2)
8 0 1
1 8 (1,1),(2,1),(3,1),(4,1),
1 1 0 0
(5,1),(6,1),(7,1)
8 0 0
0

Edge fill algorithm
o Complement the pixel on the right of the edge

Edge fill algorithm
o No sorting
o Simple data structure
o Each pixel should be accessed many times
P1
P3 P3
P2 P2 P4

Edge fill algorithm
P5 P5
P6 P6
P7
P4
P1
P7
P8 P8

Fence fill algorithm
o Reduce the number of pixel accesses
P1
P3 P3
P2 P2 P4
Fence

P5
P5
P6 P6
P7
P4
P1
P7
P8 P8

Edge flag algorithm
o Each pixel is accessed only once
o No sorting and maintaining edge lists
o Very fast and could be implemented by hardware
flag flag
in out
flag flag
in out

Seed fill algorithm
o Start at a pixel inside the polygon
o Seed: starting pixel
o Move to the neighbors using the connectivity by 4 and 8
neighbors
o Recursive algorithms

Type of region
o Defined by
1. Content
2. Contour
y y
x x

Recursive algorithms - Fill4Content
procedure Fill4Content(x, y, oldval, newval: integer);
{x, y: starting point, inside region;
oldval: the old inside pixel colour;
newval: the new colour of pixels}
begin
if ReadPixel(x, y) = oldval then
begin
WritePixel(x, y, newval);
Fill4Content(x, y-1, oldval, newval);
Fill4Content(x, y+1, oldval, newval);
Fill4Content(x-1, y, oldval, newval);
Fill4Content(x+1, y, oldval, newval);
end
end;

Recursive algorithms - Fill4Contour
procedure Fill4Contour(x, y, contval, newval: integer);
contval: the old contourcolour;
newval: the new colour of the contour pixels}
begin
if ReadPixel(x, y) <> contval and ReadPixel(x, y) <> newval then
begin
Fill4Contour(x, y-1, contval, newval);
Fill4Contour(x, y+1, contval, newval);
Fill4Contour(x-1, y, contval, newval);
Fill4Contour(x+1, y, contval, newval);
end
end;

Course based algorithm
o Recursivity is very stack memory consuming
o Reduce the level of recursivity: course
Course:
1. Most right pixel positiony
2. An horizontal sequence of consecutive pixels
o Only course indentifier stored into the stack
y y
Firt 3 2
course
ID
5 4
x x

y
o Determinate the current course, related to the
starting position
o Write into the stack the course ID
Firt
o While stack is not empty { course
Read and render a course from the stack ID
For all above line courses

Write into the stack the course ID
x
For all below line courses
Write into the stack the course ID y
}
3 2
5 4

1. What is the main difference and similarity between the scan conversion
and seed filling algorithms for polygon rendering?
2. Generate in the real-time scan conversion algorithm the edge list for
rendering three adjacent triangles. Generate the edge list to keep
intersected consecutive edges (Figure 1a, Figure 1b).
3. Is it possible to generate a single list that keep intersected consecutive
edges? How many edge lists have to be considered?
A
A
Figure 1a Figure 1b B
E
D
B
D C
C
E
4. Explain the generation of the edge list if the scan line is moving
upward, instead downward.
5. Explain why the relationship between real polygon point, scan line and
pixel position is important?
6. How big could be the polygon rendering error?
7. Explain the Ordered Edge List algorithm on Figure 1a.
8. Explain the Ordered Edge List algorithm on Figure 1b.
9. Explain the Ordered Edge List algorithm on Figure 1a and b, if the scan
line is moving upward.
10. Explain how the Ordered Edge List algorithm depends on the upward
and downward movement of the scan line?
11. Why would the seed filling algorithm be disadvantageous?
12. What is the worst case for the recursive seed filling algorithm?

Contents
o Circle scan conversion
o Circle drawing
o Circle drawing by 4 and 8 way symmetry
o Midpoint circle
n Basic algorithm
n Algorithm by integer arithmetic
n Algorithm by 2nd order differences

Circle Drawing
(x-xc)2 + (y-yc)2 = r2
y = yc ± sqrt((r2) - (x-xc)2) r
yc
xc
x = xc + r cosθ
y = yc + r sinθ
r
θ
yc
xc

Circle rendering by 4 and 8 way symmetry
y y
(-x, y) (x, y) (-x, y) (x, y)
(-y, x) (y, x)
x x
(-y, -x) (y, -x)
(-x, -y) (x, -y) (-x, -y) (x, -y)

4 way symmetry algorithm
public void circleSym4 (int xCenter, int yCenter, int radius, Color c)
{
int pix = c.getRGB();
int x, y, r2;
r2 = radius * radius;
raster.setPixel(pix, xCenter, yCenter + radius);
raster.setPixel(pix, xCenter, yCenter - radius);
for (x = 1; x <= radius; x++) {
y = (int) (Math.sqrt(r2 - x*x) + 0.5);
raster.setPixel(pix, xCenter + x, yCenter + y);
raster.setPixel(pix, xCenter + x, yCenter - y);
raster.setPixel(pix, xCenter - x, yCenter + y);
raster.setPixel(pix, xCenter - x, yCenter - y);
}
}

public void circleSym8 (int xCenter, raster.setPixel(
int yCenter, int radius, Color c) pix, xCenter + y, yCenter + x);
{ raster.setPixel(
int pix = c.getRGB(); pix, xCenter + y, yCenter - x);
int x, y, r2; raster.setPixel(
pix, xCenter - y, yCenter + x);
r2 = radius * radius; raster.setPixel(
raster.setPixel( pix, xCenter - y, yCenter - x);
pix, xCenter, yCenter + radius); x += 1;
raster.setPixel( y = (int) (Math.sqrt(r2 - x*x) + 0.5);
pix, xCenter, yCenter - radius); }
raster.setPixel( if (x == y) {
pix, xCenter + radius, yCenter); raster.setPixel(
raster.setPixel( pix, xCenter + x, yCenter + y);
pix, xCenter - radius, yCenter); raster.setPixel(
x = 1; pix, xCenter + x, yCenter - y);
y = (int) (Math.sqrt(r2 - 1) + 0.5); raster.setPixel(
while (x < y) { pix, xCenter - x, yCenter + y);
raster.setPixel( raster.setPixel(
pix, xCenter + x, yCenter + y); pix, xCenter - x, yCenter - y);
raster.setPixel( }
pix, xCenter + x, yCenter - y); }
raster.setPixel(
pix, xCenter - x, yCenter + y);
raster.setPixel(
pix, xCenter - x, yCenter - y);

Midpoint circle algorithm
x2 + y2 = R2
(xi +1, yi)
Let us consider F(x,y)= x2 + y2 - R2 (xi,yi)
E
F(x,y) > 0 for P(x,y) outside of the circle ME

(xi +1, yi-1/2) M
F(x,y) = 0 for P on the circle
SE
F(x,y) < 0 inside of the circle MSE
(xi +1, yi-1)
Therefore:
if F(M) < 0, next point P(xi+1,yi+1) = E(xi+1,yi)
otherwise next point P(xi+1,yi+1) = SE(xi+1,yi-1)

Midpoint circle algorithm - computation
Let us consider the decision variable:
di = F(xi+1, yi-1/2)=(xi+1)2 + (yi-1/2)2 - R2
di+1 = F(xi+1+1, yi+1-1/2)=(xi+2)2 + (yi+1-1/2)2 - R2
where xi+1 = xi + 1 y
if di < 0, yi+1= yi (0,R)
otherwise yi+1= yi-1
di+1 = di + 2xi+3, if di<0 x

di + 2(xi-yi)+5, otherwise
The starting point (x0, y0) = (0, R)

d0 = F(x0+1, y0-1/2)=(0+1)2 + (R-1/2)2 - R2 = 5/4 - R

Midpoint circle algorithm - summary
Next point P(xi+1,yi+1):
xi+1 = xi + 1
yi+1= yi if di < 0,
yi-1 otherwise y
(0,R)
di+1 = di + 2xi+3, if di<0

x
Initial decision variable value:
d0 = F(0, R)= 5/4 - R

Midpoint circle algorithm - pseudocode
procedure MidpointCircle (radius,value : integer); Change the decision variable:
var D = d - 1/4
x,y : integer; d: real; d = D + 1/4
begin Initial value: D = 1 - radius
x := 0; { initialization } Equivalence decision in
y := radius; { 0, R } integer value domain:
d := 5/4 - radius; D < -1/4 Þ D < 0
CirclePoints(x,y,value);
while y > x do begin Computation of the new
if d < 0 then { select E } decision variable:
d := d + 2*x + 3; D := D + 2*x + 3
x := x + 1; D := D + 2(x-y) + 5
end
else begin { select SE } Conclusion:
d := d + 2*(x - y) + 5; 1. Compute initial value by:
x := x + 1; d=1-radius
y := y - 1; 2. All other formulas are
unchanged:
end
d<0
CirclePoints(x,y,value)
d=d+2x+3
end { while }
d=d+2(x-y)+5
end; { MidpointCircle }

Midpoint circle alg. – integer arithmetics
procedure MidpointCircle (radius,value : integer);
{ Integer arithmetic only }
var
x,y, d : integer;
begin
x := 0; { initialization }
y := radius; { 0, R }
d := 1 - radius;
while y > x do begin
if d < 0 then { select E }
d := d + 2*x + 3;
x := x + 1;
end
else begin { select SE }
d := d + 2*(x - y) + 5;
x := x + 1;
y := y - 1;
end
end { while }

Midpoint circle algorithm - improvement
o The next decision variable value is computed as a
function of:
o Current decision variable value
o Current coordinate values x and y
di+1 = di + 2xi+3, if di<0
o Aim:
o Next decision variable value does not depend on current
coordinates x and y
di+1 = di + const

Improvement by 2nd order differences
di+1 = di + ∆di
∆di = di+1 - di = 2xi+3 if di<0 (∆diE)
2(xi-yi)+5 otherwise (∆diSE)
Passing to the next position:
(xi,yi)→ (xi+1,yi)
∆di+1E = 2(xi+1)+3= ∆diE+2
∆di+1SE = 2(xi+1-yi)+5= ∆diSE+2
(xi,yi)→ (xi+1,yi-1)
∆di+1E = 2(xi+1)+3= ∆diE+2
∆di+1SE = 2(xi+1-yi+1)+5= ∆diSE+4
Initially, on (x0,y0)
∆d0 = 3 if d0<0 (∆d0E)
-2R+5 otherwise (∆d0SE)

Midpoint circle alg. – 2nd order differences
{Uses second-order partial differences to compute increments in the decision variable}
var x,y,d, deltaE, deltaSE : integer;
begin
y := radius; { 0, R }
d := 1 - radius;
deltaE := 3;
deltaSE := -2*radius + 5;
d := d + deltaE;
deltaE := deltaE + 2;
deltaSE := deltaSE +2;
x := x + 1;
end
d := d + deltaSE;
x := x + 1;
y := y - 1;
end
end { while }

1. Demonstrate what values take the function F(x,y)= x2 + y2 - R2 inside
and outside the circle, of center O and radius R.
2. Explain why the circle rendering is only computed in the second
octant?
3. Modify the Midpoint circle algorithm to work in the first octant (under
the first bisection).
4. Modify the Midpoint circle algorithm to work in the first quadrant (x, y
positive).
5. Extend the Midpoint circle algorithm to render a filled circle.
6. Explain the improvement of the Midpoint circle algorithm by the second
order differences.

ScanLine Conversion Algorithms
Contents
o Line scan conversion
o Transformation pipeline
o Line drawing algorithms
o Digital Differential Analyzer
o Bresenham Line Algorithm
o Midpoint line algorithm
o Antialiasing

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Pixel vicinity and continuity
8 neighbors 4 neighbors

Line drawing
var yt : real; ∆x, ∆y, xi, yi : integer; ∆x

for xi := 0 to ∆x do begin
yt := [∆y/∆x]*xi; ∆y
yi := trunc(yt+[1/2]);
display(xi,yi);
end;
Objective: avoid multiplication
y = mx, m = [∆y/ ∆x]

Line-drawing algorithms
y = mx + b y
b = y1 – mx1
m = (y2-y1)/(x2-x1) = ∆y/∆x
∆y = m∆x P2(x2,y2)
y2
Assumptions:
m>0 ∆y
X1 < x2
y1
P1(x1,y1)
x1 ∆x x2 x

DDA Algorithm
DDA = Digital Differential Analyzer
Basic formula: m>1 m=1

y
∆y = m∆x, m>0
xi+1 = xi + 1
yi+1 = yi + m
Makes discontinuity for another case

Therefore two formulas:
∆y = m∆x, 0<m<1
m<1
∆x = (1/m)∆y, 1<m

DDA Algorithm – two cases
∆y = m∆x, 0<m<1
∆x = (1/m)∆y, 1<m m>1
y m=1
Case 1: 0<m<1
Xi+1 = xi + 1
yi+1 = yi + m
Case 2: 1<m
yi+1 = yi + 1
xi+1 = xi + 1/m
m <1

DDA Algorithm – basic case
Assumption : 0 <m<1, x1<x2
procedure dda (x1, y1, x2, y2 : integer);

var
∆x, ∆y, k : integer;
x, y : real
begin
∆x := x2 - x1;
∆y := y2 - y1;
x := x1; y := y1;
display(x,y);
for k := 1 to ∆x do begin
x := x + 1;
y := y + [∆y/ ∆x];
display(round(x),round(y));
end { for k }
end; { dda }

Bresenham’s Line Algorithm
o Basic idea:
1. Find the closest integer coordinates to the actual line path
2. Use only integer arithmetic
3. Compute iteratively the next point, Pi+1=F(Pi)

Bresenham method – basic idea
o Basic approach: y
1. Compute a decision
variable di=f(Pi, di-1)
NE
2. Depending on the di value yi + 1
chose the next position E n
or NE
Q
Pi s
yi
E
xi xi + 1

Bresenham method - mathematics
Assumptions: 0<m≤1, xi<xj, i<j y
y = mx+b, yi = mxi , m = ∆y/∆x

NE
yi + 1
s = y-yi = m(xi+1)+b-yi n
n = yi+1-y=yi+1-m(xi+1)-b Q
Pi s
yi
k = s-n = 2m(xi+1)-2yi+2b-1 E
Let us consider di = k∆x = ∆x(s-n) x
xi xi + 1
di = ∆x(s-n) = 2∆y(xi+1)-2∆xyi+∆x(2b-1)
= 2∆yxi -2∆xyi +[2∆y+∆x(2b-1)]
= 2∆yxi -2∆xyi + Const
di = 2∆yxi -2∆xyi + Const
if di < 0 then E(xi+1,yi)
if di ≥ 0 then NE(xi+1,yi+1)

di = 2∆yxi -2∆xyi + Const y
di+1 = 2∆yxi+1 -2∆xyi+1 + Const
di+1- di = 2∆y(xi+1-xi)-2∆x(yi+1- yi) NE

di+1= di +2∆y-2∆x(yi+1- yi) yi + 1
n
if di < 0 then Pi+1 = E, and yi+1=yi
Q
otherwise Pi+1 = NE, and yi+1=yi+1 Pi s
yi
E
Therefore
di+1= di +2∆y if di < 0 x
di+1= di +2∆y-2∆x otherwise xi xi + 1
The first value of the decision variable:

d0 = 2∆yx1-2∆xy1+[2∆y+∆x(2b-1)]
y1 = (∆y/∆x)x1+b, ∆xy1= ∆yx1+b∆x

∆x(2b-1)= 2∆xy1- 2∆yx1- 2∆x
d0 = 2∆y-2∆x

Bresenham algorithm - pseudocode
procedure bres_line (x1, y1, x2, y2 : integer);
var ∆x, ∆y, x, y, d, incrE, incrNE : integer;
begin
∆x := x2 – x1;
∆y := y2 – y1;
d := 2* ∆y - ∆x;
incrE := 2* ∆y;
incrNE := 2*(∆y - ∆x);
x := x1; y := y1;
display(x,y);
while x < x2 do begin
if d<0 then begin
d := d + incrE;
x := x + 1;
end; { then begin }
else begin
d := d + incrNE;
y := y + 1;
x := x + 1;
end; { else begin }
display (x, y);
end { while x < x2 }
end; { bres_line}

Midpoint line algorithm
NE
yi + 1
M F(x,y)=0
Q
yi
E
xi xi + 1

y= (∆y/∆x)x + n y
F(x,y)=x∆y-y∆x+n∆x
Considering a=∆y, b=-∆x, and c=n∆x NE

yi + 1
F(x,y)=ax+by+c=0, if (x,y) is on the line M F(x,y)=0
Q
yi
Q is closer to E
NE if F(xi+1, yi+1/2)<0
x
E if F(xi+1, yi+1/2)>0
xi xi + 1

F(xi+1, yi+1/2)=a(xi+1)+b(yi+1/2)+c
Let di=2F(xi+1, yi+1/2)=2a(xi+1)+b(2yi+1)+2c
Since a=∆y and b=-∆x,
di=2∆y(xi+1)-∆x(2yi+1)+2c
di+1=2F(xi+1+1, yi+1+1/2)= 2∆y(xi+1+1)-∆x(2yi+1+1)+2c
xi+1= xi+1
yi+1= yi+1, if di≥0
yi+1= yi otherwise
Therefore
di+1= 2∆y(xi+1)-∆x(2yi+1)+2c+2∆y-2∆x= di+2∆y-2∆x, if di≥0
di+1= di+2∆y, otherwise
d0=2F(x0+1, y0+1/2)= 2(∆yx0-∆xy0+c)+2∆y-2∆x= 2∆y-2∆x

Midpoint line algorithm - pseudocode
procedure mid_point (x1, y1, x2, y2,value : integer);
var ∆x, ∆y, incrE, incrNE, d, x, y : integer;
begin
∆x := x2 – x1;
∆y := y2 – y1;
d := 2* ∆y - ∆x;
incrE := 2* ∆y;
incrNE := 2*(∆y- ∆x);
x := x1; y := y1;
display(x,y);
if p < 0 then begin
p := p + incrE;
x := x + 1;
end; { then begin }
else begin
p := p + incrNE;
y := y + 1;
x := x + 1;
end; { else begin }
display(x,y);
end; { while x < x2 }
end; { mid_point }

General Bresenham’s Line Algorithm
o Basic Bresenham line algorithm is given for line in the first octant.
o To render a general line (A, B):
1. Transform the line (P1, P2) into the line (P1’, P2’) in the first
octant
2. Compute the raster line (P1’, P2’)
1. For each point P’
1. Compute point P for the initial line
2. Render point P
y
P2(x2,y2)
P2’(x2,y2)
P1(x1,y1)
P1’(x1,y1) P’

Exercises:
Render and explain the Bresenham algorithm transformations for the
following lines:
a. A(7, 5), B(15, 10)
b. A(15, 10), B(7, 5)
c. A(5, 7), B(10, 15)
d. A(10, 15), B(5, 7)
e. A(-5, 7), B(-10, 15)
f. A(-7, 5), B(-15, 10)
g. A(-15, 10), B(-7, 5)
h. A(-15, -10), B(-7, -5)
i. A(-5, -7), B(-10, -15)
j. A(7, -5), B(15, -10)
k. A(15, -10), B(7, -5)

Antialiasing
y
o Removing the stairstep
appearance of a line
o Staircase for raster effect
o Need some compensation in
line-drawing algorithm for the
raster effect

Antialiasing
o Jugged edges
o Small objects
unvisible, disturbed
o Textures
toothed edges

Antialiasing
o Supersampling
Postfiltering
o Area sampling
Prefiltering
o Stochastic sampling

Supersampling (Postfiltering)
o Increasing resolution

Area Sampling (Prefiltering)

Area Sampling - solutions
1. Unweighted area sampling

I = f(d)
o Intensity of a pixel decreases as the distance between the pixel center
and the edge increases
o A primitive does not influence the intensity of a pixel at all if there is no
intersection
o Equal areas contribute equal intensity
2. Weighted area sampling

I = f (∆A, d), weighting function, filter function
o The pixel represent a circular area larger than the square tile
o The primitive intersects the circular area
o The intersection area contributes to the intensity
e.g. Goupta-Sproull incremental method for antialiasing lines

Filters
o Box filter
o Cone filter

1. Why the integer arithmetic is used in graphics algorithms? Why it is
imposed in the scan conversion algorithms?
2. How the DDA algorithm works above the first bisection? Is it efficient?
3. Why in the Bresenham algorithm for a line the next pixel could be just
E and NE, rather than SE, S, SV, and N?
4. How does the Bresenham algorithm for a line work if the starting point
is another than the origin of the coordinate axes?
5. What are the advantages of the Midpoint line algorithm against the
Bresenham line algorithm?
6. Render and explain the Bresenham algorithm transformations for the
following lines AB: A(10, 15), B(5, 7); A(-5, 7), B(-10, 15); A(-7, 5), B(-15,
10); A(- 15, 10), B(-7, 5). For each case compute the global
transformation matrix.
7. Why the computation of the decision variable is faster than analytic
computation?

8. Explain why the Bresenham algorithm is faster or slower than the
Midpoint algorithm.
9. Explain how the supersampling approach may improve the quality of
graphics rendering? What is the relationship between object point and
pixel?
10. Explain why rasterization loses information about the real object?

Graphical Devices
Touch screen technology
o There are four main touchscreen technologies:
1. Resistive
2. Capacitive
3. Surface Acoustic Wave
4. Infrared
References
http://www.engineersgarage.com/articles/touchscreen-technology-
workinghnology

Resistive Touchscreen Technology

Capacitive Touchscreen Technology


Surface Acoustic Wave Touchscreen

Infrared Touchscreen Technology

Plural Touch Technology
o Multi touch Applications technology are found in smart
phones like iPhone, Samsung Galaxy, Nokia N8, Nexus
S, Microsoft Touchtable, Apple’s iPad and many more.

Graphical Devices
Contents
1. Output devices
o Hardcopy technology
o Display technology
o Raster system architectures
2. Input devices

Programmer’s Model of Interactive CG
Application
Application Graphics
Data
Program System
Structure
Computer Graphics Devices Users

(operators)
o Graphics Models - Application Data Structures
o Application Programs
o Graphics Systems
o Graphics Devices
Graphical device types
o Output device
n Graphics display, printer, plotter etc.
o Input device
o Logical
n locator, stroke, string, valuator, choice, pick
o Physical
n mouse, trackball, joystick, scanner, keyboard, etc
o Interactive device
n Graphics console, graphics tablet, head mounted display, etc.

Device components
o Input Output Processor
o Communicates with CPU
o Scan converts the output primitives
o Refreshing screen
o Interfacing with interactive input devices
o Raster operations
o Character generation
o Additional functions
CPU IOP Display
Input Hard Copy

Output devices
o Hardcopy technologies:
o dot matrix printer
o pen plotter
o desk-top plotter
o electrostatic plotter
o laser printer
o ink-jet printer
o thermal transfer printer
o Display technologies:
o monochrome and color CRT (Cathode Ray
o direct-view storage tube (DVST)
o liquid-crystal display (LCD)
o plasma panel
o electroluminescent display (ELD)
o Raster-scan display systems
o simple raster display system
o peripheral display processor
o additional display processor
o integrated display processor

Dot matrix printer
o Raster output device

o Requires scan conversion of vector images for printing
o Head of pins
o Each pin is individually fired
o Bw and colored ribbons

Pen plotter
o Flatbed plotter
Paper held down on the table
Electrostatic charge
Vacuum
drum
Stretch tightly
Pen
Drawing by bw or colors
Knife blade for scribing
Light source for exposing
photographic negatives
o Drum plotter
pen carriage
Pen plotters include a
microcontroller
o Accepts graphics commands:
draw line, move, draw circle,
etc.
o Decomposes the output
primitives into incremental pen
movements:
∆x, ∆y, z, ∆u etc.
paper flat band

Electrostatic plotter
1. The plotter places a negative charge in parts that are to be black
2. Flows positively charged black toner over the paper
3. Toner particles adhere to the paper
Color plotter
Multiple passes for fundamental colors
Colors: black, cyan, magenta, and yellow toners
One pass, multiple heads
Electric contacts
Bath of suspended
toner particles
Paper
paper movement

Laser printer
1. Drum is positively charged
2. Laser beam scans the rotated drum
3. Areas hit by the laser beam lose the charge
4. Positive charge remains only on the parts that are to be black
5. Negative powdered toner adheres to the positive areas on the drum
6. The toner is transfered onto the blank paper
7. Color xerography repeats the process for each primary color
Selenium coated
drum
Deflection
Laser system
Laser beam
Scan line

Ink-jet printer
o Primary colors: cyan, magenta, yellow
o Ink jets onto the head (carriage)
o Some ink-jet printers accept video input
Paper wrapped
around drum
Track
Ink jets
carriage

Thermal transfer printers
o Heating nibs transfer pigments from colored wax paper to plain paper
o Wax paper and plain paper are drawn together over a strip of heating
nibs
o Color printing: wax paper is on a roll of alternating cyan, magenta,
yellow, and black strips, each of a length egual to the paper size
o Time: 1 min / image
o Usage:
o barcode labels
o cloth labels (e.g. shirt size)
o Printing plastic labels

Output devices
o pen plotter
o desk-top plotter
o laser printer
o ink-jet printer
o plasma panel

Cathode Ray Tube (CRT)
Horizontal
Focusing Deflection
System Plate
Heating
Filament
Electron Beam
Cathode
Control Accelerating Vertical
Grid System Deflection
Plate
Phosphor-
Coated
Color: Screen
Beam Penetration
Shadow Mask

Color CRT (Shadow Mask)
Shadow Mask
Electron Gun
Screen
Phosphor dot pattern

Delta electron gun arrangement

In-line electron gun arrangement
Phosphor pattern of stripped picture tube
Phosphor
Green
beam Red beam
Blue Slotted shadow

beam mask

CRT - characteristics
o Persistence
How long a phosphor continues to emit light after the electron beam is
removed (less than 1/10 of its original intensity)
Gives: Refresh rate, image modification rate, animation
Issue: Picture complexity
o Sharpness
energy
1 spot size inter-dot distance dot size, spot
dot pitch size
0.5 ~ 0.6
distance
electron beam

o Resolution
1 / spot size
# of points / scan line
# of lines / frame
o Addressability
1 / inter-dot distance
o Aspect ratio
horizontal to vertical points to produce equal length of lines in both direction
on screen, e.g. 3/4 = 0.75

Refresh CRT
o Refresh memory
1. Vector image: graphics commands (display file)
Issue: the size of the refresh memory limits the complexity of the
picture
2. Raster graphics: bitmap matrix (frame buffer)
Input
CPU DPU CRT
Refresh
memory (Display file, frame buffer)

Direct View Storage Tube (DVST)
Input
o Image persistance, flicker free
o Always delete and redraw the CPU DPU CRT
entire image
o High voltage to delete the
screen Refresh
memory
Flood Gun
Screen
Storage grid
Collector grid
Primary electron gun

Vector vs raster graphics
o Vector graphics
n Application software controls the graphics primitives: point, line, polyline
n Display processor builds the image as a sequence of vectors
n Limited image complexity
o Raster graphics
n Application software controls pixels in refresh buffer
n Display processor just refresh the screen
n No limited image complexity

Frame buffer – gray levels
Register DAC
1
Frame Buffer CRT Raster
Register
N
0 1 0 2N DAC
2
N=3 2N Levels

Color planes
Registers
0 DAC Blue
1 DAC Green
0 DAC Red
N=3 2N Levels
Red Green Blue

Black 0 0 0
Red 1 0 0
Green 0 1 0
Blue 0 0 1
Yellow 1 1 0
Cyan 0 1 1
Magenta 1 0 1
White 1 1 1

Color palette in Look-up tables
Look-up tables
W
2W intensity levels
2N at a time
1010
2N entries 10
W=4
0 1 0
2
2W DAC
N=3 2N levels

Liquid Crystal Displays (LCD)
o Most popular alternative to the CRT is the Liquid Crystal Display (LCD)
o Organic molecules
1. In the absence of external forces, tend to align themselves in crystalline structures. In
their unexcited or crystalline state the LCDs rotate the polarization of light by 90
degrees.
2. When an external force is applied they will rearrange themselves as if they were a
liquid. In the presence of an electric field, LCDs the small electrostatic charges of the
molecules align with the impinging E field.
o External force: heat (i.e. mood rings), electromagnetic field.
o The LCD's transition between crystalline and liquid states is a slow process.
Viewing
direction
Liquid-
Vertical Vertical Horizontal Horizontal Reflective
crystal
polarizer grid wires grid wires polarizer layer
layer

LCD – twisted nematic cells

LCD screen structure

Color TFT (Thin Film Transistor) LCD
o TFT (Thin Film Transistor) or Active Matrix LCD
n There is a transistor at each grid point
n Cause the crystals to change their state quickly
n Control the degree to which the state has been changed
n Hold the state until it changes
Color cell
Color Filter
Liquid Crystal
TFT

TFT
• VGA screens need

921,000 transistors
(640 x 480 x 3)
• 1024 x 768 needs

2,359,296 transistors
(1024 x 768 x 3)

Plasma display panel (PDP)
o Three layers
o Horizontal and vertical grid wires
o Glass plate with cells (neon bulbs, fluorescent tubes ). E.g. 50-125 cells / inch
o Bulb state
On: High-voltage discharge excites gas mixture (He, Xe).
It fires the bulb that glows. Low voltage sustains the state.
Remains on till an explicit command turns it off.
Off: bulbs do not glow. They are transparent.
o Turns on/off in less than 15 µs
o Does not need refresh buffer
o Flat and transpartent panel
o Upon relaxation UV light is emitted
o UV light excites phosphors
Viewing
direction
Vertical Glass plate Horizontal

grid wires with cells grid wires
(x address) (y address)

PDP Structure

Plasma display panel
o Promising for large format
displays
o Large viewing angle
o Less efficient than CRTs
o Not as bright
o More power
o Large pixels (~1mm compared to
0.2mm for CRT)

Field Emission Display (FED)
o Works like a CRT with multiple
electron guns at each pixel
o Uses modest voltages applied to
sharp points to produce strong E
fields
o Reliable electrodes proven difficult
to produce
o Limited in size
o Thin but requires a vacuum

FED cell structure

Organic Light Emitting Diode (OLED)
o Function is similar to a semiconductor
LED
o Thin-film polymer construction
o Potentially simpler processing
o Transparent
o Flexible
o Can be vertically stacked
o Excellent brightness
o Efficient (low power/low voltage)
o Fast (< 1 µs)
o Can be made large or small
o Tend to breakdown

OLED structure

Over head projectors
o CRT projector
o LCD projector
o Digital Light Processing (DLP)

Head Mounted Display (HMD)
o Use two small screens placed just in
front of each eye
o The virtual objects are placed at 1-5
m in front of the user
o Resolutions greater than 1024x768
o Technology:
n LCD (Liquid Crystal Display) – for
commercial use
n CRT (Cathode Ray Tube) –
professional use, high resolution
Realitate Virtuala 39
HMD - examples
HMD – Virtual glasses
o Controlled by voice and head movement

o Operations: navigation over Internet, video call, listen music,
write notices, etc.
Display-uri mari bazate pe monitoare
o Cel mai mic sistem utilizeaza ochelari

conectati la un monitor capabil sa
afiseze stereo
o Rata de reimprospatare este dubla fata
de cea normala (120/140Hz)
o Sunt transmise imagini alternative
decalate (efectul de paralaxa)
o Necesita utilizarea ochelarilor
o Un singur utilizator are controlul
asupra scenei virtuale prin intermediul
tracker-ului
o Utilizatorul trebuie sa se gaseasca in
raza de actiune a transmitatorului IR
(1.5- 3,5 m)
Binocular Omni-Orientation Monitor (BOOM)
o Head-coupled stereoscopic display

device
o Screens and optical system are
housed in a box that is attached to
a multi-link arm
o Sensors in the links of the arm that
holds the box

DSD – Desk Supported Display
o Pasive
n Nu urmaresc pozitia capului utilizatorului
o Active
n Urmaresc capul utilizatorului si ajusteaza in timp real coloana intercalata pe
baza pozitiei utilizatorului
o Separarea coloanelor se face folosind o masca prismatica amplasata
pe display
Display-uri de mari dimensiuni
o Display grafic care afiseaza o scena virtuala destinata
vizualizarii simultane a mai multor utilizatori amplasati in
vecinatatea display-ului
n Imagini monoscopice
n Imagini stereoscopice
o Bazate pe monitoare
o Bazate pe proiectoare
o Alternativa este folosirea
monitoarelor multiple
amplasate adiacent
o Probleme apar la
simularea la viteze mari
cand apar discontinuitati
intre imaginile de pe
monitoarele adiacente
Display-uri mari bazate pe proiectoare
o LVD (Large Wall Display)

o Reprezinta solutia optima pentru a permite mai multor utilizatori sa
participe la o simulare de RV
o Un proiector CRT foloseste 3 tuburi R, G, B pentru o imagine de inalta
rezolutie (1280x1024) la 120 Hz
o La functionarea in mod stereo prin secventierea cadrului se imparte
numarul liniilor de scanare in 2, utilizatorul vazand o imagine stereo la 60
Hz
o Necesita tub CRT special cu timp de persistenta scazut, altfel efectul
stereo este pierdut prin afisarea simultana a imaginilor
o Dezavantaje
n Cost ridicat
n Inabilitate in proiectarea imaginilor stralucitoare (200-300 lumeni)
o Proiecteaza scena 3D pe un ecran

orizontal
o Utilizatori folosind ochelari (active
glasses) pot vizualiza scena 3D
o Obiectele inalte vor fi decupate in
partea opusa utilizatorului
o Alternativa – utilizarea ecranului in

forma de L
o 2 proiectoare pentru cele 2 suprafete
o Dimensune marita a scenei vizualizate
o Imaginea poate fi distorsionata pentru
utilizatorii secundari (fara tracker)
Workbench

Cave Automatic Virtual Environment (CAVE)

Output devices
o pen plotter
o desk-top plotter
o laser printer
o ink-jet printer
o plasma panel

Simple Raster Display System with Dual Port Memory
o Frame buffer – dedicated portion of the system memory

o Dual port memory
o Video controller accesses directly the system memory
CPU Peripheral
devices
System bus
System Frame Video

Monitor
memory buffer controller

Simple Raster Display System
o Frame buffer – anywhere in the system memory
o Video controler accesses the memory through the system bus
CPU Peripheral
devices
System bus
System Video
Monitor
memory controller

Raster Display System with Peripheral Display Processor
o System memory:
n Application program
n Graphics package
n Operating system Peripheral
CPU
devices
o Display processor:
n Raster operations
n Scan conversion
n Double-buffering
n I/O transfer on the System bus
system bus
Display System
processor memory
Display
Frame Video Monitor
processor
buffer controller
memory

Raster Display System with Integrated Display Processor
o Cache memories
o Video RAM (VRAM)
(read out all pixels on a scan
line in one cycle)
Display Peripheral
CPU processor devices
System bus
System Frame Video Monitor


Input devices
o Logical input device
Locator
Valuator
Choice
String
Pick
Stroke
o Physical devices:
locator: graphic tablet, joystick
valuator: analog to digital converter, potentiometer
choice: keyboard, set of buttons (function keys)
pick: light-pen
string: keyboard
stroke: mouse, track-ball

Keyboard
o Text

Mouse
o Stroke
o a) Mouse with ball.

o b) Disk with asymmetrical cuttings,
1 – rotation sense from left to right,
2 – rotation sense from right to left.
o c) Optical mouse

Track-ball
o Stroke

Joystick
o Locator

Graphic tablet
o Locator
o Graphic Tablet
a) Active tablet, passive pen.
b) Acoustic active pen, tablet with
microphones.

Light pen
o Pick

Potentiometer, Dials
o Value

Image scanner
o Bitmap

Buttons
o Choice

3D Input device
o Location

Ring Mouse
o Optical trackpad ("Opto Touch
Wheel")
o Embedded 2.4GHz wireless model
for a communication to 10m
o The wearer uses the thumb to
navigate the cursor
o Can be charged by electric power by
USB
o It has as well left and right click
buttons

Haptic device
q 3-dimensional pen-style
haptic device that "makes it
possible for users to touch and
manipulate virtual objects
q 3D Touch-enabled Modeling for
Product Design
q The position and orientation of
the pen are tracked through
encoders in the robotic arm.
q Three degrees of force, in the
x, y and z, direction are achieved
through motors that apply
torques at each joint in the
robotic arm
ex. PHANTOM Desktop

Haptic device

Haptic device - glove
q Provides six degrees of

freedom positional tracking that
accurately measures translation
and rotation of the hand in three
dimensions.
q Includes a system of internal
sensors at joints and in muscles
to detect changes in pressure and
position.
q Glove with 16 sensors

(2 per finger + abduction).

1. Explain the following operations performed by the Input Output
Processor (IOP): scan conversion of the output primitives, refresh
screen, raster operations, and character generation. Give an example
for each operation.
2. Is the dot matrix printer a vector or raster device? Argument the
statement.
3. Is the pen plotter a vector or raster device? Argument the statement.
4. Why do you think the resolution of the electrostatic plotter can be
limited?
5. Is the laser printer a vector or raster device? Is the image composed of
vectors or pixels? Argument the statement.
6. Is the ink-jet printer a vector or raster device? Is the image composed
of vectors or pixels? Who could perform the scan conversion?
Argument the statement.
7. Is the Cathode Ray Tube (CRT) a vector or raster device? Is the image
composed of vectors or pixels? Who could perform the scan
conversion? Argument the statement.

8. What is the relationship between a phosphor dot, phosphor dot pattern
and a pixel, for a BW and color CRT device? What element decides the
maximum resolution of a CRT display device?
9. What are the differences between vector and raster graphics? Highlight
the differences in graphics models, images, output graphics devices,
file formats, image memory buffer, file formats, information
description, and object related semantics.
10. What is the differences between vector graphics model and raster
graphics model?
11. What is the differences between vector graphics image and raster
graphics image?
12. What is the differences between vector graphics device and raster
graphics device?
13. What could limit the resolution and dynamics of the LCD (Liquid Crystal
Displays) and TFT (Thin Film Transistor) LCD screens?
14. What limits the resolution and dynamics of the PDP (Plasma Display
Panel)?

15. Compare the following architectures: simple raster display system,
peripheral display processor, and integrated display processor.
Highlight the differences and advantages of each architecture?
16. What are the main differences between logical and physical input
devices? Give some examples.
17. How the mouse with ball detects the moving directions? Why the
optical mouse does not work on a glossy and shiny surface?
18. What are the similarity and difference between mouse and track-ball?
19. How the graphic tablet transforms the signal into position?
20. How the light pen transforms the signal into position?
21. What is the main difference between an input graphics device and a
haptic device?

Standards of Graphics Systems
Contents
1. Core
2. GKS
1. Functional levels
2. Graphics primitives
3. Coordinate systems
4. Window-viewport transformations
5. Graphics transformations
6. Graphics segments
3. Conclusion

CORE Standard
1. 3D Core Graphics System
1977, ACM SIGGRAPH (Special Interest Group on
Graphics)
2. Six types of graphics output primitives:

marker, polymarker, line, polyline, polygon, text
3. Current position (CP) P0

e.g. move x0,y0
CP
line ∆x1, ∆y1
P1
4. Two input modes:

Sample
Event

CORE Standard
4. Graphics model stores the clipped part of a graphical
segment.
Graphics model
5. Space dimension
CORE: 3D; GKS: 2D, 3D
6. Coordinate system
Application program transforms NDC to WC
GKS works on real world coordinate
7. Device control
CORE identifies the output device
GKS: workstations with associated list of attributes and
window/viewport pair.
GKS
o Graphical Kernel System
1984 (’85) GKS 2D
1988 GKS-3D
o Main concepts in GKS:

o represents and generates graphics pictures
o graphics presentation on particular workstations
o control the workstations
o control the inputs
o graphics segments
o metafiles

GKS – Functional levels
Application Program
Application Oriented Level
Language Oriented Level
Graphics Kernel
Operating System
Graphics Other
Resources Resources

CGRM on the GKS workstations
Constructive Level
Virtual Level
Workstation Workstation
Visualization Level Visualization Level
Logical Level Logical Level
Realization Level Realization Level

Graphics primitives in GKS
o Graphics primitive (type, attribute)
o Graphics attributes
local
global
o GKS primitives:
1. Polyline
2. Polymarker
3. Text
4. Fill-area
5. Cel-array
6. GDP (Generalized Drawing Primitive)

1. Polyline
P0 P2
P0, P1, P2,…Pn
Pn
Attributes: P1
type of line: hidden, solid, dot, line-dot

width:
color: p x R + q x G + s x B
2. Polymarker
Attributes:
type: . + x * o
dimension: * * *

3. Text
Attributes:
type: Roman Duplex, Roman Complex, Italic, Gothic

text precision: string, character, stroke TEXT
height:
direction of characters: horizontal, vertical
expansion
direction of text: right, left, up, down Text txeT T t

e x
x e
t T

justify the text: left, right, center
Text
Text
4. Fill-area
Text
5. Cell-array

6. Generalized Drawing Primitives
Circle
Line
Interpolation Curves (Bezier, Hermite, B-Spline, etc).
…

Coordinate systems in GKS
o World Coordinates (WC)
o Normalized Device Coordinates (NDC)
o Physical Device Coordinates (PDC)
Application 1 Graphics 3 Graphics

Program Model Image
World Coordinates Normalized Device Physical Device

Coordinates Coordinates
Line 107.5,235.7 Line 0.35,0.71
(m x m) [0,1] x [0,1]
1. visualization and normalization transformations

scales parts of a picture from window (WC)
controls the placement into viewport (NDC)
2. segment transformations 2 x 3 matrix transformations
3. workstation transformations

Transformation for a raster device
window
viewport
y y (1,1)
World Normalized
20
coordinate device
system coordinate
system
30 x x
Window: rectangular area of interest defined by the world

coordinates within the projection plane application
space.
Viewport: rectangular area of interest within the normalized Screen driver
space (virtual and normalized screen). pixels
xPixel = (xResolution –1) *

(ViewportXmin + (ViewportXmax – ViewportXmin) *
(X – WindowXmin) / (WindowXmax – WindowXmin)) Plotter device driver
inches
yPixel = (yResolution –1) *
(ViewportYmin + (ViewportYmax – ViewportYmin) *
(Y – WindowYmin) / (WindowYmax – WindowYmin))

Graphics segments in GKS
y
o Group of primitives processed as a Normalized gear tooth
1,0
graphics unit
o Segment parameters: 0,8
o tx, ty – translation parameters
o sx, sy – scale parameters
o a – orientation angle
0,2
o visibility
o priority
0,2 0,6 x
o Common attributes
y
Gear
o Common graphics transformations
o Graphics modeling
o Defined in NDC R
o Instantiated in application program

in WC x

Gear
Rotate Rotate Rotate Rotate

Circle
0 12 24 348
Data
Translat
e
Scale
Tooth
Data

y
o Segment definition: Normalized gear tooth
1,0
float Xtooth[6], Ytooth[6];
/* initialize the Tooth structure */ 0,8
OPEN_SEGMENT(Tooth)
SET_POLYLINE_INDEX(Default);
POLYLINE(6, Xtooth, Ytooth);
CLOSE_SEGMENT;
0,2
o Segment use:
...
SET_TRANSFORMATION_MATRIX(Matrix1, … 0,2 0,6 x
Scale by R*COS(6), -R*SIN(6) …); y
... Gear
OPEN_SEGMENT(Gear)
for(j =1; j <30; j++){
Angle = j * 12;
R
INSERT_SEGMENT(Tooth, Matrix1);
/* compute the complex transformation matrix */
ACCUMULATE_TRANSFORMATION_MATRIX(Matrix1,
… rotate by Angle…); x
}
CLOSE_SEGMENT;

Graphics transformations in GKS
Window/
Vieport
Transf. Workstation
Primitives Transformed Transf.
. v Primitives
. w i v
i e TP1 .. TPn w i
n w i e
Segment d p n w
control o o d p
w r Graphics
. Segment Memory o o
. t w r
t
S1 .. Sm
State
Attributes
...
Segment transformations
WC NDC PDC

Graphics devices in GKS
o Output
o Input
o Input/Output
o WISS (Workstation Independent Segment Storage)
o MO (Metafile Output)
o MI (Metafile Input)

Graphical output devices
o Hardcopy device:
dot matrix printer
pen plotter
desk-top plotter
electrostatic plotter
laser printer
ink-jet printer
thermal transfer printer
o Display device:
monochrome and color CRT (Cathode Ray
direct-view storage tube (DVST)
liquid-crystal display (LCD)
plasma panel
electroluminescent display (ELD)

Input devices
Locator
Valuator
Choice
String
Pick
Stroke
o Physical devices:
pick: light-pen
string: keyboard

Input modes in GKS
Application System
program
1. Request mode Maintain

state
call
Call
Data input
function
return Get
data
2. Sample mode
call
Call Maintain Data input
function data
return

Input modes in GKS
3. Event mode
Application System
program
Data input
call
Wait for Wait Queue
event
event state data
return
call FIFO
Get Maintain
data data
return
Data
queue

Graphics rendering pipeline
o Generate (render) a two-dimensional image, provided with a
virtual camera, three-dimensional objects, light sources,
shading equations, textures, etc.
o Consists of several stages, and the speed is determined by the

slowest stage

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Evolution of graphics pipelines (GPU)
o Fixed-Function pipeline (1992 – 2001)
o Configurable via parameters
o Cannot change the algorithms (e.g. Gouraud or Phong shading)
o OpenGL 1, Direct3D 2
o Hybrid pipeline (2001 – 2009)

o Shaders (HLSL/Cg – Microsoft/NVIDIA and GLSL - OpenGL)
o Fixed and programmable features co-exist
o OpenGL 1.4, Direct3D 8
o Programmable pipeline (2009 – present)

o No more fixed functions
o OpenGL 3.2, Direct3D 10, CUDA/OpenCL

Rendering strategies
Rasterization Ray tracing
foreach triangle T{ foreach pixel p(x,y){

identify pixels p(x,y) intersect ray through pixel p
covered by T; with objects;
color(x,y) = shaded value color(x,y) = compute_shade(
} visible point)
}

Rasterization vs Ray Tracing

Immediate-mode vs Retained-mode
o Immediate-mode (IM)
o The framework doesn’t store anything
o The application directly draws to the container element
o The management of the drawn objects is the task of the
application
o Offers control and flexibility
o Retained-mode (RM)
o The scene (lines, shapes, images,…) is kept in memory
o The actual drawing is performed once, using the stored model
o The application simply adds and removes drawing primitives
o Offers abstraction

Immediate-mode Retained-mode
Application
Update
Application Build scene
Drawing
commands Scene Graphics library
Update
Graphics library Drawing
commands Scene
Display
Display

Real-time rendering pipeline
1. Application
n runs on general-purpose CPUs.
2. Geometry processing
Application
n operations such as transformations, Command stream
projections, etc.
n computes what is to be drawn, how it Geometry processing
should be drawn, and where it should be Transformed geometry
drawn
n typically performed on a graphics Rasterization
processing unit (GPU) Fragments
3. Rasterization Fragment processing

n rasterize all the primitives Framebuffer image
n processed completely on the GPU

4. Fragment processing
n draws (renders) an image

Rendering speed
o Update rate of images
o Expressed in:
n frames per second (fps) - the number of images rendered per
second
n Hertz(Hz) - the frequency of update
o Depends on the complexity of the computations

o Determined by the slowest of the pipeline stages

Application stage
o Send rendering primitives (points, lines,
triangles) to the geometry stage
o Deals with collision detection, AI, etc.
Application
o Takes care of input Command stream
n keyboard Geometry processing

Transformed geometry
n mouse
n head-mounted helmet, etc.. Rasterization
Fragments
Fragment processing
Framebuffer image

Geometry stage
o Per-polygon and Per-vertex operations
o Functional stages
n model and view transform Application
Command stream
n vertex shading
n projection Geometry processing
n clipping
Rasterization
n screen mapping
Fragments
Fragment processing
Framebuffer image

Model and view transform
o Each 3D model is transformed to
different coordinate systems
n Local (model) coordinates / model space
Application
n World coordinates / world space Command stream
o Model transformation - vertices and Geometry processing

normal vectors Transformed geometry
o World space - unique, all models exist in Rasterization

the same space Fragments
Fragment processing
Framebuffer image

View transformation
o The position of the visualization camera
is specified in world coordinates
o Has a direction, which aims the camera
Application
o To make the projection and clipping Command stream
easier, the camera and all the 3D models

Geometry processing
are transformed with the view
transformation
o View transformation - place the camera Rasterization
at the origin and make it look toward the Fragments
direction of the negative z-axis

Fragment processing
Framebuffer image

View transformation
World space Camera space
wy cz
wz cx

Vertex shading
o To produce a realistic image define
materials and lights
o Shading - the operation of determining
Application
the effect of a light on a material Command stream
o Vertex shading results (colors, vectors,

Geometry processing
texture coordinates, etc.) are sent to the
rasterization stage (to be interpolated)
o Shading computations can happen in Rasterization
world space or camera space Fragments
Fragment processing
Framebuffer image

Projections
o Transforms the view volume into a unit
cube - canonical view volume
o Can be defined between (−1, −1, −1)
Application
and (1,1,1) or (0, 0, 0) and (1,1,1) Command stream
o Most commonly used projections

Geometry processing
n orthographic (parallel) projection Transformed geometry
n perspective projection Rasterization

o After projection the 3D models are in Fragments
normalized device coordinates.

Fragment processing
Framebuffer image

Projections
Orthographic projection Perspective projection

Clipping
o Pass to the rasterization step only the
primitives which are wholly or partially
inside the view volume
Application
o Primitives that are completely inside Command stream
- pass to the next stage as they are

Geometry processing
o Primitives that are entirely outside Transformed geometry
- do not pass them further Rasterization

o Primitives that are partially inside Fragments
- clip them and pass to the next stage Fragment processing

Framebuffer image

Clipping
y y
z z

Screen mapping
o The x- and y-coordinates of each primitive
are transformed into screen coordinates
o Screen coordinates together with the z-
coordinates are also called window Application
coordinates Command stream
o The z-coordinate is not affected by this Geometry processing

mapping Transformed geometry
Rasterization
Fragments
Fragment processing
Framebuffer image

Screen mapping
(x2, y2)
z
(x1, y1)

Rasterization stage
o Given a primitive (described by the vertex
coordinates, color and texture information)
convert it into a set of fragments
o Fragment data Application
Command stream
n raster position
n depth (z-value) Geometry processing
n interpolated attributes (color, texture
coordinates, etc.) Rasterization
Fragments
n stencil
n alpha Fragment processing
Framebuffer image

Example of rasterization
Elements of Computer Assisted Graphics

Fragment processing
o Process each fragment from the
rasterization process into a set of colors and
a single depth value
o Scissor test - discard fragments outside of a Application
certain rectangular portion of the screen Command stream
o Stencil test - test the fragment's stencil Geometry processing

value against the value in the current stencil Transformed geometry
buffer; if the test fails, the fragment is
culled Rasterization
o Depth test - test the depth of the current Fragments
fragment with the existing depth; if the test

passes update the depth buffer Fragment processing
Framebuffer image
o Blending - combine the fragment’s color with
the existing color in the frame buffer

Fragment processing

Coordinates systems

Graphics pipeline

Basic graphics pipeline

1. What are the main goals of a graphics standard. Exemplify by the
CORE standard.
2. Explain the functional levels in the GKS Graphics System. Why the
Application Program accesses the Kernel by other two levels? Why the
Operating System separates the functional levels and the graphics
resources?
3. What is the difference between the world coordinates, normalized
device coordinates, and physical device coordinates? Why the graphics
operations use normalized device coordinates?
4. Explain the differences between the concepts of window and viewport.
5. Explain the Request input mode in GKS. Exemplify a practical use case.
6. Explain the Sample input mode in GKS. Exemplify a practical use case.
7. Explain the Event input mode in GKS. Exemplify a practical use case.
8. Exemplify the transformation of a cube along the graphics rendering
pipeline. Where and why the system may compute the shadows?

9. Where and why the system may remove the hidden parts of the
objects, along the graphics pipeline?
10. What space and coordinate system are used to rasterize the graphics
model?
11. Explain the motivation for the design and development of the graphics
processing units (i.e. GPU).
12. Describe the trend in the evolution of GPUs. What are the main steps?
13. Explain the concept of the rendering strategy. Exemplify the
rasterization and the ray tracing strategies.
14. Explain the concept of the rendering mode. Exemplify the immediate
and the retained modes.
15. Describe the concept of real-time rendering pipeline. Exemplify for a
cube the passing throughout the phases of Application, Geometry
processing, Rasterization, and Fragment processing.
16. Explain what means “per-polygon and per-vertex operations” in the
Geometry stage of the graphics pipeline.

18. Explain why the initial transformation of the 3D model is performed
within the Local coordinates system and then, in the World coordinate
system.
19. Explain what means the view transformation.
20. What means shading operations? Why the shading is computed
regarding the vertex?
21. Explain why the vertex shading computation can be achieved both in
the world space and in the camera space.
22. Explain the rasterization for the following vector primitives given by
vertices: point A(x,y,z), line (A(x,y,z), B(x,y,z)), polygon (V1(x,y,z),
V2(x,y,z), …, Vn(x,y,z)).
23. Exemplify the fragment data for the rasterized vector primitives: point
A(x,y,z), line (A(x,y,z), B(x,y,z)), polygon (V1(x,y,z), V2(x,y,z), …,
Vn(x,y,z)).

Introduction to Graphics Systems
Contents
1. Motivation
2. Computer Graphics
3. Graphics Devices
4. Application Data Models
5. Graphics Systems
6. Conclusion

1. Motivation
o Examples
o Definition
o Objectives
o Simulation
o Realism
o Interactivity
o Presence

Examples - Pseudographics
.,,. .,,.
:XXXX,XXXX: .SSSSSSS'
.,;;;;;;;,. 'XXXXXXXXX' .SSSSSSSS,WW:, .''':,.
,;;;;;;;,/;;;; ':XXXXX:' .SSSSSSSSSS:WWW:, '::,
.,aa###########@a;;;;;/;;;,//;;; 'XXX' .SSSSSSSSS,WWW<*>WW '::, '////
..,,,.,aa##################@a;//;;;,//;;;
':' SSSSSSSSSSSS'WWWWWWD '::,////
,;;;;;;;O#####OO##############OOO###a,/;;;;' ,. SSSSSSS(((SSSWWWWW' ,WW//:.'.W.
.;;//,;;;O####OOO##########OOO####OOO#####a' ,((() 'SSSSSS(((WWWWWWWWWW) //'W,:WWWW'
.;;/,;;/;OO##OO#######################OOO####. ,(((((() 'SSSSSS((WWWWWWWWWW) // 'WWW,WWW
;;;/,;;//OO#######OOO###########OOO###########. .,(((((((()) 'SSSSWWWWWWWWWWW' // .WWWWW:,
`;;//,;,OOO#########OO#########OO##############.
.,((((((((((())), SSWWWWWWWWWW' // ,WWWW' ':,
;. `````ÒOO#####;;;;;;OO#####OO;;;;;;######O####. .,((((((((((((((())))),.,,,,WWWWWWWWWW:, // ,WWWWW' ':
.;;, OOO###O;;' ~`;##OOOOO##;' ~`;;O#####OO### '((((((((((((((((((((()))))WWWWWWWWWWWWWVVVV//WWWWW:,.,WWWWW' :
;;;; , OOO##O;;;,.,;O#########O;,.,;;;O####OO###, ((((((((((((((((((()))(WWWWWWWWWWWWWWVVVVVVWWWWWWWWWWWWW' '
`;;' ,;; OOO##OO;;;;OOO(???????)OOO;;;;OO####OO###%, ((((((((((((((((()))(WWWWWWWWWWWWWVVVVVVVWWWWWWWWWWWW'
`\ ;;; ÒOO#####OOOO##\?????/##OOOO#######O####%O@a
(((((((((((((())(()(WWWWWWWWW.VVVVVVVWWWWWWWWWWW:'
\,`;' ÒOO####OOO######;######OOO###########%O###, ((((((((())) ()(WWWWWW.VVVVVVV'WWWWWWW'' .,,. .,,.
.,\ ÒO####OO"#####;#####"OO##########%oO###O#; ((((())) ((WW,VVVVVVVVV'WWWWWWWWW :XXXX,XXXX:
,;;;; \ .::::OO##OOOaaa###aaaOOO#######',;OO##OOO##;, WVVVVVVVVVV'WWWWWWWW:' 'XXXXXXXXX'
.;;'' \:::.OOaa`###OO#######OO###'::aOO.:;;OO###OO;::. .,,. .,,. VVVVVVVVV'WWWWWWWWWW ':XXXXX:'
' .::\.OO####O#::;;;;;;;;;;;;::O#O@OO.::::::::://::
:XXXX,XXXX: .WVVVVVVV'WWWWWWWWWWWW 'XXX'
.:::.O\########O#O::;;;::O#OO#O###@OO.:;;;;;;;;//:, 'XXXXXXXXX' .WWW''''',WWWWWWWWWWWW: ':'
.:/;:.OO#\#########OO#OO#OO########@OO.:;;;;;;;;;//: ':XXXXX:' (())))WWWWWWWWWWWWWWWWW'
.://;;.OO###\##########O#############@OO.:;;;;;;;;//:. 'XXX' ((())))))WWWWWWWWWWWWWW'
;//;;;;.O'//;;;;;;\##################@OO.:;;;;;;;;//:.. ':' ((()))))))))WWWWWWWWWWW'
;//:;;;;:.//;;;;;;;;;#################@OO.:;;;;;;;;;//..
()WWWWWW))))))))))))))))
;;//:;;;:://;;;;;;;;;################@OO.:/;;;;;;;;;//.. :WWWWWWWWW)))))))))))))) .,,. .,,.
`;;;;;:::::::ooOOOoo#\############@OOO.;;//;;;;;;;;;//.o, WWWWWWWWWWW)))))))WWWWW. :XXXX,XXXX:
.;,,,.OOOOO############\#######@OOO.;;;//;;;;;;;;;;//;.OO, :WWWWWWWWWW')))))WWWWWWWW. 'XXXXXXXXX'
//;;.oO##################@\OOO.;;;;;;;;;;;;;;;;;;;;//;.oO#O, WWWWWWWWWW' 'WWWWWWWWWWWW ':XXXXX:'
//;;;;O##############@OOO=;;;;//;;;;;;;;;;;;;;;;;;;//;.oO##Oo
.,,:WWWW:,WWWWWWWWW' 'WWWWWWWWWWW 'XXX'
//::;;O#########@OOOOO=;;;;;;;//;;;;;;;;;;;;;;;////;.oO####OO ,WWWWWWWWWWWWWWWWWW' 'WWWWWWWWW ':'
.n.n.n.n`;O########@OOOOO=;;;;;;;;;;///;;;;////////';oO########OO ,WWWWWWWWWWWWWWWWWW' 'WWWWWWWW,
.%%%%%%%%%,;;########@=;;;;=;;;;///////////////':::::::::.a######@ WWWWWWW' '':WWW:' 'WWWWWWWW
/%%%%%%%%%%.;;;;""""=:://:::::::::::::::::\::::::::::::://:.####@' .WWWWWWW' .WWWWWWWWW
/%%%%%%%%%//.;' =:://:::::::::::::::::::\::::::::::://:.###@'
''W'W'WW ,WWWWWWWWW' .,,. .,,.
/%%%%%%%%//' =:://::::::::;:::::::::::\:::::::://:.##@' '' ,WWWWWWWW' :XXXX,XXXX:
/%%%%%%/ =:://:::;;:::::::::::::::\::::::::' .,,. .,,. .WWWWWW:' 'XXXXXXXXX'
'''' '''''' ''''''''''''''''\'''' :XXXX,XXXX: .WWWWWWW' ':XXXXX:'
\ 'XXXXXXXXX' WWWWWW' 'XXX'
':XXXXX:' WWWWW' ':'
'XXX' WWWW.
':' 'WWWWW,
'' ''

Examples - Art

Examples - Fractals

Examples - Visualization

Examples – CAD, CAM

Examples - Movies

o Definition (ISO)
o Method and Technologies for converting data to and
from graphics devices via a computer
o Computer Graphics is the most versatile and powerful
means of communication between a computer and a
human being.
o A picture is worth than thousand words.

Subject of Computer Graphics
Domain: generative picture picture

computer graphics analysis processing
Input: formal visual visual

description presentation presentation
Output visual formal visual

presentation description presentation
Objects: lines, pixels, generated or scanned

area, texts, scanned pictures picture
or set of objects
Purpose: picture pattern analysis, picture

generation structure analysis, enhancement
scene analysis

Computer Graphics
Computer
Generative Computer Graphics (GCG)
Graphics
Picture Analysis
Image Processing (IP)
Picture Processing
Picture Synthesis
GCG
Model Picture
IP
Picture Analysis

History
o 1950 - simple pictures on CRT, Whirlwind Computer (MIT)

o Mid ‘50s – first light pen (SAGE System)
o 1963 -“Sketchpad”, Ivan E. Shuterland
o Mid ’60s - heavy research: MIT, General Motors, Bell
Laboratories, Lockheed Aircraft
o Late ’60s heavy research: University of Utah
o 1974 – technology threshold
o Late ’70s - economic raster graphics
o Early ’80s - microprocessor graphics
o Late ’80s - photorealism
o ’90s - graphics portability: Web formats, databases, GUI,
Virtual space modeling

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
3. Graphics Devices
o Output device
n Graphics diplay, printer, plotter,etc.
o Input device
n Mouse, lighth pen, track ball, etc.
n Graphics console, graphics tablet, head mounted display,
etc.

3.1 Graphics Display
Typical refresh display device
…
… (Display commands) Interface to
MOVE host computer
10
15
(interaction data)
LINE Display
100 processor
25
CHAR
LU CRT
CY
LINE
… Stylus
…
JMP
Refresh buffer memory Alphanumeric keyboard Data tablet

Typical vector storage tube device
Interface to host computer
(Display commands) (interaction data)
Display
processor
CRT
Vertical and
Horizontal cursor
thumbwheels
Keyboard

Raster graphics display
Display Keyboard
00000000000000000000000001000000
processor Data input
00000000000000000000000001000000
00000000000000000000000111110000
00000000011000000001111111111111
00000000111100000000000111110000
00000011111111000000000001000000 CRT
00001111111111110000000001000000
00111111111111111100000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00000000000000000000000000000000
Bitmap refresh buffer

3.2 Plotter

3.3 Logical Input Devices
o Input Graphics Device
n Logical
locator, stroke, string, valuator, choice, pick
n Physical
mouse, trackball, joystick, scanner, keyboard, etc
o Logical Input Devices:

n LOCATOR: specifies a coordinate position (x, y)
n STROKE: specifies a series of coordinate position
n STRING: specifies text input
n VALUATOR: specifies scalar values
n CHOICE: selects menu options
n PICK: selects picture components

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
4. Application Data Modeling
4.1 Object Hierarchy
o geometric data
o non-geometric data
A’ B’’ C’ B’’ B’
A’’ A’
A B C ……

Application Data Modeling
Database
OBJ
F1 F2 … Fk
E1 E2 … En … Em
V1 V2 … Vr

GIS - Mapping

GIS – Vector Data

GIS – Raster Data

GIS – Data Primitives
Graphics entity: Vector data: Raster data:
Point (x1,y1)
- a pair of x and y
coordinates
vertex
Line
- a sequence of points
Node
Polygon
- a closed set of lines

GIS – Relational database
Spatial Attributes
Descriptive Attributes

4.2 Geometric Modeling
o Definition
o A collection of methods to define geometric and
topological characteristics of an object
o Usual geometric models

o wireframe model
o surface model
o solid model

Wireframe Model
o Primitives: points and lines
o Applications: 2D CAD/CAM, Drafting
P4 P3
P2
P1
P7
P8
P5 P6
Simple and efficient,

but ambiguous

Surface Model
o Primitives: points and lines (sometimes patches)
o Applications: Representation of sculptured surfaces
s
t
Accurate representation of surface,

but cannot represent a true solid object (inside/outside)

Solid Object Modeling
• Shading and hidden line removal
• Mass properties calculation
• Interference test
Solid
Constructive Solid Geometry (CSG) Boundary Representation (BRep)

Swept Volume Generation
Z Z
sweep
sweep
X
Y

Object Decomposition

Octree Representation

Geometric Modeling System
Input subsystem Core representation subsystem
CSG
Based
CSG
Sweep Spatial
Based Decomp.
B-Rep.
B-Rep.
Based

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
5. Graphics Systems
o Definition:
o Interface between application software and graphics
hardware system
o Fundamentals
o Output primitives
o Primitive aspects
o Primitive attributes
o Output model
o Coordinate systems and clipping
o Input primitives
o Input model
o Storage

Graphics Systems - Requirements
o Consist of input subroutines and output subroutines

o Accept input data and commands from user
o Convert internal representations into external pictures
o Graphics kernel assures
n Application portability
o Device independence
o Language independence
o Computer independence
o Programmer independence
n Application flexibility

Graphics Systems - Examples
o Core - 1977
o GKS (Graphical Kernel System) - 1985
o X-Window - 1986
o GKS-3D - 1988
o PHIGS (Programmers Hierarchical Interface Graphics
System) - 1989
o CGI (device interface)
o CGM (metafile)
o CGRM (Computer Graphics Reference Model) - 1992
o IGES (Initial Graphics Exchange Specification) - 1980
o OpenGL (Open Graphics Library) - 1992
o DirectX
See CGI Historical Timeline, http://accad.osu.edu/~waynec/history/timeline.html

Roles in Graphics
Graphics standard
Graphics Sys specification
implementors
Implemented graphics
system
Application
programmers
Graphics applications
Interactive graphics
Operators applications

Layered functionality model
High Speed Interfaces
Application
Application/Graphics System Interface
Graphics System
Front End
DI/DD Interface
(Device Independent/Device Dependent)
Graphics System
Back End
Operating System Interface
Operating
System
Low Bandwidth Communications Link
Device Software (only present for “intelligent” devices)
Device Hardware (hardware functionality)

Interface of Graphics System
Application program
Graphics system
Operating system
Input and Graphics

Metafiles
output devices hardware

Computer Graphics Reference Model
Application Level Block (1271.3, 56.2, 1472.45, 75.82)
Line (1271.3, 56.2, 1472.45, 56.2)

Constructive Level … Line (…)
Virtual Level Line (0.85, 0.15, 0.87, 0.15)

…
Visualization Level Line (0.85, 0.15, 0.75, 0.15)
Logical Level Move (0.85, 0.15), Line (0.75, 0.15)
Realization Level Draw pixels, Get user inputs
Operator

CGRM on the GKS-3D workstations
Constructive Level
Virtual Level

GKS Structure
Application Program
Graphics Kernel
Operating System
Graphics Other
Resources Resources

OpenGL
o API (Application Programmer Interface) to interactive rendering 2D and
3D vector graphics
o Silicon Graphics Inc. (SGI) started to develop OpenGL in 1991, and
released it in 1992
o State machines
o Client-server model
o 250 distinct commands
o Object specification + image generation
o Simple primitives: points, lines, polygons
(pixels, images, bitmaps)
o 3D rendering
o Reference: www.opengl.org/

Graphics pipeline

OpenGL Levels
Application Program
OpenGL Motif
widget or similar GLUT
GLU
GLX, CGL, WGL
X, Win32, Mac OS GL
Software and/or Hardware

OpenGL- Related Libraries
o Window tasks
For portability, there are
o User input no commands for these
o Complex shapes
o OpenGL Utility Library (GLU)
o Window system support
libraries: GLX / WGL / CGL
o OpenGL Utility Toolkit (GLUT)
o OpenGL User Interface (GLUI)
o OpenInventor

o More than 250 functions similar to those of the
programming language C
o Language independent functions
o Language bindings:
n JavaScript: WebGL (based on OpenGL ES 2.0 for 3D rendering
within the web browsers). It uses HTML5 canvas element and is
accessed through DOM (Document Object Model) interface.
n C bindings:
n WGL (Microsoft Windows interface to OpenGL),
n GLX (X11 interface to OpenGL)

n CGL (Mac OS X interface to OenGL)
n C binding provided by iOS

n Java and C bindings provided by Android

OpenGL in Computer Games

DirectX
o Direct control of graphics hardware (1995, Windows
Games SDK)
o Direct control of keyboard, mouse, video cards, and
sound devices
Application program
Direct sound
Direct X
Direct input
Windows API Direct draw
Direct 3D
……..
Windows system

6. Future Research Areas
o Graphics accelerators
o parallel processing
o Geometric modeling
o physically-based modeling
o level of detail
o Motion control / synthesis
o kinematics / dynamics
o motion capture / modification
o Rendering
o photo-realism
o real-time
o image-based rendering
o non-photorealistic rendering
o Scientific visualization
o Geometric algorithms
o User interface

1. What are the main components of the Programmer’s Model for the
Interactive Computer Graphics?
2. What is the main role of the display processor? Is it a computer? Does
it execute a graphics application?
3. What is the difference between a logical and a physical input graphics
device?
4. Explain the status of graphics objects as graphics model, application
model, data structure, graphics file, and graphics database. What is
the relationship and the flow between these states.
5. What graphics operations can be supported by the wireframe model?
Does it support the computation of areas and volumes? What about
light intensity computation, and texture mapping? Explain your
answer.
6. What graphics operations can be supported by the surface model?
answer.

7. What graphics operations can be supported by the CSG model? Does it
support the computation of areas and volumes? What about light
intensity computation, and texture mapping? What other operations
are supported? Explain your answer.
8. What graphics operations can be supported by the BREP model? Does
it support the computation of areas and volumes? What about light
9. Exemplify the CSG model on the 3D object of a table and a glass.
10. Exemplify the BREP model on the 3D object of a table.
11. Exemplify and explain the Octree model on the 3D object of a sphere.
12. Explain the concept of the graphics application portability. Give some
examples.
13. Explain the concept of graphics application flexibility.
14. Why the Application and the Graphics System are separate layers in
the graphics system functionality model? Why this is a requirement?

15. Explain the layers of the CGRM (Computer Graphics Reference Model),
and exemplify the transformations for drawing a triangle ABC.
16. What is the main role of the Virtual Level? What coordinate system is
used to represent the scene of objects?
17. Why the Visualization, Logical, and Realization levels are different on
various workstations? Give some examples.
18. Explain the differences between Application Oriented and Language
Oriented levels, in the GKS Functional Structure. Why the Graphics
Kernel is separated by the Language Oriented level?
19. Describe the main features of the OpenGL technology.
20. What are the main differences between OpenGL and DirectX.
21. Explain the reason for the direct control within the DirectX technology.
22. Explain the concept of mathematically modeling versus physically
modeling.
23. Explain the concept of LOD (Level of Details) in computer graphics.

2D and 3D Transformations
Contents
1. 2D Transformations
2. Homogeneous coordinates
3. Particular transformations
4. 3D Transformations
5. Other transformations

2D Transformations
o Translation
o Scaling
o Rotation
o Reflection
o Shearing

Translation
x’ = x + Tx
y’ = y + Ty y B’
x A’
x’ 1 0 Tx
= y
y’ 0 1 Ty A
1
O x

Scaling
x’ = Sxx
y’ = Syy y B’
x’ Sx 0 x
= A’
y’ 0 Sy y A
O x

Rotation
x’ = x cosθ – y sinθ
y’ = y cosθ + x sinθ y P’
r θ
x’ cosθ -sinθ x
P
= r
y’ sinθ cosθ y φ
O x

Uniform transformations
o Scaling and rotation
x’ a b x
=
y’ c d y
o Translation
x
x’ 1 0 e
= y
y’ 0 1 f
1

Homogeneous Coordinate System
o Uniformly matrix transformations
P’ = H P
x
a b c
w (X’, y’, w)
P’ = d e f y
g h i 1
(X’/w, y’/w, 1)
x’ x’/w
X
P’ = y’ = y’/w
w y
1
o No unique homogeneous representation of a cartesian point

(x, y) ≡ (xw, yw, w), w ≠ 0
o Normalization
(x, y, 1), w = 1

Support for uniform transformations
o Scaling x’ x
Sx 0 0
y’ = 0 Sy 0 y
w’ 0 0 1 1
x’ x
o Rotation cosθ -sinθ 0
y’ = -sinθ cosθ 0 y
w’ 0 0 1 1
x’ x
o Translation 1 0 Tx
y’ = 0 1 Ty y
w’ 0 0 1 1

Composite transformations
o P’ = Hn · · ·H2 · H1 · P
o P’ = H · P

Example: scaling relative to a position
(xR,yR)
H = T-1 ST
T
P’= T-1 ST P
(a) Original position of (b) Translate object so that

object and fixed point fixed point (xR , yR ) is at origin
S T-1 (xR,yR)
(c) Scale object with (d) Translate object so that

respect to origin fixed point is returned to position (xR , yR )

Transformations ordering
Final Final
Position Position
(a) RT (b) TR

Particular reflections
o Reflection against x axis
y
P1
Original 1 0 0
position
0 -1 0
P2 P3 0 0 1
x
P2’ P3’
Reflected
position
P1’

o Reflection against y axis
y
Original Reflected
position position -1 0 0
P2 P2’ 0 1 0
0 0 1
P3 P3’
P1 P1’
x

o Reflection against first bisection
y Original
P3 y=x 0 1 0
position
1 0 0
0 0 1
P1
Reflected
P2 P1’ position
P3’
P2’
x

o Reflection against second bisection
y = -x Original y
P3 0 -1 0
position
-1 0 0
P1 0 0 1
Reflected P2
position P1’
P3’ P2’
x

o Reflection against coordinate system origin
Reflected
y position -1 0 0
P2’
P1’ 0 -1 0
0 0 1
P3’
x
P3
Original
position
P1
P2

Shearing
y y y
(1, 3)
(1, 2)
(0, 1) (1, 1) (2, 1) (3, 1)
(0, 1)
x x x
(0, 0) (1, 0) (0, 0) (1, 0) (0, 0)
(a) (b) (c)
1 SHx 0 1 0 0
0 1 0 SHy 1 0
0 0 1 0 0 1

3D Transformations
o Translation
o Scaling
o Rotation

Translation
x’ = x + Tx
y
y’ = y + Ty
z’ = z + Tz
P’(x’, y’, z’)
P’ = TP
Ty
P(x, y, z)
x’ 1 0 0 Tx x
Tx Tz x
y’ 0 1 0 Ty y
=
z’ 0 0 1 Tz z z
1 0 0 0 1 1

Scaling
x’ = x Sx
y
y’ = y Sy (x’, y’, z’)
z’ = z Sz
if Sx = Sy = Sz uniform scaling
(x, y, z)
P’ = SP
x
x’ Sx 0 0 0 x
y’ 0 Sy 0 0 y
z
=
z’ 0 0 Sz 0 z
1 0 0 0 1 1

Relative scaling
y y y
y
(xR, yR, zR)

x x x
x
z z z
z
1 0 0 -xR Sx 0 0 0 1 0 0 xR
0 1 0 -yR 0 Sy 0 0 0 1 0 yR
T= S= T-1 =
0 0 1 -zR 0 0 Sz 0 0 0 1 zR
0 0 0 1 0 0 0 1 0 0 0 1
P’ = T-1STP

Rotation around z axis
x’ = x cosθ – y sinθ
y
y’ = y cosθ + x sinθ
z’ = z
P(x’,y’,z’)
r
θ r
P(x,y,z)
x
cosθ -sinθ 0 0
sinθ cosθ 0 0 z
Rz =
0 0 1 0
0 0 0 1

Rotation around x and y axes
y y
z x z x
x’ = x x’ = x cosθ + z sinθ
y’ = y cosθ - z sinθ y’ = y
z’ = y sinθ + z cosθ y’ = -x sinθ + z cosθ
1 0 0 0 cosθ 0 sinθ 0
0 cosθ -sinθ 0 0 1 0 0
Rx = Ry =
0 sinθ cosθ 0 -sinθ 0 cosθ 0
0 0 0 1 0 0 0 1

Rotation around an arbitrary axis
y
θ
(x2, y2, z2)
u
(x1, y1, z1)
x

Axis: P1(x1,y1,z1), P2(x2,y2,z2) y
V [x2-x1 y2-y1 z2-z1]

(x2, y2, z2)
Normalized vector u:
u(a,b,c), |u|=1 u
a = ∆x/|V|, b = ∆y/|V|, c = ∆z/|V| (x1, y1, z1)

x

1. Translate the object so that the y
rotation axis passes through the
origin (T).
2. Rotate the object so that the (x2, y2, z2)
rotation axis coincides with one
of the coordinate axis (R). u
3. Perform the specified rotation. (x1, y1, z1)
4. R-1 x
5. T-1 z

Step1 - translation
1 0 0 -x1
(x2, y2, z2)
0 1 0 -y1
T=
u u = (a, b, c) 0 0 1 -z1
(x1, y1, z1)
0 0 0 1
x

Step2 – align u with z axis
y y
(0, b, c) = u'
u = (a, b, c)
φ
(0, 0, 1) = uz
x x
d
a
u'' = (a, 0, d)
u’·uz=|u’| |uz| cosΦ 1 0 0 0

cosΦ = c/d 0 c/d -b/d 0
where d=sqrt(b2+c2) Rx(φ) =
0 b/d c/d 0
sinΦ = b/d
0 0 0 1

y y
uy
(0, 0, 1) = uz
x x
d
a
z u'' = (a, 0, d) z
u’’·uz=|u’’| |uz| cosβ d 0 -a 0

cosβ = d 0 1 0 0
u’’x uz = uy |u’’| | uz | sinβ = uy sinβ Ry(β) =
a 0 d 0
u’’x uz = uy (-a)
sinβ = -a 0 0 0 1

Step 3: Rotate around z axis by θ
y
cosθ -sinθ 0 0
sinθ cosθ 0 0
Rz(θ) =
0 0 1 0
0 0 0 1

Steps 4 and 5
o Step 4: R-1 = Rx(Φ)-1 Ry(β)-1
o Step 5: T-1
Finally the matrix global operator:

H = T-1 Rx(Φ)-1 Ry(β)-1 Rz(θ) Ry(β) Rx(Φ) T

Other transformations
o Reflection
xy plane : (x, y, z) → (x, y, -z)
yz plane : (x, y, z) → (-x, y, z)
zx plane : (x, y, z) → (x, -y, z)
o Shearing
Z axis shearing
x' = x + az
y' = y + bz
y y
x x
z z

Other transformations
o Tapering
x' = r(z) · x
y' = r(z) · y
z' = z
o Twisting
x' = x cos q (z) - y sin q (z)
y' = x sin q (z) + y cos q (z)
z' = z
o Bending

1. What means uniformly matrix transformation?
2. Explain the utility of the uniformly matrix transformation.
3. What is the relationship between the real and the homogeneous
coordinates?
4. What are the matrix operators (i.e. rotation, translation, scaling) in the
following two point transformations: (a) P’=H1P; (b) P’=PH2, where P
and P’ are the points in 3D space, and H1, H2 are the matrix operators?
5. Explain the rotation of the square ABCD, where A(5,3), C(12, 10)
around the point P(-2,3), by 450. Explain the computation of the global
matrix operator.
6. Explain the rotation of the cube ABCDA’B’C’D’, where A(5,3,4),
C’(12,10,11), around the line P1P2, where P1(-2,3,4), P2(-2,3,11), by
450. Explain the computation of the global matrix operator.

Introduction to Graphics Systems
Contents
1. Motivation
3. Graphics Devices
4. Application Data Models
5. Graphics Systems
6. Conclusion

1. Motivation
o Examples
o Definition
o Objectives
o Simulation
o Realism
o Interactivity
o Presence

Examples - Pseudographics
.,,. .,,.
:XXXX,XXXX: .SSSSSSS'
.,;;;;;;;,. 'XXXXXXXXX' .SSSSSSSS,WW:, .''':,.
,;;;;;;;,/;;;; ':XXXXX:' .SSSSSSSSSS:WWW:, '::,
.,aa###########@a;;;;;/;;;,//;;; 'XXX' .SSSSSSSSS,WWW<*>WW '::, '////
..,,,.,aa##################@a;//;;;,//;;;
':' SSSSSSSSSSSS'WWWWWWD '::,////
,;;;;;;;O#####OO##############OOO###a,/;;;;' ,. SSSSSSS(((SSSWWWWW' ,WW//:.'.W.
.;;//,;;;O####OOO##########OOO####OOO#####a' ,((() 'SSSSSS(((WWWWWWWWWW) //'W,:WWWW'
.;;/,;;/;OO##OO#######################OOO####. ,(((((() 'SSSSSS((WWWWWWWWWW) // 'WWW,WWW
;;;/,;;//OO#######OOO###########OOO###########. .,(((((((()) 'SSSSWWWWWWWWWWW' // .WWWWW:,
`;;//,;,OOO#########OO#########OO##############.
.,((((((((((())), SSWWWWWWWWWW' // ,WWWW' ':,
;. `````ÒOO#####;;;;;;OO#####OO;;;;;;######O####. .,((((((((((((((())))),.,,,,WWWWWWWWWW:, // ,WWWWW' ':
.;;, OOO###O;;' ~`;##OOOOO##;' ~`;;O#####OO### '((((((((((((((((((((()))))WWWWWWWWWWWWWVVVV//WWWWW:,.,WWWWW' :
;;;; , OOO##O;;;,.,;O#########O;,.,;;;O####OO###, ((((((((((((((((((()))(WWWWWWWWWWWWWWVVVVVVWWWWWWWWWWWWW' '
`;;' ,;; OOO##OO;;;;OOO(???????)OOO;;;;OO####OO###%, ((((((((((((((((()))(WWWWWWWWWWWWWVVVVVVVWWWWWWWWWWWW'
`\ ;;; ÒOO#####OOOO##\?????/##OOOO#######O####%O@a
(((((((((((((())(()(WWWWWWWWW.VVVVVVVWWWWWWWWWWW:'
\,`;' ÒOO####OOO######;######OOO###########%O###, ((((((((())) ()(WWWWWW.VVVVVVV'WWWWWWW'' .,,. .,,.
.,\ ÒO####OO"#####;#####"OO##########%oO###O#; ((((())) ((WW,VVVVVVVVV'WWWWWWWWW :XXXX,XXXX:
,;;;; \ .::::OO##OOOaaa###aaaOOO#######',;OO##OOO##;, WVVVVVVVVVV'WWWWWWWW:' 'XXXXXXXXX'
.;;'' \:::.OOaa`###OO#######OO###'::aOO.:;;OO###OO;::. .,,. .,,. VVVVVVVVV'WWWWWWWWWW ':XXXXX:'
' .::\.OO####O#::;;;;;;;;;;;;::O#O@OO.::::::::://::
:XXXX,XXXX: .WVVVVVVV'WWWWWWWWWWWW 'XXX'
.:::.O\########O#O::;;;::O#OO#O###@OO.:;;;;;;;;//:, 'XXXXXXXXX' .WWW''''',WWWWWWWWWWWW: ':'
.:/;:.OO#\#########OO#OO#OO########@OO.:;;;;;;;;;//: ':XXXXX:' (())))WWWWWWWWWWWWWWWWW'
.://;;.OO###\##########O#############@OO.:;;;;;;;;//:. 'XXX' ((())))))WWWWWWWWWWWWWW'
;//;;;;.O'//;;;;;;\##################@OO.:;;;;;;;;//:.. ':' ((()))))))))WWWWWWWWWWW'
;//:;;;;:.//;;;;;;;;;#################@OO.:;;;;;;;;;//..
()WWWWWW))))))))))))))))
;;//:;;;:://;;;;;;;;;################@OO.:/;;;;;;;;;//.. :WWWWWWWWW)))))))))))))) .,,. .,,.
`;;;;;:::::::ooOOOoo#\############@OOO.;;//;;;;;;;;;//.o, WWWWWWWWWWW)))))))WWWWW. :XXXX,XXXX:
.;,,,.OOOOO############\#######@OOO.;;;//;;;;;;;;;;//;.OO, :WWWWWWWWWW')))))WWWWWWWW. 'XXXXXXXXX'
//;;.oO##################@\OOO.;;;;;;;;;;;;;;;;;;;;//;.oO#O, WWWWWWWWWW' 'WWWWWWWWWWWW ':XXXXX:'
//;;;;O##############@OOO=;;;;//;;;;;;;;;;;;;;;;;;;//;.oO##Oo
.,,:WWWW:,WWWWWWWWW' 'WWWWWWWWWWW 'XXX'
//::;;O#########@OOOOO=;;;;;;;//;;;;;;;;;;;;;;;////;.oO####OO ,WWWWWWWWWWWWWWWWWW' 'WWWWWWWWW ':'
.n.n.n.n`;O########@OOOOO=;;;;;;;;;;///;;;;////////';oO########OO ,WWWWWWWWWWWWWWWWWW' 'WWWWWWWW,
.%%%%%%%%%,;;########@=;;;;=;;;;///////////////':::::::::.a######@ WWWWWWW' '':WWW:' 'WWWWWWWW
/%%%%%%%%%%.;;;;""""=:://:::::::::::::::::\::::::::::::://:.####@' .WWWWWWW' .WWWWWWWWW
/%%%%%%%%%//.;' =:://:::::::::::::::::::\::::::::::://:.###@'
''W'W'WW ,WWWWWWWWW' .,,. .,,.
/%%%%%%%%//' =:://::::::::;:::::::::::\:::::::://:.##@' '' ,WWWWWWWW' :XXXX,XXXX:
/%%%%%%/ =:://:::;;:::::::::::::::\::::::::' .,,. .,,. .WWWWWW:' 'XXXXXXXXX'
'''' '''''' ''''''''''''''''\'''' :XXXX,XXXX: .WWWWWWW' ':XXXXX:'
\ 'XXXXXXXXX' WWWWWW' 'XXX'
':XXXXX:' WWWWW' ':'
'XXX' WWWW.
':' 'WWWWW,
'' ''

Examples - Art

Examples - Fractals

Examples - Visualization

Examples – CAD, CAM

Examples - Movies

o Definition (ISO)
o Method and Technologies for converting data to and
from graphics devices via a computer
o Computer Graphics is the most versatile and powerful
means of communication between a computer and a
human being.
o A picture is worth than thousand words.

Subject of Computer Graphics
Domain: generative picture picture

computer graphics analysis processing
Input: formal visual visual

description presentation presentation
Output visual formal visual

presentation description presentation
Objects: lines, pixels, generated or scanned

area, texts, scanned pictures picture
or set of objects
Purpose: picture pattern analysis, picture

generation structure analysis, enhancement
scene analysis

Computer Graphics
Computer
Generative Computer Graphics (GCG)
Graphics
Picture Analysis
Image Processing (IP)
Picture Processing
Picture Synthesis
GCG
Model Picture
IP
Picture Analysis

History
o 1950 - simple pictures on CRT, Whirlwind Computer (MIT)

o Mid ‘50s – first light pen (SAGE System)
o 1963 -“Sketchpad”, Ivan E. Shuterland
o Mid ’60s - heavy research: MIT, General Motors, Bell
Laboratories, Lockheed Aircraft
o Late ’60s heavy research: University of Utah
o 1974 – technology threshold
o Late ’70s - economic raster graphics
o Early ’80s - microprocessor graphics
o Late ’80s - photorealism
o ’90s - graphics portability: Web formats, databases, GUI,
Virtual space modeling

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
3. Graphics Devices
o Output device
n Graphics diplay, printer, plotter,etc.
o Input device
n Mouse, lighth pen, track ball, etc.
n Graphics console, graphics tablet, head mounted display,
etc.

3.1 Graphics Display
Typical refresh display device
…
… (Display commands) Interface to
MOVE host computer
10
15
(interaction data)
LINE Display
100 processor
25
CHAR
LU CRT
CY
LINE
… Stylus
…
JMP
Refresh buffer memory Alphanumeric keyboard Data tablet

Typical vector storage tube device
Display
processor
CRT
Vertical and
Horizontal cursor
thumbwheels
Keyboard

Raster graphics display
Display Keyboard
00000000000000000000000001000000
processor Data input
00000000000000000000000001000000
00000000000000000000000111110000
00000000011000000001111111111111
00000000111100000000000111110000
00000011111111000000000001000000 CRT
00001111111111110000000001000000
00111111111111111100000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00011111111111111000000000000000
00000000000000000000000000000000
Bitmap refresh buffer

3.2 Plotter

3.3 Logical Input Devices
o Input Graphics Device
n Logical
locator, stroke, string, valuator, choice, pick
n Physical
mouse, trackball, joystick, scanner, keyboard, etc
o Logical Input Devices:

n LOCATOR: specifies a coordinate position (x, y)
n STROKE: specifies a series of coordinate position
n STRING: specifies text input
n VALUATOR: specifies scalar values
n CHOICE: selects menu options
n PICK: selects picture components

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
4. Application Data Modeling
4.1 Object Hierarchy
o geometric data
o non-geometric data
A’ B’’ C’ B’’ B’
A’’ A’
A B C ……

Application Data Modeling
Database
OBJ
F1 F2 … Fk
E1 E2 … En … Em
V1 V2 … Vr

GIS - Mapping

GIS – Vector Data

GIS – Raster Data

GIS – Data Primitives
Graphics entity: Vector data: Raster data:
Point (x1,y1)
- a pair of x and y
coordinates
vertex
Line
- a sequence of points
Node
Polygon
- a closed set of lines

GIS – Relational database
Spatial Attributes
Descriptive Attributes

4.2 Geometric Modeling
o Definition
o A collection of methods to define geometric and
topological characteristics of an object
o Usual geometric models

o wireframe model
o surface model
o solid model

Wireframe Model
o Primitives: points and lines
o Applications: 2D CAD/CAM, Drafting
P4 P3
P2
P1
P7
P8
P5 P6
Simple and efficient,

but ambiguous

Surface Model
o Primitives: points and lines (sometimes patches)
o Applications: Representation of sculptured surfaces
s
t
Accurate representation of surface,

but cannot represent a true solid object (inside/outside)

Solid Object Modeling
• Shading and hidden line removal
• Mass properties calculation
• Interference test
Solid
Constructive Solid Geometry (CSG) Boundary Representation (BRep)

Swept Volume Generation
Z Z
sweep
sweep
X
Y

Object Decomposition

Octree Representation

Geometric Modeling System
Input subsystem Core representation subsystem
CSG
Based
CSG
Sweep Spatial
Based Decomp.
B-Rep.
B-Rep.
Based

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
5. Graphics Systems
o Definition:
o Interface between application software and graphics
hardware system
o Fundamentals
o Output primitives
o Primitive aspects
o Primitive attributes
o Output model
o Coordinate systems and clipping
o Input primitives
o Input model
o Storage

Graphics Systems - Requirements
o Consist of input subroutines and output subroutines

o Accept input data and commands from user
o Convert internal representations into external pictures
o Graphics kernel assures
n Application portability
o Device independence
o Language independence
o Computer independence
o Programmer independence
n Application flexibility

Graphics Systems - Examples
o Core - 1977
o GKS (Graphical Kernel System) - 1985
o X-Window - 1986
o GKS-3D - 1988
o PHIGS (Programmers Hierarchical Interface Graphics
System) - 1989
o CGI (device interface)
o CGM (metafile)
o CGRM (Computer Graphics Reference Model) - 1992
o IGES (Initial Graphics Exchange Specification) - 1980
o OpenGL (Open Graphics Library) - 1992
o DirectX
See CGI Historical Timeline, http://accad.osu.edu/~waynec/history/timeline.html

Roles in Graphics
Graphics standard
Graphics Sys specification
implementors
Implemented graphics
system
Application
programmers
Graphics applications
Interactive graphics
Operators applications

Layered functionality model
High Speed Interfaces
Application
Application/Graphics System Interface
Graphics System
Front End
DI/DD Interface
(Device Independent/Device Dependent)
Graphics System
Back End
Operating System Interface
Operating
System
Low Bandwidth Communications Link
Device Software (only present for “intelligent” devices)
Device Hardware (hardware functionality)

Interface of Graphics System
Application program
Graphics system
Operating system
Input and Graphics

Metafiles
output devices hardware

Computer Graphics Reference Model
Application Level Block (1271.3, 56.2, 1472.45, 75.82)
Line (1271.3, 56.2, 1472.45, 56.2)

Constructive Level … Line (…)
Virtual Level Line (0.85, 0.15, 0.87, 0.15)

…
Visualization Level Line (0.85, 0.15, 0.75, 0.15)
Logical Level Move (0.85, 0.15), Line (0.75, 0.15)
Realization Level Draw pixels, Get user inputs
Operator

CGRM on the GKS-3D workstations
Constructive Level
Virtual Level

GKS Structure
Application Program
Graphics Kernel
Operating System
Graphics Other
Resources Resources

OpenGL
o API (Application Programmer Interface) to interactive rendering 2D and
3D vector graphics
o Silicon Graphics Inc. (SGI) started to develop OpenGL in 1991, and
released it in 1992
o State machines
o Client-server model
o 250 distinct commands
o Object specification + image generation
o Simple primitives: points, lines, polygons
(pixels, images, bitmaps)
o 3D rendering
o Reference: www.opengl.org/

Graphics pipeline

OpenGL Levels
Application Program
OpenGL Motif
widget or similar GLUT
GLU
GLX, CGL, WGL
X, Win32, Mac OS GL
Software and/or Hardware

OpenGL- Related Libraries
o Window tasks
For portability, there are
o User input no commands for these
o Complex shapes
o OpenGL Utility Library (GLU)
o Window system support
libraries: GLX / WGL / CGL
o OpenGL Utility Toolkit (GLUT)
o OpenGL User Interface (GLUI)
o OpenInventor

o More than 250 functions similar to those of the
programming language C
o Language independent functions
o Language bindings:
n JavaScript: WebGL (based on OpenGL ES 2.0 for 3D rendering
within the web browsers). It uses HTML5 canvas element and is
accessed through DOM (Document Object Model) interface.
n C bindings:
n WGL (Microsoft Windows interface to OpenGL),
n GLX (X11 interface to OpenGL)

n CGL (Mac OS X interface to OenGL)
n C binding provided by iOS

n Java and C bindings provided by Android

OpenGL in Computer Games

DirectX
o Direct control of graphics hardware (1995, Windows
Games SDK)
o Direct control of keyboard, mouse, video cards, and
sound devices
Application program
Direct sound
Direct X
Direct input
Windows API Direct draw
Direct 3D
……..
Windows system

6. Future Research Areas
o Graphics accelerators
o parallel processing
o Geometric modeling
o physically-based modeling
o level of detail
o Motion control / synthesis
o kinematics / dynamics
o motion capture / modification
o Rendering
o photo-realism
o real-time
o image-based rendering
o non-photorealistic rendering
o Scientific visualization
o Geometric algorithms
o User interface

1. What are the main components of the Programmer’s Model for the
Interactive Computer Graphics?
2. What is the main role of the display processor? Is it a computer? Does
it execute a graphics application?
3. What is the difference between a logical and a physical input graphics
device?
4. Explain the status of graphics objects as graphics model, application
model, data structure, graphics file, and graphics database. What is
the relationship and the flow between these states.
5. What graphics operations can be supported by the wireframe model?
answer.
6. What graphics operations can be supported by the surface model?
answer.

7. What graphics operations can be supported by the CSG model? Does it
support the computation of areas and volumes? What about light
8. What graphics operations can be supported by the BREP model? Does
it support the computation of areas and volumes? What about light
9. Exemplify the CSG model on the 3D object of a table and a glass.
10. Exemplify the BREP model on the 3D object of a table.
11. Exemplify and explain the Octree model on the 3D object of a sphere.
12. Explain the concept of the graphics application portability. Give some
examples.
13. Explain the concept of graphics application flexibility.
14. Why the Application and the Graphics System are separate layers in
the graphics system functionality model? Why this is a requirement?

15. Explain the layers of the CGRM (Computer Graphics Reference Model),
and exemplify the transformations for drawing a triangle ABC.
16. What is the main role of the Virtual Level? What coordinate system is
used to represent the scene of objects?
17. Why the Visualization, Logical, and Realization levels are different on
various workstations? Give some examples.
18. Explain the differences between Application Oriented and Language
Oriented levels, in the GKS Functional Structure. Why the Graphics
Kernel is separated by the Language Oriented level?
19. Describe the main features of the OpenGL technology.
20. What are the main differences between OpenGL and DirectX.
21. Explain the reason for the direct control within the DirectX technology.
22. Explain the concept of mathematically modeling versus physically
modeling.
23. Explain the concept of LOD (Level of Details) in computer graphics.

Standards of Graphics Systems
Contents
1. Core
2. GKS
1. Functional levels
2. Graphics primitives
3. Coordinate systems
4. Window-viewport transformations
5. Graphics transformations
6. Graphics segments
3. Conclusion

CORE Standard
1. 3D Core Graphics System
1977, ACM SIGGRAPH (Special Interest Group on
Graphics)
2. Six types of graphics output primitives:

marker, polymarker, line, polyline, polygon, text
3. Current position (CP) P0

e.g. move x0,y0
CP
line ∆x1, ∆y1
P1
4. Two input modes:

Sample
Event

CORE Standard
4. Graphics model stores the clipped part of a graphical
segment.
Graphics model
5. Space dimension
CORE: 3D; GKS: 2D, 3D
6. Coordinate system
Application program transforms NDC to WC
GKS works on real world coordinate
7. Device control
CORE identifies the output device
GKS: workstations with associated list of attributes and
window/viewport pair.
GKS
o Graphical Kernel System
1984 (’85) GKS 2D
1988 GKS-3D
o Main concepts in GKS:

o represents and generates graphics pictures
o graphics presentation on particular workstations
o control the workstations
o control the inputs
o graphics segments
o metafiles

GKS – Functional levels
Application Program
Graphics Kernel
Operating System
Graphics Other
Resources Resources

CGRM on the GKS workstations
Constructive Level
Virtual Level

o Graphics primitive (type, attribute)
o Graphics attributes
local
global
o GKS primitives:
1. Polyline
2. Polymarker
3. Text
4. Fill-area
5. Cel-array
6. GDP (Generalized Drawing Primitive)

1. Polyline
P0 P2
P0, P1, P2,…Pn
Pn
Attributes: P1
type of line: hidden, solid, dot, line-dot

width:
color: p x R + q x G + s x B
2. Polymarker
Attributes:
type: . + x * o
dimension: * * *

3. Text
Attributes:
type: Roman Duplex, Roman Complex, Italic, Gothic

text precision: string, character, stroke TEXT
height:
direction of characters: horizontal, vertical
expansion
direction of text: right, left, up, down Text txeT T t

e x
x e
t T

justify the text: left, right, center
Text
Text
4. Fill-area
Text
5. Cell-array

6. Generalized Drawing Primitives
Circle
Line
Interpolation Curves (Bezier, Hermite, B-Spline, etc).
…

Coordinate systems in GKS
o World Coordinates (WC)
o Normalized Device Coordinates (NDC)
o Physical Device Coordinates (PDC)
Application 1 Graphics 3 Graphics

Program Model Image
World Coordinates Normalized Device Physical Device

Coordinates Coordinates
Line 107.5,235.7 Line 0.35,0.71
(m x m) [0,1] x [0,1]
1. visualization and normalization transformations

scales parts of a picture from window (WC)
controls the placement into viewport (NDC)
2. segment transformations 2 x 3 matrix transformations
3. workstation transformations

Transformation for a raster device
window
viewport
y y (1,1)
World Normalized
20
coordinate device
system coordinate
system
30 x x
Window: rectangular area of interest defined by the world

coordinates within the projection plane application
space.
Viewport: rectangular area of interest within the normalized Screen driver
space (virtual and normalized screen). pixels
xPixel = (xResolution –1) *

(ViewportXmin + (ViewportXmax – ViewportXmin) *
(X – WindowXmin) / (WindowXmax – WindowXmin)) Plotter device driver
inches
yPixel = (yResolution –1) *
(ViewportYmin + (ViewportYmax – ViewportYmin) *
(Y – WindowYmin) / (WindowYmax – WindowYmin))

y
o Group of primitives processed as a Normalized gear tooth
1,0
graphics unit
o Segment parameters: 0,8
o tx, ty – translation parameters
o sx, sy – scale parameters
o a – orientation angle
0,2
o visibility
o priority
0,2 0,6 x
o Common attributes
y
Gear
o Common graphics transformations
o Graphics modeling
o Defined in NDC R
o Instantiated in application program

in WC x

Gear
Rotate Rotate Rotate Rotate

Circle
0 12 24 348
Data
Translat
e
Scale
Tooth
Data

y
o Segment definition: Normalized gear tooth
1,0
float Xtooth[6], Ytooth[6];
/* initialize the Tooth structure */ 0,8
OPEN_SEGMENT(Tooth)
SET_POLYLINE_INDEX(Default);
POLYLINE(6, Xtooth, Ytooth);
CLOSE_SEGMENT;
0,2
o Segment use:
...
SET_TRANSFORMATION_MATRIX(Matrix1, … 0,2 0,6 x
Scale by R*COS(6), -R*SIN(6) …); y
... Gear
OPEN_SEGMENT(Gear)
for(j =1; j <30; j++){
Angle = j * 12;
R
INSERT_SEGMENT(Tooth, Matrix1);
/* compute the complex transformation matrix */
ACCUMULATE_TRANSFORMATION_MATRIX(Matrix1,
… rotate by Angle…); x
}
CLOSE_SEGMENT;

Graphics transformations in GKS
Window/
Vieport
Transf. Workstation
Primitives Transformed Transf.
. v Primitives
. w i v
i e TP1 .. TPn w i
n w i e
Segment d p n w
control o o d p
w r Graphics
. Segment Memory o o
. t w r
t
S1 .. Sm
State
Attributes
...
Segment transformations
WC NDC PDC

Graphics devices in GKS
o Output
o Input
o Input/Output
o WISS (Workstation Independent Segment Storage)
o MO (Metafile Output)
o MI (Metafile Input)

Graphical output devices
o Hardcopy device:
dot matrix printer
pen plotter
desk-top plotter
electrostatic plotter
laser printer
ink-jet printer
thermal transfer printer
o Display device:
monochrome and color CRT (Cathode Ray
direct-view storage tube (DVST)
liquid-crystal display (LCD)
plasma panel
electroluminescent display (ELD)

Input devices
Locator
Valuator
Choice
String
Pick
Stroke
o Physical devices:
pick: light-pen
string: keyboard

Input modes in GKS
Application System
program
1. Request mode Maintain

state
call
Call
Data input
function
return Get
data
2. Sample mode
call
Call Maintain Data input
function data
return

Input modes in GKS
3. Event mode
Application System
program
Data input
call
Wait for Wait Queue
event
event state data
return
call FIFO
Get Maintain
data data
return
Data
queue

o Generate (render) a two-dimensional image, provided with a
virtual camera, three-dimensional objects, light sources,
shading equations, textures, etc.
o Consists of several stages, and the speed is determined by the

slowest stage

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Evolution of graphics pipelines (GPU)
o Fixed-Function pipeline (1992 – 2001)
o Configurable via parameters
o Cannot change the algorithms (e.g. Gouraud or Phong shading)
o OpenGL 1, Direct3D 2
o Hybrid pipeline (2001 – 2009)

o Shaders (HLSL/Cg – Microsoft/NVIDIA and GLSL - OpenGL)
o Fixed and programmable features co-exist
o OpenGL 1.4, Direct3D 8
o Programmable pipeline (2009 – present)

o No more fixed functions
o OpenGL 3.2, Direct3D 10, CUDA/OpenCL

Rendering strategies
Rasterization Ray tracing
foreach triangle T{ foreach pixel p(x,y){

identify pixels p(x,y) intersect ray through pixel p
covered by T; with objects;
color(x,y) = shaded value color(x,y) = compute_shade(
} visible point)
}

Rasterization vs Ray Tracing

o Immediate-mode (IM)
o The framework doesn’t store anything
o The application directly draws to the container element
o The management of the drawn objects is the task of the
application
o Offers control and flexibility
o Retained-mode (RM)
o The scene (lines, shapes, images,…) is kept in memory
o The actual drawing is performed once, using the stored model
o The application simply adds and removes drawing primitives
o Offers abstraction

Immediate-mode Retained-mode
Application
Update
Application Build scene
Drawing
commands Scene Graphics library
Update
Graphics library Drawing
commands Scene
Display
Display

Real-time rendering pipeline
1. Application
n runs on general-purpose CPUs.
2. Geometry processing
Application
n operations such as transformations, Command stream
projections, etc.
n computes what is to be drawn, how it Geometry processing
should be drawn, and where it should be Transformed geometry
drawn
n typically performed on a graphics Rasterization
processing unit (GPU) Fragments
3. Rasterization Fragment processing

n rasterize all the primitives Framebuffer image

4. Fragment processing
n draws (renders) an image

Rendering speed
o Update rate of images
o Expressed in:
n frames per second (fps) - the number of images rendered per
second
n Hertz(Hz) - the frequency of update
o Depends on the complexity of the computations

o Determined by the slowest of the pipeline stages

Application stage
o Send rendering primitives (points, lines,
triangles) to the geometry stage
o Deals with collision detection, AI, etc.
Application
o Takes care of input Command stream
n keyboard Geometry processing

n mouse
n head-mounted helmet, etc.. Rasterization
Fragments
Fragment processing
Framebuffer image

Geometry stage
o Per-polygon and Per-vertex operations
o Functional stages
n model and view transform Application
Command stream
n vertex shading
n projection Geometry processing
n clipping
Rasterization
n screen mapping
Fragments
Fragment processing
Framebuffer image

Model and view transform
o Each 3D model is transformed to
different coordinate systems
n Local (model) coordinates / model space
Application
n World coordinates / world space Command stream
o Model transformation - vertices and Geometry processing

normal vectors Transformed geometry
o World space - unique, all models exist in Rasterization

the same space Fragments
Fragment processing
Framebuffer image

View transformation
o The position of the visualization camera
is specified in world coordinates
o Has a direction, which aims the camera
Application
o To make the projection and clipping Command stream
easier, the camera and all the 3D models

Geometry processing
are transformed with the view
transformation
o View transformation - place the camera Rasterization
at the origin and make it look toward the Fragments
direction of the negative z-axis

Fragment processing
Framebuffer image

View transformation
World space Camera space
wy cz
wz cx

Vertex shading
o To produce a realistic image define
materials and lights
o Shading - the operation of determining
Application
the effect of a light on a material Command stream
o Vertex shading results (colors, vectors,

Geometry processing
texture coordinates, etc.) are sent to the
rasterization stage (to be interpolated)
o Shading computations can happen in Rasterization
world space or camera space Fragments
Fragment processing
Framebuffer image

Projections
o Transforms the view volume into a unit
cube - canonical view volume
o Can be defined between (−1, −1, −1)
Application
and (1,1,1) or (0, 0, 0) and (1,1,1) Command stream
o Most commonly used projections

Geometry processing
n orthographic (parallel) projection Transformed geometry
n perspective projection Rasterization

o After projection the 3D models are in Fragments
normalized device coordinates.

Fragment processing
Framebuffer image

Projections
Orthographic projection Perspective projection

Clipping
o Pass to the rasterization step only the
primitives which are wholly or partially
inside the view volume
Application
o Primitives that are completely inside Command stream
- pass to the next stage as they are

Geometry processing
o Primitives that are entirely outside Transformed geometry
- do not pass them further Rasterization

o Primitives that are partially inside Fragments
- clip them and pass to the next stage Fragment processing

Framebuffer image

Clipping
y y
z z

Screen mapping
o The x- and y-coordinates of each primitive
are transformed into screen coordinates
o Screen coordinates together with the z-
coordinates are also called window Application
coordinates Command stream
o The z-coordinate is not affected by this Geometry processing

mapping Transformed geometry
Rasterization
Fragments
Fragment processing
Framebuffer image

Screen mapping
(x2, y2)
z
(x1, y1)

Rasterization stage
o Given a primitive (described by the vertex
coordinates, color and texture information)
convert it into a set of fragments
o Fragment data Application
Command stream
n raster position
n depth (z-value) Geometry processing
n interpolated attributes (color, texture
coordinates, etc.) Rasterization
Fragments
n stencil
n alpha Fragment processing
Framebuffer image

Example of rasterization

Fragment processing
o Process each fragment from the
rasterization process into a set of colors and
a single depth value
o Scissor test - discard fragments outside of a Application
certain rectangular portion of the screen Command stream
o Stencil test - test the fragment's stencil Geometry processing

value against the value in the current stencil Transformed geometry
buffer; if the test fails, the fragment is
culled Rasterization
o Depth test - test the depth of the current Fragments
fragment with the existing depth; if the test

passes update the depth buffer Fragment processing
Framebuffer image
o Blending - combine the fragment’s color with
the existing color in the frame buffer

Fragment processing

Coordinates systems

Graphics pipeline

Basic graphics pipeline

1. What are the main goals of a graphics standard. Exemplify by the
CORE standard.
2. Explain the functional levels in the GKS Graphics System. Why the
Application Program accesses the Kernel by other two levels? Why the
Operating System separates the functional levels and the graphics
resources?
3. What is the difference between the world coordinates, normalized
device coordinates, and physical device coordinates? Why the graphics
operations use normalized device coordinates?
4. Explain the differences between the concepts of window and viewport.
5. Explain the Request input mode in GKS. Exemplify a practical use case.
6. Explain the Sample input mode in GKS. Exemplify a practical use case.
7. Explain the Event input mode in GKS. Exemplify a practical use case.
8. Exemplify the transformation of a cube along the graphics rendering
pipeline. Where and why the system may compute the shadows?

9. Where and why the system may remove the hidden parts of the
objects, along the graphics pipeline?
10. What space and coordinate system are used to rasterize the graphics
model?
11. Explain the motivation for the design and development of the graphics
processing units (i.e. GPU).
12. Describe the trend in the evolution of GPUs. What are the main steps?
13. Explain the concept of the rendering strategy. Exemplify the
rasterization and the ray tracing strategies.
14. Explain the concept of the rendering mode. Exemplify the immediate
and the retained modes.
15. Describe the concept of real-time rendering pipeline. Exemplify for a
cube the passing throughout the phases of Application, Geometry
processing, Rasterization, and Fragment processing.

18. Explain why the initial transformation of the 3D model is performed
within the Local coordinates system and then, in the World coordinate
system.
19. Explain what means the view transformation.
20. What means shading operations? Why the shading is computed
regarding the vertex?
21. Explain why the vertex shading computation can be achieved both in
the world space and in the camera space.
22. Explain the rasterization for the following vector primitives given by
vertices: point A(x,y,z), line (A(x,y,z), B(x,y,z)), polygon (V1(x,y,z),
V2(x,y,z), …, Vn(x,y,z)).
23. Exemplify the fragment data for the rasterized vector primitives: point
A(x,y,z), line (A(x,y,z), B(x,y,z)), polygon (V1(x,y,z), V2(x,y,z), …,
Vn(x,y,z)).

Graphical Devices
Contents
1. Output devices
o Hardcopy technology
o Display technology
o Raster system architectures
2. Input devices

Application
Data
Program System
Structure

(operators)
o Graphics Systems
o Graphics Devices
Graphical device types
o Output device
n Graphics display, printer, plotter etc.
o Input device
o Logical
n locator, stroke, string, valuator, choice, pick
o Physical
n mouse, trackball, joystick, scanner, keyboard, etc
n Graphics console, graphics tablet, head mounted display, etc.

Device components
o Input Output Processor
o Communicates with CPU
o Scan converts the output primitives
o Refreshing screen
o Interfacing with interactive input devices
o Raster operations
o Character generation
o Additional functions
CPU IOP Display
Input Hard Copy

Output devices
o pen plotter
o desk-top plotter
o laser printer
o ink-jet printer
o plasma panel
o additional display processor

Dot matrix printer
o Raster output device

o Requires scan conversion of vector images for printing
o Head of pins
o Each pin is individually fired
o Bw and colored ribbons

Pen plotter
o Flatbed plotter
Paper held down on the table
Electrostatic charge
Vacuum
drum
Stretch tightly
Pen
Drawing by bw or colors
Knife blade for scribing
Light source for exposing
photographic negatives
o Drum plotter
pen carriage
Pen plotters include a
microcontroller
o Accepts graphics commands:
draw line, move, draw circle,
etc.
o Decomposes the output
primitives into incremental pen
movements:
∆x, ∆y, z, ∆u etc.
paper flat band

Electrostatic plotter
1. The plotter places a negative charge in parts that are to be black
2. Flows positively charged black toner over the paper
3. Toner particles adhere to the paper
Color plotter
Multiple passes for fundamental colors
Colors: black, cyan, magenta, and yellow toners
One pass, multiple heads
Electric contacts
Bath of suspended
toner particles
Paper
paper movement

Laser printer
1. Drum is positively charged
2. Laser beam scans the rotated drum
3. Areas hit by the laser beam lose the charge
4. Positive charge remains only on the parts that are to be black
5. Negative powdered toner adheres to the positive areas on the drum
6. The toner is transfered onto the blank paper
7. Color xerography repeats the process for each primary color
Selenium coated
drum
Deflection
Laser system
Laser beam
Scan line

Ink-jet printer
o Primary colors: cyan, magenta, yellow
o Ink jets onto the head (carriage)
o Some ink-jet printers accept video input
Paper wrapped
around drum
Track
Ink jets
carriage

Thermal transfer printers
o Heating nibs transfer pigments from colored wax paper to plain paper
o Wax paper and plain paper are drawn together over a strip of heating
nibs
o Color printing: wax paper is on a roll of alternating cyan, magenta,
yellow, and black strips, each of a length egual to the paper size
o Time: 1 min / image
o Usage:
o barcode labels
o cloth labels (e.g. shirt size)
o Printing plastic labels

Output devices
o pen plotter
o desk-top plotter
o laser printer
o ink-jet printer
o plasma panel

Cathode Ray Tube (CRT)
Horizontal
Focusing Deflection
System Plate
Heating
Filament
Electron Beam
Cathode
Control Accelerating Vertical
Grid System Deflection
Plate
Phosphor-
Coated
Color: Screen
Beam Penetration
Shadow Mask

Color CRT (Shadow Mask)
Shadow Mask
Electron Gun
Screen
Phosphor dot pattern

Delta electron gun arrangement

In-line electron gun arrangement
Phosphor pattern of stripped picture tube
Phosphor
Green
beam Red beam
Blue Slotted shadow

beam mask

o Persistence
How long a phosphor continues to emit light after the electron beam is
removed (less than 1/10 of its original intensity)
Gives: Refresh rate, image modification rate, animation
Issue: Picture complexity
o Sharpness
energy
1 spot size inter-dot distance dot size, spot
dot pitch size
0.5 ~ 0.6
distance
electron beam

o Resolution
1 / spot size
# of points / scan line
# of lines / frame
o Addressability
1 / inter-dot distance
o Aspect ratio
horizontal to vertical points to produce equal length of lines in both direction
on screen, e.g. 3/4 = 0.75

Refresh CRT
o Refresh memory
1. Vector image: graphics commands (display file)
Issue: the size of the refresh memory limits the complexity of the
picture
2. Raster graphics: bitmap matrix (frame buffer)
Input
CPU DPU CRT
Refresh
memory (Display file, frame buffer)

Direct View Storage Tube (DVST)
Input
o Image persistance, flicker free
o Always delete and redraw the CPU DPU CRT
entire image
o High voltage to delete the
screen Refresh
memory
Flood Gun
Screen
Storage grid
Collector grid
Primary electron gun

Vector vs raster graphics
o Vector graphics
n Application software controls the graphics primitives: point, line, polyline
n Display processor builds the image as a sequence of vectors
n Limited image complexity
o Raster graphics
n Application software controls pixels in refresh buffer
n Display processor just refresh the screen
n No limited image complexity

Frame buffer – gray levels
Register DAC
1
Register
N
0 1 0 2N DAC
2
N=3 2N Levels

Color planes
Registers
0 DAC Blue
1 DAC Green
0 DAC Red
N=3 2N Levels
Red Green Blue

Black 0 0 0
Red 1 0 0
Green 0 1 0
Blue 0 0 1
Yellow 1 1 0
Cyan 0 1 1
Magenta 1 0 1
White 1 1 1

Color palette in Look-up tables
Look-up tables
W
2W intensity levels
2N at a time
1010
2N entries 10
W=4
0 1 0
2
2W DAC
N=3 2N levels

Liquid Crystal Displays (LCD)
o Most popular alternative to the CRT is the Liquid Crystal Display (LCD)
o Organic molecules
1. In the absence of external forces, tend to align themselves in crystalline structures. In
their unexcited or crystalline state the LCDs rotate the polarization of light by 90
degrees.
2. When an external force is applied they will rearrange themselves as if they were a
liquid. In the presence of an electric field, LCDs the small electrostatic charges of the
molecules align with the impinging E field.
o External force: heat (i.e. mood rings), electromagnetic field.
o The LCD's transition between crystalline and liquid states is a slow process.
Viewing
direction
Liquid-
Vertical Vertical Horizontal Horizontal Reflective
crystal
polarizer grid wires grid wires polarizer layer
layer

LCD – twisted nematic cells

LCD screen structure

Color TFT (Thin Film Transistor) LCD
o TFT (Thin Film Transistor) or Active Matrix LCD
n There is a transistor at each grid point
n Cause the crystals to change their state quickly
n Control the degree to which the state has been changed
n Hold the state until it changes
Color cell
Color Filter
Liquid Crystal
TFT

TFT
• VGA screens need

921,000 transistors
(640 x 480 x 3)
• 1024 x 768 needs

2,359,296 transistors
(1024 x 768 x 3)

Plasma display panel (PDP)
o Three layers
o Horizontal and vertical grid wires
o Glass plate with cells (neon bulbs, fluorescent tubes ). E.g. 50-125 cells / inch
o Bulb state
On: High-voltage discharge excites gas mixture (He, Xe).
It fires the bulb that glows. Low voltage sustains the state.
Remains on till an explicit command turns it off.
Off: bulbs do not glow. They are transparent.
o Turns on/off in less than 15 µs
o Does not need refresh buffer
o Flat and transpartent panel
o Upon relaxation UV light is emitted
o UV light excites phosphors
Viewing
direction
Vertical Glass plate Horizontal

grid wires with cells grid wires
(x address) (y address)

PDP Structure

Plasma display panel
o Promising for large format
displays
o Less efficient than CRTs
o Not as bright
o More power
o Large pixels (~1mm compared to
0.2mm for CRT)

Field Emission Display (FED)
o Works like a CRT with multiple
electron guns at each pixel
o Uses modest voltages applied to
sharp points to produce strong E
fields
o Reliable electrodes proven difficult
to produce
o Limited in size
o Thin but requires a vacuum

FED cell structure

Organic Light Emitting Diode (OLED)
o Function is similar to a semiconductor
LED
o Thin-film polymer construction
o Potentially simpler processing
o Transparent
o Flexible
o Can be vertically stacked
o Excellent brightness
o Efficient (low power/low voltage)
o Fast (< 1 µs)
o Can be made large or small
o Tend to breakdown

OLED structure

Over head projectors
o CRT projector
o LCD projector
o Digital Light Processing (DLP)

Head Mounted Display (HMD)
o Use two small screens placed just in
front of each eye
o The virtual objects are placed at 1-5
m in front of the user
o Resolutions greater than 1024x768
o Technology:
n LCD (Liquid Crystal Display) – for
commercial use
n CRT (Cathode Ray Tube) –
professional use, high resolution
HMD - examples
o Controlled by voice and head movement

o Operations: navigation over Internet, video call, listen music,
write notices, etc.
o Cel mai mic sistem utilizeaza ochelari

conectati la un monitor capabil sa
afiseze stereo
o Rata de reimprospatare este dubla fata
de cea normala (120/140Hz)
o Sunt transmise imagini alternative
decalate (efectul de paralaxa)
o Necesita utilizarea ochelarilor
o Un singur utilizator are controlul
asupra scenei virtuale prin intermediul
tracker-ului
o Utilizatorul trebuie sa se gaseasca in
raza de actiune a transmitatorului IR
(1.5- 3,5 m)
Binocular Omni-Orientation Monitor (BOOM)
o Head-coupled stereoscopic display

device
o Screens and optical system are
housed in a box that is attached to
a multi-link arm
o Sensors in the links of the arm that
holds the box

DSD – Desk Supported Display
o Pasive
n Nu urmaresc pozitia capului utilizatorului
o Active
n Urmaresc capul utilizatorului si ajusteaza in timp real coloana intercalata pe
baza pozitiei utilizatorului
o Separarea coloanelor se face folosind o masca prismatica amplasata
pe display
Display-uri de mari dimensiuni
o Display grafic care afiseaza o scena virtuala destinata
vizualizarii simultane a mai multor utilizatori amplasati in
vecinatatea display-ului
n Imagini monoscopice
n Imagini stereoscopice
o Bazate pe monitoare
o Bazate pe proiectoare
o Alternativa este folosirea
monitoarelor multiple
amplasate adiacent
o Probleme apar la
simularea la viteze mari
cand apar discontinuitati
intre imaginile de pe
monitoarele adiacente
o LVD (Large Wall Display)

o Reprezinta solutia optima pentru a permite mai multor utilizatori sa
participe la o simulare de RV
o Un proiector CRT foloseste 3 tuburi R, G, B pentru o imagine de inalta
rezolutie (1280x1024) la 120 Hz
o La functionarea in mod stereo prin secventierea cadrului se imparte
numarul liniilor de scanare in 2, utilizatorul vazand o imagine stereo la 60
Hz
o Necesita tub CRT special cu timp de persistenta scazut, altfel efectul
stereo este pierdut prin afisarea simultana a imaginilor
o Dezavantaje
n Cost ridicat
n Inabilitate in proiectarea imaginilor stralucitoare (200-300 lumeni)
o Proiecteaza scena 3D pe un ecran

orizontal
o Utilizatori folosind ochelari (active
glasses) pot vizualiza scena 3D
o Obiectele inalte vor fi decupate in
partea opusa utilizatorului
o Alternativa – utilizarea ecranului in

forma de L
o 2 proiectoare pentru cele 2 suprafete
o Dimensune marita a scenei vizualizate
o Imaginea poate fi distorsionata pentru
utilizatorii secundari (fara tracker)
Workbench

Cave Automatic Virtual Environment (CAVE)

Output devices
o pen plotter
o desk-top plotter
o laser printer
o ink-jet printer
o plasma panel

Simple Raster Display System with Dual Port Memory
o Frame buffer – dedicated portion of the system memory

o Dual port memory
o Video controller accesses directly the system memory
CPU Peripheral
devices
System bus
System Frame Video

Monitor

Simple Raster Display System
o Frame buffer – anywhere in the system memory
o Video controler accesses the memory through the system bus
CPU Peripheral
devices
System bus
System Video
Monitor
memory controller

Raster Display System with Peripheral Display Processor
o System memory:
n Application program
n Graphics package
n Operating system Peripheral
CPU
devices
o Display processor:
n Raster operations
n Scan conversion
n Double-buffering
n I/O transfer on the System bus
system bus
Display System
processor memory
Display
Frame Video Monitor
processor
buffer controller
memory

Raster Display System with Integrated Display Processor
o Cache memories
o Video RAM (VRAM)
(read out all pixels on a scan
line in one cycle)
Display Peripheral
CPU processor devices
System bus
System Frame Video Monitor


Input devices
Locator
Valuator
Choice
String
Pick
Stroke
o Physical devices:
pick: light-pen
string: keyboard

Keyboard
o Text

Mouse
o Stroke
o a) Mouse with ball.

o b) Disk with asymmetrical cuttings,
1 – rotation sense from left to right,
2 – rotation sense from right to left.
o c) Optical mouse

Track-ball
o Stroke

Joystick
o Locator

Graphic tablet
o Locator
o Graphic Tablet
a) Active tablet, passive pen.
b) Acoustic active pen, tablet with
microphones.

Light pen
o Pick

Potentiometer, Dials
o Value

Image scanner
o Bitmap

Buttons
o Choice

3D Input device
o Location

Ring Mouse
o Optical trackpad ("Opto Touch
Wheel")
o Embedded 2.4GHz wireless model
for a communication to 10m
o The wearer uses the thumb to
navigate the cursor
o Can be charged by electric power by
USB
o It has as well left and right click
buttons

Haptic device
q 3-dimensional pen-style
haptic device that "makes it
possible for users to touch and
manipulate virtual objects
q 3D Touch-enabled Modeling for
Product Design
q The position and orientation of
the pen are tracked through
encoders in the robotic arm.
q Three degrees of force, in the
x, y and z, direction are achieved
through motors that apply
torques at each joint in the
robotic arm
ex. PHANTOM Desktop

Haptic device

Haptic device - glove
q Provides six degrees of

freedom positional tracking that
accurately measures translation
and rotation of the hand in three
dimensions.
q Includes a system of internal
sensors at joints and in muscles
to detect changes in pressure and
position.
q Glove with 16 sensors

(2 per finger + abduction).

1. Explain the following operations performed by the Input Output
Processor (IOP): scan conversion of the output primitives, refresh
screen, raster operations, and character generation. Give an example
for each operation.
2. Is the dot matrix printer a vector or raster device? Argument the
statement.
3. Is the pen plotter a vector or raster device? Argument the statement.
4. Why do you think the resolution of the electrostatic plotter can be
limited?
5. Is the laser printer a vector or raster device? Is the image composed of
vectors or pixels? Argument the statement.
6. Is the ink-jet printer a vector or raster device? Is the image composed
of vectors or pixels? Who could perform the scan conversion?
Argument the statement.
7. Is the Cathode Ray Tube (CRT) a vector or raster device? Is the image
composed of vectors or pixels? Who could perform the scan
conversion? Argument the statement.

8. What is the relationship between a phosphor dot, phosphor dot pattern
and a pixel, for a BW and color CRT device? What element decides the
maximum resolution of a CRT display device?
9. What are the differences between vector and raster graphics? Highlight
the differences in graphics models, images, output graphics devices,
file formats, image memory buffer, file formats, information
description, and object related semantics.
10. What is the differences between vector graphics model and raster
graphics model?
11. What is the differences between vector graphics image and raster
graphics image?
12. What is the differences between vector graphics device and raster
graphics device?
13. What could limit the resolution and dynamics of the LCD (Liquid Crystal
Displays) and TFT (Thin Film Transistor) LCD screens?
14. What limits the resolution and dynamics of the PDP (Plasma Display
Panel)?

15. Compare the following architectures: simple raster display system,
peripheral display processor, and integrated display processor.
Highlight the differences and advantages of each architecture?
16. What are the main differences between logical and physical input
devices? Give some examples.
17. How the mouse with ball detects the moving directions? Why the
optical mouse does not work on a glossy and shiny surface?
18. What are the similarity and difference between mouse and track-ball?
19. How the graphic tablet transforms the signal into position?
20. How the light pen transforms the signal into position?
21. What is the main difference between an input graphics device and a
haptic device?

Graphical Devices
Touch screen technology
o There are four main touchscreen technologies:
1. Resistive
2. Capacitive
3. Surface Acoustic Wave
4. Infrared
References
http://www.engineersgarage.com/articles/touchscreen-technology-
workinghnology

Resistive Touchscreen Technology



Surface Acoustic Wave Touchscreen

Infrared Touchscreen Technology

Plural Touch Technology
o Multi touch Applications technology are found in smart
phones like iPhone, Samsung Galaxy, Nokia N8, Nexus
S, Microsoft Touchtable, Apple’s iPad and many more.

ScanLine Conversion Algorithms
Contents
o Line scan conversion
o Transformation pipeline
o Line drawing algorithms
o Digital Differential Analyzer
o Bresenham Line Algorithm
o Midpoint line algorithm
o Antialiasing

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Pixel vicinity and continuity
8 neighbors 4 neighbors

Line drawing
var yt : real; ∆x, ∆y, xi, yi : integer; ∆x

for xi := 0 to ∆x do begin
yt := [∆y/∆x]*xi; ∆y
yi := trunc(yt+[1/2]);
display(xi,yi);
end;
Objective: avoid multiplication
y = mx, m = [∆y/ ∆x]

Line-drawing algorithms
y = mx + b y
b = y1 – mx1
m = (y2-y1)/(x2-x1) = ∆y/∆x
∆y = m∆x P2(x2,y2)
y2
Assumptions:
m>0 ∆y
X1 < x2
y1
P1(x1,y1)
x1 ∆x x2 x

DDA Algorithm
DDA = Digital Differential Analyzer
Basic formula: m>1 m=1

y
∆y = m∆x, m>0
xi+1 = xi + 1
yi+1 = yi + m

∆y = m∆x, 0<m<1
m<1
∆x = (1/m)∆y, 1<m

DDA Algorithm – two cases
∆y = m∆x, 0<m<1
∆x = (1/m)∆y, 1<m m>1
y m=1
Case 1: 0<m<1
Xi+1 = xi + 1
yi+1 = yi + m
Case 2: 1<m
yi+1 = yi + 1
xi+1 = xi + 1/m
m <1

DDA Algorithm – basic case
Assumption : 0 <m<1, x1<x2
procedure dda (x1, y1, x2, y2 : integer);

var
∆x, ∆y, k : integer;
x, y : real
begin
∆x := x2 - x1;
∆y := y2 - y1;
x := x1; y := y1;
display(x,y);
for k := 1 to ∆x do begin
x := x + 1;
y := y + [∆y/ ∆x];
display(round(x),round(y));
end { for k }
end; { dda }

Bresenham’s Line Algorithm
o Basic idea:
1. Find the closest integer coordinates to the actual line path
2. Use only integer arithmetic
3. Compute iteratively the next point, Pi+1=F(Pi)

Bresenham method – basic idea
o Basic approach: y
1. Compute a decision
variable di=f(Pi, di-1)
NE
2. Depending on the di value yi + 1
chose the next position E n
or NE
Q
Pi s
yi
E
xi xi + 1

Assumptions: 0<m≤1, xi<xj, i<j y
y = mx+b, yi = mxi , m = ∆y/∆x

NE
yi + 1
s = y-yi = m(xi+1)+b-yi n
n = yi+1-y=yi+1-m(xi+1)-b Q
Pi s
yi
k = s-n = 2m(xi+1)-2yi+2b-1 E
Let us consider di = k∆x = ∆x(s-n) x
xi xi + 1
di = ∆x(s-n) = 2∆y(xi+1)-2∆xyi+∆x(2b-1)
= 2∆yxi -2∆xyi +[2∆y+∆x(2b-1)]
= 2∆yxi -2∆xyi + Const
di = 2∆yxi -2∆xyi + Const
if di < 0 then E(xi+1,yi)
if di ≥ 0 then NE(xi+1,yi+1)

di = 2∆yxi -2∆xyi + Const y
di+1 = 2∆yxi+1 -2∆xyi+1 + Const
di+1- di = 2∆y(xi+1-xi)-2∆x(yi+1- yi) NE

di+1= di +2∆y-2∆x(yi+1- yi) yi + 1
n
if di < 0 then Pi+1 = E, and yi+1=yi
Q
otherwise Pi+1 = NE, and yi+1=yi+1 Pi s
yi
E
Therefore
di+1= di +2∆y if di < 0 x
di+1= di +2∆y-2∆x otherwise xi xi + 1
The first value of the decision variable:

d0 = 2∆yx1-2∆xy1+[2∆y+∆x(2b-1)]
y1 = (∆y/∆x)x1+b, ∆xy1= ∆yx1+b∆x

∆x(2b-1)= 2∆xy1- 2∆yx1- 2∆x
d0 = 2∆y-2∆x

Bresenham algorithm - pseudocode
procedure bres_line (x1, y1, x2, y2 : integer);
var ∆x, ∆y, x, y, d, incrE, incrNE : integer;
begin
∆x := x2 – x1;
∆y := y2 – y1;
d := 2* ∆y - ∆x;
incrE := 2* ∆y;
incrNE := 2*(∆y - ∆x);
x := x1; y := y1;
display(x,y);
if d<0 then begin
d := d + incrE;
x := x + 1;
end; { then begin }
else begin
d := d + incrNE;
y := y + 1;
x := x + 1;
end; { else begin }
display (x, y);
end { while x < x2 }
end; { bres_line}

NE
yi + 1
M F(x,y)=0
Q
yi
E
xi xi + 1

y= (∆y/∆x)x + n y
F(x,y)=x∆y-y∆x+n∆x
Considering a=∆y, b=-∆x, and c=n∆x NE

yi + 1
F(x,y)=ax+by+c=0, if (x,y) is on the line M F(x,y)=0
Q
yi
Q is closer to E
NE if F(xi+1, yi+1/2)<0
x
E if F(xi+1, yi+1/2)>0
xi xi + 1

F(xi+1, yi+1/2)=a(xi+1)+b(yi+1/2)+c
Let di=2F(xi+1, yi+1/2)=2a(xi+1)+b(2yi+1)+2c
Since a=∆y and b=-∆x,
di=2∆y(xi+1)-∆x(2yi+1)+2c
di+1=2F(xi+1+1, yi+1+1/2)= 2∆y(xi+1+1)-∆x(2yi+1+1)+2c
xi+1= xi+1
yi+1= yi+1, if di≥0
yi+1= yi otherwise
Therefore
di+1= 2∆y(xi+1)-∆x(2yi+1)+2c+2∆y-2∆x= di+2∆y-2∆x, if di≥0
di+1= di+2∆y, otherwise
d0=2F(x0+1, y0+1/2)= 2(∆yx0-∆xy0+c)+2∆y-2∆x= 2∆y-2∆x

Midpoint line algorithm - pseudocode
procedure mid_point (x1, y1, x2, y2,value : integer);
var ∆x, ∆y, incrE, incrNE, d, x, y : integer;
begin
∆x := x2 – x1;
∆y := y2 – y1;
d := 2* ∆y - ∆x;
incrE := 2* ∆y;
incrNE := 2*(∆y- ∆x);
x := x1; y := y1;
display(x,y);
if p < 0 then begin
p := p + incrE;
x := x + 1;
end; { then begin }
else begin
p := p + incrNE;
y := y + 1;
x := x + 1;
end; { else begin }
display(x,y);
end; { while x < x2 }
end; { mid_point }

o Basic Bresenham line algorithm is given for line in the first octant.
o To render a general line (A, B):
1. Transform the line (P1, P2) into the line (P1’, P2’) in the first
octant
2. Compute the raster line (P1’, P2’)
1. For each point P’
1. Compute point P for the initial line
2. Render point P
y
P2(x2,y2)
P2’(x2,y2)
P1(x1,y1)
P1’(x1,y1) P’

Exercises:
Render and explain the Bresenham algorithm transformations for the
following lines:
a. A(7, 5), B(15, 10)
b. A(15, 10), B(7, 5)
c. A(5, 7), B(10, 15)
d. A(10, 15), B(5, 7)
e. A(-5, 7), B(-10, 15)
f. A(-7, 5), B(-15, 10)
g. A(-15, 10), B(-7, 5)
h. A(-15, -10), B(-7, -5)
i. A(-5, -7), B(-10, -15)
j. A(7, -5), B(15, -10)
k. A(15, -10), B(7, -5)

Antialiasing
y
o Removing the stairstep
appearance of a line
o Staircase for raster effect
o Need some compensation in
line-drawing algorithm for the
raster effect

Antialiasing
o Jugged edges
o Small objects
unvisible, disturbed
o Textures
toothed edges

Antialiasing
o Supersampling
Postfiltering
o Area sampling
Prefiltering
o Stochastic sampling

Supersampling (Postfiltering)
o Increasing resolution

Area Sampling (Prefiltering)

Area Sampling - solutions
1. Unweighted area sampling

I = f(d)
o Intensity of a pixel decreases as the distance between the pixel center
and the edge increases
o A primitive does not influence the intensity of a pixel at all if there is no
intersection
o Equal areas contribute equal intensity
2. Weighted area sampling

I = f (∆A, d), weighting function, filter function
o The pixel represent a circular area larger than the square tile
o The primitive intersects the circular area
o The intersection area contributes to the intensity
e.g. Goupta-Sproull incremental method for antialiasing lines

Filters
o Box filter
o Cone filter

1. Why the integer arithmetic is used in graphics algorithms? Why it is
imposed in the scan conversion algorithms?
2. How the DDA algorithm works above the first bisection? Is it efficient?
3. Why in the Bresenham algorithm for a line the next pixel could be just
E and NE, rather than SE, S, SV, and N?
4. How does the Bresenham algorithm for a line work if the starting point
is another than the origin of the coordinate axes?
5. What are the advantages of the Midpoint line algorithm against the
Bresenham line algorithm?
6. Render and explain the Bresenham algorithm transformations for the
following lines AB: A(10, 15), B(5, 7); A(-5, 7), B(-10, 15); A(-7, 5), B(-15,
10); A(- 15, 10), B(-7, 5). For each case compute the global
transformation matrix.
7. Why the computation of the decision variable is faster than analytic
computation?

8. Explain why the Bresenham algorithm is faster or slower than the
Midpoint algorithm.
9. Explain how the supersampling approach may improve the quality of
graphics rendering? What is the relationship between object point and
pixel?
10. Explain why rasterization loses information about the real object?

Contents
o Circle scan conversion
o Circle drawing
o Circle drawing by 4 and 8 way symmetry
o Midpoint circle
n Basic algorithm
n Algorithm by integer arithmetic
n Algorithm by 2nd order differences

Circle Drawing
(x-xc)2 + (y-yc)2 = r2
y = yc ± sqrt((r2) - (x-xc)2) r
yc
xc
x = xc + r cosθ
y = yc + r sinθ
r
θ
yc
xc

Circle rendering by 4 and 8 way symmetry
y y
(-x, y) (x, y) (-x, y) (x, y)
(-y, x) (y, x)
x x
(-y, -x) (y, -x)
(-x, -y) (x, -y) (-x, -y) (x, -y)

public void circleSym4 (int xCenter, int yCenter, int radius, Color c)
{
int pix = c.getRGB();
int x, y, r2;
r2 = radius * radius;
raster.setPixel(pix, xCenter, yCenter + radius);
raster.setPixel(pix, xCenter, yCenter - radius);
for (x = 1; x <= radius; x++) {
y = (int) (Math.sqrt(r2 - x*x) + 0.5);
raster.setPixel(pix, xCenter + x, yCenter + y);
raster.setPixel(pix, xCenter + x, yCenter - y);
raster.setPixel(pix, xCenter - x, yCenter + y);
raster.setPixel(pix, xCenter - x, yCenter - y);
}
}

public void circleSym8 (int xCenter, raster.setPixel(
int yCenter, int radius, Color c) pix, xCenter + y, yCenter + x);
{ raster.setPixel(
int pix = c.getRGB(); pix, xCenter + y, yCenter - x);
int x, y, r2; raster.setPixel(
pix, xCenter - y, yCenter + x);
r2 = radius * radius; raster.setPixel(
raster.setPixel( pix, xCenter - y, yCenter - x);
pix, xCenter, yCenter + radius); x += 1;
raster.setPixel( y = (int) (Math.sqrt(r2 - x*x) + 0.5);
pix, xCenter, yCenter - radius); }
raster.setPixel( if (x == y) {
pix, xCenter + radius, yCenter); raster.setPixel(
raster.setPixel( pix, xCenter + x, yCenter + y);
pix, xCenter - radius, yCenter); raster.setPixel(
x = 1; pix, xCenter + x, yCenter - y);
y = (int) (Math.sqrt(r2 - 1) + 0.5); raster.setPixel(
while (x < y) { pix, xCenter - x, yCenter + y);
raster.setPixel( raster.setPixel(
pix, xCenter + x, yCenter + y); pix, xCenter - x, yCenter - y);
raster.setPixel( }
pix, xCenter + x, yCenter - y); }
raster.setPixel(
pix, xCenter - x, yCenter + y);
raster.setPixel(
pix, xCenter - x, yCenter - y);

Midpoint circle algorithm
x2 + y2 = R2
(xi +1, yi)
Let us consider F(x,y)= x2 + y2 - R2 (xi,yi)
E
F(x,y) > 0 for P(x,y) outside of the circle ME

(xi +1, yi-1/2) M
F(x,y) = 0 for P on the circle
SE
F(x,y) < 0 inside of the circle MSE
(xi +1, yi-1)
Therefore:
if F(M) < 0, next point P(xi+1,yi+1) = E(xi+1,yi)
otherwise next point P(xi+1,yi+1) = SE(xi+1,yi-1)

Midpoint circle algorithm - computation
Let us consider the decision variable:
di = F(xi+1, yi-1/2)=(xi+1)2 + (yi-1/2)2 - R2
di+1 = F(xi+1+1, yi+1-1/2)=(xi+2)2 + (yi+1-1/2)2 - R2
where xi+1 = xi + 1 y
if di < 0, yi+1= yi (0,R)
otherwise yi+1= yi-1
di+1 = di + 2xi+3, if di<0 x

The starting point (x0, y0) = (0, R)

d0 = F(x0+1, y0-1/2)=(0+1)2 + (R-1/2)2 - R2 = 5/4 - R

Midpoint circle algorithm - summary
Next point P(xi+1,yi+1):
xi+1 = xi + 1
yi+1= yi if di < 0,
yi-1 otherwise y
(0,R)
di+1 = di + 2xi+3, if di<0

x
Initial decision variable value:
d0 = F(0, R)= 5/4 - R

Midpoint circle algorithm - pseudocode
procedure MidpointCircle (radius,value : integer); Change the decision variable:
var D = d - 1/4
x,y : integer; d: real; d = D + 1/4
begin Initial value: D = 1 - radius
x := 0; { initialization } Equivalence decision in
y := radius; { 0, R } integer value domain:
d := 5/4 - radius; D < -1/4 Þ D < 0
while y > x do begin Computation of the new
if d < 0 then { select E } decision variable:
d := d + 2*x + 3; D := D + 2*x + 3
x := x + 1; D := D + 2(x-y) + 5
end
else begin { select SE } Conclusion:
d := d + 2*(x - y) + 5; 1. Compute initial value by:
x := x + 1; d=1-radius
y := y - 1; 2. All other formulas are
unchanged:
end
d<0
d=d+2x+3
end { while }
d=d+2(x-y)+5

Midpoint circle alg. – integer arithmetics
{ Integer arithmetic only }
var
x,y, d : integer;
begin
y := radius; { 0, R }
d := 1 - radius;
d := d + 2*x + 3;
x := x + 1;
end
d := d + 2*(x - y) + 5;
x := x + 1;
y := y - 1;
end
end { while }

Midpoint circle algorithm - improvement
o The next decision variable value is computed as a
function of:
o Current decision variable value
o Current coordinate values x and y
di+1 = di + 2xi+3, if di<0
o Aim:
o Next decision variable value does not depend on current
coordinates x and y
di+1 = di + const

Improvement by 2nd order differences
di+1 = di + ∆di
∆di = di+1 - di = 2xi+3 if di<0 (∆diE)
2(xi-yi)+5 otherwise (∆diSE)
Passing to the next position:
(xi,yi)→ (xi+1,yi)
∆di+1E = 2(xi+1)+3= ∆diE+2
∆di+1SE = 2(xi+1-yi)+5= ∆diSE+2
(xi,yi)→ (xi+1,yi-1)
∆di+1E = 2(xi+1)+3= ∆diE+2
∆di+1SE = 2(xi+1-yi+1)+5= ∆diSE+4
Initially, on (x0,y0)
∆d0 = 3 if d0<0 (∆d0E)
-2R+5 otherwise (∆d0SE)

Midpoint circle alg. – 2nd order differences
{Uses second-order partial differences to compute increments in the decision variable}
var x,y,d, deltaE, deltaSE : integer;
begin
y := radius; { 0, R }
d := 1 - radius;
deltaE := 3;
deltaSE := -2*radius + 5;
d := d + deltaE;
x := x + 1;
end
d := d + deltaSE;
x := x + 1;
y := y - 1;
end
end { while }

1. Demonstrate what values take the function F(x,y)= x2 + y2 - R2 inside
and outside the circle, of center O and radius R.
2. Explain why the circle rendering is only computed in the second
octant?
3. Modify the Midpoint circle algorithm to work in the first octant (under
the first bisection).
4. Modify the Midpoint circle algorithm to work in the first quadrant (x, y
positive).
5. Extend the Midpoint circle algorithm to render a filled circle.
6. Explain the improvement of the Midpoint circle algorithm by the second
order differences.

Contents
o Basic approach
o Fill area scan conversion
o Polygon scan conversion
o Scan Conversion
n Ordered Edge List Algorithm
n Edge Fill Algorithm
n Fence Fill Algorithm
n Edge Flag Algorithm
o Seed Filling

Basic approach
o Scan conversion
o Seed filling
o Needs information about each pixel: position, color,

intensity, alfa attribute, etc.

Jordan Theorem
1 2 3 4 5 6 7 8 9 10 11 12

Data structures
o Real-time scan conversion
Using geometry and visual attributes
o Run-length encoding
(intensity, run length)…○4●4○4●9……
o Cell-organization
o Frame buffer
Pixel pattern Frame Buffer

Real-time scan conversion
B Polygon’s edges
o Less memory Scan line
o High computation time 1
o Complex geometric processing C
o Flexibility 2
A
3
D
Edge list 1: Edge list 2: Edge list 3:
1 2 3 1 2 3 1 2 3
BC ← b BC BC BA ← b BA ← b BA BD ← b BD ← b BD ← b
BA BA ← b BA BC BC BC BA BA BA
BD ← e BD BD ← b BD ← e BD BD ← b BC ← e BC BC
CD CD ← e CD CD CD ← e CD CD CD ← e CD
AD AD AD ← e AD AD AD ← e AD AD AD ← e
The edge lists must be ordered to intersect consecutive edges.

Ordered by:
1. Max y of starting vertex (e.g. B, C, A)
2. Max y of ending vertex (e.g. C, A, D)

Run-length encoding
o BW encoding: (intensity, run length) o Data compression
o Color encoding: (R,G,B, run length) o High processing time
0 30
0 7 1 8 0 15
0 1 1 2 0 20 1 2 0 5

Cell encoding

Cell encoding - pseudographics
Pixel pattern X Reflexion Translation Masking
Complex object B
A
OR
C
A B

Frame buffer
o Large memory
o High speed
o Time consuming for graphical processing
o Image complexity does not depend on the performance of the display
processor

Scan line approach
1 12 11 2 3 10 9 4 5 8 7 6
o Scan line coherence

Adjacent pixels are likely to have the same characteristics
o Intersection points:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
o Ordered sequence:
1, 12, 11, 2, 3, 10, 9, 4, 5, 8, 7, 6
o Ordered pairs:
(1,12), (11,2), (3,10), (9,4), (5,8), (7,6)

Scan line approach – particular cases
1 2 3 4
1 2
1 2 3 4
1 2,3 4,5 6
1 2 3 4
1 2,3 4,5 6

Computation issues
Polygon to Resulted Pixel position, Intersection
be drawn polygon Intersection points
points Scan line
5 5
4 4
3.5
3 3
2.5
2 2
1.5
1 1
0 1 2 3 4 5 6 0 1 2 3 4 5 6
Integer domain: Integer domain:

1. Polygon vertices 1. Polygon vertices
2. Scan line y coordinate 2. Pixel position
4. Pixel position Real domain:
1. Scan line y coordinate

Ordered Edge List Algorithm
8
P5
6 P3
Edge sorting on
y coordinate
4
P4
2
P2
P1
0 2 4 6 8 10

Ordered edge list - Data structures
Scan line
Linked list of polygon edge data Scan line
y-bucket
y-bucket

7
x45 ∆x45 ∆y45 x51 ∆x51 ∆y51
6
5 x23 ∆x23 ∆y23 x34 ∆x34 ∆y34
4
2
1
0 P5
List address 8
Link
x ∆x ∆y Pointer
8 6 P3
7 1 1.5 1 3 2
6 1
5 3 2 1 0 5 4
4
3 8 0 4 4 P4
3 2
2 4 7.5 -1 2 P2
P1
1
0 0 2 4 6 8 10

Active edge list
8 Active edge list
P5 Scan line 5:
P3 x45+∆x45, ∆x45, ∆y45 -1
6
x51+∆x51, ∆x51, ∆y51 -1
x23, ∆x23, ∆y23
4 x34, ∆x34, ∆y34
Scan line 4:
2 P4
x45+2∆x45, ∆x45, ∆y45 -2
x51+2∆x51, ∆x51, ∆y51 -2
P2
P1 x23+∆x23, ∆x23, ∆y23 -1
0 2 4 6 8 10 x34+∆x23, ∆x34, ∆y34 -1
8 Active edges Scan line 3:

7 x ∆x ∆y x45+3∆x45, ∆x45, ∆y45 -3
6 x51+3∆x51, ∆x51, ∆y51 -3
5 x45 ∆x45 ∆y45 x23+2∆x23, ∆x23, ∆y23 -2
4 x51 ∆x51 ∆y51 x34+2∆x23, ∆x34, ∆y34 -2
3
2 x23 ∆x23 ∆y23 Scan line 2:
1 x51+4∆x51, ∆x51, ∆y51 -4
x34 ∆x34 ∆y34 x23+3∆x23, ∆x23, ∆y23 -3
0

Active edge list
Intersection points Pixel list
x ∆x ∆y
ordered by x coordinate
8
7
6 1.5 1 3 1 1.5 (1,6)
1 0 5
5 2.5 1 2 1 2.5 7.5 8 (1,5), (2,5), (7,5)
1 0 4
8 0 4
7.5 -1 2
1 3.5 6.5 8 (1,4), (2,4), (3,4),
4 3.5 1 1
(6,4), (7,4)
1 0 3
8 0 3
6.5 -1 1
(1,3),(2,3),(3,3),(4,3),
3 4.5 1 0 1 4.5 5.5 8
(5,3),(6,3),(7,3)
1 0 2
8 0 2
5.5 -1 0
1 8 (1,2),(2,2),(3,2),(4,2),
2 1 0 1
(5,2),(6,2),(7,2)
8 0 1
1 8 (1,1),(2,1),(3,1),(4,1),
1 1 0 0
(5,1),(6,1),(7,1)
8 0 0
0

Edge fill algorithm
o Complement the pixel on the right of the edge

Edge fill algorithm
o No sorting
o Simple data structure
o Each pixel should be accessed many times
P1
P3 P3
P2 P2 P4

Edge fill algorithm
P5 P5
P6 P6
P7
P4
P1
P7
P8 P8

o Reduce the number of pixel accesses
P1
P3 P3
P2 P2 P4
Fence

P5
P5
P6 P6
P7
P4
P1
P7
P8 P8

Edge flag algorithm
o Each pixel is accessed only once
o No sorting and maintaining edge lists
o Very fast and could be implemented by hardware
flag flag
in out
flag flag
in out

Seed fill algorithm
o Start at a pixel inside the polygon
o Seed: starting pixel
o Move to the neighbors using the connectivity by 4 and 8
neighbors
o Recursive algorithms

Type of region
o Defined by
1. Content
2. Contour
y y
x x

Recursive algorithms - Fill4Content
procedure Fill4Content(x, y, oldval, newval: integer);
oldval: the old inside pixel colour;
newval: the new colour of pixels}
begin
if ReadPixel(x, y) = oldval then
begin
Fill4Content(x, y-1, oldval, newval);
Fill4Content(x, y+1, oldval, newval);
Fill4Content(x-1, y, oldval, newval);
Fill4Content(x+1, y, oldval, newval);
end
end;

Recursive algorithms - Fill4Contour
procedure Fill4Contour(x, y, contval, newval: integer);
contval: the old contourcolour;
newval: the new colour of the contour pixels}
begin
if ReadPixel(x, y) <> contval and ReadPixel(x, y) <> newval then
begin
Fill4Contour(x, y-1, contval, newval);
Fill4Contour(x, y+1, contval, newval);
Fill4Contour(x-1, y, contval, newval);
Fill4Contour(x+1, y, contval, newval);
end
end;

o Recursivity is very stack memory consuming
o Reduce the level of recursivity: course
Course:
1. Most right pixel positiony
2. An horizontal sequence of consecutive pixels
o Only course indentifier stored into the stack
y y
Firt 3 2
course
ID
5 4
x x

y
o Determinate the current course, related to the
starting position
o Write into the stack the course ID
Firt
o While stack is not empty { course
Read and render a course from the stack ID
For all above line courses

Write into the stack the course ID
x
For all below line courses
Write into the stack the course ID y
}
3 2
5 4

1. What is the main difference and similarity between the scan conversion
and seed filling algorithms for polygon rendering?
2. Generate in the real-time scan conversion algorithm the edge list for
rendering three adjacent triangles. Generate the edge list to keep
intersected consecutive edges (Figure 1a, Figure 1b).
3. Is it possible to generate a single list that keep intersected consecutive
edges? How many edge lists have to be considered?
A
A
Figure 1a Figure 1b B
E
D
B
D C
C
E
4. Explain the generation of the edge list if the scan line is moving
upward, instead downward.
5. Explain why the relationship between real polygon point, scan line and
pixel position is important?
6. How big could be the polygon rendering error?
7. Explain the Ordered Edge List algorithm on Figure 1a.
8. Explain the Ordered Edge List algorithm on Figure 1b.
9. Explain the Ordered Edge List algorithm on Figure 1a and b, if the scan
line is moving upward.
10. Explain how the Ordered Edge List algorithm depends on the upward
and downward movement of the scan line?
11. Why would the seed filling algorithm be disadvantageous?
12. What is the worst case for the recursive seed filling algorithm?

2D Clipping
Contents
o Point
o Line Clipping
o Polygon Clipping
o Text Clipping

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Window and viewport
Pw(xw,yw) → Pv(xv,yv)
Window
ywmax
Viewport
yvmax
ywmin
yvmin
xwmin xwmax xvmin xvmax
World Coordinates Normalized Device Coordinates
Window definition: (xwmin, xwmin, xwmax, ywmax) Viewport def: (xvmin, xvmin, xvmax, yvmax)
xw- xwmin xv- xvmin xvmax- xvmin

= xv = (xw- xwmin) + xvmin
xwmax- xwmin xvmax- xvmin xwmax- xwmin
xv = sx (xw- xwmin) + xvmin yvmax- y vmin

yv = (yw- y wmin) + yvmin
yv = sy (yw- y wmin) + yvmin ywmax- y wmin

Window and viewport - specification
yw
(-60.5, 82.5) (41.25, 82.5)
1
Window 0.87
Viewport
0.50
0 xw
(-60.5, -20.75) (41.25, -20.75) (0, 0) 0.37 0.74 1
World Coordinates Normalized Coordinates

Window and viewport transformations
1 ymax
1 xmax
0 1
WC NDC PDC

Window and viewport types
o multiple windows / viewports
o multiple workstations
o polygonal windows / viewports 2
1
o zooming / panning
o blanking 0

Point clipping
o Inside outside test:

xmin ≤ x ≤ xmax
ymin ≤ y ≤ ymax

Line clipping
y P8 y
P2
P7 Window Window
ywmax ywmax
P3
P9 P3 P4 P1 P4 P1
P’9
P10
P’10
P5 P5
ywmin ywmin
P6 P’6
xwmin xwmax x xwmin xwmax x
Before clipping After clipping

Line Clipping
Line definitions
Set of points ->
point clipping
Vector ->
endpoints clipping
binary clipping
parametric line clipping
Cohen-Sutherland algorithm

Endpoints clipping
Could be two cases:
1. trivially accepted (AB)
2. trivially rejected (CD)
y
C D
ywmax
B
A
ywmin
xwmin xwmax x

Binary clipping
1. step: AB
2. step: AC, CB (tr. rejected)
3. 3 step: AD (tr. acc), DC
4. ...
ywmax B
D
A C
ywmin
xwmin xwmax x

Basic Idea
n Encode the line endpoints
n Successively divide the line segments so that they are

completely contained in the window or completely lies
outside window
n Division occurs at the boundary of window

Region outcodes:
1001 1000 1010
0001 0000 0010 left

right
0101 0100 0110
below
above

1000
D
1001 C
1010 S
B G H R
F
A 0000
0001 Q 0010
E P
N
M
0101 0100 0110

Cohen-Sutherland Algorithm
procedure CSDecLinie( x0, y0, x1, y1,
min, xmax, ymin, ymax: real;
color: integer);
{ Cohen-Sutherland clipping algorithm for line P0(x0,y0) to P1(x1,y1), and clip
rectangle with diagonal from (xmin, ymin) to (xmax, ymax) }
type edge = (LEFT, RIGHT, BOTTOM, TOP);
outcode = set of edge;
var accept, done : boolean;

outcod0, outcod1, outcodt : outcode; {outcodes for P0, P1, and
whichever point lies outside
the clipping rectangle}
x, y : real;
procedure CompOutCode( x, y: real; var code: outcode);

{ computes outcode for the point (x,y)}
begin
code := [];
if y > ymax then code:= [TOP]
else if y < ymin then code:= [BOTTOM];
if x > xmax then code:= code+[RIGHT]
else if x < xmin then code:= code+[LEFT]
end;

Begin
accept := false; done := false;
repeat
if (outcod0 = []) and (outcod1 = []) then {trivially accepted}
begin accept := true; done := true end {end exit}
else if (outcod0 * outcod1) <> [] then
done := true {Logical intersection is true, so trivial reject and exit}
else
{Failed both tests, so calculate the line segment to clip:
from an outside point to an intersection with clip edge}
begin {at least one endpoint is outside the clip rectangle; pick it.}
if outcod0 <> [] then
outcodt := outcod0 else outcodt := outcod1;
{now find intersection point; use formulas
y = y0 + slope * (x- x0),
x = x0 + (1/slope) * (y-y0)}
if TOP in outcodt then
begin
{divide line at top of clip rectangle}
x := x0+(x1-x0)*(ymax-y0)/(y1-y0);
y := ymax
end
else if BOTTOM in outcodt then
begin
{ divide line at bottom of clip rectangle }
x := x0+(x1-x0)*(ymin-y0)/(y1-y0);
y := ymin
end

else if RIGHT in outcodt then
begin
{ divide line at right of clip rectangle }
y := y0+(y1-y0)*(xmax-x0)/(x1-x0);
x := xmax
end
else if LEFT in outcodt then
begin
{ divide line at left of clip rectangle }
y := y0+(y1-y0)*(xmin-x0)/(x1-x0);
x := xmin
end;
{Now we move outside point to intersection point to clip,
and get ready for next pass. }
if (outcodt = outcod0) then
begin
x0 := x; y0 := y;
end
else
begin
x1 := x; y1 := y;
end
end {Subdivide}
until done;
if accept then MidpointLineReal(x0, y0, x1, y1, color)
{draw a line with real endpoint coordinates}
End; {CSDecLinie Cohen Sutherland clipping algorithm}

Parametric line clipping
o
P1
tline
V4 tedge V3
P0
V1 V2

o Outside Inside
clipping clipping
rectangle rectangle
Edge Ei
PEi
P1
Ni ∙ [Pi(t) – PEi] < 0

Pi(t) - PEi
Ni ∙ [Pi(t) – PEi] = 0
Ni ∙ [Pi(t) – PEi] > 0

P0
Ni


P1
φ
t=1
N
PE P1 P1
N
φ Line 2 t=1 t=1
PL PL
PL PE Line 1
P0 Line 3
t=0
P0 PL
t=0
PE
Clipping rectangle
PE
P0
t=0

Cyrus-Beck algorithm - pseudocode
Begin
precalculate Ni and select a PEi for each edge;
for each line segment to be clipped
if P1 = P0 then
line degenerates to a point, so clip as a point;
else
begin
tE = 0; tL = 1;
for each candidate compute intersection with a clipping edge
if Ni * D <> 0 then { ignore edges parallel to line for now}
begin
calculate t;
use sign of Ni * D to categorize as
PE (potentially entering) or PL (potentially leaving);
if PE then tE = max (tE , t);
if PL then tL = min (tL , t);
end;
if tE > tL then
return nil
else
return P(tE ) and P(tL ) as true clip intersections
end
End

max(tE) < min(tL)
n A
n
E1 L1
P Q E2
B
n
Computing normal vector of the edge: C
1. Compute the normal vector of the plane
N = AB x BC
(cross product of two consecutive edges)
2. Normal vector of the edge
n = AB x N
(cross product of the edge and normal
vector of the plane)

requires a convex polygon!
D
E1 L3
Q E2 L1 E3
P B
E

P1
P5
View tnear,1 tfar,3

ray
P2
P4
P3
Compute max(tnear) and max(tfar);
If max(tnear) < max(tfar) there is intersection;

Liang-Barsky line clipping algorithm
o Published in 1984 by Liang, Y-D., Barsky, B.A., “A New Concept and Method for
Line Clipping”, ACM TOG, vol 3(1).
o Simplifies the Cyrus-Beck algorithm for the particular case of clipping window as
an horizontal rectangle:
1. One coordinate of each normal is 0.
2. The dot product Ni ∙ (P0 – PEi) determining whether the endpoint P0 lies
inside or outside a specific edge, reduces to the directed horizontal or
vertical distance from the point to the edge.
3. The denominator dot product Ni ∙ D, which determines whether the

intersection is potentially entering or leaving, reduces to ±dx or dy:
If dx >0, the line moves from left to right and is PE for the left edge, PL
for the right edge, and so on.
4. The parameter t, the ratio of numerator and denominator, reduces to the

distance to an edge divided by dx or dy, exactly the constant of
proportionality we could calculate directly from the parametric line
formulation.

Liang-Barsky algorithm - parameters
Calculation for parametric line clipping algorithm.
Clip edgei Normal Ni PEi P0 - PEi t = Ni ∙ [P0 – PEi ] / (- Ni ∙ D)
left:x=xmin (-1,0) (xmin,y) (x0-xmin, y0-y) -(x0-xmin)/ (x1-x0)
right:x=xmax (1,0) (xmax,y) (x0-xmax, y0-y) (x0-xmax)/-(x1-x0)
bottom:y=ymin (0,-1) (x,ymin) (x0-x, y0-ymin) -(y0-ymin)/ (y1-y0)
top:y=ymax (0,1) (x,ymax) (x0-x, y0-ymax) (y0-ymax)/ -(y1-y0)

Procedure Clip2D (var x0,y0,x1,y1: real; var visible: boolean);
{clip a line with endpoints (x0,y0) and (x1,y1), against the rectangle with corners (xmin,ymin) and
(xmax,ymax). The flag visible is true if a clipped segment is returned in the var endpoint
parameters. If the line is rejected, the endpoints are not changed and visible is set to false}
var tE,tL,dx,dy: real;
function ClipPoint(denom, num:real; var tE,tL: real): boolean;

{computes a new value of tE or tL for an interior intersection of a line segment and edge.
Parameter denom is –(Ni ∙ D), which reduces to ±∆x, ∆y for upright rectangle. Its sign
determines whether the intersection is PE or PL. parameter num is Ni ∙ D(P0-PEi) for a particular
edge/line combination, which reduces to directed horizontal and vertical distances from P0 to
an edge; If the line segment can be trivially rejected, false is returned; if it cannot be, true is
returned and the value of tE or tL is adjusted, if needed, for the portion of the segment that is
inside the edge}
var t: real; accept: boolean; {accept will be returned as value of ClipPoint;
accept line until find otherwise}

begin
accept:=true;
if denom>0 then {PE intersection}
begin
if t>tL then {tE and tL crossover}
else if t>tE then {a new tE has been found }
tE:=t
end
else if denom<0 then {PL intersection}
begin
if t<tE then {tE and tL crossover}
else if t<tL then {a new tL has been found }
tL:=t
end
else
if num>0 then {line on outside of edge }
accept:=false;
ClipPoint:=accept
end; {ClipPoint }

Begin
dx:=x1-x0; dy:=y1-y0;
visible ;= false; { output is generated only if line is inside all four edges}
{ first test for degenerate line and clip the point; ClipPoint returns true if the point lies inside the
clip rectangle.}
if (dx=0) and (dy=0) and ClipPoint(x0,y0) then
visible:=true
else
begin
tE = 0;
tL = 1;
if ClipPoint(dx, xmin-x0, tE, tL) then {inside against left edge}
if ClipPoint(-dx, x0-xmax, tE, tL) then {inside against right edge}
if ClipPoint(dy, ymin-y0, tE, tL) then {inside against bottom edge}
if ClipPoint(-dy, y0-ymax, tE, tL) then {inside against top edge}
begin
visible:=true;
if tL<1 then
begin {compute PL intersection, if tL has moved}
x1:=x0+tL*dx;
y1:=y0+tL*dy
end;
if tE>0 then
begin {compute PE intersection, if tE has moved}
x0:=x0+tE*dx;
y0:=y0+tE*dy
end;
end
end
End; {Clip2D}

Conclusions
o Cohen-Sutherland algorithm is efficient when:
n Outcode testing can be done cheaply, e.g. by doing bitwise operations in
assembly language
n Trivial acceptance or rejection is applicable to the majority of line segments
o Parametric line clipping is efficient when:
n Many line segments need to be clipped, since the actual calculations of the
coordinates of the intersection points is postponed until needed, and testing
can be done on parameter values.
o Liang-Barsky algorithm is more efficient than Cyrus-Beck
n Trivial rejection testing can avoid calculation of all four parameter values for
lines that do not intersect the clip rectangle.

Polygon Clipping
o Polygon definition:
n set of points ® point clipping
n set of lines ® line clipping
n sequence of lines ®
Sutherland – Hodgman algorithm
Weiler-Atherton algorithm
o General definition:
n Sequence of vertices with implicit relationships
n By clipping: 1 polygon (v1, v2, …., vn) ®
p polygons (A11, A12, …, A1k; …Ap1, Ap2, …,Apq)
o Display:
n set of points
n set of lines (wire-frame)
n closed multicolor polyline
n set of polygons
n filled polygons

o Reentrant polygon clipping

o Published in 1974 by Sutherland, I.E., Hodgman, G.W., “Reentrant
Polygon Clipping”, CACM, vol 17(1).
Before Clipping After Clipping Before Clipping After Clipping

Original
Polygon
Clip Clip Clip Clip

Left Right Bottom Top

Window – polygon edge relationships
I
P S P
S
P S
I
P S
Save P Save I No points saved Save I, P

(a) (b) (c) (d)

Input vertex list: inv[] = {v1, v2,..., vn}
Output vertex list: outv[ ] = {v1', v2',..., vp'}
algorithm ClippingSH( vertex_list inv, outv;

window_edge clipping_edges[4])
{
for( j = 0; j < 4; j++){
EdgeClippingSH( inv, outv, clipping_edges[j]);
inv = outv; /* update the current edge list */
}
}

algoritm EdgeClippingSH( vertex_list inv, outv;
window_edge clipping_edge)
{
vertex i,p,s;
s = the last vertex in inv;
for( each vertex p from inv) {
if( ToWindow(p, clipping_edge)) /* case a and d */
if( ToWindow(s, clipping_edge)) /* case a */
else{
}
else if( ToWindow(s, clipping_edge)){ /* case b */
} /* for case c don’t write anything */
s = p; /* update the start vertex */
}
} /* end of the EdgeClippingSH algorithm*/

Window
3
Window
2 3 1’ 2’
2’ (8’)
2 1’
1 4 3’
5 4’
1 4
3’ 5’
6 6’
5’ 7’
6 4’
7
5 (a) (b)

Before Clipping
After Clipping

o The Weiler-Atherton algorithm produces separate polygons for
each visible fragment
o 4 cases:
2
a) out - > in
b) in -> in
c) in -> out 1
d) out - > out
e) follow clip edge
4 3

2 2 2
2
1’ 1’ 1’ 1’
3’ 3 3
3
3’
Follow clip edge until

Case: Out -> In Case: In -> Out
Case: In -> In (a) new crossing found
Add clip vertex (1’) Add clip vertex (3’)
Add end vertex (3) (b) Reach vertex already
Add end vertex (2) Cache old direction
added

2 2 2 2
1’ 1’ 1’ 1’
3 3’ 3 3’ 3 3’ 3
4 4 4
3’
4 4’ 4’ 4’
5 5 5
5’ 5’
Case: In -> Out Follow clip edge until

Continue from Case: Out -> In
Add clip vertex (5’) (a) new crossing found
cached vertex and Add clip vertex (4’)
Cache old direction (b) Reach vertex already
direction Add end vertex (5)
added

2 2 2
1’
1’ 1 1’
3 3 3’ 3
3’ 3’ 4’
4 4 4’ 5
4’ 5 5
6 6 5’
5’ 5’
Final Result:
Continue from Nothing added. 2 unconnected
cached vertex and Finished polygons
direction

Polygon A
A1 Polygon B
vertices
vertices
A10
A A1 B1
A4
A5 A2 B2
B5
B1 A3 B3
B A4 B4
A2 A3 A6 A5 B5
A7
A6
B4
A7
B2 A8 A9
A8
A9
B3 A10

Polygon A
A1 Polygon B
vertices
vertices
A10
A A1 B1
A4
A5 A2 B2
C1 B5
B1 A3 B3
C2
B A4 B4
A2 A3 C3 A6 A5 B5
A7
A6
B4
A7
B2 A8 A9
C4 A8
A9
B3 A10

A1 A10
A Add vertex C1
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
A9
A10

A1 A10
A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
A8
Entering vertex
Leaving vertex
A9
A10

Rules for capturing the clipped

polygons:
A1
o Start at an entering vertex C1 B1
A2
o If you encounter a leaving B2
vertex swap to right hand (clip A3
polygon) loop C2
B3
A4
o If you encounter an entering B4
vertex swap to left hand C3
A5
(polygon) loop B5
o A loop is finished when you A6

arrive back at start C4
A7
o Repeat whilst there are
entering vertices A8
Entering vertex
Leaving vertex
A9
Clipped polygons
A10

A1 A10
A
A4
A5 A1
B2 C1 C1 B1
B1
C2 A2
B B2
A2 A3 C3 A6 A3 C2
A7 B3
B5 A4
B4
A8 C4 A9 A5 C3
B3
B5
A6
B4
C4
A7
Clipped polygons: A8
Polygon 1: C1, A2, A3, C2
Polygon2: C3, A7, A8, C4, B5 A9
A10

Text Clipping
STRING1
All or none
text clipping
STRING2 STRING2
STRING1 ING1
All or none
character clipping
STRING3 TRING3
STRING4 STRING4
STRING1 STRING1
Clipping individual
character

1. What are the main differences between clipping against view volume
and clipping against window?
2. How is modified the image is the viewport is defined in such a way that
xvmin > xvmax? Similarly for yvmin > yvmax. What is the result if both
conditions are true?
3. How can be used the relation between window and viewport to achieve
operations such as zoom in, zoom out, symmetry. What other
operations could be achieved?
4. Give examples of using the window as drawing area, and as mask.
5. Explain how the endpoints clipping algorithm can be used for clipping
the alphanumeric characters.
6. Give an example where the binary clipping algorithm is more efficient
than other line clipping algorithms.
algorithm if the window is a triangle.

coordinate axes.
coordinate axes.
10. How could you apply the Cohen-Sutherland algorithm to clip a triangle?
How may you display the result? Can it be filled in?
11. Let us consider the convex polygon in figure 1, in the plain, and a line
given by two points P and Q, oriented from P toward Q. Specify an
approach to compute the normal vectors to the polygon’s edges.
12. Classify the edges of the polygon in figure 1, as entering and leaving
type.
13. Specify the mathematical approach to compute the intersections
between the PQ line and the polygon’s edges.

Figure 1
E
B
P Q Q1 Q2
C D
14. Determine by the Cyrus-Beck algorithm if the line PQ intersects the

polygon, in figure 1.
between the line PQ and the polygon in figure 1.
16. Generalize the previous problem for any line and any convex polygon,
in the plane.

17. Determine by the Cyrus-Beck algorithm what is the visible intersection
point between the line PQ and the polygon in figure 1. Viewer lies on P.
between the line segment PQ and the polygon in figure 1.
19. Analyze the previous problem for different line segments: (a) PQ1; (b)
PQ2.
20. Exemplify and explain why the Cyrus-Beck algorithm does not work for
concave polygons.
following polygon A and rectangular window (Figure 2).
Figure 2


3).
A
A
b.
a.
Figure 3
c.


4).
a. b.
Figure 4


particular cases of polygon A and rectangular window (Figure 5).
a. b.
Figure 5


particular cases of polygons A and B (Figure 6).
c.
a. B
A b. B
A
B
Figure 6

Figure 7

Figure 8
C

Projections
Contents
 Conceptual model of 3D viewing process
 Taxonomy of geometric projections
 Projections
 Viewing transformation
 Remarks

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport


Transform
to viewing
view volume window

2D Rendering,
Coordinates

Taxonomy of geometric projection
Planar Geometric projections
Parallel Perspective
Oblique Orthographic One- Two- Three-

point point point
Cabinet Cavalier Others Top Front Side Axonometric
Isometric Others

Parallel and perspective projections
 Perspective projection
 Projection rays converge into the center of projection.
 Usually the viewer is located onto the center of projection.
 Parallel projection
 Parallel projection rays. Convergence point at infinity.
 Viewer’s position at infinity.
A
plane plane
A’ A
A’
8
Center of B
Center of B B’
B’ projection
projection

Parallel projection
 Orthographic
 Direction of projection is perpendicular onto the projection plane
 Direction of projection is parallel with the normal to the projection
plane
 Oblique
 Direction of projection is different than the normal vector
plane plane
A’ A’
B’ A B’
A n
n B
B

 Top-elevation
to the y axis
 Front-elevation
Top-elevation
to the z axis
y
 Side-elevation
to the x axis
Front-elevation
Side-
elevation

Orthographic projections - examples

 Axonometric
 Projection plane is not normal to a principal
axis
 Shows several faces of the object at once
 Preserves the parallelism of lines but not
the angles
Axonometric
 Isometric projection
 Commonly used axonometric projection
 Projetion plane normal (and direction of
projection) makes egual angles with each
principal axis
 If the projection plane normal is (dx, dy,
dz), it requires that |dx|=|dy|=|dz|,
or ±dx= ±dy= ±dz
Isometric

Axonometric and isometric projections
y
Axonometric z
Isometric z

Oblique projection
y xp = x + L cos φ
Pp (xp, yp, zp)
yp = y + L sin φ
L β Usually the angle φ is 30° and 45°.

φ Let be L1 the projection onto L of the unit of
Q(x,y,0)
the z axis:
x tg β = z/L = 1/L1, L=z L1
xp = x + z L1 cos φ
yp = y + z L1 sin φ
zp = 0
P(x,y,z)
z
xp 1 0 L1 cosφ 0 x
yp 0 1 L1 sinφ 0 y
=
zp 0 0 0 0 z
1 0 0 0 1 1

Oblique projection
 Cavalier projection
tg β = 1, z/L = 1/L1, L=z L1, therefore z=L, 1=L1

β = 45°
 Cabinet projection
tg β = 2, z/L = 1/L1=2, L=z L1, therefore z=2L, 1=2L1

β = 63.4°

Oblique projection
y y
Cavalier L L
L
L
β=45°, tgβ=1
z
z
L L
φ=45° φ=30°
x x
y
y
L L
Cabinet L/2 L/2
β=63.4°, tgβ=2 z
z L
L
φ=45° φ=30°
x x

Let us consider the PQ line equation:
Center of P = (1-u) P + uQ, 0≤u≤1
projection
Q(0,0,-d)
or:
y
xp = (1-u) x + u∙0 = x - xu
yp = (1-u) y + u∙0 = y - yu
Pp (xp, yp, 0) 0 = (1-u) z - u∙d = z – (z+d)u
x
Therefore:
P(x,y,z) u = z/(z+d)
xp = x – xz/(z+d) = x[1/(1+z/d)]
yp = y – yz/(z+d) = y[1/(1+z/d)]
zp = 0
z

xp = x – xz/(z+d) = x[1/(1+z/d)]
Center of yp = y – yz/(z+d) = y[1/(1+z/d)]
projection
Q(0,0,-d)
zp = 0
y
Pp (xp, yp, 0) xp 1 0 0 0 x
x
yp 0 1 0 0 y
=
zp 0 0 0 0 z
P(x,y,z)
w 0 0 1/d 1 1
Pp = [x, y, 0, z/d +1]
z Pp = [xp, yp, zp, 1]
= [x/(1+z/d), y/(1+z/d), 0, 1]

Vanishing points
One-point Two-point
perspective projection perspective projection

Vanishing points
Three-point perspective projection

View
zL View
Volume
(projection)
zwc Plane
yL
xL
yV
yS
xS xV Center of
V
zV Projection,
U Viewer’s
N Position
xwc
ywc
window pixel
viewport

Viewing coordinates transformation

Transform
to viewing
view volume window

2D Rendering,
Coordinates

Left-handed viewing system
V
yv
N
U zv
xv
Projection
plane

yw v
Pw
Pv=(xv,yv,zv)
Tv
n
u
zw xw
Pw = Tv + Pv = Tv + RvPv
Pv = Rv-1 (Pw - Tv)

yw yw yw
xv yv xv yv
zv yv
zv xv
zv
xw xw xw
zw zw zw
(a) Original orientation of world and (b) Invert viewing (c) Translate viewing
viewing coordinate systems z axis origin to world origin
yw yw yw
yv
xv yv
xv
yv xv
zv
zv xw
xw xw
zw zv zw zw
(d) Rotate about world x axis (e) Rotate about the world (f) Rotate about the world
to bring viewing z axis into y axis to align z axis to align the two
the xz plane of the world system the two z axes viewing systems

Computer Animation
Contents
o Introduction
o Key points and intermediate points
o Classic animation
o Current animation
o Automate animation - fragmentation
o Linear interpolation
o Speed control and linear interpolation
o Curve interpolation - Spline
o Movement control on the curve trajectory
o Orientation interpolation
o Camera movement
o Complex objects animation
o Articulated structures kinematics
o Other animations: morphism, movement caption, particle system,
groups

Introduction
o Pixar, 1978, Graphics Group, Ed Catmul – cofounder
o 1986 – acquired by Apple, 2006 – acquired de Walt
Disney Company.
Toy Story (1995) Ratatouille (2007)

A Bug's Life (1998) WALL-E (2008)
Toy Story 2 (1999) Up (2009)
Monsters, Inc. (2001) Toy Story (2010)
Finding Nemo (2003) Cars 2 (2011)
The Incredibles (2004) Brave (2012),
Cars (2006) Monsters University (2013)

Introducere
o DreamWorks, 1994
o Movies:
Antz (1998),
Shrek (2001), Shrek 2 (2004), Shrek 3 (2007), Shrek Forever After
(2010),
Spirit: Stallion of the Cimarron (2002),
Madagascar (2005), Madagascar: Escape 2 Africa (2008), Over the
Hedge (2006), Flushed Away (2006), Bee Movie (2007),
Kung Fu Panda (2008), Kung Fu Panda 2 (2011),
Monsters Vs. Aliens (2009), How to Train Your Dragon (2010),
Megamind (2010), Puss in Boots (2011),
Madagascar 3 (2012), Rise of the Guardians (2012), The Croods (2013),
Turbo (2013), How to Train Your Dragon 2 (2014),
Penguins of Madagascar (2014), Home (2015)
Bridge of Spies (2015)

Introducere
o Walt Disney Company
o Cartoons:
The Little Mermaid (1989)
Beauty and the Beast (1991)
Aladdin (1992)
The Lion King (1994)
Hercules (1997)
Mulan (1998)
Tarzan (1999)
Monsters, Inc. (2001)
The Lost Empire (2001)
WALL-E (2007)
The Princess and the Frog (2009)
Winnie the Pooh (2011)
Frozen (2013)
Big Hero 6 (2014)
Cinderella (2015)
Zootopia (2016)
Jungle Book (2016)

Introducere
o Animation – movement illusion by rapid display of different image
sequence
o Classic approach:
1. Define a sequence of keyframes
2. Render the intermediate frames computed by the first and the
last keyframes

Introducere
o Calcularea cadrelor intermediare creaza senzatia de animatie,
modificand:
o Atributele obiectelor (pozitie, forma, culoare etc)
o Atributele camerei de luat vederi (pozitia, orientarea etc)
o Atributele surselor de lumina (intensitate luminoasa, pozitie,
culoare etc).
o Calcularea valorilor intermediare intre doua valori limita (ex. pozitie,
culoare, orientare, intensitate, etc) se realizeaza prin interpolare: liniara,
curbilinie etc.
v2 v1, v2
v
v1 u1, u2
v
Interpolator
u
u1 u u2

Calcularea pozitiilor cheie
o Cinematica directa
o Cinematica inversa
o Modelarea sistemelor fizice
o Modelarea bazata pe constringeri
o Modelarea procedurala
o Modelarea bazata pe comportament
o Captarea pozitiilor cheie prin senzori montati pe obiectele reale

Modificarea unor caracteristici ale sistemului de vizualizare.
1. Pentru obiectele din scena:
Pozitia
Orientarea
Dimensiunea
Forma
Culoarea
Transparenta
2. Pentru camera de luat vederi:

Punctul de vedere
Punctul de interes
Unghiul de vedere
3. Pentru sursa de lumina:

Pozitia
Intensitatea luminii

ui = u0 + i ∆u
vi = v0 + i ∆v vn
vi
unde
v0
∆u = (un – u0)/n
∆v = (vn – v0)/n
Intr-o forma iterativa: u0 ui un
ui+1 = ui + ∆u
vi+1 = vi + ∆v

Generalizand in spatiul valorilor Pn
Pi
P0
Fie P0, Pn valorile parametrului sau atributului P in cadrele 0 si n.

Pi = P0 + i ∆P, unde ∆P = (Pn – P0)/n
Pi = P0 + i ∆P = P0 + i/n (Pn – P0)
daca notam u = i/n, u є [0, 1]
Pi = P0 + u (Pn – P0), ecuatia parametrica a variatiei liniare
Intr-o forma iterativa:
Pi+1 = Pi + ∆P
Exemple: P poate fi unghi de orientare, viteza, acceleratie, pozitie,
dimensiune, intensitatea luminii, nivelul de transparenta etc.

Morfism
o Transformarea unei forme in alta
Pi Pn
P0

Animatia clasica
Tehnica traditionala de animatie este foarte laborioasa:
1. Definirea unui scenariu
2. Desenarea cadrele cheie care definesc actiunea (desenator principal)
3. Desenarea cadrele intermediare pentru a completa animatia (echipa de
desenare)

Animatia actuala
1. Lansarea unei idei de poveste de animatie.
2. Elaborarea unui document care descrie principala idee a povestii
animate.
3. Benzi desenate care schiteaza principalele secvente de actiuni si
dialoguri. Se evidentiaza principalele trairi emotionale ale personajelor.
4. Se inregistreaza vocile initiale (ex. ale membrilor echipei de desenatori si
scenaristi). Acestea vor fi inlocuite ulterior de vocile unor actori.
5. Realizarea primei videobenzi care contine deja materialele din care se va
edita filmul de animatie.
6. Departamentul de arta creaza aspectul grafic (ex. Look and feel) al
mediului si al presonajelor.
7. Modelarea 3D a personajelor.
Referinta: Metodologia Pixar, http://www.pixar.com/howwedoit/index.html

Animatia actuala (2)
8. Se creaza instante 3D ale scenelor semnificative ale pozitiilor si starilor
emotionale ale personajelor. Aceste instantieri sunt fotografiate.
9. Instantele sunt animate. Animatorii nu deseneaza sau coloreaza
personajele. Ei sunt ca niste actori sau papusari. Folosind unelte
software specializate animatorii creaza coregrafia miscarilor si
expresiilor faciale ale personajelor, in fiecare scena. Acestea sunt cadre
cheie. Cadrele intermediare sunt realizate de catre calculator.
10. Se creaza umbrele si texturile pe suprafetele obiectelor. Forma
obiectelor a fost data de catre model (pasul 7).
11. Sunt introduse surse de lumina si se creaza efectele speciale de lumini.
12. Calcularea animatiei de catre sistemul de calcul, folosind toate
informatiile specificate pana acum. Sunt create cel putin 24 de cadre
pentru o secunda de film. Calcularea unui cadru dureaza cateva ore
(ex. De la cateva la zeci de ore).
13. Sunt adaugate efectele speciale de sunet si animatie.

Animatia automata - fragmentarea
o Calcularea cadrelor intermediere prin algoritmi de interpolare
o Cadrele cheie corespund valorilor parametrilor in anumite momente de
timp
o Calitatea fragmentarii este mai slaba decit cea obtinuta manual
o Solutii: (a) mai multe cadre intermediare, (b) “netezirea” trecerilor de
la un cadru la altul

o Cea mai folosita tehnica de calculare a valorilor intermediare pentru un
interval dat
o Fie doua valori p0 si p1 ale parametrului p la momentele t0 si t1, o
valoare intermediara este:
p1
p
t 1- t t - t0 p0
p(t) = p0 + p1 (1)
t 1- t 0 t 1- t 0
sau alte forme ale aceleiasi expresii:

t - t0 t0 t t1
p(t) =p0 + (p1 - p0) (2)
t 1- t 0
p 0 t1 - p 1 t0 p1 - p0
p(t) = +t (3)
t 1- t 0 t 1- t 0
p1 - p0
p(t + ∆t) = p(t)+ ∆t (4)
t 1- t 0

o Avantaje:
n Modificarea valorii uni parametru de-a lungul unui segment este
liniara (3).
n Rata schimbarii de-a lungul unui segment este constanta si poate
fi controlata (4).
n Calcularea valorii la momentul t+∆t se face simplu prin adunarea
unei constante la valoarea precedenta la momentul t.
o Dezavantaje:
n Exista discontinuitati in toate pozitiile de conectare a segmentelor
(ex. Cadre/ pozitii cheie Po, P1, P2).
P0(x0, y0, t0) P2(x2, y2, t2)

P0(x0, y0, t0) P2(x2, y2, t2)
P1(x1, y1, t1) P1(x1, y1, t1)

Controlul vitezei
o Fiind data o functie de modificare a unui parametru (1-4) se doreste
controlul acestei modificari (animatii) in functie de variabila timp.
o In functie de timp se poate controla o viteza variabila de modificare a
parametrului (animatie).
o Fie aceasta functie τ = f(t). Se trece la variabila τ in expresia de

interpolare liniara:
f(t1) – f(t) f(t) – f(t0)

p(τ) = p(f(t)) = p0 + p1
f(t1) – f(t0) f(t1) – f(t0)

Interpolarea Spline
o Alaturi de interpolarea liniara se foloseste intepolarea curbilinie pe baza
curbelor Spline (curbe parametrice).
o Avantaje:
n Permite un control continuu al modificarii
n Numarul de cadre intermediare poate fi determinat in functie de calitatea
ceruta pentru animatie
o Dezavantaje:
n Calculul punctelor de control al curbelor spline se face pe baza unor
constringeri de interpolare definite pentru punctele de control
n Sunt necesare informatii suplimentare (Ex. vectorii tangenta la capete)
n Calcularea curbelor spline dureaza mai mult

n Implementare mai dificila

Interpolarea Spline

Curbe Spline
B-splines: permit control automat al continuitatii, insa doar aproximeaza
punctele de control, fara a trece prin ele. Permit control local.
Modificarea unui punct de control afecteaza numai partea din
vecinatatea acelui punct de control.
Non-uniform B-spines: necesare pentru a intrerupe continuitatea.
Non-uniform rational B-splines (NURBS): permit controlul local
suplimentar al formei curbei.
Bézier: necesita informatii suplimentare pentru fiecare segment si nu mentin
automat continuitatea. Interpoleaza insa, capetele segmentelor.
Ajustarea cuplarii netede se face prin punctele de control de la capete.
Hermite: necesita definirea vectorilor tangenta pentru fiecare cadru cheie.
Ajustarea cuplarii netede se face prin reglarea tangentelor de la capete.
Catmull-Rom: asigura continuitatea primei derivate (traiectorie neteda).
Catmull-Rom permit controlul local.
Beta-splines: permit continuitatea automata, controlul asupra tangentei si
aproximeaza lungimea arcului fiecarui segment.

Controlul pe traiectorie
o Pentru deplasarea pe traiectorie sunt necesare doua facilitati de baza:
1. Controlul independent al vitezei de-a lungul traiectoriei
2. Controlul continuitatii
o Curbele spline permit controlul continuitatii, insa controlul vitezei este
mai dificil.
o Interpolarea pozitiei pe curba spline permite controlul continuitatii
pozitiilor, insa:
n Un increment egal al parametrului spline nu corespunde
intotdeauna unui increment egal in distanta de-a lungul curbei.
n Segmente diferite ale curbei spline, corespunzatoare aceleiasi
lungimi parametrice, pot avea lungimi fizice diferite.
n Daca curba spline este parametrizata direct in functie de variabila
timp, animatia va fi cu viteza ne-uniforma.

Parametrizarea distantei pe curba
Se parcurg urmatorii pasi de transformare:
1. Fiind dat un pas spline P(u) = | x(u), y(u), z(u)|, se calculeaza
lungimea arcului spline ca o functie de u: s = A(u).
2. Se determina functia inversa A(u): u = A-1(s).
3. Se substituie u = A-1(s) din P(u) pentru a afla parametrizarea caii de
miscare prin lungimea arcului, s: P(s) = P(A-1(s)).
Observatie: parametrul u (si astfel s) trebuie sa fie parametru global pentru
toate segmentele curbei spline initiale.

Controlul vitezei pe curba
Controlul vitezei de-a lungul traiectoriei spline:
o Fie s = f(t) definitia distantei pe curba spline, ca o functie de timpul t.
o Functia f(t), ca o valoare scalara, poate fi prelucrata printr-o tehnica de
animatie functionala (ex. o alta curba spline).
o Functia f(t) poate fi exprmata ca o integrala a functiei viteza, v(t) =
df(t)/dt.
Observatie: integrala unei functii spline poate fi calculata analitic, prin
intermediul punctelor de control.
o Pasul de miscare ca o functie de timp este data de:
P(s) = P(f(t)) = P(A-1(f(t)))

Interpolarea orientarii
o Interpolarea orientarii se calculeaza indirect prin interpolarea
unghiurilor si nu prin matrici de transformare:
n In 2D orientarea e definita de un singur unghi, iar animarea este
relativ simpla
n In 3D se utilizeaza trei unghiuri, iar topologia este a unei sfere in
patru dimensiuni. Interpolarea este mai greu de vizualizat.
o Metode pentru interpolarea orientarii obiectelor

n Unghiuri Euler
n Quaterni
n Interpolarea sferica si liniara

Unghiuri Euler
o Se folosesc trei unghiuri: rotatie dupa x, apoi rotatie dupa y si apoi
rotatie dupa z.
o Dezavantaje: dificil de rezolvat problema inversa – fiind data
orientarea, care sunt unghiurile?
o Avantaje: Larg folosita in practica, usor de implementat, metoda
necostisitoare.

Quaterni
o Patru elemente analoage numerelor complexe. Calculele se bazeaza pe
operatii cu vectori si numere complexe.
o Dezavantaje: necesita matematica mai multa, interpolare costisitoare.
o Avantaje: rezolvare simpla a problemei inverse, interfata utilizator
simpla.

Miscarea camerei de luat vederi
o Animatia camerei poate fi realizata prin combinarea interpolarii
pozitiilor si a orientarii. Exista totusi citeva cerinte specifice cum ar fi:
n Camera trebuie sa fie intotdeauna orizontala, daca nu se specifica
alta directie.
n Imaginile obiectelor de interes trebuie sa fie stabile in planul
filmului.
n Specificarea miscarii camerei trebuie sa respecte anumite conditii
cinematice.

o Fiind dat un model cu un foarte mare numar de virfuri, acestea pot fi
grupate si prelucrate ca o unitate. Exemplu, punctele care descriu
antebratul se misca mai mult sau mai putin ca un corp rigid.
o Conectivitatea intre grupuri poate fi reprezentata prin legarea fiecarui
grup la un „os” care face parte dintr-un „schelet” articulat.
o Oasele si virfurile asociate sunt tratate ca un singur obiect rigid in
operatiile de transformare.
o Miscarea oaselor este constrinsa de legaturile din schelet. Scheletul
este o structura articulta.
o Diferitele forme de conexiune (rotatie, unghi, sfera) permit diferite
forme de miscare.
o Animatia poate fi vizualizata rapid folosind trasarea doar a scheletului.
In final modelul este vizualizat fara oase.

Ref: Automatic Splicing for Hand and Body Animations Majkowska, A., Zordan, V. B., Faloutsos, P.
ACM SIGGRAPH/Eugorgraphics Symposium on Computer Animation (SCA) 2006

Cinematica structurilor articulate
o Cinematica: studiul miscarii independenta de fortele care determina
miscarea. Considera pozitia, viteza si acceleratia.
1. Cinematica directa (φ, β, ω -> P(x,y,z))
2. Cinematica inversa (P(x,y,z) -> φ, β, ω )
P(x,y,z)

Cinematica directa
o Forward Kinematics
o Se calculeaza pentru toate legaturile dintr-un model articulat:
o Pozitiile
o Vitezele
o Acceleratiile
o Se dau:
o Pentru nodul radacina:
n Pozitia
n Viteza
n Acceleratia
o Toate transformarile dintre legaturi.
o Cinematica directa este importanta in animatia bazata pe cadre
scheletizate. Este o metoda relativ usor de implementat.

Cinematica inversa
o Inverse Kinematics
o Determinarea miscarii legaturilor intermediare dintr-un corp articulat
fiind data miscarea unor legaturi cheie.
o Caracteristici ale metodei bazate pe cinematica inversa:
n Neliniara, nedeterminata.
n Complexitatea determinarii solutiei este proportionala cu numarul
legaturilor libere.
n Imbinare libera dintre doua legaturi fixe poate fi rezolvata eficient
numai prin sacrificarea unui grad de libertate.
n Sunt necesare constringeri suplimentare pentru a obtine o solutie
unica si stabila. Exemplu, considerarea fortei gravitationale,
constringerile impuse de unele tipuri de articulatii (rotatie vs
sferica, genunchi vs umar).
n Obiective suplimentare de optimizare. Rezulta problema de
optimizare rezolvata iterativ ca un proces de animatie.
Exemplu: minimizarea energiei cinetice a structurii.
Tehnici alternative de animatie
o Transformare morfologica (Morfing)
o Captarea miscarii
o Sisteme de particule
o Grup (Flocking)


o Este transformarea de interpolare intre imagini (anii ‘70).
o Efecte bune la un cost redus.
o Pasii principali:
1. Partitionarea imaginilor in piese corespunzatoare. Exemplu, ochi
cu ochi, etc.
2. Interpolarea pieselor (geometria)
3. Interpolarea atributelor (pixeli, culori)
4. Filtrare

Captarea miscarii

Captarea miscarii

Captarea miscarii
o Animatiile complexe necesita o multime de cadre cheie (exemplu,
mersul unei persoane).
o Captarea pozitiilor cheie de la obiecte reale. Sunt inregistrate in model
pozitiile unor puncte cheie de pe obiectul real (ex. un actor).
o Tehnologii de urmarire a pozitiei:
n Senzori electromagnetici pentru pozitie si orientare. Necesita cabluri la
fiecare senzor. Citirea poate fi perturbata de cimpuri magnetice. Spatiul de
miscare este limitat.
n Triangulatie prin ultrasunete. Simplu dar mai putin precis decit senzorii
magnetici.
n Triangulatie optica. Sunt atasati emitatori pe obiectul urmarit. Doua camere
determina pozitia. Poate urmari mai multe puncte, fara a folosi cabluri.
n Costume de corp. Senzori care determina unghiurile din incheieturi sunt
inserati in tesatura hainelor.

Aplicatia Facerig
o Permite urmarirea expresiilor faciale folosind camera web
(https://facerig.com/).
o Urmarirea se face fara utilizarea unor markere (markerless tracking).
Recunoaste si urmareste trasaturile fetei cum ar fi narile, colturile
buzelor si ale ochilor, sau ridurile.


o Se pot modela obiecte „fuzzy” (vagi) cum ar fi:
n Obiecte cu margini neclare
n Obiecte cu margini care se schimba
n Obiecte cu comportament haotic. Exemple: nori, foc, apa, iarba, blana, etc.
o Pricipiul: modeleaza obiectele fuzzy ca multimi de particule.

o Fiecare particula are proprietati cum ar fi:
n Geometrie (punct, sfera, segment de dreapta)
n Pozitie
n Vector viteza
n Dimensiune
n Culoare
n Transparenta
n Stare
n Durata de viata

Animatia sistemelor de particule
o Noi particule se nasc, cele vechi mor
o Informatia de stare descrie tipul particulei
o La fiecare moment:
n Actualizeaza atributele tuturor particulelor
n Sterge particulele vechi
n Creaza noi particule
n Afiseaza starea curentìr a tuturor particulelor
o Pentru antialiasing, deseneaza un segment de dreapta din vechea spre

noua pozitie
o Pentru a desena iarba sau blana, deseneaza intreaga traiectorie a
particulei


o Animatia grupurilor de animale: stoluri de pasari (flocks), pesti, turme
de animale etc.
o Sunt prea multi indivizi pentru a fi animat fiecare prin cadre cheie.
o Elemente mai putine decit in sistemele de particule, dar cu mai multe
interactiuni.
o Se impune evitarea ciocnirilor cu alte obiecte (ex. cladiri, copaci) sau
intre ele.
o Grupul are un centru: fiecare membru incearca sa ramina membru al
grupului, centrul grupului este unul global, nu permite divizarea
grupului pentru a trece un obstacol.

Boids
o Operatii ale grupului
1. Separare
Evitarea aglomerarii
2. Aliniere
Alinierea la orientarea medie a grupului
local
3. Coeziune
Deplasare spre pozitia medie a grupului
local
o Ref.: Craig Reynolds, Boids,
http://www.red3d.com/cwr/boids/ (1986).

1. Exemplify the animation by modifying the object’s attributes.
2. Exemplify the animation by modifying the camera’s attributes.
3. Exemplify the animation by modifying the light source’s attributes.
4. Exemplify the value space for temperature, and an animation by
modifying the temperature. What could be the reference variable and
the value for a linear interpolation within the value space?
5. What is the main advantage in linear interpolation if the step of the
variable is a constant? How are computed the intermediate values?
6. Explain a solution for animated morphism of a triangle into a pentagon.
How do you control the transformation to be achieved by the same: (a)
time; (b) speed.
7. Explain a solution for animated morphism of a cube into a sphere. How
do you control the transformation to be achieved by the same: (a)
time; (b) speed.

8. Describe and exemplify the steps of the actual cartoon video
development methodology to animate a talking person.
9. Why initially to register the voices is necessary, even finally they will
be replaced?
10. Explain what means to build up the 3D model of the characters in the
cartoon video development methodology?
11. Explain and exemplify how are created the key frames for a cartoon
movie?
12. Why to animate a faster movement you need to register more than 24
frames per second? Explain why the movie does not replay all the
details of the movement?
13. Explain why the 12th step of the cartoon video development
methodology requires so high performance computation resources?
14. Explain the linear interpolation of the movement if the reference
variable is the time. The animation is performed between the time t1
and t2.

15. Describe what are the main issues on connecting two intervals of linear
interpolation movement? How do you achieve constant speed on the
trajectory?
16. Explain why the user cannot control the animation by the abstract
parameter u, on the parametric definition of the linear movement?
What parameters support the user control of the animation?
17. Exchange the abstract variable u to time, in order to control the
animation along a spline trajectory by the time.
18. Why the animation on the spline trajectory is controlled by difficulty?
What are the main issues?
19. Give examples in real life for direct and inverse kinematics.
20. Exemplify and explain a morphism for animating the development of a
leaf, movement cloud, and jumping ball.

Mathematics in Computer Graphics
Contents
o Geometry (2D, 3D)
o Trigonometry
o Vector spaces
n Points, vectors, and coordinates
o Dot and cross products
o Linear transforms and matrices

Coordinate Systems
o Orthogonal coordinate systems
n Left-hand
n Right-hand
Y
Y

Points
o 2D: P(x, y), 3D: P(x, y, z)
o Point-point subtraction: Q - P = v
n Result is a vector pointing from P to Q
o Vector-point addition: P+v=Q
n Result is a new point

Line
o Slope based equation
y = mx + b
Slope m= (y - y1) / (x - x1) = (y2 - y1) / (x2 - x1)
o Parametric equation
P = P1 + t(P2-P1), as vector based definition
or
P = (1-t)P1 + t P2, as affine combination of two points
x = x1 + t(x2-x1)
y = y1 + t(y2-y1) y t >1
P = (x, y)
t<0, before P1(x1, y1)
t=1 P2 = (x2, y2)
t=0, P=P1
0<t<1, get points 0< t <1
between P1 and P2
t=1, P=P2(x2, y2) t=0 P1 = (x1, y1)
t>1, after P2 t<0
x
Line related formulas
o Length = sqrt (x2 - x1)2 + (y2 - y1)2
o Midpoint, p3, between p1 and p2
p3 = ((x1 + x2) / 2, (y1 + y2) / 2))
o Two lines are perpendicular if:
m1 = -1/m2
cos(θ) = 0
dot product of related vectors is zero (u•v=0)
o Point P3 lays on the line P1P2 if:
Cartesian space, slope based definition:
y3 = mx3 + b, where m(P1,P2), b(P1,P2)
Affine space, parametric definition:
P3 = P1 + t(P2-P1), the system of equation on x, y (and z)
should have solution. The position depends on the t value
(<0, 0, 0..1, 1, 1<)

Vectors
o Two types of elements: y
n Scalars (real numbers): a, b, g, d, …
n Vectors (n-tuples): u, v, w, …
o Used for: w
n Points in space (i.e., location)
n Displacements from point to point
n Direction (i.e., orientation)
o Operations: P2 = (x2, y2)
n Addition v
n Subtraction
n Dot Product P1 = (x1, y1)
n Cross Product
n Norm
uy P = (x, y)
u
ux x

Vector operations
o Addition
o Subtraction
o Multiplication by a scalar
o Distributive rule: a(u + v) = a(u) + a(v)
(a + b)u = au + bu
o “stretches” a vector, changing its length but not its direction
y y
u+v
v v
u u
x -v x
u-v

Dot product
o The dot product or, more generally, inner product of two
vectors is a scalar:
u • v = ux vx + uy vy + uz vz (in 3D)
v
o Is commutative
u•v=v•u
o Is distributive with respect to addition θ u
u • (v + w) = u • v + u • w
o Used for:
n Computing the length (Euclidean Norm) of a vector:
length(v) = ||v|| = sqrt(v • v)
n Computing the distance between two points P and Q:
v = Q – P, distance(P, Q) = length(v) = ||v|| = sqrt(v • v)
n Normalizing a vector, making it unit-length: v = v / ||v||
n Checking two vectors for orthogonality
u•v=0

Dot product
o Computing the angle between two vectors:
u • v = |u| |v| cos(θ)
If u • v < 0 then θ>90˚, u • v = 0 then θ=90˚, u • v > 0 then
θ<90˚
o Relative position of a point P against a plane
If the vector v = Q-P, where Q is any point on the plane, and the
normal vector of the plane is n, v and n gives an angle:
θ>90˚ then P is in front of the plane
θ=90˚ then P is on the plane
θ<90˚ then P is on back of the plane
o If the viewer (P) is in front of the lateral plane polygon of
a convex 3D object, the polygon is visible
n θ
v Q
P

Dot product
o Projecting a vector onto another
n If v is a unit vector and we have another vector, u
n We can project u perpendicularly onto v
n And the result w has length u • v
u•v
_________
||w||=||u||cos(θ)=||u|| = u•v
||u||·||v||
o Computes the distance between poin P and a plane.

Normal vector is normalized (||n||=1), then distance =||Q-R||
u
n θ
θ v Q
P
w v

Cross product
o The cross product or vector product of two vectors is a vector
orthogonal to both,
v1 x v2 = n |v1||v2| sin(θ), n is normal vector to both v1 and v2
o Right-hand rule dictates direction of cross product
x1 x2 i j k i j k
v1 = y1 v2 = y2 v = v1xv2 = x1 y1 z1 v = x1 0 0
z1 z2 x2 y2 z2 0 y2 0
i=(1,0,0), j=(0,1,0), k=(0,0,1) – cartesian system
v2 y1 z2 – y2 z1 0
v = v1xv2 = -(x1 z2 – x2 z1) v= 0

v
θ v1 x1 y2 – x2 y1 x1 y2

Cross product
o Application:
cross product computes the normal vector to a plane polygon
n1 = e1 x e2, where e1 and e2 could be given by two consecutive
edges of a poligon v1v2 and v2v3 respectively.
o Convention
1. Normal vector points away of the object
n Counterclockwise vertex sequence, e.g. v1, v2, v3, v4
2. Normal vector points into the object
n Clockwise vertex sequence, e.g. v1, v4, v3, v2
n3 v8 v7
v8 v7
v4 v3
n3
v4
v3 n2
n2
v6 n1 v6
v1 v2
n1 v1 v2

Triangle computation
o Consider the general case of the cross
product:
y (x2, y2)
i j k v2
(x1, y1)
v = v1xv2 = x1 y1 0
x2 y2 0 v1
x
v
v = (x1 y2 – x2 y1) k
The cross product is a vector v along z, z
of module | x1 y2 – x2 y1|.
y C (x2, y2)
v2
B
θ (x1, y1)
v1
A
x
Area of a triangle
The triangle ABC has the area:
½ (x1-x2) (y1+y2) + y C (x2, y2)
½ (x2-x0) (y2+y0) +
½ (x0-x1) (y0+y1) = v2 (x1, y1)
B
½ (x1y1+x1y2-x2y1-x2y2 +
θ
x2y2+x2y0-x0y2-x0y0 + v1
x0y0+x0y1-x1y0-x1y1) = A
(x0, y0)
x
½ (x0y1-x1y0+x1y2-x2y1+x2y0-x0y2)
where x0, y0 = 0
S = ½ (x1y2-x2y1)
therefore
S = ½ |v1 x v2|
Moreover
v1x v2 = |v1| |v2| sinθ

Triangle computation
o Consider a triangle, (a, b, c)
a,b,c = (x,y,z) tuples
o Surface area by cross product

S = ½ ||u x v|| = ½ * ||(b –a) X (c-a)||
o Unit normal vector

n = (1/2S) * (b-a) X (c-a)
u
c
v
n
a

Area of a polygon
Polygonal area:
½ (x0-x1) (y0+y1) + y
P2 (x2, y2)
½ (x1-x2) (y1+y2) +
Pn-1
...
½ (xn-x0) (yn+y0) = (xn-1, yn-1) (x1, y1)
P1
½ (x0y0+x0y1-x1y0-x1y1 +
x1y1+x1y2-x2y1-x2y2 +
.. .
P0
xnyn+xny0-x0yn-x0y0) (x0, y0)
n-1
O x
S = 1/2 Σi=0
(xiyi+1 – xi+1yi)

Area of a polygon
Polygonal area:
y
P2 (x2, y2)
n-1
Pn-1
S = 1/2 Σi=0
(vi x vi+1)
(xn-1, yn-1) (x1, y1)
P1
P0
(x0, y0)
O x

Convex and concave polygon
A
A
E E
D
D B
B C
o Cross product of successive edges (n = e1 e2 sin(θ) )

o Turn directions
o Order of three successive vertices
o Angles
o Intersection between an edge and the polygon

Convex and concave polygon
o At least one intersection between an edge and the polygon
A
A
E E
D
D B
B C

Test for convex and concave polygons
For the convex polygon all the cross P2
y
products of adjacent edges will be the Pn-1
same sign.
sign (e1xe2) = sign (e2xe3) = …
= sign (enxe1) P1
Obs: moving along the edges of the convex

polygon it always turns left.
P0
The concave polygon has a mixture of P3
cross product signs. Pn-1
NO: sign (e1xe2) = sign (e2xe3) = …
= sign (enxe1)
P1
Obs: moving along the edges of the concave P2
polygon it sometimes turns right.
P0
x
O

Plane in Cartesian Space
o Plane equation:
Ax + By + Cz + D = 0
o Normal vector:
N [A, B, C]
o Equation by one point P(x0,y0,z0) and normal vector N:
A(x-x0) + B(y-y0) + C(z-z0) + D = 0
o Plane defined by 3 points:
P(x1, y1, z1), Q(x2, y2, z2), R(x3, y3, z3)
y1 z1 1 x1 z1 1
x y z 1 A= y2 z2 1 B=- x2 z2 1
x1 y1 z1 1 y3 z3 1 x3 z3 1
=0
x2 y2 z2 1
x3 y3 z3 1 x1 y1 1 x1 y1 z1
C= x2 y2 1 D=- x2 y2 z2
x3 y3 1 x3 y3 z3

Plane in Affine Space
o Parametric plane equation by 3 points P, Q, and R:
(1-s)((1-t)P + tQ) + sR
Or another form P + t(Q-P) + s(R-(P + t(Q-P)))
o Equation of the plane through P and normal vector v as
dot product:
(X – P)•v = 0
o Intersection of a line with the plane:
Plane equation (X – P)•v = 0
Line equation Q(t) = Q + tw
Replace the point X by Q(t) for the intersection
(Q + tw – P )•v = 0
((P - Q)•v
__________
Gives t=
w•v
((P - Q)•v
And the intersection point is Q+ _________ w
w•v

Distance to a line
o Line equation is:
P(t) = P0 + t v, t parameter, v direction vector
o Distance from R to the line:
It is the point P(t) for which the distance is minimum
(R - P(t))•v = 0, and expanding
(R - P0 - t v)•v = 0
(R - P0)•v = t v•v R
((R - P0)•v
___________
Result t=
v•v
And the closest point to R is:
P0 P(t)
((R - P0)•v v
P0 + ___________ v
v•v

Point to point relationship
o Ordered points
P, Q, and R counterclockwise order
The order expressed as a determinant: P = (x1, y1)
x1 y1 1
D = x2 y2 1
x3 y3 1 Q = (x2, y2) R = (x3, y3)
If sign(D)=1 (+) then counterclockwise direction

sign(D)=0, collinear points
sign(D)=-1 (-), clockwise direction

Point to line relationship
o P(x0, y0) on the line
P checks the equation: P = P1 + t(P2-P1)
The system should have a real solution on t:

x0 = x1 + t(x2-x1)
y0 = y1 + t(y2-y1)
y t >1
Otherwise P is ouside of the line P = (x0, y0)
t=1
Discussion on the t: P2 = (x2, y2)
t=0, P=P1(x1, y1) 0< t <1
t=1, P=P2(x2, y2)
0<t<1, the P position t=0 P1 = (x1, y1)
between P1 and P2
t<0

Point to triangle relationship
o Compute the order relationships of P against the triangle
vertices A, B, and C
o Inside of the triangle
sign(A,B,P)=sign(B,C,P)=sign(C,A,P)
o Outside of the triangle

NO: sign(A,B,P)=sign(B,C,P)=sign(C,A,P)
A
A
P
B C
B
C
P

Point to polygon relationship
o P lays inside the polygon
o Sum of angles given by the edges is 360˚
^1 + ^2 + ^3+ ^4 + ^5 = 360˚
o P lays inside at least one triangle of the triangulation set
ΔABD, ΔBDC, ΔDEA, P Є ΔABD
o Number of intersection between a line starting on P and the
triangle
Odd number of intersection: P1, P2, P3
A A
P3
E E
5 D D P2
4
P1
1
P 3 P
2
B B
C C

Polygon triangulation
A o
E
D
B
C

Polygon triangulation
A
A
E
E
D
D
B
B C
C
o Another approach: Delaunay triangulations

Delaunay triangulation
o Delaunay triangulation:
for a set P of points in the plane is
a triangulation DT(P) such that no
point in P is inside the circumcircle
of any triangle in DT(P).
o Delaunay triangulations maximize the
minimum angle of all the angles of the
triangles in the triangulation. They tend
to avoid skinny triangles.
o The triangulation was invented by Boris
Delaunay in 1934.

Point to plane relationship
o A very general test to determine if a point P is “inside” a
plane Г, defined by the point Q and the normal vector n:
(P - Q) • n < 0: P inside Г
(P - Q) • n = 0: p on Г
(P - Q) • n > 0: p outside Г
Q Q Q
n n n
P P
P
Г Г Г

Point to plane relationship
o Plane Г : Ax + By + Cz + D = 0
o Normal vector n [A B C]
o Plane Г intersects the axes on -D/A, -D/B and -D/C
If the intersection points are on the positive axes then A, B, C are positive and D
is negative
Y
o Distance from the origon O to
the plane Г is |D|
-D
___
o For function
B F(x,y,z)= Ax + By + Cz + D,
n
position of the point
P0 Q(xq, yq, zq) is:
P
if F(Q) > 0 then Q in front of
the plane Г (semispace
of n)
O
-D
___ -D X
___ if F(Q) = 0 then Q on the
C A plane Г
if F(Q) < 0 then Q behind

Z the plane Г

Point to 3D convex object
o Compute the plane equation and the function:
Fi(x,y,z)= Aix + Biy + Ciz + Di
for all polygonal faces of the object Ω
o Compute the normal vectors to point away from the 3D polygonal
object
o The point P(xp,yp,zp) is located as follows:
1. If at least one function gives F(P)>0, then P outside of

Ω
2. Else if one function gives Fk(P)=0, then P on the k
polygonal face
P3
3. Else if two functions give Fk(P)= Fq(P)=0, then P on
P1 the edge between the k and q polygonal faces
4. Else if r functions give Fk1(P)= Fk2(P)= ..=Fkr(P)= 0,
then P on the vertex between the k1, k2,…,kr
P2 polygonal faces
5. Else if all functions give Fk(P)<0, then P inside of Ω
6. Otherwise error

Convex and concave 3D object

Line to line relationship
o Resolve the system of two line equation
P = (1-t)P1 + t P2
P = (1-s)Q1 + s Q2
The equation should have real solution on t and s:

s<0
(1-t)P1 + t P2 = (1-s)Q1 + s Q2
t >1
In fact it is: s = 0, Q1
(1-t)xp1 + t xp2 = (1-s)xq1 + s xq2 P2, t = 1
(1-t)yp1 + t yp2 = (1-s)yq1 + s yq2
P(x,y)
Discussion on the t and s:
t<0, s<0 P before P1 and Q1 0< t <1 0< s <1
...
t = 0, P1
0<t<1 and 0<s<1, P1P2 intersects Q1Q2
Q2 s = 1
...
t>1, s>1 P after P2 and Q2 t<0 s >1

Line - plane intersection
o Parametric definition of edge:
L(t) = L0 + (L1 - L0)t
If t = 0 then L(t) = L0
If t = 1 then L(t) = L1
Otherwise, L(t) is part way from L0 to L1
o Edge intersects plane Г where E(t) is on Г

Q is a point on Г
n is the normal vector to Г
(L(t) - Q) • n = 0
(L0 + (L1 - L0)t – Q) • n = 0
t = [(Q - L0) • n] / [(L1 - L0) • n]
The intersection point I = L(t) for this value of t

Line to triangle relationship
o P and Q inside the triangle
o P and Q outside
n PQ intersects the triangle
n PQ does not intersects the triangle
o Solutions:
n Analyse the line to edges relationships
n Cyrus-Beck algorithm
max(tE) < min(tL) n A
n
E1 L1
P Q E2
B
n
C
Line to polygon relationship
o Convex and concave polygons
o Triangulation
o Convex polygons
n Analyses the line to edges relationships
n Cyrus-Beck algorithm
(requires a convex polygon!)
D
E1 L3
Q E2 L1 E3
P B
E

P1
P5
View tnear,1 tfar,3

ray
P2
P4
P3
Compute max(tnear) and min(tfar);
If max(tnear) < min(tfar) there is intersection;

P1
P5
View tnear,1 tfar,3

ray
P2
P4
P3
Initialize tnear to large negative value, tfar to large positive value
If (plane is back-facing) and ( t< tfar) then tfar = t

If (plane is front-facing) and ( t> tnear) then tnear = t
If ( tnear > tfar) then (exit – ray misses)

Line and 3D object intersection
n
n
P P

1. What is the motivation of using in graphics systems of one instead of
another coordinate system: left-hand or right-hand?
2. What could be the meaning of the coordinate axes?
3. What is the main difference between the parametric equations of the
line: P = P1 + t(P2-P1), and P = (1-t)P1 + t P2 ?
4. Explain the using of the parametric equation of a line for modelling the
viewing ray.
5. Explain an approach to determine if an object lies in front side,
backside, and aside of the viewer.
6. Let be two lines d and f in plane. Explain an approach to determine if
the two lines are in one of the following cases (a) intersects each
other; (b) are orthogonal; (c) form a given angle (e.g. 35o).
7. Let be a wall and a person. Determine if the person lies in front of the
wall.
8. Let be a pentagonal room and a person. Determine if the person lies
inside the room. Determine if the person lies outside the room.

9. Let be a person and a pentagonal building. Explain an approach to
determine the visible and non-visible walls of the building.
10. Let be a triangle in the plane. Explain an approach to compute the
distance from a point P to the triangle.
11. Let be a pentagonal building. Explain an approach to compute the
distance of a person to the building.
12. Let be two triangles in the plane. Explain an approach to compute the
distance between the two triangles.
13. Let be a pentagon in the plane, given by its vertices in the
counterclockwise direction. Compute the normal vectors to the edges.
14. Let be the polygon in the plane, given by its vertices V1, V2, …, V10.
Explain an approach to compute the area of the polygon.
15. Let be two vectors AB and BC. Explain an approach to determine if the
vector BC goes relative to AB (a) forward; (b) backward; (c) left; (d)
right.

16. Let be a polygon in the plane, given by its vertices V1, V2, …, V5.
Explain an approach to determine if the polygon is convex or concave.
17. Let be a convex polygon in the plane, given by its vertices V1, V2, …,
V5. Explain an approach to determine if the point P lies outside the
polygon.
18. Let be a concave polygon in the plane, given by its vertices V1, V2, …,
V5. Explain an approach to determine if the point P lies inside the
polygon.
V5. Explain an approach to determine if the segment AB lies outside
the polygon.
V5. Explain an approach to determine if the triangle ABC lies outside
the polygon.
21. Let be two triangles in the plane. Explain an approach to compute the
relationship between the two triangles: (a) intersected; (b) disjoint; (c)
included.

22. Let be a segment AB and a point P in the plane. Compute the distance
between the point P and the line AB. How do you compute the distance
between the point P and the segment AB?
23. Let be a segment AB and a point P in 3D space. Compute the distance
between the point P and the line AB. How do you compute the distance
between the point P and the segment AB?
24. Let be the triangle ABC in the following figure. Determine if the triangle
PQR lies inside one of the regions: 2, 3 or 5.
6
R
A
1 5
Q
0 P
B
C
2
3
4

25. Let be an oriented segment AB. Explain an approach to determine if a
point P lies on left side or right side of the segment.
26. Let be a line in the plane, given by the equation y = 0.5x + 7.
Determine if a point P(3,5) lies below or above the line.
27. Let be the linear function F(x,y)=0.5x –y +7. Determine if the points
below the line y=0.5x+7 give positive or negative values.
28. Let be the function F(x,y)=ax+by+c. Explain if the points above the
line ax+by+c=0 give positive or negative values.
29. Let be the function F(x,y,z)=Ax+By+Cz+D. Explain if the points in
front of the plain Ax+By+Cz+D=0 give positive or negative values.
30. Let be the pentagonal polygon in the plane, and the viewer P is looking
toward the point Q. Explain an approach to determine if the viewer
also looks toward the polygon.
31. Let be a cube in the 3D space, and the viewer P is looking toward the
point Q. Explain an approach to determine if the viewer also looks
toward the cube.

32. Let be a 3D polygonal object, where its surface is modelled by
triangles. Explain an approach to determine the position of a point P
relative to the object, if the 3D object is (a) convex; (b) concave.
33. Let be two cubes of any dimension and orientation. Explain an
approach to compute the distance between the two cubes.
34. Let be two cubes of any dimension and orientation. Explain an
approach to determine the relative position of the two cubes as: (a)
disjoint; (b) intersected; (c) surrounded.

Elements of Computer Graphic

Uploaded by

Document Information

Original Title

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Elements of Computer Graphic

Uploaded by

Copyright:

Computer Animation

Elements of Computer Assisted Graphics 2

Toy Story (1995) Ratatouille (2007)

Elements of Computer Assisted Graphics 3

Elements of Computer Assisted Graphics 4

Elements of Computer Assisted Graphics 5

Elements of Computer Assisted Graphics 6

Elements of Computer Assisted Graphics 7

Elements of Computer Assisted Graphics 8

2. Pentru camera de luat vederi:

3. Pentru sursa de lumina:

Elements of Computer Assisted Graphics 9

Intr-o forma iterativa: u0 ui un

Elements of Computer Assisted Graphics 10

Fie P0, Pn valorile parametrului sau atributului P in cadrele 0 si n.

Elements of Computer Assisted Graphics 11

Elements of Computer Assisted Graphics 12

Elements of Computer Assisted Graphics 13

Referinta: Metodologia Pixar, http://www.pixar.com/howwedoit/index.html

Elements of Computer Assisted Graphics 14

Elements of Computer Assisted Graphics 15

Elements of Computer Assisted Graphics 16

sau alte forme ale aceleiasi expresii:

Elements of Computer Assisted Graphics 17

P0(x0, y0, t0) P2(x2, y2, t2)

P1(x1, y1, t1) P1(x1, y1, t1)

Elements of Computer Assisted Graphics 18

o Fie aceasta functie τ = f(t). Se trece la variabila τ in expresia de

f(t1) – f(t) f(t) – f(t0)

Elements of Computer Assisted Graphics 19

n Calcularea curbelor spline dureaza mai mult

Elements of Computer Assisted Graphics 20

Elements of Computer Assisted Graphics 21

Elements of Computer Assisted Graphics 22

Elements of Computer Assisted Graphics 23

Elements of Computer Assisted Graphics 24

Elements of Computer Assisted Graphics 25

o Metode pentru interpolarea orientarii obiectelor

Elements of Computer Assisted Graphics 26

Elements of Computer Assisted Graphics 27

Elements of Computer Assisted Graphics 28

Elements of Computer Assisted Graphics 29

Elements of Computer Assisted Graphics 30

Elements of Computer Assisted Graphics 31

Elements of Computer Assisted Graphics 32

Elements of Computer Assisted Graphics 33

Elements of Computer Assisted Graphics 35

Elements of Computer Assisted Graphics 36

Elements of Computer Assisted Graphics 37

Elements of Computer Assisted Graphics 38

Elements of Computer Assisted Graphics 39

Elements of Computer Assisted Graphics 40

Elements of Computer Assisted Graphics 41

Elements of Computer Assisted Graphics 42

n Obiecte cu margini care se schimba

o Pricipiul: modeleaza obiectele fuzzy ca multimi de particule.

Elements of Computer Assisted Graphics 43

n Sterge particulele vechi

n Creaza noi particule

n Afiseaza starea curentìr a tuturor particulelor

o Pentru antialiasing, deseneaza un segment de dreapta din vechea spre

Elements of Computer Assisted Graphics 44

Elements of Computer Assisted Graphics 45

Elements of Computer Assisted Graphics 46

Elements of Computer Assisted Graphics 47

Elements of Computer Assisted Graphics 48