Grafica pe calculator Universitatea Mustansiriyah

A treia etapă 2020-2021 Colegiul de educaț ie

departamentul de informatică

Reprezentarea matricială a transformării

Multe aplicații grafice implică o secvență de geometrie
transformări. De exemplu, transformarea prin animație care este
se cere ca un obiect să fie tradus și rotit la fiecare increment de
mișcarea.
ñ Transformarea poate fi reprezentată ca un produs al rândului
vector [x,y] și o matrice 2x2 acceptată pentru traducere.
ñ Transformările pot fi combinate folosind multiplicarea matricelor
′
[ =] [ [ ] ][ []]
ℎ
ñ Matricele sunt convenabile pentru a reprezenta o secvență de
transformări

Matricea de traducere T(tx, ty)

Putem reprezenta transformarea de traducere după cum urmează:

′
P' = P + T, = [ ], = [ ] −−→ ′= [ ] = [ ]+ [′ ]

12
 Grafica pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiu de educaț ie
Departamentul de informatică

2- Matrice de scalare

ñ Dacă un punct P[ ]este un vector 2x1. Dacă îl înmulțim cu 2x2

0
matricea S=[ ]Vom obține un alt vector 2x1 pe care îl
0
poate fi interpretat ca un alt punct:
P' = S . P
′ 0
[ =′] [ 0 ].[ ]

ñ Ce se va întâmpla dacă transferăm fiecare punct prin intermediul

înmulțirea cu S și afișarea rezultatului:
1 0
1- Dacă S este matricea identitate: S=[ ]‰ Nicio schimbare
0 1
2 0 ′ 2 0 2x
2- Dacă S=[ ] atunci[ =′] [ ] . [ =] [ ]
0 1 0 1
Asta înseamnă:
- fiecare nouă coordonată x ar fi de două ori mai mare decât cea veche
valoarea liniilor verticale.
- coordonata x ar fi de două ori lățimea și aceeași înălțime.
0.5 0
3- Dacă S=[ ]‰ micșorează toate coordonatele x (micșorează lățimea cu
0 1
la fel de înalt)
Exemple:
1- Întinde imaginea/obiectul de două ori și apoi comprimă-l la una
jumătate din noua lățime?

P’= (S1S2). P
2 0 0.5 0 1 0
S1S2=[ ][ ]= [ ] . [ ]‰ matricea identitate atunci nu
0 20 0.5 01
schimbare

13
Grafica computerizată Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiul de educaț ie
Departamentul de informatică

2- Faceți o imagine de două ori mai lată și de două ori mai înaltă?

P’= (S1S2P
2 01 0 2 0
(S1S2) . P=[ ][ ]. P−−→ [ ]. [ ]
0 10 2 0 2

2- Matrice de rotaț ie
Dacă un segment de dreaptă are două extremități (0,0) și (x,y), și lungime
= √ 2+ 2:
Raportul dintre înălțimea punctului final (x,y) și axa x are
valoarea coordonatelor y și lungimea segmentului va fi
sinusul unghiului:Sin θ(= ) 2 2 √

- Raportul distanței punctului final (x,y) față de axa y are

valoarea coordonatelor x și lungimea segmentului vor fi
cosinusul unghiului:Cos θ =( ) 2 2 √
- Dacă L=1 atunci Sin( )=y și Cos( )=x
Dacă rotim punctul (1,0) în sens anti-orar cu un unghi , aceasta
devine (Cos( ), Păcat( )) așa:
cos (θ )
[ ]= [ ] [1 =] [ ]
sin(θ) 0

14
Grafica pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiu de educaț ie
departamentul de informatică

Dacă rotim punctul (0,1) în sens anti-orar cu un unghi , este

devine (-Sin (,Cos(θ))
) deci:
-sin θ( ) 0
[ ]= [ ] [ ]=[ ]
cos(θ) 1

Din aceste ecuații putem observa valorile lui a, b, c, d necesare pentru

formarea matricei de rotație:
( ) − ( )
R=[ ]
( ) ( )
Exemplu:
Rotează punctul (2,3) în sens antihorologic cu un unghiπ/6?
Matricea de rotație este:
( 6) − sin(π/6) 0.866 -0.5
R=[ ]= [ ]
sin(π/6) Cos(π/6) 0.5
Atunci punctul rotit ar fi:
P’ = R . P
0.866 -0.5 2 3.232
P’= [ ] [ ]= [ ]
0,5 0.866 3 3.598

Note:
Putem roti un segment de linie întreg prin rotirea ambelor
punctele finale care specifică asta.

15
Grafică pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiu de educaț ie
Departamentul de informatică

Matricea de rotație pentru un unghi în sensul acelor de ceasornic ar fi:

( −) − (− ) ( ) ( )
[ ]=[ ]
(− ) (− ) − ( ) ( )

H.W-1: Rote ș te triunghiul (5,2), (1,1), (0,0) prin rota ț ie în

spre stânga cu un unghi de 45 de grade° despre origine?
H.W-2
a-Găsiț i matricea care reprezintă rotaț ia unui obiect cu 30 de grade ° despre
originea?
b-care sunt noile coordonate ale punctului p(2,-4) după
rotire?

Coordonată omogenă în matricea de transformare

ñ De ce coordonate omogene?
1. Matematicienii folosesc frecvent coordonate omogene ca
ei permit eliminarea factorilor de scalare din ecuații.
2. Utilizarea coordonatelor omogene ne permite să folosim matricea
înmulțirea pentru a calcula transformările - extrem de
eficient!
3. Coordonnéele omogene par părea contraintuitive, dar ele fac
operațiile grafice mult mai ușoare.
4. Deoarece o reprezentare a unei matrice 2x2 a translației nu
există!! Așadar, folosind un sistem de coordonate omogene, atunci noi
poate reprezenta transformarea de translatie 2x2 ca o matrice
înmulțire.
5. Oferă un mod consecvent și uniform de a gestiona afine.
transformări. Transformările afinice 2D au întotdeauna o
randul din partea de jos al [0 0 1].

Un „punct afine” este un „punct linear” cu un adăugat

coordonată care este întotdeauna 1:

16
Grafica pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiul de educaț ie
Departamentul de informatică

p
paff= [ =lîn][ ]
1
1
Aplicarea unei transformări afine dă un alt punct afin.
ñ Un punct (x, y) poate fi rescris în coordonate homogenizate ca
(xw, yw, w)
- The omogen parametru w este a non-
valoare zero astfel încât coordonatele x și y pot fi ușor
recuperat prin împărțirea primelor două numere la
treilea.
= =

- Putem apoi scrie orice punct (x, y) ca :

.
[ ]= [ , .] ≠ 0

Noi poți alege convenabil w = 1 astfel încât

(x, y) devine:

[ ]= [ ]
1
ñ În coordonate omogene, matricea de scalare este următoarea:
0 0 0
[ 0 ]‰ [ 0 0]
0 0 1

0 0
[0 0 ] [ =[] ] ‰ împarte la w atunci[ este
]
0 0 1
punctul corect scalat.
ñ Matricea de rotație în sens invers acelor de ceasornic este
( ) − ( )
[ ]
( ) ( )

17
Grafica pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiu de educaț ie
Departamentul de informatică

( ) − ( ) 0
Folosind coordonate omogene, obținem:[ ( ) ( ]) 0
0 0 1
Aplicându-l la punctul (x,y) cu omogen (xw,yw,w) se obține:
( ) − ( ) 0
. =[ ( ) ( ]) [ ] 0
0 0 1

ñ Matricea de traducere a coordonatelor omogene tx, tyeste

1 0
= [0 1 ]
00 1
1 0 ( + )
. = [0 1 ] [ =[] ( + ]‰
00 1

+
împărțim la w, apoi obținem punctul P=[
+ ] este corect
punct tradus.
În general:
1- Traducere
̅ 1 0
[ ]= [ 0 1 ][ ]
1 00 1 1
2- Rotatie
̅ ( ) − ( ) 0
[ ]= [ ( ) ( ]) [ ] 0
1 0 0 1 1

18
Grafica pe calculator Universitatea Mustanț iriyah
A treia etapă 2020-2021 Colegiu de educaț ie
Departamentul de informatică

3- Scale
̅ 0 0
[ ]= [ 0 0] [ ]
1 0 0 1 1
ñ Rotire în jurul unui punct arbitrar
Matricea de transformare a coordonatelor omogene pentru
rotație în sens invers acelor de ceasornic în jurul punctului ( , ) este făcut de trei
pașii sunt următorii:
1- Traducere la originea
1 0−
1 =[0 1− ],
0 0 1
̅ 1 0−
[ ]= [ 0 1− ][ ]
1 0 0 1 1
2- Rotire în jurul originii
( ) − ( ) 0
R=[ ( ) ( ]) 0
0 0 1
̿ ( ) − ( ) 0 ̅
[ ̿ ]= [ ( ) ( ]) [ ] 0
1 0 0 1 1
3- Traducerea înapoi în poziția corectă
1 0
2 = [0 1 ]
0 01
̿̅ 1 0 ̿
[ ̿ ]= [ 0 1 ] [ ]̿
1 0 01 1

19
Grafica pe computer Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiul de educaț ie
Departamentul de informatică

Transformaț ii compozite
- Matricele sunt un mod convenabil și eficient de a reprezenta o
secvență de transformări.
Înmulțirea matricelor nu este comutativă, astfel că ordinea
transformările sunt importante.
Ce se întâmplă dacă vrem să rotați și să translatați?

Pentru a roti un punct ( 2(R ( 1 [ ))] )

- Acum trebuie să formăm o matrice de tranformare generală ca

urmează:-
( 2 (R 1)) [ ]

1 0 ( ) − ( ) 1 0 −x0
2R 1= [ 0 1 ][ ( ) ( ])[ 0 1 −y ] 0
0 01 0 0 1 0 0 1

Ordinea transformărilor

1 0 ( ) − ( ) ( )− Cos( θ+
)
= [0 1 ][ ( ) ( ) ( ) −( ) ] sin θ−
0 01 0 0 1

( ) − ( ) ( ) − ( ) + +
=[ ( ) ( ) ( ) − ] − ( )+
0 0 1

( ) − ( ) ( ) (1 − Cos( ) ) +
=[ ( ) ( ) ( ) ]
(1(− )Cos )−
0 0 1

20
Grafică pe calculator Universitatea Mustansiriyah
A treia etapă 2020-2021 Colegiu de educaț ie
Departamentul de informatică

Rotează segmentul de linie cu 45 de grade în jurul extremităț ii a

observați că tx=3?
» 3c0os(145)-
ÿ» sin(45 0 ) 3 0- 1a ÿ» x ÿ »a' x ÿ
ÿ»
… Ÿ… Ÿ… Ÿ…a y= a'Ÿ … Ÿ
… 001 sin(45)cos(45
Ÿ… 0 ) 0 01 Ÿ… Ÿ… Ÿy … Ÿ
… 100 Ÿ…⁄ 01 0 Ÿ…
⁄ 110 0 Ÿ… ⁄ ⁄ Ÿ 1… ⁄ Ÿ

H.W oteste triunghiul (5,2),(1,1),(0,0) prin rota ț ie în

în sens contrar acelor de ceasornic cu un unghi de 45° despre punctul fix (-1,-1)?

21
Grafica pe calculator 2018-2019 Vizualizare 2D ș i tăiere

Mapping între fereastră ș i viewport

Fereastră

1. O zonă a coordonatelor mondiale selectată pentru afișare se numește o

fereastră.
În grafica pe calculator, o fereastră este un element de control grafic.
3. Acesta constă dintr-o zonă vizuală care conține câteva dintre graficele
interfața utilizatorului a programului la care aparține și este încadrată de un
decorare fereastră.
O fereastră definește o zonă rectangulară în coordonatele lumii.
poate defini fereastra să fie mai mare decât, de aceeași dimensiune ca, sau
mai mic decât intervalul real al valorilor de date, în funcție de
dacă dorești să arăți toate datele sau doar o parte din acestea
date.

Viewport

1. O zonă pe un dispozitiv de afișare pe care o fereastră este mapată este

apelat un viewport.
Un viewport este o regiune de vizionare poligonală în grafica computerizată.
Zona de vizualizare este o arie exprimată în funcție de dispozitivul de redare specific.

coordonate, de exemplu pixeli pentru coordonatele ecranului, în care

obiectele de interes vor fi redimensionate.
3. Un viewport definește coordonate înnormalizate într-un dreptunghi
zona de pe dispozitivul de afișare unde apare imaginea datelor.
Puteți face graficul să ocupe întregul dispozitiv de afișare sau
afişează-l doar într-o porţiune, să zicem partea superioară-dreapta.

1
Grafica pe calculator 2018-2019 Vizualizare ș i tăiere 2D

Transformare fereastră în viewport

Transformarea Fereastră-la-Viewport este procesul de

transformarea unei scene în coordonate mondiale bidimensionale în
coordonate de dispozitiv.
2. În special, obiectele din interiorul lumii sau a feroneriilor sunt
mapează la fereastra de vizualizare. Fereastra de vizualizare este afișată în

interfața ferestrei pe ecran.

3. Cu alte cuvinte, fereastra de decupare este folosită pentru a selecta partea
a scenei care urmează să fie afișată. Viewport-ul apoi poziționează
scena pe dispozitivul de ieșire.
[Link]:

2
Grafica pe calculator 2018-2019 Vizualizare 2D ș i tăiere

Această transformare implică dezvoltarea unor formule care încep cu o

punct în fereastra lumii, spune (x, y).

3
Grafica computerizată 2018-2019 Vizualizare 2D ș i decupare

Exemplu1:

O fereastră normalizată are limitele stânga ș i dreapta de (-0.05 la

+0.05) ș i limitele inferioare ș i superioare de (0.1 la 0.2).
fereastra viewport-ului stânga ș i dreapta este (250,550) ș i de la jos la sus
este (100,400), găse ș te coordonatele oricărei punct (u,v) în
fereastra viewport.

Soluț ie

Fereastră( xmin=-0.05 , +0.05

Viewport ( umin=250, umax=550, vmin=100, vmax=400)

u=

c1 =300/0.1=3000

c2=umin-c1xmin

=250-3000(-0.05) =250+150 =400

u=3000x+400

v=d1y+d2

=300/0.1=3000

d2=vmin-d1ymin

=100-3000(0.1)

=-200

v=3000y-200

4
Grafică pe calculator 2018-2019 Vizionare ș i tăiere 2D

Exemplu2:
O fereastră normalizată are stânga (xmin=10) ș i dreapta (xmax=50)
benzi
limite. fereastra viewport stânga (umin=25) ș i
drept (umax=75) ș i inferior (vmin=25) la superior (vmax=75) găsiț i
coordonatele oricărui punct (u,v) în fereastra de vizualizare.

u=

c1 = 75 - 25 / 50 - 10

c1=50/40=1.25

c2=umin-c1xmin

=25-1.25*10

= 25-12.5=12.5

u=1.25x+12.5

v=d1y+d2

=75-25/30-5

d1=50/25=2

d2 = vmin - d1ymin

=25-2*5

=25-10=15

v=2y+15

5
Grafica pe calculator 2018-2019 Vizualizare ș i decupare 2D

Transformarea Feronieră la Fereastră N

Putem exprima aceste două formule pentru a calcula (u,v) din (x,y) prin
term

(scale-de-traduce)

[] []

N=T2ST1

1. T1matricea de translatie despre originile feronerie

[ ]

2. S este matricea de transformare prin scalare:

[ ]

3. T2 este poziția matricei de traducere a viewport-ului :

[ ]

6
Grafica pe calculator 2018-2019 Vizualizare ș i decupare 2D

Exemplu1:
O fereastră normalizată are limitele stânga ș i dreapta de (-0.05 până la
+0,05) ș i limitele inferioare ș i superioare de (0,1 până la 0,2).
fereastra viewport stânga ș i dreapta este (250,550) ș i de jos în sus
este (100,400), găseș te transformatia N.

Solu ț ia N=T2ST1

[ ]

[ ]

[ ]

[ ]

[ ]

[ ]

[ ][ ][ ]

7
Grafica pe calculator 2018-2019 Vizualizare 2D ș i tăiere

Exemplu 2

Specifica ț i individual matricele de transla ț ie

necesar să transformi o fereastră 2D de [Xmin=-234, Ymin=156]
ș i [Xmax=66, Ymax=456] la un viewport de afiș are de [Umin=45,
Vmin=35] ș i [Umax=245, Vmax=185].

Soluț ia N=T2ST1

[ ]

[ ]

[ ]

[ ]

[ ]

8
Grafica computerizată 2018-2019 Vizualizare 2D ș i Tăiere

[ ]

[ ]

[ ][ ][ ]