Differences
This shows you the differences between two versions of the page.
|
ppbg:laboratoare:01 [2024/09/24 17:44] andrei.lambru |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Laboratorul 01 ====== | ||
| - | |||
| - | <note tip> | ||
| - | Bun venit la prima activitate practică a acestei materii. În fiecare săptămână, până la finalul semestrului, vom folosi un framework adaptat special pentru aceste activități practice. Framwork-ul este scris în limbajul C++ și folosește API-ul grafic OpenGL. Primul pas al acestui laborator este să realizați [[ ppbg:setup-framework | setup-ul framework-ului ]]. | ||
| - | </note> | ||
| - | |||
| - | ===== Elemene de geometrie ===== | ||
| - | |||
| - | ==== Vectorul ==== | ||
| - | |||
| - | //**Vectorul** reprezinta un instrument matematic ce descrie deplasamentul unui punct de la o pozitie initiala la o pozitie finala.// | ||
| - | |||
| - | Un astfel de exemplu se poate vedea in imaginea de mai jos, unde vectorul $\vec{V_{12}}$ descrie deplasamentul de la pozitia la care se afla punctul $P_1$ la pozitia la care se afla punctul $P_2$ . Se poate observa faptul ca simbolul grafic ce descrie un element de tip vector reprezinta numele elementului, acompaniat de o sageata ce este pozitionata deasupra lui. | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector.png?350 |}} | ||
| - | |||
| - | <note> | ||
| - | Termenul de //vector// provine din limba latina si se traduce in limba romana prin "transportator". Intelegerea aceasta are aplicabilitati in domeniul medical, unde se utilizeaza structura "vector de propagare". Vizual, aplicarea conceptului de vector in domeniul matematic se poate asocia cu procesul de "transportare" a unui element de la o pozitie la o alta pozitie in spatiu. | ||
| - | </note> | ||
| - | |||
| - | Un vector are asociate urmatoarele 2 proprietati: | ||
| - | * Magnitudine, respectiv lungimea distantei vectorului; | ||
| - | * Directie; acest concept se va elabora in laboratorul 3. | ||
| - | |||
| - | {{ :ppbg:laboratoare:magnitude.png?350 |}} | ||
| - | |||
| - | Un vector se defineste printr-o multime ordonata de n elemente, pe baza numarului de dimensiuni ale spatiului in care este construit. Pentru vectorul din imaginea de mai sus, descrierea este in felul urmator: | ||
| - | |||
| - | $$ | ||
| - | \vec{V_{12}} = \begin{bmatrix} 4 & 3 \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | Analog, pentru un vector in spatiul $\mathbb{R}^3$ , el poate fi definit dupa cum urmeaza: | ||
| - | |||
| - | $$ | ||
| - | \vec{V_{\mathbb{R}^3}} = \begin{bmatrix} 4 & 3 & 1 \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | |||
| - | In situatia in care consideram conceptul de vector in alt context decat cel de descriere a unui deplasament intre doua puncte, el se descrie vizual printr-o sageata trasata din originea axelor de coordonate, la pozitia definita de multimea ordonata de n elemente. Pentru aceasta reprezentare vizuala, consideram faptul ca plasam coada sagetii in originea axelor si capul in pozitia descrisa de multimea ordonata. Pentru vectorul de mai sus, reprezentarea vizuala este descrisa in imaginea de mai jos. | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector-4.png?350 |}} | ||
| - | |||
| - | <note important> | ||
| - | Toata discutia din acest laborator, impreuna cu imaginile demonstrative si aplicatiile, se rezuma la utilizarea conceptului de vector in spatiul $\mathbb{R}^2$. Cu toate acestea, este important de mentionat faptul ca toate conceptele prezentate sunt valabile si pentru spatiul $\mathbb{R}^3$ si pentru orice alt spatiu $\mathbb{R}^n$. Diferenta dintre utilizarea unui vector in spatiul $\mathbb{R}^2$ fata de un spatiu $\mathbb{R}^n$ este data de faptul ca formula comuna pentru primele 2 componente ale unui vector din spatiul $\mathbb{R}^2$ se aplica pentru restul de n-2 a spatiului $\mathbb{R}^n$. | ||
| - | </note> | ||
| - | |||
| - | === Definirea prin diferenta a 2 puncte === | ||
| - | |||
| - | Un **punct** reprezinta un instrument matematic ce este definit doar printr-o pozitie. Vizual, putem considera ca este o forma geometrica ce este descrisa doar printr-o pozitie si are dimensiunea 0. In practica, punctul este utilizat pentru a descrie pozitii in spatiu. | ||
| - | |||
| - | Situatia face ca un punct se defineste la fel precum un vector, printr-o multime ordonata de n elemente, pe baza numarului de dimensiuni ale spatiului in care este descris punctul. Este important de considerat in momentul in care se lucreaza cu puncte si vectori care este interpretarea fiecarui element. Altfel spus, este important sa stim ce element este punct si ce element este vector. In toate formulele din acest laborator, se poate observa ca vectorii sunt marcati corespunzator prin simbolul matematic specific. | ||
| - | |||
| - | $$ | ||
| - | \vec{V_{12}} = P_2-P_1 = \begin{bmatrix} x_{P_2} - x_{P_1} & y_{P_2}-y_{P_1} \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | Analog, vectorul in directie opusa, vizibil in imaginea de mai jos, se obtine dupa urmatoarea formula: | ||
| - | |||
| - | $$ | ||
| - | \vec{V_{21}} = P_1-P_2 = \begin{bmatrix} x_{P_1} - x_{P_2} & y_{P_1}-y_{P_2} \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector-2.png?350 |}} | ||
| - | |||
| - | <note tip> | ||
| - | In situatia in care doriti se obtineti vectorul de deplasare de la punctul $P_1$ la punctul $P_2$ , in directia spre $P_2$ , se calculeaza vectorul de diferenta $\vec{V_{12}}=P_2-P_1$ . Cu alte cuvinte, punctul spre care doriti sa obtineti vectorul rezultant este cel din care scadeti punctul de la care pleaca vectorul. | ||
| - | </note> | ||
| - | |||
| - | === Adunarea unui punct cu un vector === | ||
| - | |||
| - | Analog operatiei descrise mai sus, putem considera operatia inversa, in care adunam un punct cu un vector. Rezolutatul se poate observa in imaginea de mai jos si se poate descrie cu urmatoarea formula: | ||
| - | |||
| - | $$ | ||
| - | P_{res} = P + \vec{V} = (x_{P}+x_{\vec{V}}, y_{P}+y_{\vec{V}}) | ||
| - | $$ | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector-3.png?350 |}} | ||
| - | |||
| - | Se poate observa si din formula faptul ca in urma adunarii unui punct cu un vector, se obtine un punct. Este important de mentionat faptul ca interpretarea ce ofera cele mai multe aplicabilitati este cea in care rezultatul este un punct. Schimbarea interpretarii rezultatului descrie procesul de compunere a 2 vectori, prezentat mai jos, dar aceasta schimbare nu este consistenta matematic, deoarece interpretarea unuia dintre elementele adunarii este un punct. | ||
| - | |||
| - | O observatie importanta este faptul ca operatia de adunare a unui punct cu un vector este comutativa. Prin interschimbarea interpretarii celor doua elemente din adunare, se obtine un punct cu aceleasi coordonate. | ||
| - | |||
| - | === Compunerea a 2 vectori === | ||
| - | |||
| - | Procesul de compunere a 2 vectori produce un alt vector, conform formulei de mai jos: | ||
| - | |||
| - | $$ | ||
| - | \vec{V_{res}} = \vec{V_1} + \vec{V_2} = \begin{bmatrix} x_{\vec{V_1}} + x_{\vec{V_2}} & y_{\vec{V_1}}+y_{\vec{V_2}} \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | Compunerea se poate reprezenta grafic prin plasarea coditei sagetii celui de-al doilea vector in capatul sagetii primului vector. Prin trasarea unei sageti de la coada primului vector la capatul celui de-al doilea vector. Vectorul rezultant se afla pe directia bisectoarei unghiului dintre cei doi vectori. Acest proces se poate observa in imaginea de mai jos. | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector-5.png?750 |}} | ||
| - | |||
| - | <note tip> | ||
| - | Procesul de compunere de vectori are aplicabilitate in geometrie prin faptul ca se descrie o operatie cu care se pot prelucra vectori. Un exemplu de aplicabilitate este compunerea a doua directii, una data de cea de deplasare a unui obiect si o alta data de directia de acceleratie a lui, ce este diferite de cea de deplasare. Prin procesul de compunere a celor doua directii, se obtine directia la un cadru ulterior. | ||
| - | </note> | ||
| - | |||
| - | === Vectorul unitate === | ||
| - | |||
| - | //Un **vector unitate** este un vector ce are lungimea 1.// | ||
| - | |||
| - | Un astfel de vector are aplicabilitati in programarea jocurilor video pentru realizarea animatiilor continue si in grafica pe calculator pentru simularea efectului de iluminare. Majoritatea situatiilor de utilizare necesita obtinerea unui vector unitate $\vec{V_u}$ ce are aceeasi directie cu un alt vector $\vec{V}$ dat. Pentru a obtine acest vector $\vec{V_u}$ , se poate folosi formula de mai jos. | ||
| - | |||
| - | $$ | ||
| - | \vec{V_u} = \frac{\vec{V}}{\lVert \vec{V} \rVert} = \begin{bmatrix} \frac{x_{\vec{V}}}{\lVert \vec{V} \rVert} & \frac{y_{\vec{V}}}{\lVert \vec{V} \rVert} \end{bmatrix} | ||
| - | $$ | ||
| - | |||
| - | unde $\lVert \vec{V} \rVert$ este norma sau lungimea vectorului $\vec{V}$ , ce se calculeaza dupa urmatoarea formula: | ||
| - | |||
| - | |||
| - | $$ | ||
| - | \lVert \vec{V} \rVert = \sqrt{{x_{\vec{V}}}^2+{y_{\vec{V}}}^2} | ||
| - | $$ | ||
| - | |||
| - | Obtinerea vectorului $\vec{V_u}$ poarta denumirea de **normalizare** a vectorului $\vec{V}$ , deoarece se imparte fiecare componenta la norma sa :) . | ||
| - | |||
| - | === Produsul scalar a doi vectori === | ||
| - | |||
| - | Aceasta operatie produce la finalul ei un scalar. Definitia algebrica a acestui produs este urmatoarea: | ||
| - | |||
| - | $$ | ||
| - | \vec{V_1}\cdot\vec{V_2} = x_{\vec{V_1}}x_{\vec{V_2}} + y_{\vec{V_1}}y_{\vec{V_2}} | ||
| - | $$ | ||
| - | |||
| - | O interpretare importanta a produsului scalar este in context geometric. Formula de mai sus este echivalenta cu urmatoarea: | ||
| - | |||
| - | |||
| - | $$ | ||
| - | \vec{V_1}\cdot\vec{V_2} = \lVert \vec{V_1} \rVert \lVert \vec{V_2} \rVert \cos{\theta} | ||
| - | $$ | ||
| - | |||
| - | unde $\theta$ este unghiul dintre cei doi vectori, conform imaginii de mai jos. | ||
| - | |||
| - | {{ :ppbg:laboratoare:vector-6.png?350 |}} | ||
| - | |||
| - | <note> | ||
| - | Este important de observat faptul ca in urma constructiei a doi vectori, se pot forma 2 unghiuri intre cei doi: | ||
| - | * $\theta_1<=180^\circ$ ; | ||
| - | * $\theta_2=360^\circ-\theta_1>=180^\circ$ . | ||
| - | |||
| - | Datorita constructiei funcției trigonometrice cosinus, $\cos\theta_1=\cos\theta_2$ . | ||
| - | </note> | ||
| - | |||
| - | <hidden> | ||
| - | === ?Produsul vectorial a doi vectori - Concept 3D === | ||
| - | </hidden> | ||
| - | |||
| - | <note tip> | ||
| - | Pentru bibliografie suplimentara in legatura cu conceptul de vector, aplicat explicit in contextul graficii pe calculator, puteti accesa urmatorul articol: | ||
| - | * Goldman, Ronald. (2002). On the algebraic and geometric foundations of computer graphics. ACM Trans. Graph.. 21. 52-86. 10.1145/504789.504792. | ||
| - | </note> | ||
| - | |||
| - | |||
| - | ==== Triunghiul ==== | ||
| - | |||
| - | //**Triunghiul** este un poligon cu 3 colturi si 3 muchii.// | ||
| - | |||
| - | === Aria unui triunghi oarecare === | ||
| - | |||
| - | Pentru calcularea ariei unui triunghi oarecare, se poate folosi formula lui Heron, ce utilizeaza semiperimetrul triunghiului: | ||
| - | |||
| - | $$ | ||
| - | |||
| - | |||
| - | A_{\Delta P_1 P_2 P_3} = \sqrt{s \cdot (s-a) \cdot (s-b) \cdot (s-c)} \\ | ||
| - | s = \frac{1}{2} \cdot (a+b+c) \\ | ||
| - | |||
| - | a=\lVert P_1-P_2 \rVert \\ | ||
| - | b=\lVert P_1-P_3 \rVert \\ | ||
| - | c=\lVert P_2-P_3 \rVert \\ | ||
| - | $$ | ||
| - | |||
| - | unde $P_1$ , $P_2$ si $P_3$ sunt punctele de la colturile triunghiului, conform imaginii de mai jos. | ||
| - | |||
| - | {{ :ppbg:laboratoare:triangle.png?350 |}} | ||
| - | |||
| - | |||
| - | === Punct în interiorul unui triunghi === | ||
| - | |||
| - | Pentru a verifica dacă un punct se află în interiorul unui triunghi, se pot folosi ariile triunghiului și cele ale triunghiurilor formate de punct cu perechi de vârfuri din triunghi. În imaginea de mai jos se pot vedea aceste suprafețe. | ||
| - | |||
| - | Astfel, în situația în care suma ariilor triunghiurilor interioare este egală cu aria triunghiului, punctul se află în interior. | ||
| - | |||
| - | |||
| - | $$ | ||
| - | A_{\Delta P_1 P_2 P_3} = A_{\Delta P P_1 P_3} + A_{\Delta P P_1 P_2} + A_{\Delta P P_2 P_3} | ||
| - | $$ | ||
| - | |||
| - | |||
| - | unde $P$ este punctul pentru care se verifica faptul ca se afla in triunghi. Un exemplu de configuratie pentru $P$ se poate vedea in imaginea de mai jos. | ||
| - | |||
| - | {{ :ppbg:laboratoare:point-triangle.png?350 |}} | ||
| - | |||
| - | ===== Laborator ===== | ||
| - | |||
| - | |||
| - | ==== Biblioteca glm ==== | ||
| - | |||
| - | În framework-ul de laborator, se utilizeaza biblioteca [[ https://glm.g-truc.net/0.9.9/ | glm ]], ce pune la dispozitie structuri de date pentru puncte si vectori si operatii specifice de lucru cu aceste elemente. | ||
| - | |||
| - | Definirea unui obiect de tip vector in spatiul $\mathbb{R}^2$ se realizeaza dupa cum urmeaza: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 v = glm::vec2(4.0f, 3.0f); | ||
| - | </code> | ||
| - | |||
| - | Accesarea componentelor individuale ale unui vector se realizeaza: | ||
| - | |||
| - | <code cpp> | ||
| - | float x = position.x; | ||
| - | float y = position.y; | ||
| - | </code> | ||
| - | |||
| - | Obtinerea unui vector prin diferenta a doua puncte: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 p1 = glm::vec2(2, 2); | ||
| - | glm::vec2 p2 = glm::vec2(6, 5); | ||
| - | |||
| - | glm::vec2 v12 = p2 - p1; | ||
| - | </code> | ||
| - | |||
| - | Compunerea a 2 vectori: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 v1 = glm::vec2(3.0f, 1.0f); | ||
| - | glm::vec2 v2 = glm::vec2(2.0f, 3.0f); | ||
| - | |||
| - | glm::vec2 v_res = v1 + v2; | ||
| - | </code> | ||
| - | |||
| - | Obtinerea magnitudinii unui vector: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 v = glm::vec2(4.0f, 3.0f); | ||
| - | |||
| - | float magnitude = glm::length(v); | ||
| - | </code> | ||
| - | |||
| - | Obtinerea unui vector unitate pe directia unui alt vector dat: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 v = glm::vec2(4.0f, 3.0f); | ||
| - | |||
| - | glm::vec2 vu = glm::normalize(v); | ||
| - | </code> | ||
| - | |||
| - | Produsul scalar a doi vectori: | ||
| - | |||
| - | <code cpp> | ||
| - | glm::vec2 v1 = glm::vec2(2, 2); | ||
| - | glm::vec2 v2 = glm::vec2(6, 5); | ||
| - | |||
| - | float res = glm::dot(v1, v2); | ||
| - | </code> | ||
| - | |||
| - | ==== Descrierea culorilor ==== | ||
| - | |||
| - | TBA | ||
| - | |||
| - | ==== Metode utilitare ==== | ||
| - | |||
| - | In cadrul acestui laborator, sunt oferite metode specifice pentru desenarea mai multor tipuri de primitive grafice. Semnaturile acestor metode sunt scrise mai jos. Consultati fisierul ''primitives_rendering_scene.h'' pentru o descriere mai detaliata a fiecarui parametru al metodelor. | ||
| - | |||
| - | <code cpp> | ||
| - | void RenderVector(const glm::vec2 &v, const glm::vec3 &color, const std::string& label = std::string (), const glm::vec2 &p = glm::vec2(0.0f)); | ||
| - | void RenderPoint(const glm::vec2 &p, const glm::vec3 &color, const std::string &label = std::string()); | ||
| - | void RenderArc(float start_angle, float angle, const glm::vec3 &color, float radius = 3.0f, const glm::vec2 ¢er = glm::vec2(0.0f)); | ||
| - | void RenderTriangle(const glm::vec2 &p1, const glm::vec2 &p2, const glm::vec2 &p3, const glm::vec3 &color); | ||
| - | void RenderText(const glm::vec2 &p, const std::string &text, float size, const glm::vec3 &color); | ||
| - | </code> | ||
| - | |||
| - | ==== Cerințe laborator ==== | ||
| - | |||
| - | <note tip> | ||
| - | In cadrul acestui laborator, veti avea de rezolvat 6 cerinte distincte. Pentru a schimba intre panourile specifice cerintelor, apasati tastele **1**, **2**, **3**, **4**, **5** si **6** de la tastatura. | ||
| - | </note> | ||
| - | |||
| - | Completați fisierul ''lab01.cpp'' cu următoarele: | ||
| - | - 0.05p - Completati metoda ''Exercise1()'' astfel: | ||
| - | - Desenati vectorui rezultant in urma compunerii vectorilor $\vec{V_1}$ si $\vec{V_2}$ . | ||
| - | - Desenati vectorul $\vec{V_2}$ in continuarea lui $\vec{V_1}$ si vectorul $\vec{V_1}$ in continuarea lui $\vec{V_2}$ , conform procesului de compunere a doi vectori, descris mai sus. \\ Utilizati metoda ''RenderVector(...)'' pentru desenarea unui vector. Dupa rezolvarea acestei cerinte, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-1.png?600 |}} | ||
| - | - 0.05p - Completati metoda ''Exercise2()'' pentru desenarea urmatorilor vectori rezultanti in urma diferentei dintre doua puncte: $\{\vec{V_{21}}, \vec{V_{43}}, \vec{V_{56}}, \vec{V_{87}}\}$ . \\ Dupa rezolvarea acestei cerinte, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-2.png?600 |}} | ||
| - | - 0.05p - Completati metoda ''Exercise3()'' astfel: | ||
| - | - Desenati vectorii unitate aflati pe directia celor 5 vectori prezenti in cadrul cerintei. | ||
| - | - Nu utilizati etichete pentru desenarea vectorilor unitate. \\ Dupa rezolvare, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-3.png?600 |}} | ||
| - | - 0.05p - Completati metoda ''Exercise4()'' pentru desenarea arcului de cerc dintre cei doi vectori. \\ Utilizati metoda ''RenderArc(...)'' pentru desenarea arcului de cerc, impreuna cu produsul scalar si ''acos(radians)'' pentru calcularea unghiului dintre cei 2 vectori. Dupa rezolvarea acestei cerinte, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-4.png?600 |}} | ||
| - | - 0.05p - Completati metoda ''Exercise5()'' pentru desenarea valorii ariei fiecaruia dintre cele 3 triunghiuri. Textul trebuie afisat la pozitia centrului de greutate al fiecarui triunghi. \\ Utilizati formula lui Heron pentru calcularea ariei. Folositi metoda ''RenderText(...)'' pentru desenarea valorii ariei. Dupa rezolvarea acestei cerinte, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-5.png?600 |}} | ||
| - | - 0.05p - Completati metoda ''Exercise6()'' pentru desenarea punctelor din lista dupa urmatoarea regula: | ||
| - | - Punctele ce se afla in interiorul triunghiului se deseneaza in culoarea verde; | ||
| - | - Punctele ce se afla in afara triunghiului se deseneaza in culoarea rosie. \\ Deoarece ariile sunt calculate cu tipuri de date în virgulă mobilă, nu se poate folosi direct comparația de egalitate și trebuie să ne asumăm un anumit nivel de eroare în calcule. Astfel, în cod, comparația va fi în felul următor: <code cpp> | ||
| - | const float EPSILON = 0.01f; | ||
| - | |||
| - | bool inside_triangle = abs(area_v1v2v3 - (area_pv1v3 + area_pv1v2 + area_pv2v3)) < EPSILON; | ||
| - | </code> \\ Dupa rezolvarea acestei cerinte, ar trebui sa obtineti rezultatul urmator: {{ :ppbg:laboratoare:vectors-task-6.png?600 |}} | ||
| - | |||
| - | <hidden> | ||
| - | Bonus: | ||
| - | - In cadrul exercitiului 4, desenati cu o culoare diferita arcul de cerc pentru unghiul mare dintre cei doi vectori. | ||
| - | </hidden> | ||
| - | |||
