un bref retour sur lÕhistoire introduction au graphisme ... · lÕhumain a du mal assimiler trop...

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 ?


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 !


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 !


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)


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)


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


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)


ExempleExemple


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


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 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 !


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


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)


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


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


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


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)


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


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)


Palette de couleursPalette de couleurs

256 couleurs de la palette VGA

Clairs / foncés

Tons

Couleurs vives et pastelles


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


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


AutresAutres


Autre instruction de base : Autre instruction de base : fillrectfillrect

! Rempli un rectangle d’une couleur uniforme

! fillRect(x, y, w, h, color)


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


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


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

…


…… 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


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


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;


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)




rapport au coin haut-gauche de l'écran (256H*256L)


adresse 0x30000000



! Trouvons d’abord l’@ du coin

! 0x30000000+10 *256 +50 =

0x30000000+0xa*0x100+0x32=…

! 0x30000000+ 2610 = 0x30000000+ 0xA32=

! 0x30000A32




rapport au coin haut-gauche de l'écran


adresse 0x30000000



! Rajoutons ensuite les lignes

! 0x30000A32+7*256+3

! 0x30000A32+1792= 0x30000A32+0x700

! 0x30001132


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


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 ?


ExerciceExercice

int r = 255;

int g=0;

int b = 128;

unsigned int p = <<24 + g<<16+ b<<8;


int r, g, b

Comment récupérer les valeur de r, g, et b ?r = (p & 0xFF000000) >> 24;

g = ?

b = ?


ExerciceExercice

int r = 255;

int g=0;

int b = 128;

unsigned int p = <<24 + g<<16+ b<<8;


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;


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

un bref retour sur lÕhistoire introduction au graphisme ... · lÕhumain a du mal assimiler trop...

Documents