Introduction au graphisme sur ordinateur (Info112)

1. Introduction au graphisme sur ordinateur (Info112) Chapitre 0: Introduction 0 -

2. Un bref retour sur l’histoire • Les ordinateurs ont besoins … • 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 ? • Des boutons (on/off), des manettes, des poignées, des bouts de papier, des oscilloscopes ? • Quel est le problème en fait ? • Ordinateur rapide, infaillible, borné, sans initiative • Humain lent, faillible, infini, imaginatif • Langages très très différents 01010100010 ? Ca va et toi ?

3. Communication • Entités internes • Humain : phrases, langage dit naturel, idées, valeurs comparées sur une échelle, ordres de grandeur, préférences, envies, etc. • Ordinateur : • 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 • 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 • 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 paradygme • Le mode carte perforée - imprimante • Papier cartonné imprimé et perforé encodent des chiffres et des instructions • Le mode console • 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)

6. Références à l'écran • Certains systèmes graphiques utilisent la conventions des repères direct en mathématique …. D’autres pas (la majorité même)

7. Le mode console • Texte de la console • 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

8. Exemple 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 p p p 3 _ _ _ _ _ _ _ _ 4 _ _ _ _ _ _ _ _ 5 _ _ _ _ _ _ _ _ 6 _ _ _ _ _ _ _ _ 7 p p p p p p p p 8 T C F r R F C T Jouez votre coup sur l'échiquier (A7-A5)

9. Exemple 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 p p p 3 _ _ _ _ _ _ _ _ 4 _ _ _ _ _ _ _ _ 5 _ _ _ _ _ _ _ _ 6 _ _ _ _ _ _ _ _ 7 p p p p p p p p 8 T C F r R F C T Jouez votre coup sur l'échiquier(ex:A7-A5) F7-F6

10. Exemple 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 p p 3 _ _ _ p _ _ _ _ 4 _ _ _ _ _ _ _ _ 5 _ _ _ _ _ _ _ _ 6 _ _ _ _ _ p _ _ 7 p p p p p _ p p 8 T C F r R F C T J’ai joué D2-D3, a vous (ex:C7-C5) F7-F6

11. A retenir • L’affichage de la touche pressée est le plus rapide possible • L’humain a du mal à se rappeler • L’humain fait des erreurs de frappe qu’il doit corriger • Le curseur clignote • 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 • 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 !

12. Et maintenant • Les écrans ont évolués • Ils peuvent afficher des dessins géométriques • Ils peuvent afficher des images pré-enregistrées (bitmap) • Ils peuvent afficher des pixels de couleur • En 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) • Ce dernier ne clignote pas … pourquoi ? • En fait … • Matrice de pixels, traitements des graphismes et couplage avec d’autres dispositifs sont dissociés

13. Schéma Carte mère Processeur central mémoire 17, 34 Dispositif de pointage Carte graphique Mémoire x,y + dx, dy Coeff. multiplicateur 3x par ex Calcul vitesse ? (v, |v|) Calcul Accélération ? (idem) Ecran

14. TD No 1 • 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 b b+d memoire.x a memoire.y b …dessine_pointeur_souris(x, y) 100 fois par seconde

15. TD No1 • Si a la place de l’addition vous pouvez utiliser n’importe quelle opération de math, • Calculer la vitesse en mémoire (v en m/s) • Calculer l'accélération (a, ax, ay) • Apres avoir stocker dx et dy en mémoire • Soit les formules suivantes • x x+dx*2 | y y+dy*2 • x x+(dx*dx)/2 | y y+dy*dy • x x+dx+ax | y y+dy+ay • Quelle comportement du pointeur de la souris cela change t-il ? • Même question avec les instructions suivantes • Si (x<0) alors x0 (idem pour y) juste avant le dessin • Si (a>0) alors {aa*2} entre le calcul de a et la 3ieme formule • Si (a>0) alors {aa*a} entre le calcul de a et la 3ieme formule

16. TP No1 • Prise en main des ordinateurs • Trouver l'éditeur de dessin de WindowsXP dans les accessoires et lancer le. Chercher aussi la calculette. • Dessiner un peu (essayer chaque fonction, chaque menu) • Taper sur Google la requête «  logiciel de dessin» • Google web et google image • Chercher sur Internet la différence entre dessin vectoriel et dessin matriciel • Vérifier qu’ils passe par Wikipedia(image vectoriel et SVG) • Essayer de lancer des application en ligne

17. TP No1 • Chercher « gcalc » sur Internet et lancer l’applet JAVA. Tracer quelques courbes et copier-coller dans paint • Modifier Edit->properties et aussi onglet view (jouer avec zoom) • Dans le graph plugin : f(x)=sqrt(x) par exemple • Dans l'éditeur de courbe implicite : sqrt(x*x+y*y)-5 • Comment faire un oval ? • Dans le direction field f(x, y) = 3x+y*y et g(x,y)=sqrt(x)+cos(y) • Dans Polar graph r(t)=3 r(t)=3*t, r(t)=cos(t), r(t)=3+t/10 • Parametric system : x(t)=cos(t) et y(t)=sin(t) ou x(t)=sin(t) et y(t)=cos(t)+t/5 • Essayer formules simple (math et tables) • Cartesian 3D graph : f(x, y)=x+cos(y)

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

19. Graphique à bas niveau • Pourquoi ne pas parler de graphique à haut niveau • 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 • Instruction non décomposable • Données sous la forme la plus proche de sa forme matérielle

20. Instructions et Données de base • Données • Mémoire linéaire • Taille de l'écran (ie: largeur = 10, hauteur = 9) • Adresse de mémoire linéaire (en hexadécimal !) • 0x0 = début de la mémoire • 0x8 = 8ieme emplacement • Codage des couleurs • RGB : rouge si la valeur 0xff0000 à l’adresse 0x000000007 • BGR : rouge si la valeur 0xffff00 à l’adresse 0x00000000f • Instructions • Sous forme de fonctions • setPixel(x, y, color)

21. Hexadécimal • Comptage en base 16 • 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 ??? • 1*taille de la base+2 = 16+2 = 18 • Que vaut b2 ? • Comment transformer 99 en hexadécimal ? • 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 (99hexa) • 63decimal s'écrit 63, 99hexa s'écrit 0x63 • Sinon il y a des calculatrices … :-) • Il y a des valeurs à connaître • 0xf = 15 (taille de la base -1), 0xff=255 (16*16-1), • 0xffff = 65000 et quelques • 0xffffff = 16 millions et des bananes • 0xffffffff = 4 milliards et des brouettes

22. Binaire Pour la petite histoire les ordinateurs comptent en fait en système binaire (base 2) 0000=0=0x0 0001=1=0x1 0010=2=0x2 0011=3=0x3 0100=4=0x4 0101=5=0x5 0110=6=0x6 0111=7=0x7 1000=8=0x8 1001=9=0x9 1010=10=0xa 1011=11=0xb 1100=12=0xc 1101=13=0xd 1110=14=0xe 1111=15=0xf Regroupé par paquet de 4 Un ordinateur 32 bits utilise donc des nombres codés sur 8 chiffres hexadécimaux (0x2f56a40c)

23. Si dessin à l'écran ou dans une fenêtre

24. Taille de l’écran • Taille standard • Mode portrait (hauteur>largeur) • Mode Paysage (hauteur>largeur) • 640*480 VGA

25. Autre instruction de base : fillrect • Rempli un rectangle d’une couleur uniforme • Fillrect(x, y, w, h, color)

26. Autre instruction de base • Copie (Blit surface) • Copy (adresse1, x1, y1, w1, h1, addresse2, x2, y2) • La copie efface les pixels de la destination • La copie ignore les débordements • La copie ne transforme pas les pixels selon leur encodage

27. Encodage des pixels • RGB (pour RedGreenBlue) • 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) • 0xff00ff est une couleur qui ajoute du rouge et du bleu • = 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é) • 0x000000 = noir 0xffffff = blanc

28. Pointeur … • Un pointeur est une adresse mémoire directe • 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 : 0x00000F81 • Pointe sur une valeur • 32 bits … comme le pointeur ! • Entre précédent et suivant 0x00000000 0x00FFF00F 0x00000001 0x0800F00F 0x00000002 0x8800F00F 0x00000003 0x1811FFFF … 0x0000000f 0xC804304F 0x00000010 0xF81139DF

29. … Pointeur 0000=0=0x0 0001=1=0x1 0010=2=0x2 0011=3=0x3 0100=4=0x4 0101=5=0x5 0110=6=0x6 0111=7=0x7 1000=8=0x8 1001=9=0x9 1010=10=0xa 1011=11=0xb 1100=12=0xc 1101=13=0xd 1110=14=0xe 1111=15=0xf • Hexadécimal / Binaire • Mais à quoi ça sert ? 0x0000000f 0xC804304F 0x00000010 0xF81139DF 0x0000000f 0x11001000000001000011000001001111 0x00000010 0x11111000000100010011100111011111

30. Zone mémoire • Une zone mémoire est un ensemble de valeurs que le système stocke cote à cote en mémoire • 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 = • 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

31. Zone mémoire • Exemple • 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 = 0xFF00FF00; • On bouge le pointeur de +1 • ptr = ptr+1; • On change la valeur au bout de ptr • *ptr = 0xFFFFFFFF;

32. Exercice : Adresse de l’offset • Si une fenêtre a son coin haut-gauche en 50,10 par rapport au coin haut-gauche de l'écran • Si le coin coin haut-gauche de l'écran a comme adresse 0x30000000 • Quelle est l’adresse du pixel 3,7 de la fenêtre (toujours par rapport a son coin haut-gauche)

33. Exercice : Adresse de l’offset • Si une fenêtre a son coin haut-gauche en 50,10 par rapport au coin haut-gauche de l'écran (256H*256L) • Si le coin coin haut-gauche de l'écran a comme adresse 0x30000000 • 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 • 0x30000000+10 *256 +50 = 0x30000000+0xa*0x100+0x32=… • 0x30000000+ 2610 = 0x30000000+ 0xA32= • 0x30000A32

34. Exercice : Adresse de l’offset • Si une fenêtre a son coin haut-gauche en 50,10 par rapport au coin haut-gauche de l'écran • Si le coin coin haut-gauche de l'écran a comme adresse 0x30000000 • Quelle est l’adresse du pixel 3,7 de la fenêtre (toujours par rapport a son coin haut-gauche) • Rajoutons ensuite les lignes • 0x30000A32+7*256+3 • 0x30000A32+1792= 0x30000A32+0x700 • 0x30001132

35. Opération spéciale sur tableaux de bits • Décallage (à droite ou à gauche) << ou >> Unsigned int pixel = 0x00FF0000; pixel = pixel>>4; // dec. a droite printf("pixel=%p", pixel); // pixel=0x000FF000 pixel = pixel<<2; // dec. a gauche printf("pixel=%p", pixel); // pixel=0x003FC000 • Masque & Unsigned int pixel = 0x20CF0200; pixel = pixel&0x00FF0000; printf("pixel=%p", pixel); // pixel=0x00CF0000 00000000111111110000000000000000 00000000000011111111000000000000 00000000001111111100000000000000

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 = 0x8040B000; int r, g, b Comment récupérer les valeur de r, g, et b ?

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 = 0x8040B000; int r, g, b Comment récupérer les valeur de r, g, et b ? r = (p & 0xFF000000) >> 24; g = ? b = ?

38. Exercice int r = 255; int g=0; int b = 128; unsigned int p = <<24 + g<<16+ b<<8; Que vaut p ? unsigned int p = 0x8040B000; int r, g, b Comment récupérer les valeur de r, g, et b ? r = (p & 0xFF000000) >> 24; g = (p & 0x00FF0000) >> 16; r = (p & 0x0000FF00) >> 8;

39. TD No2 • 0x808080 quelle couleur est-ce ? • 0xa0a0af quelle couleur est-ce ? • Quelles sont les couleurs qui mélangent 2 couleurs primaires à fond et la troisième à rien du tout ? • Plus les 3 couleurs primaires +blanc+noir = combien? • Si on se permet les « 80 » en plus des « 00 » et des « ff » ça fait combien ? • Quelle serait l'étape suivante pour avoir plus de couleurs à notre palette ? • Combien ça fait de couleurs en tout ?

40. TP No2 • Aller sur Internet chercher une palette de couleur RGB • Lancer le jeu NewCol installé dans C:\Program Files\CodeBlocks\ressources\Newcol

41. A voir • Transparence • Double buffering • La librairie SDL • Le logiciel Photoshop ou Gimp • Algorithmes (dessiner un cercle plein ou pas …) • Temps (évolution des pixels) : Animations • Couplage graphisme-utilisateur : Interaction • Effets spéciaux (ombres, dégradés, ) • Fausse 3D : le 2D et demi (occlusion, ombrage) • Hasard: le sel et le poivre du graphisme • Le jeu NewCol