Part II

Infographie
 Infographie

Ensemble de techniques permettant de créer et de manipuler des images synthétiques.

Il y a du chemin à faire …….

 Infographie
Traitement d’image vs Infographie
 Infographie
Segments 2D et cercles
 Infographie 2D => besoin de dessiner des primitives de
base (segments, cercles, …).
 Espace discrétisé (rastérisé) => il faut trouver un moyen
pour afficher des segments ou des cercles.
Problème:
 Comment trouver les pixels à allumer pour approximer au
mieux une droite ou un cercle ? ( allumer moins de pixels)
 Algorithme rapide et précis.
 Infographie
Génération de segments de droite 2D
 À partir des coordonnées des 2 extrémités d’un segment…
 Équation d’une droite : y=mx+b
 Calcul de la pente:
 Infographie
Génération de segments de droite 2D
• À partir des coordonnées des 2 extrémités du segment
[(x1,y1);(x2,y2)]
• Un algorithme simple :
Boucle de x1 à x2 , dx=1,
ALLUME (x, Arrondir(y))
Avec x2>x1 Arrondir(y) = Arrondir(mx+b)
 Infographie
Génération de segments de droite 2D
Selon la pente:
o si |m|<= 1
Boucle de x1 à x2 , dx=1,
ALLUME (x, Arrondir(mx+b))

o si |m|> 1
Boucle de y1 à y2 , dy=1,
ALLUME (Arrondir((y-b)/m, y)

Peu efficace :
 à chaque itération : 1 multiplication (ou division) + 1 addition + 1
arrondi.
 Infographie
Génération de segments de droite 2D
 DDA (Digital Differential Analyzer): vient de l’analyse numérique

Remarque:
Cet algorithme est généralement considéré comme lent lorsqu'il est implémenté
en machine. Ceci est dû à l'utilisation d'opérations et de nombres en virgule
flottante.
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham
 Calcul en entier ! (donc plus rapide)
 Basé sur le choix entre deux points discrets, dépendant de leur
distance respective avec le point réel idéal.
 On simplifie le problème en traitant d’abord le tracé d’un segment
dans le 1er octant càd m inférieur à 1 et positif (0<m< 1)

Facilement généralisable aux autres octants par symétries.

 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
– Tracé d’un segment dans le premier octant m<1
– On part d’un point (xi, yi) allumé :
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
On ne calcule pas réellement les distances ⇒on vérifie si la
différence entre les deux distances est positive ou négative :

Le signe de la longueur (d1-d2) détermine s’il faut allumer le pixel L ou H.

 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
 Comme m=Δy/Δx, on multiplie cette différence par Δx pour
éviter la division:
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
Calcul de p1:
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
– Pour éviter de calculer cette différence pour chaque point, on cherche une façon
de calculer les différences subséquentes par incrémentation.
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham (suite)
 Infographie
Génération de segments de droite 2D
Algorithme de Bresenham: Exercices
1. Tracer le segment de (1;2) à (6;5).

x
 Infographie
Génération de segments de droite 2D
 Généralisation aux autres octants
 … interchanger les points …

 Si |Δx| < | Δy|, on interchange le rôle de x et y.

 Infographie
Génération de cercle 2D
• Equation cartésienne d’un cercle: (x-xc)²+(y-yc)²=r²
• Coordonnées polaires:

• Equation paramétrique (polaire) d’un cercle:

x=xc + r.cos(θ) ; y=yc + r.sin(θ)
 Infographie
Génération de cercle 2D
• Equation cartésienne d’un cercle: (x-xc)²+(y-yc)²=r²
y=yc ± √r²-(x-xc)²
• Algorithme simple:

• Remarques:
– L’espacement des points n’est pas uniforme (trous possibles)
– Calculs importants ( racine carré)
 Infographie
Génération de cercle 2D
• Equation paramétrique (polaire) d’un cercle:
x=xc + r.cos(θ) ; y=yc + r.sin(θ)

• Remarques
– Calculs importants ( Fonctions trigonométriques)
– Si δθ grand => on complète avec des segments de droites.
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham
Toujours basé sur le choix entre deux points discrets,
dépendant de leur distance respective
avec le point réel.
 On travaille dans le 2e octant à partir de
(0,r) ainsi pour un point (xi,yi), le prochain
point sera: (xi+1,yi) ou (xi+1,yi-1).
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham
 On calcule le prochain y et les différences respectives avec les points
discrets de la façon suivante:

 Le signe de pi nous dira si nous devons choisir le point latéral ou le

diagonal.
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham
 Encore une fois, pour éviter de calculer cette différence pour chaque
point, on cherche une façon de calculer les différences subséquentes
par incrémentation.
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham

 On considère 2 cas :

 Valeur initiale:
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham
 Infographie
Génération de cercle 2D
 Algorithme de Bresenham
Exemple: centre = (0,0) et r = 3.
 Infographie
Extensions
 Il existe d’autres algorithmes pour les tracés de
droite et de cercle, mais plus complexes
 prendre en compte l’épaisseur du trait
 prendre en compte l’aliassage (effet marche d’escalier)
 Tracé incrémental possible pour d’autres
primitives
 quadriques (ellipses, paraboles, hyperboles, ...)
 Infographie
• Remplissage
Définition:
• On appelle remplissage l’opération qui consiste à
représenter des surfaces pleines
• Génération de surfaces pleines : à partir d’un ensemble
de côtés ou de sommets
• Deux approches :
– Techniques de balayage : déterminent si un point se trouve ou
non à l’intérieur d’un polygone ou d’un contour (balayage de
haut en bas).
– Techniques à partir d’un germe : partent d’un point à l’intérieur
du contour et agrandissent l’ensemble (les points adjacents)
jusqu’ à arriver au contour.
 Infographie
• Remplissage
Remplissage d’un polygone : première idée
• On suppose qu’on a le contour fermé d’un polygone
• On examine chaque point de la trame et on regarde s’il est ou non à
l’intérieur du polygone
• Une amélioration : on calcule d’abord l’enveloppe convexe et on ne regarde
que les points de cette enveloppe polygones simples
• Très coûteux et beaucoup de pixels examinés pour rien
 Infographie
• Remplissage
Balayage des polygones
• Des pixels adjacents (sauf les cas des bords) sont susceptibles
d’avoir les mêmes caractéristiques cohérence spatiale
• Pour la visualisation graphique, les pixels sur une même ligne
de balayage(sauf les cas des bords) sont susceptibles d’avoir
les mêmes caractéristiques cohérence de ligne
 Infographie
• Remplissage
Algorithmes de la ligne de balayage (scanline)
• Algorithme à la précision image
• Travailler scanline par scanline
• Pour chaque scanline, on cherche les intersections avec le polygone
– Chaque intersection coupe la ligne en deux régions : intérieur et
extérieur du polygone
• Tracer successivement des pixels contigus ayant des caractéristiques
lumineuses similaires
 Infographie
• Remplissage
Ligne de balayage (scanline) : un algorithme
Déterminer ymin et ymax
pour y = ymin à ymax faire
Initialiser xmin et xmax
pour chaque segment de la facette faire
si le segment coupe la ligne y alors
Calculer le point d’intersection x entre la ligne y et le segment
xmin = min(xmin, x)
xmax = max(xmax, x)
finsi
fin pour
pour x = xmin à xmax faire
Afficher le pixels (x, y)
fin pour
fin pour
 Infographie
• Remplissage
Ligne de balayage (scanline) : Remarques
• On ne considère pas les contours horizontaux des polygones
• Problème si l’intersection est au niveau d’un sommet du
polygone : faut-il ou non allumer le pixel
• Faible coût mémoire
• Remplissage efficace des polygones
• Gère les transparences et ombrage (Gouraud, Phong)
• Gère les textures
 Infographie
• Remplissage
Ligne de balayage (scanline) : un algorithme
Déterminer ymin et ymax
pour y = ymin à ymax faire
Initialiser xmin et xmax
pour chaque segment de la facette faire
si le segment coupe la ligne y alors
Calculer le point d’intersection x entre la ligne y et le segment
xmin = min(xmin, x)
xmax = max(xmax, x)
finsi
fin pour
pour x = xmin à xmax faire
Afficher le pixels (x, y)
fin pour
fin pour