CHAPITRE1ÉLÉMENTSDEBASEEN2D

AlexandreBlondinMasséDépartementd'informatique

UniversitéduQuébecàMontréal16septembre2015INF5071-Infographie

PRIMITIVES2DLorsqu'onconçoituneinterfacegraphiqueen2D,ilestessentieldesavoircommentmanipulerlesobjetsgéométriquesprimitifs:

Points;Segments;Polygones;Cercles,etc.

LESPOINTSUnpointestsimplementuncoupleP = (x, y) ∈ ℝ2.EnJavaScript,onnedistingueparlesentiersdesflottants.Enfait,iln'yaqu'untypenumérique:Number.Touteslesautresprimitives2Dsontbaséessurdespoints.DansPhaser,onnepeutpasdessinerunpoint,quiestunobjetdedimension0.Ilfautplutôtdessinerunpetitdisque.

LESPOINTS(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);}

Voirlerésultat

http://thales.math.uqam.ca/~blondin/slides/demos/points/index.html

LESSEGMENTS

Unsegmentestentièrementdéterminépardeuxpoints.

PQ = ((x1, y1), (x2, y2))

Lorsqu'ondessineunsegmentPQ,ilfautactivertouslespixelsquisetrouvententrePetQ.

LepremieralgorithmeconnuquicalculecespixelsestdûàBresenham.

Ilpeutêtreimplémentétrèsefficacementpuisqu'ilnemanipulequedesentiers.

LESSEGMENTS(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);}

Voirlerésultat

http://thales.math.uqam.ca/~blondin/slides/demos/segment/index.html

ANTICRÉNELAGEUninconvénientdel'algorithmedeBresenhamestquelessegmentsapparaissentpixelisésàl'oeilnu,mêmeàdesrésolutionsrelativementélevées;L'algorithmedeWuproposeunecorrectionenintroduisantcequ'onappellel'anticrénelage(enanglaisantialiasing);Pourcela,ilfaututiliserdifférentstonsdecouleurpourrendrelatransitionplusnaturelle.

LESLIGNESBRISÉESETLESPOLYGONESÀpartirdesegments,onpeutconstruiredessuitesdesegments,aussiappeléeslignesbrisées.Lorsquelalignebriséerevientàsonpointdedépart,onl'appellepolygone.Silepolygonepossèdedescroisementsoudessectionsd'airenulle,onditqu'ilestdégénéré.

LESLIGNESBRISÉ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();}

Voirlerésultat

http://thales.math.uqam.ca/~blondin/slides/demos/lignes/index.html

LESRECTANGLESBienquelesrectanglessoientdescasparticuliersdepolygones,ilestsouventpossibledelesdessinerdirectement.Lesrectanglessontdesfiguresparticulièrementutilesen2D:Ilssonttrèssimplesàmanipuler;Ilssontalignésaveclesaxescartésiens;Ilssontsouventutiliséscommeboîteenglobantedesobjetsprésentsdansunescène.

DefinitionUneboîteenglobanteestunefiguregéométriquesimplequiapproximel'espaceoccupéparunobjet.Ellessontparticulièrementutileslorsqu'onsouhaitedétecterdescollisions.

LESCERCLES

Delamêmefaçonquepourlesrectangles,lescerclesetlesdisquessontdesfiguresgéométriquesfondamentalesen2D.

Ilsdécriventlaportéed'unobjet

Plusprécisément,supposonsqu'onaitunobjetO1enposition(x, y)etqu'ilaituneportéededistancer;

SoitunautreobjetO2enposition(x’, y’);

AlorsO2estàportéedeO1sietseulementsi

(x’ − x)2 + (y’ − y)2 ≤ r2

cequiestl'inéquationd'undisquedecentre(x, y)etderayonr.

LESELLIPSES

Lesellipsessontdescerclesauxquelsonappliqueunchangementd'échelle(homothétie)defacteursdifférentsselonl'horizontaleetlaverticale.

Ellessontsouventutiliséeslorsquelaportéed'unobjetn'estpastoutàfaitsymétrique.

L'équationcartésienned'uneellipsedecentre(h, k)etderayons(a, b)estdonnéepar

((x − h)2)/(a2) + ((y − k)2)/(b2) = 1

EXEMPLEfunction 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();}

Voirlerésultat

http://thales.math.uqam.ca/~blondin/slides/demos/autres/index.html

COMBINAISONDEPRIMITIVESLorsqu'onn'utilisequedesprimitives,onmanquerapidementd'imagination;Defaçonsurprenante,ilestparcontrepossibledeconstruiredesimagesrelativementcomplexessimplementencombinantlesprimitivesavecdifférentesopérations:Réunion;Intersection;Différence;Découpage,etc.

LARÉUNIONLaréunionde

est

L'INTERSECTIONL'intersectionde

est

LADIFFÉRENCELadifférencede

est

LADIFFÉRENCESYMÉTRIQUELadifférencesymétriquede

est

LEDÉCOUPAGE(CLIPPING)Uneautreopérationfréquenteestledécoupage.

LELOGICIELINKSCAPELelogiciel permetdecréerdesimagesàl'aidedefiguressimples;Ilestgratuitetlibre;Ilestextensible(beaucoupdegreffonsexistent);Ilpermetdesauvegarderdesimagesenformatvectorieletd'exporterlesimagesdanstouslesformatsimaginables.

Inkscape

https://inkscape.org/

SYSTÈMEDECOULEURSIlestdifficiledeproduiredesexemplesintéressantssanscouleureninfographie!Ilexistedifférentssystèmesquiprésententleursavantagesetleursinconvénients;Nousallonsétudierlessystèmessuivants:Lesystèmenoiretblanc;LesystèmeRYB;LesystèmeRGB;LesystèmeCMYK;LesystèmeHSV.

LESYSTÈMENOIRETBLANCLesystèmeleplussimpleestsansdouteceluibasésurdeuxcouleurs:noiretblanc.Danscesystème,chaquepixelalavaleur0ou1.Ilestégalementpossibled'utiliserdesniveauxdegris.Onassignealorsunevaleurentre,parexemple,0et255pourindiquerleniveaudegris:0dénotelenoir;1dénoteleblanc.

(source: )http://www.bonjourlesenfants.net/

http://www.bonjourlesenfants.net/

LESYSTÈMERYBUnautresystèmequ'onnousenseigneàl'écoleprimaireestlesystèmeRYB:R:red;Y:yellow;B:blue.

Bienqu'ilfassepartidescouleursdebasedupeintre,ilnepermetdereproduireentièrementlespectredescouleursvisiblesparleshumains.

COMBINAISONDECOULEURS(RYB)

SOLUTION(RYB)

LESYSTÈMERGBIls'agitdusystèmeleplusconnu:R:red;G:green;B:blue.

Ilyadesmotivationsphysiquesderrièrecechoix:l'oeilhumainestplussensibleauxvariationsdecouleursgénéréesparcesystème.Onpeutenparticuliergénérerleblancetlenoir:Noir:absencecomplètedestroiscouleurs;Blanc:présencecomplètedestroiscouleurs.

COMBINAISONDECOULEURS(RGB)

SOLUTION(RGB)

L'ESPACERGBUnecouleurRGBpeutêtrevuecommeunpointen3Ddontles

coordonnéessontentre0et1:

(source:wikipedia.org)

LESYSTÈMECMYKContrairementausystèmeRGB,quiestadditif,lesystèmeCMYKestsoustractif.Cesystèmeestsurtoututilisépourl'impression.Eneffet,danslaplupartdescas,onimprimesurdupapierblanc(plutôtqued'affichersurunécrannoir).Autrementdit,onsupprimelescouleursqu'onnesouhaitepasréfléchirsurlepapier.

LESYSTÈMECMYK(SUITE)

LESYSTÈMEHSV(1/4)

LessystèmesRGBetCMYKnesontpastoujoursintuitifs

Parexemple,commentobtenirunecouleurorangefoncéàpartirdecettesituation?

LESYSTÈMEHSV(2/4)

Différentssystèmesontétéproposéspoursimplifierlechoixdelacouleur:

LESYSTÈMEHSV(3/4)LessystèmesdecetypesenommentHSV,HSL,HSI,HLS:H:hue(enfrançais,teinte);S:saturation;V:value(enfrançais,valeur);L:luminosity(enfrançais,luminosité);I:intensity(enfrançais,intensité).

LESYSTÈMEHSV(4/4)IlestpossibledepasserdeHSVàRGB(etvice-versa)àl'aidedechangementsdecoordonnéesrelativementsimples

(source:wikipedia.org)

IMAGESIlexisteuntrèsgrandnombredeformatsd'images:

GIFJPEGPNGPSPDFSVGTIFF,etc.

LEFORMATBITMAPUndesformatslesplussimplesestsansaucundouteleformatBitmap;AussidésignésouslenomBMP;Onstockecertainesméta-donnéesdanslefichiertellesque:Ladescription;Latabledescouleurs;Latransparence(canalalpha);Leformatdespixels,etc.

Puislesvaleursdespixelssontdonnées;Souventstockésanscompression.

LEFORMATGIFGIF:GraphicsInterchangeFormat;Undespremiersformatssupportésparlesnavigateurs;Lacompressionestsansperteetutilisel'algorithmeLZW(Lempel-Ziv-Welch);Supportelesanimations.DesconflitsauniveaudebrevetsportantsurGIFastimulélacréationduformatPNG.

LEFORMATPNGFormatleplusutilisésurInternet;Non-breveté;Compressionendeuxphases:Précompressionpourpréparerlacompression;Compression:DEFLATE,uneméthodedecompressionnonbrevetée.

Pasdeperted'information;ProduitgénéralementdesfichiersdeplusgrandetaillequeJPEG.

LEFORMATJPEGJPEG:JointPhotographicExpertsGroup;Utiliséplusparticulièrementpourlesphotos;Compressionavecperted'information;Leratiodecompressionpeutêtrespécifié;Idéalpourlesimagesavectransitionsdecouleurcontinues(etnonsubites);Utiliselatransforméeencosinusdiscrète(décompositionensignal);Inconvénientmajeur:lorsqu'onsauvegardeplusieursfoisavecdespetiteséditions,laqualitédégradegrandement.

LEFORMATSVGSVG:ScalableVectorGraphics;ToutcommelesformatsPDFetPS,leformatSVGestunformatvectoriel;StandardouvertpourInternet;IloffreplusieursavantagesparrapportauxformatsBitmap:Résistantauchangementd'échelle(zoom);Contrôletotalpourl'éditiond'images;Espacemémoiresouventpluspetit.

C'estleformatutiliséparInkscape;Ilexisteplusieursoutilslibrespourpasserd'unformatàl'autre.

SYSTÈMEDECOORDONNÉESEn2D,ondoitrégulièrementpasserd'unsystèmedecoordonnéesàunautre.Aussi,selonlasituation,ilpeutêtreconvenabled'enutiliser

unplutôtqu'unautre:

Coordonnéesd'écran;Coordonnéescartésiennes;Coordonnéespolaires;Coordonnéeshexagonales,etc.

COORDONNÉESD'ÉCRANDansPhaser,lescoordonnéesd'écransontsimilairesauxcoordonnées

cartésienneshabituelles:

Lepoint(0, 0)setrouvedanslecoinsupérieurgaucheducanvas;Lecentresetrouveaupoint(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() {}

Voirlerésultat

http://thales.math.uqam.ca/~blondin/slides/demos/coordinates/index.html

COORDONNÉESCARTÉSIENNESSouvent,ilyauneconfusionentrelescoordonnéesd'écranetlescoordonnéescartésiennesqu'ontrouveenmathématiques;Ilestparfoispréférablequelepoint(0, 0)setrouveaucentredel'écran.

COORDONNÉESPOLAIRESDanscertainscas,ilestplusappropriédemodéliserlascèneenutilisantlescoordonnéespolaires;Exemple:Onpassed'unsystèmeàl'autreàl'aidedesformulessuivantes:r = √(x2 + y2)eta = arctan(y ⁄ x);x = rcos(a)ety = rsin(a).

lejeuHexagon

http://terrycavanaghgames.com/hexagon/

EXERCICEÉcrivezdesfonctionsenJavaScriptquitransformentunpointd'un

systèmedecoordonnéesàunautre:

Ensuite,écrivezunefonctionJavaScriptqui

function cartesian2screen(x, y) { // Compléter}

function polar2cartesian(r, a) { // Compléter}

Graphics.prototype.drawRegularPolygon = function (x, y, n, r, a) { // Compléter}

RESSOURCESINTÉRESSANTESEnplusd'Inkscape,ilexisteplusieursautresressourcesintéressantes:

,pourretoucherdesimages;,pourcréerdescartesàl'aidedetuiles;

,pourdesmusiquesgratuitesetlibres(royalty-free);,parfaitpourdesarrières-plans;

;;

.

GimpTiledIncompetechImagesdelaNASABanquederessourcesmultimédiaOpenGameArtGénérateurdepersonnage

http://www.gimp.org/http://www.mapeditor.org/http://incompetech.com/music/royalty-free/https://www.nasa.gov/multimedia/imagegallery/http://jeux.developpez.com/medias/http://opengameart.org/http://gaurav.munjal.us/Universal-LPC-Spritesheet-Character-Generator/