La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Université PARIS-SUD - Licence MPI - S1 1 0 -1 Introduction au graphisme sur ordinateur (Info112) Chapitre 0: Introduction.

Présentations similaires


Présentation au sujet: "Université PARIS-SUD - Licence MPI - S1 1 0 -1 Introduction au graphisme sur ordinateur (Info112) Chapitre 0: Introduction."— Transcription de la présentation:

1 Université PARIS-SUD - Licence MPI - S Introduction au graphisme sur ordinateur (Info112) Chapitre 0: Introduction

2 Université PARIS-SUD - Licence MPI - S1 2 Un bref retour sur lhistoire Les ordinateurs ont besoins … De programmes De données Dun 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 ? Ca va et toi ?

3 Université PARIS-SUD - Licence MPI - S1 3Communication 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 Université PARIS-SUD - Licence MPI - S1 4Problèmes Les mots ne sont quune succession de lettres pour un ordinateur Les lettres manuscrites ne sont que des gribouillis Aucun sens humain ne perçoit l'électricité ni nen produit (… directement) Lordinateur na pas d'idées à lui, pas dinitiative On a fait des programmes qui simulent des neurones mais aucune idée nen est sorti !

5 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 6 Références à l'écran Certains systèmes graphiques utilisent la conventions des repères direct en mathématique …. Dautres pas (la majorité même)

7 Université PARIS-SUD - Licence MPI - S1 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, cest le principe du retour dinformation (feedback) Le feedback apparaît immédiatement à lécran au niveau dun caractère spécial clignotant appelle curseur

8 Université PARIS-SUD - Licence MPI - S1 8Exemple Bienvenu dans le programme de jeu dEchec 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 Université PARIS-SUD - Licence MPI - S1 9Exemple Bienvenu dans le programme de jeu dEchec 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 Université PARIS-SUD - Licence MPI - S1 10Exemple Bienvenu dans le programme de jeu dEchec 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 Jai joué D2-D3, a vous (ex:C7-C5) F7-F6

11 Université PARIS-SUD - Licence MPI - S1 11 A retenir Laffichage de la touche pressée est le plus rapide possible Lhumain a du mal à se rappeler Lhumain fait des erreurs de frappe quil doit corriger Le curseur clignote Le regard de lhumain est attiré, la recherche est moins longue Le regard de lhumain passe du clavier à l'écran (surtout quand il apprend a se servir du clavier) Lhumain sinterrompt parfois dans son travail avant de revenir à ce quil faisait L'écran défile (vers le bas ligne par ligne) ou est remplacé par un écran quasi identique à chaque rafraîchissement Lhumain a du mal à assimiler trop de nouvelles informations Des informations qui apparaissent légèrement décalés par rapport à linstant davant ne sont pas interprétées comme nouvelles !

12 Université PARIS-SUD - Licence MPI - S1 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 dun dispositif de pointage (souris, touchpad ou autre) Ce dernier ne clignote pas … pourquoi ? En fait … Matrice de pixels, traitements des graphismes et couplage avec dautres dispositifs sont dissociés

13 Université PARIS-SUD - Licence MPI - S1 13Sché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)

14 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 15 TD No1 Si a la place de laddition vous pouvez utiliser nimporte 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 Université PARIS-SUD - Licence MPI - S1 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 quils passe par Wikipedia (image vectoriel et SVG) Essayer de lancer des application en ligne

17 Université PARIS-SUD - Licence MPI - S1 17 TP No1 Chercher « gcalc » sur Internet et lancer lapplet 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 Université PARIS-SUD - Licence MPI - S1 18 Matrice 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

19 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 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 à ladresse 0x BGR : rouge si la valeur 0xffff00 à ladresse 0x f Instructions Sous forme de fonctions setPixel(x, y, color)

21 Université PARIS-SUD - Licence MPI - S1 21Hexadécimal Comptage en base 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 = et quelques 0xffffff = 16 millions et des bananes 0xffffffff = 4 milliards et des brouettes

22 Université PARIS-SUD - Licence MPI - S1 22Binaire 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 Université PARIS-SUD - Licence MPI - S1 23 Si dessin à l'écran ou dans une fenêtre

24 Université PARIS-SUD - Licence MPI - S1 24 Taille de lécran Taille standard Mode portrait (hauteur>largeur) Mode Paysage (hauteur>largeur) 640*480 VGA

25 Université PARIS-SUD - Licence MPI - S1 25 Autre instruction de base : fillrect Rempli un rectangle dune couleur uniforme Fillrect(x, y, w, h, color)

26 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 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 cest lumineux) contrairement à la peinture (plus on en mélange plus on a un gris foncé) 0x = noir 0xffffff = blanc

28 Université PARIS-SUD - Licence MPI - S1 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 0x00FFF00F 0x x0800F00F 0x x8800F00F 0x x1811FFFF 0x xC804304F 0x f 0xF81139DF 0x …

29 Université PARIS-SUD - Licence MPI - S1 29 … 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 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 0xC804304F 0x f 0xF81139DF 0x x x f 0x x

30 Université PARIS-SUD - Licence MPI - S1 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 nest 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 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 32 Exercice : Adresse de loffset 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 0x Quelle est ladresse du pixel 3,7 de la fenêtre (toujours par rapport a son coin haut-gauche)

33 Université PARIS-SUD - Licence MPI - S1 33 Exercice : Adresse de loffset 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 0x Quelle est ladresse du pixel 3,7 de la fenêtre (toujours par rapport a son coin haut-gauche) Trouvons dabord du coin 0x * = 0x xa*0x100+0x32=… 0x = 0x xA32= 0x30000A32

34 Université PARIS-SUD - Licence MPI - S1 34 Exercice : Adresse de loffset 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 0x Quelle est ladresse du pixel 3,7 de la fenêtre (toujours par rapport a son coin haut-gauche) Rajoutons ensuite les lignes 0x30000A32+7* x30000A = 0x30000A32+0x700 0x

35 Université PARIS-SUD - Licence MPI - S1 35 Opération spéciale sur tableaux de bits Décallage (à droite ou à gauche) > Unsigned int pixel = 0x00FF0000; pixel = pixel>>4; // dec. a droite printf("pixel=%p", pixel); // pixel=0x 000FF000 pixel = pixel<<2; // dec. a gauche printf("pixel=%p", pixel); // pixel=0x 003FC000 Masque & Unsigned int pixel = 0x20CF0200; pixel = pixel&0x00FF0000; printf("pixel=%p", pixel); // pixel=0x 00CF

36 Université PARIS-SUD - Licence MPI - S1 36Exercice 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 Université PARIS-SUD - Licence MPI - S1 37Exercice 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 Université PARIS-SUD - Licence MPI - S1 38Exercice 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 Université PARIS-SUD - Licence MPI - S1 39 TD No2 0x 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 Université PARIS-SUD - Licence MPI - S1 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 Université PARIS-SUD - Licence MPI - S1 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


Télécharger ppt "Université PARIS-SUD - Licence MPI - S1 1 0 -1 Introduction au graphisme sur ordinateur (Info112) Chapitre 0: Introduction."

Présentations similaires


Annonces Google