Introduction au Graphisme sur ORdinateur Info 112 ou

Introduction au Graphisme sur ORdinateur (Info 112 ou I. G. O. R. ) Chapitre 0: Introduction Sources : http: //wikipedia. org/ http: //student. kuleuven. be/~m 0216922/CG http: //www. gnurou. org/writing/linuxmag/sdl/ http: //sol. gfxile. net/gp/ Livre Foley & Van Dam

Programme n n n Licence MPI - S 1 I. G. O. R Graphisme matriciel : Les pixels Transparence Double buffering La librairie SDL Le logiciel Photoshop ou Gimp (Christian Jacquemin) Algorithmes (dessiner un cercle plein ou pas …) Temps (évolution des pixels) : Animations Couplage graphisme-utilisateur : Interaction Effets spéciaux (ombres, dégradés, ) Fausse 3 D : le 2 D et demi (occlusion, ombrage) Hasard: le sel et le poivre du graphisme (N. Roussel) Le projet New. Col 2

Un bref retour sur l’histoire n Les ordinateurs ont besoins … n n De programmes De données D’un utilisateur (ne serais-ce pour dire que programme faire tourner sur quelles données) Comment faire communiquer humain et ordinateur ? n n Licence MPI - S 1 I. G. O. R Des boutons (on/off), des manettes, des poignées, des bouts de papier, des oscilloscopes ? Quel est le problème en fait ? n n n Ordinateur rapide, infaillible, borné, sans initiative Humain lent, faillible, infini, imaginatif Langages très différents 01010100010 ? Ca va et toi ? 3

Communication n Entités internes n n Humain : phrases, langage dit naturel, idées, valeurs comparées sur une échelle, ordres de grandeur, préférences, envies, etc. Ordinateur : n n n Licence MPI - S 1 I. G. O. R 0 et 1 Chiffres (voir comment coder un chiffre avec des 0 et 1) Lettres (voir comment coder des lettres avec des chiffres) Instructions simples (addition, test d'égalité, redémarrer le programme a partir de la ligne 43, etc. ) Organes de communication n n Humain : ouie, vue, odorat, goût et toucher Ordi : aucun par défaut mais tout ce qui peut se transformer en électricité est utilisable pour faire un sens de communication ! 4

Problèmes n n Licence MPI - S 1 I. G. O. R Les mots ne sont qu’une succession de lettres pour un ordinateur Les lettres manuscrites ne sont que des gribouillis Aucun sens humain ne perçoit l'électricité ni n’en produit (… directement) L’ordinateur n’a pas d'idées à lui, pas d’initiative On a fait des programmes qui simulent des neurones mais aucune idée n’en est sorti ! 5

Anciens paradigme n 6 Le mode carte perforée - imprimante n n Licence MPI - S 1 I. G. O. R Papier cartonné imprimé et perforé encodent des chiffres et des instructions Le mode console n n Un clavier se compose de boutons poussoirs qui représentent les caractères (lettres, chiffres, ponctuation) Un écran est un super oscilloscope qui balaye toute la surface de haut en bas et de gauche a droite en affichant des point lumineux localisés (ie: vert) ou pas (noir)

Références à l'écran n Licence MPI - S 1 I. G. O. R 7 Certains systèmes graphiques utilisent la conventions des repères direct en mathématique …. D’autres pas (la majorité même)

Le mode console n Licence MPI - S 1 I. G. O. R 8 Texte de la console n n n Si les points lumineux (pixels)sont judicieusement placés, un œil humain interprète la forme comme un caractère. Par exemple « c » Les touches (boutons poussoirs imprimés) du clavier font apparaîtrent le caractère correspondant à l’écran, c’est le principe du retour d’information (feedback) Le feedback apparaît immédiatement à l’écran au niveau d’un caractère spécial clignotant appelle curseur

Exemple Licence MPI - S 1 I. G. O. R Bienvenu dans le programme de jeu d’Echec A B C D E F G H 1 T C F r R F C T 2 p p p p 3 _ _ _ _ 4 _ _ _ _ 5 _ _ _ _ 6 _ _ _ _ 7 p p p p 8 T C F r R F C T Jouez votre coup sur l'échiquier (A 7 -A 5) 9

Exemple Licence MPI - S 1 I. G. O. R 10 Bienvenu dans le programme de jeu d’Echec A B C D E F G H 1 T C F r R F C T 2 p p p p 3 _ _ _ _ 4 _ _ _ _ 5 _ _ _ _ 6 _ _ _ _ 7 p p p p 8 T C F r R F C T Jouez votre coup sur l'échiquier(ex: A 7 -A 5) F 7 -F 6

Exemple Licence MPI - S 1 I. G. O. R Bienvenu dans le programme de jeu d’Echec A B C D E F G H 1 T C F r R F C T 2 p p p _ p p 3 _ _ _ p _ _ 4 _ _ _ _ 5 _ _ _ _ 6 _ _ _ p _ _ 7 p p p _ p p 8 T C F r R F C T J’ai joué D 2 -D 3, a vous (ex: C 7 -C 5) F 7 -F 6 11

A retenir n n L’humain a du mal à se rappeler L’humain fait des erreurs de frappe qu’il doit corriger Le curseur clignote n n 12 L’affichage de la touche pressée est le plus rapide possible n n Licence MPI - S 1 I. G. O. R Le regard de l’humain est attiré, la recherche est moins longue Le regard de l’humain passe du clavier à l'écran (surtout quand il apprend a se servir du clavier) L’humain s’interrompt parfois dans son travail avant de revenir à ce qu’il faisait L'écran défile (vers le bas ligne par ligne) ou est remplacé par un écran quasi identique à chaque rafraîchissement n n L’humain a du mal à assimiler trop de nouvelles informations Des informations qui apparaissent légèrement décalés par rapport à l’instant d’avant ne sont pas interprétées comme nouvelles !

Et maintenant n 13 Les écrans ont évolués n n n Ils peuvent afficher dessins géométriques Ils peuvent afficher des images pré-enregistrées (bitmap) Ils peuvent afficher des pixels de couleur n En n n jouant sur trois petits points rouge, vert et bleu très proches Ils sont très rapides, plus grand, etc. Ils peuvent afficher en temps réel le pointeur d’un dispositif de pointage (souris, touchpad ou autre) n Ce n Licence MPI - S 1 I. G. O. R dernier ne clignote pas … pourquoi ? En fait … n Matrice de pixels, traitements des graphismes et couplage avec d’autres dispositifs sont dissociés

Schéma Licence MPI - S 1 I. G. O. R n. Processeur n. Carte mémoire mère Dispositif de pointage x, y + central 17, 34 n. Carte graphique Mémoire dx, dy Coeff. multiplicateur 3 x par ex Calcul vitesse ? (v, |v|) Calcul Accélération ? (idem) Ecran 14

TD No 1 Licence MPI - S 1 I. G. O. R Explication mémoire / registres (a, b, c, d) et a souris. dx // en mm b souris. dy c memoire. x d memoire. y a a+c 100 fois par seconde b b+d memoire. x a memoire. y b …dessine_pointeur_souris(x, y) n 15

Matrice de pixels n noir+bleu = bleu foncée n n n RGB Mélange des couleurs Aussi vrai pour pixels adjacents LCD=LEDs+masque CRT= faisceau d'électron Conséquences n n n 16 Rouge+Vert+Bleu = Blanc ! Technologies n n Licence MPI - S 1 I. G. O. R LCD=meilleur contraste local, noir moins noir CRT= meilleur noir, plus lumineux… mais moins bon contraste Contraste (papier + encre noir=10000: 1) n n Ex 400: 1 différence de luminosité entre plus sombre et plus clair Si blanc 2 x plus blanc = 800: 1 mais est-ce les blancs le pb ?

Graphique à bas niveau n 17 Pourquoi ne pas parler de graphique à haut niveau n n n Licence MPI - S 1 I. G. O. R Peindre la Joconde sur une forme de théière vue de dessus Mieux comprendre = mieux utiliser Jeux et Applications exigeantes sont construites sur les niveaux bas Sens historique Il reste des choses nouvelles et prometteuses à faire Instructions et Données de base n n Instruction non décomposable Données sous la forme la plus proche de sa forme matérielle

Instructions et Données de base n Données n n n Mémoire linéaire Taille de l'écran (ie: largeur = 10, hauteur = 9) Adresse de mémoire linéaire (en hexadécimal !) n n n 0 x 0 = début de la mémoire 0 x 8 = 8 ieme emplacement Codage des couleurs n n n Licence MPI - S 1 I. G. O. R RGB : rouge si la valeur 0 xff 0000 à l’adresse 0 x 00007 BGR : rouge si la valeur 0 xffff 00 à l’adresse 0 x 0000 f Instructions n n Sous forme de fonctions set. Pixel(x, y, color) 18

Hexadécimal n Comptage en base 16 n n 0 1 2 3 4 5 6 7 8 9 a b c d e f (6=6 mais c=12) que vaut 12 alors ? ? ? n n 1*taille de la base+2 = 16+2 = 18 Que vaut b 2 ? Comment transformer 99 en hexadécimal ? n 99/taille de la base =6, 1875 => en fait ça fait 6*16+reste(3)=63 Comment de pas confondre 63(décimal) et 63 (99 hexa) n n Licence MPI - S 1 I. G. O. R 63 decimal s'écrit 63, 99 hexa s'écrit 0 x 63 Sinon il y a des calculatrices … : -) n Il y a des valeurs à connaître n n 0 xf = 15 (taille de la base -1), 0 xff=255 (16*16 -1), 0 xffff = 65000 et quelques 0 xffffff = 16 millions et des bananes 0 xffff = 4 milliards et des brouettes 19

Binaire n Licence MPI - S 1 I. G. O. R Pour la petite histoire les ordinateurs comptent en fait en système binaire (base 2) n n n n 0000=0=0 x 0 0001=1=0 x 1 0010=2=0 x 2 0011=3=0 x 3 0100=4=0 x 4 0101=5=0 x 5 0110=6=0 x 6 0111=7=0 x 7 n n n n 20 1000=8=0 x 8 1001=9=0 x 9 1010=10=0 xa 1011=11=0 xb 1100=12=0 xc 1101=13=0 xd 1110=14=0 xe 1111=15=0 xf Regroupé par paquet de 4 n Un ordinateur 32 bits utilise donc des nombres codés sur 8 chiffres hexadécimaux (0 x 2 f 56 a 40 c) n

Palette de couleurs Licence MPI - S 1 I. G. O. R 21 256 couleurs de la palette VGA Clairs / foncés Tons Couleurs vives et pastelles

Si dessin à l'écran ou dans une fenêtre Licence MPI - S 1 I. G. O. R 22

Taille de l’écran n Taille standard n n Mode portrait (hauteur>largeur) Mode Paysage (hauteur<largeur) n 640*480 VGA (Video Graphics Array) n Rapport 4/3 entre largeur et hauteur n 948 Ko (24=3*8 bit par pixel) n 1, 2 Mo (32 bits par pixel) n à 72 dpi = 22, 58 cm * 16, 93 cm Licence MPI - S 1 I. G. O. R 23

Autres Licence MPI - S 1 I. G. O. R 24

Autre instruction de base : fillrect n Licence MPI - S 1 I. G. O. R Rempli un rectangle d’une couleur uniforme n fill. Rect(x, y, w, h, color) 25

Autre instruction de base n Licence MPI - S 1 I. G. O. R Copie (Blit surface) n Copy (adresse 1, x 1, y 1, w 1, h 1, addresse 2, x 2, y 2) n La copie efface les pixels de la destination La copie ignore les débordements La copie ne transforme pas les pixels selon leur encodage n n 26

Encodage des pixels n RGB (pour Red. Green. Blue) n n La composante en rouge est encodée sur les bits de poids fort (l’équivalent des centaines en quelques sorte) La composante en bleu est encodée sur les bits de poids faible (l’équivalent des unités en quelques sorte) La composante en verte est au milieu (eq. dizaine) 0 xff 00 ff est une couleur qui ajoute du rouge et du bleu n n Licence MPI - S 1 I. G. O. R = un violet/rose ! � Les couleurs sont additives (plus on en met plus c’est lumineux) contrairement à la peinture (plus on en mélange plus on a un gris foncé) n 0 x 000000 = noir 0 xffffff = blanc 27

Pointeur … n Licence MPI - S 1 I. G. O. R 28 Un pointeur est une adresse mémoire directe n n n Un récipient universel Un simple entier sans signe Généralement sous forme hexadécimal 0=début : généralement réservé Ex : 0 x 00000 F 81 0 x 0000 0 x 00 FFF 00 F 0 x 00000001 0 x 0800 F Pointe sur une valeur n 32 n bits … comme le pointeur ! Entre précédent et suivant 0 x 00000002 0 x 00000003 … 0 x 0000000 f 0 x 00000010 0 x 8800 F 0 x 1811 FFFF 0 x. C 804304 F 0 x. F 81139 DF

… Pointeur n Hexadécimal / Binaire 0 x 0000000 f 0 x. C 804304 F 0 x 00000010 0 x. F 81139 DF 0 x 0000000 f 0 x 1100100001000011000001001111 0 x 00000010 0 x 11111000000100111011111 n Mais à quoi ça sert ? Licence MPI - S 1 I. G. O. R 29 0000=0=0 x 0 0001=1=0 x 1 0010=2=0 x 2 0011=3=0 x 3 0100=4=0 x 4 0101=5=0 x 5 0110=6=0 x 6 0111=7=0 x 7 1000=8=0 x 8 1001=9=0 x 9 1010=10=0 xa 1011=11=0 xb 1100=12=0 xc 1101=13=0 xd 1110=14=0 xe 1111=15=0 xf

Zone mémoire n 30 Une zone mémoire est un ensemble de valeurs que le système stocke cote à cote en mémoire n n Qui est réservée pour un usage particulier (location de 10 casiers) Qui n’est pas forcément propre après réception (prec. Locataires? ) Qui doit être libérée après usage (sinon on perd la caution !) Pour toutes les valeurs de la zone mémoire on ne dispose que d’une variable ! … mais une variable mouvante = n n Licence MPI - S 1 I. G. O. R Le POINTEUR ! On garde TOUJOURS un pointeur sur la première valeur et la taille de la zone mémoire (adresse de l’immeuble et nb apparts) Les calculs se feront tantôt sur le pointeur (passer au casier suiv. ) tantôt sur la valeur au bout du pointeur (mettre un casier, recup. ) Une image est une zone mémoire où chaque case est un pixel

Zone mémoire n Licence MPI - S 1 I. G. O. R Exemple n n n n n On alloue 16*16=256 cases mémoire unsigned int* mem = malloc(256); On copie le pointeur pour faire une variable flottante unsigned int* ptr = mem; On change la valeur au bout de ptr *ptr = 0 x. FF 00; On bouge le pointeur de +1 ptr = ptr+1; On change la valeur au bout de ptr *ptr = 0 x. FFFF; 31

Exercice : Adresse de l’offset n n n Licence MPI - S 1 I. G. O. R Si une fenêtre a son coin haut-gauche en 50, 10 par rapport au coin haut-gauche de l'écran Si le coin haut-gauche de l’ecran a comme adresse 0 x 30000000 Quelle est l’adresse du pixel 3, 7 de la fenêtre (toujours par rapport a son coin haut-gauche) 32

Exercice : Adresse de l’offset n n Licence MPI - S 1 I. G. O. R 33 Si une fenêtre a son coin haut-gauche en 50, 10 par rapport au coin haut-gauche de l'écran (256 H*256 L) Si le coin haut-gauche de l'écran a comme adresse 0 x 30000000 Quelle est l’adresse du pixel 3, 7 de la fenêtre (toujours par rapport a son coin haut-gauche) Trouvons d’abord l’@ du coin n 0 x 30000000+10 *256 +50 = 0 x 30000000+0 xa*0 x 100+0 x 32=… 0 x 30000000+ 2610 = 0 x 30000000+ 0 x. A 32= 0 x 30000 A 32

Exercice : Adresse de l’offset n n Licence MPI - S 1 I. G. O. R Si une fenêtre a son coin haut-gauche en 50, 10 par rapport au coin haut-gauche de l'écran Si le coin haut-gauche de l'écran a comme adresse 0 x 30000000 Quelle est l’adresse du pixel 3, 7 de la fenêtre (toujours par rapport a son coin haut-gauche) Rajoutons ensuite les lignes n n n 0 x 30000 A 32+7*256+3 0 x 30000 A 32+1792= 0 x 30000 A 32+0 x 700 0 x 30001132 34

Opération spéciale sur tableaux de bits Licence MPI - S 1 I. G. O. R n Décallage (à droite ou à gauche) << Unsigned int pixel = 0 x 00 FF 0000; pixel = pixel>>4; // dec. a droite 35 ou >> printf("pixel=%p", pixel); // pixel=0 x 000 FF 000 pixel = pixel<<2; // dec. a gauche printf("pixel=%p", pixel); n Masque & // pixel=0 x 003 FC 00000000111100000000111100000011110000000 Unsigned int pixel = 0 x 20 CF 0200; pixel = pixel&0 x 00 FF 0000; printf("pixel=%p", pixel); // pixel=0 x 00 CF 0000

Exercice int r = 255; int g=0; int b = 128; unsigned int p = <<24 + g<<16+ b<<8; Que vaut p ? unsigned int p = 0 x 8040 B 000; int r, g, b Comment récupérer les valeur de r, g, et b ? Licence MPI - S 1 I. G. O. R 36

Exercice int r = 255; int g=0; int b = 128; unsigned int p = <<24 + g<<16+ b<<8; Que vaut p ? unsigned int p = 0 x 8040 B 000; int r, g, b Comment récupérer les valeur de r, g, et b ? r = (p & 0 x. FF 000000) >> 24; g = ? b = ? Licence MPI - S 1 I. G. O. R 37

Exercice int r = 255; int g=0; int b = 128; unsigned int p = <<24 + g<<16+ b<<8; Que vaut p ? unsigned int p = 0 x 8040 B 000; int r, g, b Comment récupérer les valeur de r, g, et b ? r = (p & 0 x. FF 000000) >> 24; g = (p & 0 x 00 FF 0000) >> 16; r = (p & 0 x 0000 FF 00) >> 8; Licence MPI - S 1 I. G. O. R 38

Transparence n Implicite dans le dessin vectoriel n n EXPLICITE dans le dessin matriciel Transparence totale n n Le pixel laisse voir ce qu’il y a derrière Transparence partielle n n Pas de forme = transparence +couleurs translucides Le pixel laisse voir ce qu’il y a derrière mais le teinte un peu d’une autre couleur Transparence de bord n Eviter les effets d’escalier (aliasing) Licence MPI - S 1 I. G. O. R 39

Composition de niveaux de couleur n Couleur finale = (G 1+G 2)/2 n n n Pas d’importance de l’ordre. Si G 1 par dessus G 2 ou G 2 sur G 1 Pas associatif. . . ((G 1+G 2)/2+G 3)/2 ≠ (G 1+(G 2+G 3)/2)/2 n Importance de l’ordre au delà de 2 filtres transparents ! Cas d’une transparence inégale : (G 1+3*G 2)/4 Et en couleur … (R 1 G 1 B 1 + R 2 G 2 B 2)/2 n n n (donc 50%-50%) Si G 1=G 2. . . Couleur finale = G 1 = G 2 Commutatif : (G 1+G 2)/2 = (G 2+G 1)/2 n n 40 G 1 et G 2 deux niveaux de gris (ex : 0 x 00 et 0 x 88) n n Licence MPI - S 1 I. G. O. R (R 1+R 2)/2 (G 1+G 2)/2 (B 1+B 2)/2 (3*R 1+R 2)/4 (G 1+G 2)/2 (B 1+7*B 2)/8 … rare Si le coefficient est toujours le même pour les 3 channels n n Coder avec le pixel transparent son coefficient 0 x. C 04080 (fond) + 0 x 8000 FF 40 (<- le deuxième pixel à 25%) RGBA A=Alpha Channel = Opacity ≠transparency

Composition alpha n Licence MPI - S 1 I. G. O. R 41 Duff et Porter : 4 autres compositions n n n =0 Complètement transparent =255=0 x. FF Complètement opaque OVER, IN, OUT, ATOP et XOR Le pixel résultat a lui aussi son opacité !

Transparence et format de fichier n n 42 Bmp : RGB 16 M pas compressé, pas de transparence ! Gif : 256 couleurs dont 1 peut être la transparence totale Jpg : 16 millions de couleurs mais pas de transparence Png et Tiff: 16 millions de couleurs et 256 niveaux de transparence : RGBA n n n Licence MPI - S 1 I. G. O. R 32 bits au lieu de 24 A fort niveau de transparence toutes les couleurs se ressemblent La transparence ne se voit qu’avec quelque chose derrière Quadrillage blanc-gris par convention Le quatrième canal est bien plus compréhensible lorsqu’on le mélange aux autres … ne pourrait-on pas avoir les trois premiers canaux tout aussi intuitifs ?

Couleurs n Phénomène ondulatoire continu n n n Hauteur = amplitude = luminosité Largeur de la sin. = longueur d’onde = teinte Perception d’un mélange de plusieurs signaux par des capteurs R G et B Violet = Licence MPI - S 1 I. G. O. R 43

RGB et HSV n n RGB mélange rouge vert et bleu de façon additive … pas très naturel HSV décompose l’espace 3 D des couleurs selon 3 autres axes n n Licence MPI - S 1 I. G. O. R Hue : teinte 0 -255 décrit tout l’arc en ciel Saturation : couleur <=> vive-couleur <=>pastel-gris Value( luminosité) Transformation n Value = max (r, g, b) blanc S = 1 -(min(r, g, b)/max(r, g, b)) (0 si max=0) H= dépend du max … 0°- 360° 44

RGB et HSL n Similaire … mais différent n L =(max(r, g, b)+min(r, g, b))/2 n S= (max(r, g, b)-min(r, g, b))/2*L si 0<L<0. 5 n S=(max(r, g, b)-min(r, g, b))/(2 -2*L) si 0<L<0. 5 n H dépend de plein de chose … 0°- 360° Licence MPI - S 1 I. G. O. R 45

Teinte (H) de HSV et HSL n HSV n HSL Licence MPI - S 1 I. G. O. R 46

Et encore n n CMJK : couleurs soustractives pour les encres des imprimantes gris Couleurs complémentaires n n n Mélange des deux = niveau de gris Couleurs additives RGB Couleurs chaudes/froides Inverse vidéo Filtres… Licence MPI - S 1 I. G. O. R 47

L’écran du jour n 30" Samsung Sync. Master 305 T n n n n n Dalle : S-PVA de 30 pouces Résolution : 2 560 x 1 600 (WQXXA) Taux de contraste : 1000: 1 Luminosité : 400 cd/m 2 Interface : DVI-D Angle de vision : 178° / 178° Temps de réponse : 6 ms 1. 266, 90 € 12 Kg 690, 2 x 502 x 280 mm Licence MPI - S 1 I. G. O. R 48

Primitives de dessin n Dessiner un Dessin sur un Dessin !!! n n (Centre, r 1, r 2) Dessiner un texte (Font, gras, italique, etc. ) n n (x, y, w, h) Dessiner un Cercle/Ellipse/Ovale n n (x 1, y 1, x 2, y 2) Dessiner un Rectangle (rempli ou non) n n (un dessin, un endroit ) Dessiner une ligne H / V / diagonal n n Licence MPI - S 1 I. G. O. R (Texte, position, attributs) Dessiner un polygone, une courbe n (liste de points) Du texte 49

Dégradé de couleur (gradient) n Licence MPI - S 1 I. G. O. R 50 Passage progressif d’une couleur à une autre dans un espace à 2 dimensions n Gradient linéaire Gradient circulaire n Gradient bi-linéaire n Gradient multiple n

Autres dégradés n n n Axial, sphérique , ovale conique, cyclique, … Textures Fondu Licence MPI - S 1 I. G. O. R 51

Ombres portées, ombrage et reflet n La 3 D n’est qu’une illusion de l’œil … Décomposer Comprendre Modéliser Coder 1 à 1 Mélanger Licence MPI - S 1 I. G. O. R 52

Halo, ombres, flou n Agrandissement, masque et flou gaussien, Licence MPI - S 1 I. G. O. R 53

Couches d’affichage (layers) n n n n n Licence MPI - S 1 I. G. O. R 54 Un affichage produit par un ordinateur est presque systématiquement un assemblage de couches L’ordre des couches et l’inverse de leur affichage La dernière couche est supposée opaque Par défaut une couche est transparente 2 couches non recouvrantes peuvent être interverties sans modification visible Plusieurs couches peuvent être pré-calculées en une couche plus rapide à afficher En mémoire centrale / vidéo Couches Reliées / Dissociées (glissement) Affichage dégradé pour certaines optimisations

Animation n 55 Modifications successives du graphisme n n Licence MPI - S 1 I. G. O. R Déplacement, zoom, rotation Propriété(s) d’un effet variant dans le temps (taille du halo, propriété du dégradé) Images ressemblantes successives (explosions, marche) Organisation temporelle de l’animation n n Attente pour éviter de dessiner plus que 25 x / sec Echelle de progression (linéaire, accélérante, par à coup) Gestion spéciale du début et de la fin Eviter l’effet d’aveuglement dû au clignotement ….

Double buffering 1/2 n Licence MPI - S 1 I. G. O. R Eviter ce clignotement Tant que (NON(FINI)) Faire t temps. Actuel. En. Ms(); dessiner. Rectangle (screen, 0, 0, largeur, hauteur, 0 x 0000); dessiner. Couche. Du. Fond(screen, …); dessiner. Couche. Du. Dessus(screen, …); dessiner. Element. Actif(screen, …); Découpage de la fonction de dessin en « couches » tps. Ecoule = temps. Actuel. En. Ms()-t; si (tps. Ecoule <20) alors attendre(20 -tps. Ecoule); fin si Fin Tant Que Aie !! Attente pour garantir le rythme de l’animation 56

Double buffering 2/2 n Licence MPI - S 1 I. G. O. R Principe n n Dessiner dans une image aussi grande que l’écran qui n’est pas l’écran. Quand le dessin est fini et que l’im age ainsi préparée ressemble le plus possible à l’écran visible on « bascule » l’image invisible sur l’écran visible Buffer allocation. Image(ecran ->largeur, ecran->hauteur); Tant que (NON(FINI)) Faire t temps. Actuel. En. Ms(); dessiner. Rectangle(buffer, 0, 0, largeur, hauteur, 0 x 0000); dessiner. Couche. Du. Fond(buffer, …); … dessiner. Image(ecran, buffer, …); si (tps. Ecoule <20) alors attendre(20 -tps. Ecoule); fin si Fin Tant Que 57

Interaction Humain-Graphique n Souris d’ordinateur n n n n Licence MPI - S 1 I. G. O. R Dispositif de pointage en 2 D (x, y) Pointing stick Touch. Pad Molette 1 D / 2 D avec/sans cran Boutons Evt=Move / Press / Release / Drag / Scroll / Click / Over 120 Move ou Drag à la seconde Claviers n n Boutons poussoirs (caps lock avec LED feedback) Evt = Press, Release, Type 58

Gestion des événements n File d’attente asynchrone FIFO n n n Licence MPI - S 1 I. G. O. R SDL_Poll. Event(&event) Non bloquante SDL_Wait. Event(&event) bloquante Boucle d’événement int done = 0; while (!done) { // message processing loop SDL_Event event; Dessin lorsqu’il n’y a plus d’événements dans la pile while (SDL_Poll. Event(&event)) { // check for messages switch (event. type) { // exit if the window is closed case SDL_QUIT: done = 1; break; // check for keypresses case SDL_KEYDOWN: if (event. keysym. sym == SDLK_ESCAPE) done = 1; break; } } // end switch } // end of message processing. . . } // end general loop Boucle générale de cycle de vie Traitement selon le type d’événement Dessins inutile 59

Autres alternatives n 60 2 boucles mélangées n n n Licence MPI - S 1 I. G. O. R Pas de dessin si pas d’événements Si l’affichage ralentit, les evts s’accumulent !!! Récupération active de la position de la souris une boucle comprenant le dessin donne l'impression de donner un rythme utilisable pour les animations … mais ce rythme dépend de la puissance du système ! Utilisation de Timer ou de la fonction sleep() pour assurer un temps CONSTANT dans la boucle

Timer n. Documentation Licence MPI - S 1 I. G. O. R SDL ->Doc Wiki -> SDL_API n SDL_Get. Ticks() retourne le temps courant en ms n SDL_Delay() attend un certain nombre de ms n SDL_Add. Timer(…) ajoute une alarme qui appellera plus tard une fonction spécifique SDL_Timer. ID SDL_Add. Timer(Uint 32 intrv, SDL_New. Timer. Callback cb, void *par); my_timer_id = SDL_Add. Timer(delay, my_callbackfunc, my_callback_param); Uint 32 my_callbackfunc(Uint 32 interval, void *param) { … return(interval); } 61

(… Les structures n Licence MPI - S 1 I. G. O. R Types de données n n Entier, réel, chaîne de caractères, booléen Tableau 1 D, 2 D Pointeur Structures = Ensemble cohérent de variables typés Const int NB_NOTES=32; struct { int No, char* nom, float moyenne. BAC, unsigned char* photo, float notes[NB_NOTES] } etudiant; etudiant etu 0; Etu 0. No=345324453; Etu 0. nom= "Leglandu"; … etudiant liste. Etu[NB_ETU]; liste. Etu[0]. No=234454345; … etudiant *pt. Etu = malloc(sizeof(etudiant)) pt. Etu->No = 09866768423; … (*pt. Etu). No = 09866768423; // Equivalent 62

Etat du système interactif n Licence MPI - S 1 I. G. O. R 63 Décrit le comportement de l’application par un ensemble de transitions const int INITIAL = 0; const int SELECT = 1; const int GRAB = 2; const int DRAG = 3; INITIAL Click ailleurs int etat = INITIAL Les entiers successifs peuvent être codés en C avec des énumérations MP + mx, my {x, y, } MR Si x, y poubelle [DESTROY] MM SELECT [x, y=mx, my] n. MM MR GRAB d<=10 MM d>10 MR DRAG

Codage d’une transition Licence MPI - S 1 I. G. O. R 64 int done = 0; while (!done) { // message processing loop SDL_Event event; while (SDL_Wait. Event(&event)) { // check for messages switch (event. type) { // evt de la souris qui bouge case SDL_MOUSEMOTION: int dx = event. motion. x-x; int dy = event. motion. y-y; d = sqrt(dx*dx, dy*dy); if (state==GRAB && d>10) { state = DRAG; } break; . . . } // end switch } // end of message processing. . . }// end general loop INITIAL Click MP + ailleurs mx, my {x, y, } SELECT n. MM MR MR GRAB d<=10 MM d>10 MR +Si x, y poubelle [DESTROY] MM [x, y=mx, my] DRAG

Codage d’une transition-Action Licence MPI - S 1 I. G. O. R 65 int done = 0; while (!done) { // message processing loop SDL_Event event; while (SDL_Wait. Event(&event)) { // check for messages switch (event. type) { // evt du bouton souris relaché case SDL_MOUSEBUTTONUP: if (x>px && x<px+pw && y>py && y<py+ph) { state = INITIAL; // [DESTROY] } break; . . . } // end switch } // end of message processing. . . }// end general loop INITIAL Click MP + ailleurs mx, my {x, y, } SELECT n. MM MR MR GRAB MR +Si x, y poubelle [DESTROY] MM [x, y=mx, my] d<=10 MM d>10 DRAG

Et ensuite ? Licence MPI - S 1 I. G. O. R MR +Si x, y poubelle [DESTROY] INITIAL Click ailleurs MP + mx, my {x, y, } MM [x, y=mx, my] SELECT n. MM d<=10 MR 66 GRAB MM d>10 DRAG MR ET C’EST FINI !!! On ne code rien pour les états : Juste les transitions

Format des événements n Licence MPI - S 1 I. G. O. R event. type n n n SDL_MOUSEBUTTONDOWN SDL_MOUSEMOTION SDL_MOUSEBUTTONUP SDL_MOUSEKEYDOWN SDL_MOUSEKEYUP SDL_USEREVENT event. button typedef struct{ Uint 8 type; Uint 8 button; Uint 8 state; Uint 16 x, y; } SDL_Mouse. Button. Event; event. motion typedef struct{ Uint 8 type; Uint 8 state; Uint 16 x, y; Sint 16 xrel, yrel; } SDL_Mouse. Motion. Event; event. key typedef struct{ Uint 8 type; Uint 8 state; SDL_keysym; } SDL_Keyboard. Event; if(event. keysym. sym== SDLK_LEFT) {…} if (event. button== SDL_BUTTON_LEFT) {…} Posx = event. motion. x; Posy = event. motion. y; event. key typedef struct{ Uint 8 type; int code; void *data 1; void *data 2; } SDL_User. Event; 67