ÉLÉMENTS DE BASE EN 2D. Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 16 septembre 2015 INF Infographie

Transcription

1 CHAPITRE 1 ÉLÉMENTS DE BASE EN 2D Alexandre Blondin Massé Département d'informatique Université du Québec à Montréal 16 septembre 2015 INF Infographie

2 PRIMITIVES 2D Lorsqu'on conçoit une interface graphique en 2D, il est essentiel de savoir comment manipuler les objets géométriques primitifs : Points; Segments; Polygones; Cercles, etc.

3 LES POINTS Un point est simplement un couple P = (x, y) R 2. En JavaScript, on ne distingue par les entiers des flottants. En fait, il n'y a qu'un type numérique : Number. Toutes les autres primitives 2D sont basées sur des points. Dans Phaser, on ne peut pas dessiner un point, qui est un objet de dimension 0. Il faut plutôt dessiner un petit disque.

4 LES POINTS (EXEMPLE) function drawpoint(x, y, size, color, showlabel) { showlabel = typeof showlabel!== 'undefined'? showlabel : false; if (showlabel) { var label = game.add.text(x, y, "(" + x + "," + y + ")", {fill: 'white'}); label.anchor.x = 0.5 label.anchor.y = 0 } window.graphics = window.graphics game.add.graphics(); window.graphics.linestyle(0); window.graphics.beginfill(color, 1.0); window.graphics.drawcircle(x, y, size); window.graphics.endfill(); } function create() { drawpoint(100, 100, 8, 0xFFFFFF); drawpoint(293, 158, 8, 0xFF0000, true); } Voir le résultat

5 LES SEGMENTS Un segment est entièrement déterminé par deux points. PQ = ((x1, y1), (x2, y2)) Lorsqu'on dessine un segment PQ, il faut activer tous les pixels qui se trouvent entre P et Q. Le premier algorithme connu qui calcule ces pixels est dû à Bresenham. Il peut être implémenté très efficacement puisqu'il ne manipule que des entiers.

6 LES SEGMENTS (EXEMPLE) function drawsegment(x1, y1, x2, y2, width, color, showlabel) { drawpoint(x1, y1, 8, color, showlabel); drawpoint(x2, y2, 8, color, showlabel); window.graphics.linestyle(width, color, 1); window.graphics.beginfill(color, 1.0); window.graphics.moveto(x1, y1); window.graphics.lineto(x2, y2); window.graphics.endfill(); } function create() { drawsegment(100, 100, 293, 158, 8, 0xFFFFFF, true); } Voir le résultat

7 ANTICRÉNELAGE Un inconvénient de l'algorithme de Bresenham est que les segments apparaissent pixelisés à l'oeil nu, même à des résolutions relativement élevées; L'algorithme de Wu propose une correction en introduisant ce qu'on appelle l'anticrénelage (en anglais antialiasing); Pour cela, il faut utiliser différents tons de couleur pour rendre la transition plus naturelle.

8 LES LIGNES BRISÉES ET LES POLYGONES À partir de segments, on peut construire des suites de segments, aussi appelées lignes brisées. Lorsque la ligne brisée revient à son point de départ, on l'appelle polygone. Si le polygone possède des croisements ou des sections d'aire nulle, on dit qu'il est dégénéré.

9 LES LIGNES BRISÉES (EXEMPLE) function create() { var points = [[50,100], [100,50], [150,150]]; window.graphics = game.add.graphics(); // Sans remplissage window.graphics.linestyle(2, 0xFFFFFF, 1); window.graphics.moveto(points[0][0], points[0][1]); for (i = 1; i < points.length; i++) { window.graphics.lineto(points[i][0], points[i][1]); } // Avec remplissage points = [[200,100], [250,50], [300,150]]; window.graphics.beginfill(0x0000ff, 1.0); window.graphics.linestyle(2, 0xFFFFFF, 1); window.graphics.moveto(points[0][0], points[0][1]); for (i = 1; i < points.length; i++) { window.graphics.lineto(points[i][0], points[i][1]); } window.graphics.endfill(); } Voir le résultat

10 LES RECTANGLES Bien que les rectangles soient des cas particuliers de polygones, il est souvent possible de les dessiner directement. Les rectangles sont des figures particulièrement utiles en 2D : Ils sont très simples à manipuler; Ils sont alignés avec les axes cartésiens; Ils sont souvent utilisés comme boîte englobante des objets présents dans une scène. Definition Une boîte englobante est une figure géométrique simple qui approxime l'espace occupé par un objet. Elles sont particulièrement utiles lorsqu'on souhaite détecter des collisions.

11 LES CERCLES De la même façon que pour les rectangles, les cercles et les disques sont des figures géométriques fondamentales en 2D. Ils décrivent la portée d'un objet Plus précisément, supposons qu'on ait un objet O1 en position (x, y) et qu'il ait une portée de distance r; Soit un autre objet O2 en position (x, y ); Alors O2 est à portée de O1 si et seulement si (x x) 2 + (y y) 2 r 2 ce qui est l'inéquation d'un disque de centre (x, y) et de rayon r.

12 LES ELLIPSES Les ellipses sont des cercles auxquels on applique un changement d'échelle (homothétie) de facteurs différents selon l'horizontale et la verticale. Elles sont souvent utilisées lorsque la portée d'un objet n'est pas tout à fait symétrique. L'équation cartésienne d'une ellipse de centre (h, k) et de rayons (a, b) est donnée par ((x h) 2 )/(a 2 ) + ((y k) 2 )/(b 2 ) = 1

13 EXEMPLE function create() { window.graphics = game.add.graphics(); window.graphics.beginfill(0xff00ff, 1); window.graphics.linestyle(2, 0x0000FF, 1); // Un rectangle window.graphics.drawrect(50, 50, 100, 75); // Un cercle window.graphics.drawcircle(200, 100, 50); // Une ellipse window.graphics.drawellipse(300, 100, 20, 80); window.graphics.endfill(); } Voir le résultat

14 COMBINAISON DE PRIMITIVES Lorsqu'on n'utilise que des primitives, on manque rapidement d'imagination; De façon surprenante, il est par contre possible de construire des images relativement complexes simplement en combinant les primitives avec différentes opérations : Réunion; Intersection; Différence; Découpage, etc.

15 LA RÉUNION La réunion de est

16 L'INTERSECTION L'intersection de est

17 LA DIFFÉRENCE La différence de est

18 LA DIFFÉRENCE SYMÉTRIQUE La différence symétrique de est

19 LE DÉCOUPAGE (CLIPPING) Une autre opération fréquente est le découpage.

20 LE LOGICIEL INKSCAPE Le logiciel Inkscape permet de créer des images à l'aide de figures simples; Il est gratuit et libre; Il est extensible (beaucoup de greffons existent); Il permet de sauvegarder des images en format vectoriel et d'exporter les images dans tous les formats imaginables.

21 SYSTÈME DE COULEURS Il est difficile de produire des exemples intéressants sans couleur en infographie! Il existe différents systèmes qui présentent leurs avantages et leurs inconvénients; Nous allons étudier les systèmes suivants : Le système noir et blanc; Le système RYB; Le système RGB; Le système CMYK; Le système HSV.

22 LE SYSTÈME NOIR ET BLANC Le système le plus simple est sans doute celui basé sur deux couleurs : noir et blanc. Dans ce système, chaque pixel a la valeur 0 ou 1. Il est également possible d'utiliser des niveaux de gris. On assigne alors une valeur entre, par exemple, 0 et 255 pour indiquer le niveau de gris : 0 dénote le noir; 1 dénote le blanc. (source : )

23 LE SYSTÈME RYB Un autre système qu'on nous enseigne à l'école primaire est le système RYB : R: red; Y: yellow; B: blue. Bien qu'il fasse parti des couleurs de base du peintre, il ne permet de reproduire entièrement le spectre des couleurs visibles par les humains.

24 COMBINAISON DE COULEURS (RYB)

25 SOLUTION (RYB)

26 LE SYSTÈME RGB Il s'agit du système le plus connu : R: red; G: green; B: blue. Il y a des motivations physiques derrière ce choix : l'oeil humain est plus sensible aux variations de couleurs générées par ce système. On peut en particulier générer le blanc et le noir : Noir : absence complète des trois couleurs; Blanc : présence complète des trois couleurs.

27 COMBINAISON DE COULEURS (RGB)

28 SOLUTION (RGB)

29 (source : wikipedia.org) L'ESPACE RGB Une couleur RGB peut être vue comme un point en 3D dont les coordonnées sont entre 0 et 1 :

30 LE SYSTÈME CMYK Contrairement au système RGB, qui est additif, le système CMYK est soustractif. Ce système est surtout utilisé pour l'impression. En effet, dans la plupart des cas, on imprime sur du papier blanc (plutôt que d'afficher sur un écran noir). Autrement dit, on supprime les couleurs qu'on ne souhaite pas réfléchir sur le papier.

31 LE SYSTÈME CMYK (SUITE)

32 LE SYSTÈME HSV (1/4) Les systèmes RGB et CMYK ne sont pas toujours intuitifs Par exemple, comment obtenir une couleur orange foncé à partir de cette situation?

33 LE SYSTÈME HSV (2/4) Différents systèmes ont été proposés pour simplifier le choix de la couleur :

34 LE SYSTÈME HSV (3/4) Les systèmes de ce type se nomment HSV, HSL, HSI, HLS : H : hue (en français, teinte); S : saturation; V : value (en français, valeur); L : luminosity (en français, luminosité); I : intensity (en français, intensité).

35 LE SYSTÈME HSV (4/4) Il est possible de passer de HSV à RGB (et vice-versa) à l'aide de changements de coordonnées relativement simples (source : wikipedia.org)

36 IMAGES Il existe un très grand nombre de formats d'images : GIF JPEG PNG PS PDF SVG TIFF, etc.

37 LE FORMAT BITMAP Un des formats les plus simples est sans aucun doute le format Bitmap; Aussi désigné sous le nom BMP; On stocke certaines méta-données dans le fichier telles que : La description; La table des couleurs; La transparence (canal alpha); Le format des pixels, etc. Puis les valeurs des pixels sont données; Souvent stocké sans compression.

38 LE FORMAT GIF GIF: Graphics Interchange Format; Un des premiers formats supportés par les navigateurs; La compression est sans perte et utilise l'algorithme LZW (Lempel- Ziv-Welch); Supporte les animations. Des conflits au niveau de brevets portant sur GIF a stimulé la création du format PNG.

39 LE FORMAT PNG Format le plus utilisé sur Internet; Non-breveté; Compression en deux phases : Précompression pour préparer la compression; Compression : DEFLATE, une méthode de compression non brevetée. Pas de perte d'information; Produit généralement des fichiers de plus grande taille que JPEG.

40 LE FORMAT JPEG JPEG: Joint Photographic Experts Group; Utilisé plus particulièrement pour les photos; Compression avec perte d'information; Le ratio de compression peut être spécifié; Idéal pour les images avec transitions de couleur continues (et non subites); Utilise la transformée en cosinus discrète (décomposition en signal); Inconvénient majeur : lorsqu'on sauvegarde plusieurs fois avec des petites éditions, la qualité dégrade grandement.

41 LE FORMAT SVG SVG : Scalable Vector Graphics; Tout comme les formats PDF et PS, le format SVG est un format vectoriel; Standard ouvert pour Internet; Il offre plusieurs avantages par rapport aux formats Bitmap : Résistant au changement d'échelle (zoom); Contrôle total pour l'édition d'images; Espace mémoire souvent plus petit. C'est le format utilisé par Inkscape; Il existe plusieurs outils libres pour passer d'un format à l'autre.

42 SYSTÈME DE COORDONNÉES En 2D, on doit régulièrement passer d'un système de coordonnées à un autre. Aussi, selon la situation, il peut être convenable d'en utiliser un plutôt qu'un autre : Coordonnées d'écran; Coordonnées cartésiennes; Coordonnées polaires; Coordonnées hexagonales, etc.

43 COORDONNÉES D'ÉCRAN Dans Phaser, les coordonnées d'écran sont similaires aux coordonnées cartésiennes habituelles : Le point (0, 0) se trouve dans le coin supérieur gauche du canvas; Le centre se trouve au point (game.width / 2, game.height / 2); var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', {preload: preload, create: create, update: update}); function preload() { } function create() { var positions = [[0,0], [100,500], [400,100], [650,550], [800,600]]; for (i = 0; i < positions.length; ++i) { var text = "(" + positions[i].tostring() + ")"; game.add.text(positions[i][0], positions[i][1], text, {fill: 'white'}); } } function update() { } Voir le résultat

44 COORDONNÉES CARTÉSIENNES Souvent, il y a une confusion entre les coordonnées d'écran et les coordonnées cartésiennes qu'on trouve en mathématiques; Il est parfois préférable que le point (0, 0) se trouve au centre de l'écran.

45 COORDONNÉES POLAIRES Dans certains cas, il est plus approprié de modéliser la scène en utilisant les coordonnées polaires; Exemple : le jeu Hexagon On passe d'un système à l'autre à l'aide des formules suivantes : r = (x 2 + y 2 ) et a = arctan(y x); x = rcos(a) et y = rsin(a).

46 EXERCICE Écrivez des fonctions en JavaScript qui transforment un point d'un système de coordonnées à un autre : function cartesian2screen(x, y) { // Compléter } function polar2cartesian(r, a) { // Compléter } Ensuite, écrivez une fonction JavaScript qui Graphics.prototype.drawRegularPolygon = function (x, y, n, r, a) { // Compléter }

47 RESSOURCES INTÉRESSANTES En plus d'inkscape, il existe plusieurs autres ressources intéressantes : Gimp, pour retoucher des images; Tiled, pour créer des cartes à l'aide de tuiles; Incompetech, pour des musiques gratuites et libres (royalty-free); Images de la NASA, parfait pour des arrières-plans; Banque de ressources multimédia; OpenGameArt; Générateur de personnage.