Differences
This shows you the differences between two versions of the page.
|
egc:laboratoare:fr:03 [2018/10/23 10:43] 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 187: | 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> | ||
| Line 241: | Line 241: | ||
| * Couper les primitives positionées à l'extérieur de la fenetre de visualization | * Couper les primitives positionées à l'extérieur de la fenetre de visualization | ||
| - | ==== Matricea transformarii fereastra-poarta ==== | + | ==== Matrice de transformation fenêtre-porte ==== |
| - | 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: | + | 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 264: | 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 285: | 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 300: | 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 319: | 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 327: | 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 340: | Line 339: | ||
| </code> | </code> | ||
| - | sau | + | ou |
| <code cpp> | <code cpp> | ||
| Line 348: | 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> | ||
| ---- | ---- | ||
