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

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 ?

Communication Entités internes Organes de communication 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 !

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 !

Anciens paradygme Le mode carte perforée - imprimante Le mode console 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)

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)

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

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)

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

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

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 !

Et maintenant Les écrans ont évolués En fait … 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

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

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

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

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

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)

Matrice de pixels noir+noir+bleu = bleu foncée 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 ?

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

Instructions et Données de base 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)

Hexadécimal Comptage en base 16 Sinon il y a des calculatrices … :-) 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

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)

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

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

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

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

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 

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

… Pointeur Hexadécimal / Binaire Mais à quoi ça sert ? 0x0000000f 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

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

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; *ptr = 0xFFFFFFFF;

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)

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

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

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

Exercice Que vaut p ? Comment récupérer les valeur de r, g, et b ? 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 ?

Exercice Que vaut p ? Comment récupérer les valeur de r, g, et b ? 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 = ?

Exercice Que vaut p ? Comment récupérer les valeur de r, g, et b ? 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;

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 ?

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

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