introduction au graphisme sur ordinateur (info112)

0 - 1Université PARIS-SUD - Licence MPI - S1 1

Introduction au graphisme sur Introduction au graphisme sur ordinateur (Info112)ordinateur (Info112)

Chapitre 0: Introduction

Université PARIS-SUD - Licence MPI - S1 2

Un bref retour sur l’histoireUn 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 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 !


ProblèmesProblè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 paradygmeAnciens 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)


Références à l'écranRé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)

QuickTime™ et undécompresseur TIFF (non compressé)

sont requis pour visionner cette image.


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


ExempleExempleBienvenu dans le programme de jeu d’Echec A B C D E F G H1 T C F r R F C T2 p p p p p p p p3 _ _ _ _ _ _ _ _ 4 _ _ _ _ _ _ _ _5 _ _ _ _ _ _ _ _6 _ _ _ _ _ _ _ _7 p p p p p p p p8 T C F r R F C TJouez votre coup sur l'échiquier (A7-A5)


ExempleExempleBienvenu dans le programme de jeu d’Echec A B C D E F G H1 T C F r R F C T2 p p p p p p p p3 _ _ _ _ _ _ _ _ 4 _ _ _ _ _ _ _ _5 _ _ _ _ _ _ _ _6 _ _ _ _ _ _ _ _7 p p p p p p p p8 T C F r R F C TJouez votre coup sur l'échiquier(ex:A7-A5)F7-F6


ExempleExempleBienvenu dans le programme de jeu d’Echec A B C D E F G H1 T C F r R F C T2 p p p _ p p p p3 _ _ _ p _ _ _ _ 4 _ _ _ _ _ _ _ _5 _ _ _ _ _ _ _ _6 _ _ _ _ _ p _ _7 p p p p p _ p p8 T C F r R F C TJ’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 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 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’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émaSchémaProcesseur central

Carte graphiqueDispositif de pointage

mémoireCarte 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 No 1TD No 1 Explication mémoire / registres (a, b, c, d) et a souris.dx // en mmb souris.dyc memoire.xd memoire.ya a+cb b+dmemoire.x amemoire.y b…dessine_pointeur_souris(x, y)

100 fois par seconde


TD No1TD 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 x0 (idem pour y) juste avant le dessin Si (a>0) alors {aa*2} entre le calcul de a et la 3ieme formule Si (a>0) alors {aa*a} entre le calcul de a et la 3ieme formule


TP No1TP 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 No1TP 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 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 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 baseInstructions 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)


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)


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

QuickTime™ et undécompresseur TIFF (non compressé)

sont requis pour visionner cette image.


Taille de l’écranTaille de l’écran Taille standard

Mode portrait (hauteur>largeur) Mode Paysage (hauteur>largeur)

640*480 VGA


Autre instruction de base : fillrectAutre instruction de base : fillrect 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 leur

encodage


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

…


… … PointeurPointeur 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=0x71000=8=0x81001=9=0x91010=10=0xa1011=11=0xb1100=12=0xc1101=13=0xd1110=14=0xe1111=15=0xf

0000=0=0x0

0001=1=0x1

0010=2=0x2

0011=3=0x3

0100=4=0x4

0101=5=0x5

0110=6=0x6

0111=7=0x71000=8=0x81001=9=0x91010=10=0xa1011=11=0xb1100=12=0xc1101=13=0xd1110=14=0xe1111=15=0xf

0xC804304F0x0000000f

0xF81139DF0x00000010

0x110010000000010000110000010011110x0000000f

0x111110000001000100111001110111110x00000010


Zone mémoireZone 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é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 l’offsetExercice : 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)



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


(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



rapport au coin haut-gauche de l'écran Si le coin coin haut-gauche de l'écran a comme


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


ExerciceExerciceint 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 ?



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 = ?



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;


TD No2TD 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 No2TP No2 Aller sur Internet chercher une palette de couleur

RGB Lancer le jeu NewCol installé dans C:\Program

Files\CodeBlocks\ressources\Newcol


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

introduction au graphisme sur ordinateur (info112)

Documents