0 - 1Université PARIS-SUD - Licence MPI - S1 1
IntroductionIntroduction au graphisme surau graphisme sur
ordinateur (Info112)ordinateur (Info112)
Chapitre 0: Introduction
Université PARIS-SUD - Licence MPI - S1 2
Un bref retour sur lUn bref retour sur l’’histoirehistoire! 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 ?
Université PARIS-SUD - Licence MPI - S1 3
CommunicationCommunication
! 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 !
Université PARIS-SUD - Licence MPI - S1 4
ProblèmesProblèmes
! Les mots ne sont qu’une succession de lettres pourun ordinateur
! Les lettres manuscrites ne sont que des gribouillis
! Aucun sens humain ne perçoit l'électricité ni n’enproduit (… directement)
! L’ordinateur n’a pas d'idées à lui, pas d’initiative
On a fait des programmes qui simulent des neuronesmais aucune idée n’en est sorti !
Université PARIS-SUD - Licence MPI - S1 5
Anciens Anciens paradygmeparadygme
! 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)
Université PARIS-SUD - Licence MPI - S1 6
RéférencesRéférences à l'écranà l'écran
! Certains systèmes graphiques utilisent la conventions
des repères direct en mathématique
…. D’autres pas (la majorité même)
Université PARIS-SUD - Licence MPI - S1 7
Le mode consoleLe 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
Université PARIS-SUD - Licence MPI - S1 8
ExempleExemple
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)
Université PARIS-SUD - Licence MPI - S1 9
ExempleExemple
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-F6Université PARIS-SUD - Licence MPI - S1 10
ExempleExemple
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
Université PARIS-SUD - Licence MPI - S1 11
A retenirA 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 ilapprend 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 !
Université PARIS-SUD - Licence MPI - S1 12
Et maintenantEt 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’undispositif de pointage (souris, touchpad ou autre)
! Ce dernier ne clignote pas … pourquoi ?
! En fait …
! Matrice de pixels, traitements des graphismes etcouplage avec d’autres dispositifs sont dissociés
Université PARIS-SUD - Licence MPI - S1 13
SchémaSchéma
!Processeur central
!Carte graphiqueDispositif de pointage
mémoire
!Carte mère
Mémoire
17, 34
Ecran
x,y + dx, dy
Coeff. multiplicateur 3x par ex
Calcul vitesse ? (v, |v|)
Calcul Accélération ? (idem)
Université PARIS-SUD - Licence MPI - S1 14
TD NoTD No 11
! 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
Université PARIS-SUD - Licence MPI - S1 15
Matrice de pixelsMatrice de pixels
! 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 ?
R G B
Université PARIS-SUD - Licence MPI - S1 16
Graphique à bas niveauGraphique à bas niveau
! Pourquoi ne pas parler de graphique à haut niveau
! Peindre la Joconde sur une forme de théière vue dedessus
! Mieux comprendre = mieux utiliser
! Jeux et Applications exigeantes sont construites sur lesniveaux 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 formematérielle
Université PARIS-SUD - Licence MPI - S1 17
Instructions et DonnéesInstructions et Données de basede 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)
Université PARIS-SUD - Licence MPI - S1 18
HexadécimalHexadé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
Université PARIS-SUD - Licence MPI - S1 19
BinaireBinaire
! 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)
Université PARIS-SUD - Licence MPI - S1 20
Palette de couleursPalette de couleurs
256 couleurs de la palette VGA
Clairs / foncés
Tons
Couleurs vives et pastelles
Université PARIS-SUD - Licence MPI - S1 21
Si dessin à l'écranSi dessin à l'écran ou dans une fenêtreou dans une fenêtre
Université PARIS-SUD - Licence MPI - S1 22
Taille de lTaille de l’é’écrancran
! Taille standard
! Mode portrait (hauteur>largeur)
! Mode Paysage (hauteur>largeur)
!640*480 VGA (Video Graphics Array)
!Rapport 4/3 enter largeur et hauteur
!948 Ko (24=3*8 bit par pixel)
!1,2 Mo (32 bits par pixel)
!à 72dpi = 22,58cm * 16,93cm
Université PARIS-SUD - Licence MPI - S1 23
AutresAutres
Université PARIS-SUD - Licence MPI - S1 24
Autre instruction de base : Autre instruction de base : fillrectfillrect
! Rempli un rectangle d’une couleur uniforme
! fillRect(x, y, w, h, color)
Université PARIS-SUD - Licence MPI - S1 25
Autre instruction de baseAutre 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 leurencodage
Université PARIS-SUD - Licence MPI - S1 26
Encodage des pixelsEncodage 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
Université PARIS-SUD - Licence MPI - S1 27
Pointeur 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
0x00FFF00F0x00000000
0x0800F00F0x00000001
0x8800F00F0x00000002
0x1811FFFF0x00000003
0xC804304F0x0000000f
0xF81139DF0x00000010
…
Université PARIS-SUD - Licence MPI - S1 28
…… Pointeur Pointeur
! Hexadécimal / Binaire
! Mais à quoi ça sert ?
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
0xC804304F0x0000000f
0xF81139DF0x00000010
0x110010000000010000110000010011110x0000000f
0x111110000001000100111001110111110x00000010
Université PARIS-SUD - Licence MPI - S1 29
Zone mémoireZone mémoire
! Une zone mémoire est un ensemble de valeurs que lesystè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 qued’une variable ! … mais une variable mouvante =
! Le POINTEUR !
! On garde TOUJOURS un pointeur sur la première valeur et lataille 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
Université PARIS-SUD - Licence MPI - S1 30
Zone mémoireZone 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;
Université PARIS-SUD - Licence MPI - S1 31
Exercice : Adresse de lExercice : Adresse de l’’offsetoffset
! 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)
Université PARIS-SUD - Licence MPI - S1 32
Exercice : Adresse de lExercice : Adresse de l’’offsetoffset
! 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
Université PARIS-SUD - Licence MPI - S1 33
Exercice : Adresse de lExercice : Adresse de l’’offsetoffset
! 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
Université PARIS-SUD - Licence MPI - S1 34
Opération spéciale sur tableaux de bitsOpé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
000000001111111100000000000000000000000000001111111100000000000000000000001111111100000000000000
Université PARIS-SUD - Licence MPI - S1 35
ExerciceExercice
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 ?
Université PARIS-SUD - Licence MPI - S1 36
ExerciceExercice
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 = ?
Université PARIS-SUD - Licence MPI - S1 37
ExerciceExercice
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;
Université PARIS-SUD - Licence MPI - S1 38
A voirA 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