Differences
This shows you the differences between two versions of the page.
|
egc:laboratoare:fr:03 [2018/10/23 10:29] alexandru.gradinaru |
egc:laboratoare:fr:03 [2019/10/14 07:52] (current) alexandru.gradinaru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Laboratoire 03 ====== | ====== Laboratoire 03 ====== | ||
| - | ===== Transformations 2D ===== | + | ===== Transformations graphiques 2D ===== |
| Les objets 2D sont définis dans un système cartésien de coordonnées 2D, par exemple, XOY, XOZ ou YOZ. | Les objets 2D sont définis dans un système cartésien de coordonnées 2D, par exemple, XOY, XOZ ou YOZ. | ||
| Line 110: | Line 110: | ||
| <note> | <note> | ||
| - | In cadrul framework-ului de laborator, in fisierul ''Transform2D.h'' sunt definite functiile pentru calculul matricilor de translatie, rotatie si scalare. In momentul acesta toate functiile intorc matricea identitate. In cadrul laboratorului va trebui sa modificati codul pentru a calcula matricile respective. | + | Dans le cadre du laboratoire, le fichier ''Transform2D.h'' définit les fonctions de calcul des matrices de translation, de rotation et d’échelle. À ce stade, toutes les fonctions renvoient la matrice d'identité. Dans le laboratoire, vous devrez changer le code pour calculer les matrices. |
| </note> | </note> | ||
| - | ==== Transformari compuse ==== | + | ==== Transformations composées ==== |
| Pourquoi sont les matrices nécessaires? Pour représenter par une seule matrice de transformation une séquence de transformations élémentaires, au lieu d’appliquer une séquence de transformations élémentaires sur un objet. | Pourquoi sont les matrices nécessaires? Pour représenter par une seule matrice de transformation une séquence de transformations élémentaires, au lieu d’appliquer une séquence de transformations élémentaires sur un objet. | ||
| Line 154: | Line 154: | ||
| <note> | <note> | ||
| - | In cadrul laboratorului, in fisierul ''Laborator3.cpp'', exista o serie de obiecte (patrate) pentru care, in functia ''Update()'', inainte de desenare, se definesc matricile de transformari. Comanda de desenare se da prin functia ''RenderMesh2D()''. | + | |
| + | Dans le laboratoire, dans le fichier ''Laborator3.cpp'', il existe un certain nombre d'objets (carrés) pour lesquels ''Update ()'', avant de dessiner, définit les matrices de transformation. La commande de dessin est donnée par la fonction ''RenderMesh2D()''. | ||
| <code cpp> | <code cpp> | ||
| Line 162: | Line 163: | ||
| </code> | </code> | ||
| - | Pentru exemplul anterior, matricea de translatie creata va avea ca efect translatarea patratului curent cu (150, 250). Pentru efecte de animatie continua, pasii de translatie ar trebui sa se modifice in timp. | + | Pour l'exemple précédent, la matrice de translation créée translaté le carré actuel en (150 250). Pour les effets d'animation continue, les étapes de translation doivent changer au fil du temps. |
| - | Exemplu: | + | Exemple: |
| <code cpp> | <code cpp> | ||
| tx += deltaTimeSeconds * 100; | tx += deltaTimeSeconds * 100; | ||
| Line 173: | Line 174: | ||
| <note tip> | <note tip> | ||
| - | **Retineti:** daca la animatie nu tineti cont de timpul de rulare al unui frame (''deltaTimeSeconds''), veti crea animatii dependente de platforma. | + | ** Remarque: ** Si vous ne tenez pas compte de la durée d'exécution d'une image (''deltaTimeSeconds''), vous créerez des animations dépendantes de la plateforme. |
| + | |||
| + | **Exemple:** Si sur chaque image vous grandissez sur TX avec un pas constant (ex: ''TX + = 0.01''), l'animation se comportera différemment sur un ordinateur qui va plus vite que celui qui va plus lentement. Sur un ordinateur fonctionnant à 50 FPS, l’objet se déplacera de 0,01 * 50 = 0,5 unité vers la droite dans une seconde. Au lieu de cela, sur un ordinateur plus lent fonctionnant à 10 FPS, l'objet se déplacera de 0,01 * 10 = 0,1 unités vers la droite en une seconde, l'animation sera donc 5 fois plus lente. | ||
| - | **Exemplu:** daca la fiecare frame cresteti pe tx cu un pas constant (ex: ''tx += 0.01''), atunci animatia se va comporta diferit pe un calculator care merge mai repede fata de unul care merge mai incet. Pe un calculator care ruleaza la 50 FPS, obiectul se va deplasa 0.01 * 50 = 0.5 unitati in dreapta intr-o secunda. In schimb, pe un calculator mai incet, care ruleaza la 10 FPS, obiectul se va deplasa 0.01 * 10 = 0.1 unitati in dreapta intr-o secunda, deci animatia va fi de 5 ori mai lenta. | + | Pour cette raison, il est bon de garder à l’esprit la vitesse de chaque ordinateur (date à travers le ''deltaTimeSeconds'', qui représente la durée de la trame précédente) et de modifier les étapes de conversion, les angles de rotation et les facteurs en fonction de cette variable. |
| - | Din acest motiv este bine sa tineti cont de viteza de rulare a fiecarui calculator (data prin ''deltaTimeSeconds'', care reprezinta timpul de rulare al frame-ului anterior) si sa modificati pasii de translatie, unghiurile de rotatie si factorii de scalare in functie de aceasta variabila. | ||
| </note> | </note> | ||
| Line 185: | Line 187: | ||
| <note> | <note> | ||
| - | In exercitiile anterioare din acest laborator, coordonatele obiectelor au fost raportate la dimensiunea ferestrei definita prin ''glViewport()''. | ||
| - | Exemplu: Daca viewport-ul meu are coltul din stanga jos (0, 0) si are latimea 1280 si inaltimea 720, atunci toate obiectele ar trebui desenate in acest interval, daca vreau sa fie vizibile. Acest lucru ma conditioneaza sa imi gandesc toata scena in (0, 0) - (1280, 720). Daca vreau sa scap de aceasta limitare, pot sa imi gandesc scena intr-un spatiu logic (de exemplu imi creez toate obiectele in spatiul (-1, -1) - (1, 1), si apoi sa le desenez in poarta de afisare, dar aplicand ceea ce se numeste **transformarea fereastra poarta**. | + | Dans les exercices précédents de ce laboratoire, les coordonnées de l'objet étaient rapportées à la taille de la fenêtre définie par ''glViewport()''. |
| - | In cele ce urmeaza vedem ce presupune aceasta transformare si cum pot sa imi gandesc scena fara sa fiu limitat de dimensiunea viewport-ului. | + | Exemple: Si ma fenêtre d'affichage a le coin inférieur gauche (0, 0), une largeur de 1280 et une hauteur de 720, tous les objets doivent être dessinés dans cette plage s'ils veulent être visibles. Cela me fait penser à toute la scène dans (0, 0) - (1280, 720). Si je souhaite supprimer cette limitation, je peux penser à la scène dans un espace logique (par exemple, je crée tous les objets dans l'espace (-1, -1) - (1, 1), puis je les dessine dans la grille d'affichage. , mais en appliquant ce que l’on appelle **la porte tournante**. |
| + | Dans ce qui suit, nous voyons ce que cette transformation implique et comment je peux penser à la scène sans être limité par la taille de la fenêtre. | ||
| </note> | </note> | ||
| {{ :egc:laboratoare:transf_fer_poarta1.png?600 |}} | {{ :egc:laboratoare:transf_fer_poarta1.png?600 |}} | ||
| - | ==== Definitia matematica: ==== | + | ==== Définition mathématique ==== |
| {{ :egc:laboratoare:transf_fer_poarta2.png?550 |}} | {{ :egc:laboratoare:transf_fer_poarta2.png?550 |}} | ||
| Line 203: | Line 205: | ||
| - | Transformarea este definita prin 2 dreptunghiuri, in cele doua sisteme de coordonate, numite fereastra sau spatiul logic si poarta, sau spatiul de afisare. De aici numele de transformarea fereastra-poarta sau transformarea de vizualizare 2D. | + | La transformation est définie par deux rectangles, dans les deux systèmes de coordonnées, appelée fenêtre (de visualisation) et porte (d’affichage). |
| - | F: un punct din fereastra | + | F: un point dans la fenêtre |
| - | P: punctul in care se transforma F prin transformarea de vizualizare | + | P: le point qui F devient par appliquer le transformation de visualisation |
| - | Pozitia relativa a lui P in poarta de afisare trebuie sa fie aceeasi cu pozitia relativa a lui F in fereastra. | + | La position relative de P dans l’affichage de droite doit être la même position relative de F dans la fenêtre. |
| $$ sx = \frac{xpmax - xpmin}{xfmax - xfmin} $$ | $$ sx = \frac{xpmax - xpmin}{xfmax - xfmin} $$ | ||
| Line 215: | Line 217: | ||
| $$ sy = \frac{ypmax - ypmin}{yfmax - yfmin} $$ | $$ sy = \frac{ypmax - ypmin}{yfmax - yfmin} $$ | ||
| - | * sx, sy depind de dimensiunile celor doua ferestre | + | * sx, sy dépend de la taille des deux fenêtres |
| - | * tx, ty depind de pozitiile celor doua ferestre fata de originea sistemului de coordonate in care sunt definite. | + | * tx, ty dépendent des positions des deux fenêtres de l'original système de coordonnées sont définies. |
| $$ tx = xpmin - sx * xfmin $$ | $$ tx = xpmin - sx * xfmin $$ | ||
| $$ ty = ypmin - sy * yfmin $$ | $$ ty = ypmin - sy * yfmin $$ | ||
| - | In final, transformarea fereastra poarta are urmatoarele ecuatii: | + | Enfin, la transformation fenêtre-porte a les équations suivantes: |
| $$ xp = xf * sx + tx $$ | $$ xp = xf * sx + tx $$ | ||
| $$ yp = yf * sy + ty $$ | $$ yp = yf * sy + ty $$ | ||
| - | Consideram o aceeasi orientare a axelor celor doua sisteme de coordonate. Daca acestea au orientari diferite (ca in prima imagine), trebuie aplicata o transformare suplimentara de corectie a coordonatei y. | + | Nous considérons un même orientation des axes de les deux systèmes de coordonnées. Si elles ont des orientations différentes (comme dans la première image), une correction supplémentaire de la correction de la coordonnée y doit être appliquée. |
| - | ==== Efectele transformarii ==== | + | ==== Les effets de la transformation ==== |
| - | * marire/micsorare, in functie de dimensiunile ferestrei si ale portii | + | * Augmentation / diminution en fonction de la taille de la fenêtre et la porte |
| - | * deformare daca fereastra si poarta nu sunt dreptunghiuri asemenea | + | * Déformation: si la fenêtre et la porte ne sont pas des rectangles semblables |
| - | * pentru scalare uniforma, $s=min(sx,sy)$, afisarea centrata in poarta presupune o translatie suplimentara pe axa Ox sau pe axa Oy: | + | * Mise à l'échelle uniforme, $s=min(sx,sy)$, l'affichage centrée dans la porte: translation additionnel sur l'axe Ox ou Oy: |
| $$Tsx = (xpmax - xpmin - s*(xfmax - xfmin)) / 2$$ | $$Tsx = (xpmax - xpmin - s*(xfmax - xfmin)) / 2$$ | ||
| $$Tsy = (ypmax - ypmin - s*(yfmax - yfmin)) / 2$$ | $$Tsy = (ypmax - ypmin - s*(yfmax - yfmin)) / 2$$ | ||
| - | * decuparea primitivelor aflate in afara ferestrei vizuale | + | * Couper les primitives positionées à l'extérieur de la fenetre de visualization |
| - | ==== Matricea transformarii fereastra-poarta ==== | + | |
| - | De retinut este ca transformarea fereastra poarta presupune o scalare si o translatie. Ea are urmatoarea expresie, cu formulele de calcul pentru sx, sy, tx, ty prezentate anterior: | + | ==== Matrice de transformation fenêtre-porte ==== |
| + | |||
| + | Notez que la transformation de la fenêtre de porte implique la mise à l'échelle et la translation. Il a l'expression suivante, avec les formules de calcul pour sx, sy, tx, celles présentées précédemment: | ||
| $$ | $$ | ||
| Line 261: | Line 264: | ||
| <note> | <note> | ||
| - | Transformarea de vizualizare este deja implementata in clasa ''Laborator3_Vis2D'': | + | La transformation de vue est déjà implémentée dans la classe ''Laborator3_Vis2D'': |
| <code cpp> | <code cpp> | ||
| Line 282: | Line 285: | ||
| <note> | <note> | ||
| - | In cadrul laboratorului, in clasa ''Laborator3_Vis2D'', este creat un patrat, in spatiul logic (0,0) - (4,4). De retinut este faptul ca acum nu mai trebuie sa raportam coordonatele patratului la spatiul de vizualizare (cum se intampla in exercitiile anterioare), ci la spatiul logic pe care l-am definit noi. | + | Dans le laboratoire, dans la classe ''Laborator3_Vis2D'', un carré est créé dans l'espace logique (0,0) - (4,4). Notez que nous ne devons plus rapporter les coordonnées du carré à l'espace d'observation (comme dans les exercices précédents), mais à l'espace logique que nous avons défini. |
| <code cpp> | <code cpp> | ||
| Line 297: | Line 300: | ||
| </code> | </code> | ||
| - | + | Dans la fonction ''Update ()'', vous tracez cinq fois le même carré précédemment créé: quatre carrés aux quatre coins et un carré au milieu de l'espace logique. Définit 2 fenêtres contenant les mêmes objets. La première fenêtre est définie dans la moitié gauche de la fenêtre d’affichage et la seconde dans la moitié droite. Par défaut, la fenêtre Passerelle par défaut de la deuxième fenêtre, la fenêtre uniforme, est utilisée par défaut. Notez que dans la deuxième fenêtre, les carrés restent toujours des carrés, alors que dans la première fenêtre, ils sont vus comme des rectangles (c'est-à-dire qu'ils sont déformés) si l'espace logique et l'espace d'affichage ne sont pas représentés par de tels rectangles. | |
| - | In functia ''Update()'' se deseneaza acelasi patrat creat anterior, de 5 ori: patru patrate in cele patru colturi si un patrat in mijlocul spatiului logic. Se definesc 2 viewport-uri, ambele continand aceleasi obiecte. Primul viewport este definit in jumatatea din stanga a ferestrei de afisare, iar al doilea, in jumatatea din dreapta. Pentru primul viewport se defineste transformarea fereastra poarta default si pentru al doilea viewport, cea uniforma. Observati ca in al doilea viewport patratele raman intotdeauna patrate, pe cand in primul viewport se vad ca dreptunghiuri (adica sunt deformate), daca spatiul logic si spatiul de vizualizare nu sunt reprezentate prin dreptunghiuri asemenea. | + | |
| </note> | </note> | ||
| - | ==== Utilizare ==== | + | ==== Utilisation ==== |
| + | Où pouvez-vous utiliser cette fenêtre-porte de transformation? Par exemple, dans un jeu de course en 2D, il est souhaitable, en bas à droite de l'écran, de visualiser votre propre voiture sur une mini-carte. Ceci est fait en dessinant la scène deux fois. | ||
| - | Unde se poate folosi aceasta transformare fereastra poarta? De exemplu, intr-un joc 2D cu masini de curse, se doreste in dreapta-jos a ecranului vizualizarea masinii proprii, intr-un minimap. Acest lucru se face prin desenarea scenei de doua ori. | + | Par exemple, si la scène entière (le chemin et toutes les voitures) est pensée dans l’espace logique (-10, -10) - (10,10) (qui a la taille de 20x20) et que l’espace d’affichage est (0,0) - (1280, 720 ), la première scène est la scène entière avec les paramètres de la fonction fenêtre-porte mentionnés ci-dessus: |
| - | + | ||
| - | Daca de exemplu toata scena (traseul si toate masinile) este gandita in spatiul logic (-10,-10) - (10,10) (care are dimensiunea 20x20) si spatiul de afisare este (0,0) - (1280, 720), prima data se deseneaza toata scena cu parametrii functiei fereastra-poarta anterior mentionati: | + | |
| <code cpp> | <code cpp> | ||
| Line 316: | Line 317: | ||
| </code> | </code> | ||
| - | Daca la un moment dat masina proprie este in spatiul (2,2) - (5,5), adica de dimensiune 3x3 si vreau sa creez un minimap in coltul din dreapta jos al ecranului de rezolutie 280x220, pot desena din nou aceeasi scena, dar cu urmatoarea transformare fereastra-poarta: | + | Si, à un moment donné, votre voiture est dans l’espace (2,2) - (5,5), c’est-à-dire 3x3 et que je souhaite créer une mini-carte dans le coin inférieur droit de l’écran de résolution 280x220, je peux à nouveau dessiner la même scène, mais avec la transformation fenêtre-porte suivante: |
| <code cpp> | <code cpp> | ||
| Line 324: | Line 325: | ||
| </code> | </code> | ||
| - | ===== Laboratorul 3 ===== | + | ===== Laboratoire 3 ===== |
| - | ==== Descriere laborator ==== | + | ==== Description du laboratoire ==== |
| <note tip> | <note tip> | ||
| - | In cadrul acestui laborator aveti de programat in doua clase: | + | Dans ce laboratoire, vous devez être programmé dans deux classes: |
| - | * ''Laborator3.cpp'', pentru familiarizarea cu transformarile 2D de translatie, rotatie si scalare | + | * ''Laborator3.cpp'', pour familiariser avec les transformations de traduction, de rotation et de redimensionnement 2D |
| - | * ''Laborator3_Vis2D.cpp'', pentru familiarizarea cu transformarea fereastra-poarta | + | * ''Laborator3_Vis2D.cpp'', pour familiariser avec la transformation de la fenêtre de la porte |
| - | Din clasa ''Main'' puteti sa alegeti ce laborator rulati: | + | |
| + | Dans la classe ''Main'', vous pouvez choisir le laboratoire que vous utilisez: | ||
| <code cpp> | <code cpp> | ||
| Line 337: | Line 339: | ||
| </code> | </code> | ||
| - | sau | + | ou |
| <code cpp> | <code cpp> | ||
| Line 345: | Line 347: | ||
| <note> | <note> | ||
| - | OpenGL este un API 3D. Desenarea obiectelor 2D si aplicarea transformarilor 2D sunt simulate prin faptul ca facem abstractie de coordonata z. | + | OpenGL est une API 3D. Le dessin d'objets 2D et l'application de transformations 2D sont simulés en effectuant l'abstraction des coordonnées z. |
| - | Transformarea fereastra-poarta este si ea simulata pentru acest framework, dar veti invata pe parcurs ca ea este de fapt inclusa in lantul de | + | La transformation fenêtre-porte est également simulée pour ce cadre, mais vous apprendrez en cours de route qu’elle est en fait incluse dans la |
| - | transformari OpenGL si ca nu trebuie definita explicit. | + | OpenGL et qu’elle ne devrait pas être explicitement définie. |
| </note> | </note> | ||
| - | ==== Cerinte laborator ==== | + | ==== Exercices ==== |
| - | - Descarcati [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|framework-ul de laborator]] | + | - Télécharger [[https://github.com/UPB-Graphics/Framework-EGC/archive/master.zip|le framework de laboratoire]] |
| - | - Completati functiile de translatie, rotatie, scalare din ''/Laborator3/Transform2D.h'' | + | - Complétez le translation, la rotation et la mise à l'échelle à partir du ''/Laborator3/Transform2D.h'' |
| - | - Sa modifice pasii de translatie si rotatie si scalare pentru cele trei patrate ca sa creeze animatie. | + | - Modifier les étapes de translation, de rotation et de mise à l'échelle des trois carrés pour créer une animation. |
| - | - Cu tastele W, A, S, D sa se translateze fereastra logica ''Laborator3_Vis2D''. Cu tastele Z si X sa se faca zoom in si zoom out pe fereastra logica. | + | - Utilisez les touches W, A, S, D pour traduire la fenêtre logique ''Laborator3_Vis2D''. Utilisez les touches Z et X pour effectuer un zoom avant ou arrière sur la fenêtre logique. |
| <hidden> | <hidden> | ||
| ---- | ---- | ||
