Vous êtes sur la page 1sur 29

Programmation

Graphique 2D
INTRODUCTION ET FONDEMENTS
BASSEM SEDDIK - ISET KAIROUAN
Les systèmes de coordonnées
Dans les jeux vidéos 2D, on distingue deux types de coordonnées :
◦ les coordonnées de la fenêtre
◦ les coordonnées des textures

Ces deux types de coordonnées sont des coordonnées cartésiennes


Un point A est caractérisé par ses coordonnées :
◦ xA, l’abscisse de A
◦ yA, l’ordonnée de A

B. SEDDIK - ISET KAIROUAN 2


Coordonnées de la fenêtre
Par rapport à un système de coordonnées cartésiennes :
◦ l’axe des ordonnées est inversé
◦ une unité représente un pixel : 0 ≤ x ≤ w − 1 et 0 ≤ y ≤ h − 1

B. SEDDIK - ISET KAIROUAN 3


Coordonnées des textures (images)
Par rapport à un système de coordonnées cartésiennes :
◦ les coordonnées sont appelées (s,t) ou (u,v)
◦ les coordonnées sont normalisées entre 0.0 et 1.0 : 0.0 ≤ s ≤ 1.0 et 0.0 ≤ t ≤ 1.0

B. SEDDIK - ISET KAIROUAN 4


Vecteurs 2D

B. SEDDIK - ISET KAIROUAN 5


Vecteurs 2D

B. SEDDIK - ISET KAIROUAN 6


Somme Vecteurs

B. SEDDIK - ISET KAIROUAN 7


Système de coordonnées

B. SEDDIK - ISET KAIROUAN 8


Vecteurs dans l’espace réel

B. SEDDIK - ISET KAIROUAN 9


Norme (ou Magnitude)

B. SEDDIK - ISET KAIROUAN 10


Produit scalaire

B. SEDDIK - ISET KAIROUAN 11


Produit scalaire: exemple 1

B. SEDDIK - ISET KAIROUAN 12


Produit scalaire: exemple 2

B. SEDDIK - ISET KAIROUAN 13


Produit scalaire: exemple 3

B. SEDDIK - ISET KAIROUAN 14


Produit scalaire en pratique

B. SEDDIK - ISET KAIROUAN 15


Produit vectoriel

B. SEDDIK - ISET KAIROUAN 16


Produit vectoriel: Calcul

B. SEDDIK - ISET KAIROUAN 17


Produit vectoriel: Astuce

B. SEDDIK - ISET KAIROUAN 18


Produit vectoriel: Utilité pratique

B. SEDDIK - ISET KAIROUAN 19


Les Transformations
Géométriques 2D

B. SEDDIK - ISET KAIROUAN 20


Translation

P′( x + ∆x, y + ∆y )
 x′  =  ∆x  +  x 
P ( x, y ) ∆y  y′ ∆y   y 
∆x T P′ = T + P

B. SEDDIK - ISET KAIROUAN 21


Changement d’échelle (scaling)

P′( x∆x, y∆y )


 x′  = ∆x 0   x 
 y′  0 ∆y   y 
P ( x, y )
P′ = SP

B. SEDDIK - ISET KAIROUAN 22


Rotation 2D
P′( x′, y ′)
x = r cos φ
r P : 
 y = r sin φ
θ r P ( x, y )
φ

θ sens anti-horaire  x′  = cosθ − sin θ   x 


 y′  sin θ cosθ   y 
P′ = RP

B. SEDDIK - ISET KAIROUAN 23


Cisaillement (shearing)
 x′  1 a   x 
 y ′ =  0 1   y 
    
P′ = Shx P

 x ′  1 0   x 
 y′ = b 1   y 
    
P′ = Shy P
B. SEDDIK - ISET KAIROUAN 24
Réflexion 2D
P ( x, y ) P′( x′, y ′)
 x′  =  − 1 0   x 
 y′  0 1  y 

P ( x, y )  x′  = 1 0   x 
 y′ 0 − 1  y 
P′( x′, y ′)
P ( x, y )
 x ′  = 0 1   x 
P′( x′, y ′)  y′ 1 0  y 

B. SEDDIK - ISET KAIROUAN 25


Coordonnées Homogènes
•Pour Translation: T+P en addition
• mais les autres transformations sont des multiplications
•Représentation des transformations sous une forme matricielle unique:
+ uniformité
+ composition
+ opérations des 4x4 peuvent êtres exécutées en parallèle
- optimisations possibles...

 m11 m12 tx  x
m21 x′ = xm11 + ym12 + t x
m22 t y   y ↔
  1  y ′ = xm21 + ym22 + t x
 0 0 1  

B. SEDDIK - ISET KAIROUAN 26



B. SEDDIK - ISET KAIROUAN 27


Transformations géométriques:
Cas pratique
1 2

B. SEDDIK - ISET KAIROUAN 28


Transformations géométriques:
Cas pratique
1 2

4
3

B. SEDDIK - ISET KAIROUAN 29

Vous aimerez peut-être aussi