Számítógépes Grafika 6. gyakorlat

1. SzámítógépesGrafika6. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév

2. Információk • Gyakorlati diák: http://people.inf.elte.hu/valasek/bevgraf_esti/ • E-mail: valasek@inf.elte.hu

3. Utasítások • size(w, h, m)‏ • Az m a módot határozza meg: • JAVA2D: az alap renderelő, pontos és lassú • P2D: Processing saját gyors, de rosszabb minőségű renderelője • P3D: saját 3D-s renderelő, szintén gyors de pontatlan • OgenGL • PDF: negyedik paraméterben output fájl neve • A maximális szélesség és magasság az OS által korlátozott

4. OpenGL • Nem elég a size-ban harmadik paraméternek megadni • Importálni kell az OGL-t: import processing.opengl.*;

5. Képi koordinátarendszer

6. Processing 3D

7. OpenGL • Az OpenGL jobbsodrású koordinátarendszert használ • De nem kell ezzel foglalkozni Processing-ből akkor sem, ha az OpenGL renderer-t használjuk

8. Transzformációk • translate(x, y, z) • rotateX(a), rotateY(a), rotateZ(a): • „a” radiánnyi elforgatás adott tengely közül, ha „a”>0 akkor óra járásával ellentétes irányban • PI: beépített konstans • radians(angle): angle-t szögben értelmezve átváltja radiánba • degrees(rad): radiánból szögbe váltás • scale(size), scale(x, y), scale(x, y, z): • Léptékezés

9. Transzformációk • rotateX

10. Transzformációk • rotateY

11. Transzformációk • rotateZ

12. Transzformációk • applyMatrix( n00, n01, n02, n03 n04, n05, n06, n07 n08, n09, n10, n11 n12, n13, n14, n15): • Tetszőleges affin transzformáció

13. Transzformációk • A fenti transzformációk a koordinátarendszert transzformálják • Egy transzformáció után következő újabb transzformáció már az új koordinátarendszert módosítja!

14. Transzformációk

15. 1. Feladat • Forgassuk a középpont körül ezt a téglalapot, a meglévő kódot nem módosítva már! void setup() { size(200, 200, P3D); } void draw() { background(140); rect(0, 0, 20, 40); }

16. Transzformációk

17. Transzformációk T1 T2 ... Tn p

18. Transzformációk T1 T2 = T1*T2*...*Tn*p ... Tn p

19. Transzformációk • pushMatrix(): • Elmenti az aktuális koordinátarendszert • popMatrix(): • A legutoljára elmentett koordinátarendszert hívja vissza

20. Példa fill(0); rect(0, 0, 50, 50); pushMatrix(); translate(20, 20); fill(128); rect(0, 0, 50, 50); translate(10, 10); fill(255); rect(0, 0, 50, 50); popMatrix(); translate(10, 10); fill(170); rect(0, 0, 50, 50);

21. Példa fill(0); rect(0, 0, 50, 50); pushMatrix(); translate(20, 20); fill(128); rect(0, 0, 50, 50); translate(10, 10); fill(255); rect(0, 0, 50, 50); popMatrix(); translate(10, 10); fill(170); rect(0, 0, 50, 50);

22. Példa fill(0); rect(0, 0, 50, 50); pushMatrix(); translate(20, 20); fill(128); rect(0, 0, 50, 50); translate(10, 10); fill(255); rect(0, 0, 50, 50); popMatrix(); translate(10, 10); fill(170); rect(0, 0, 50, 50);

23. Példa fill(0); rect(0, 0, 50, 50); pushMatrix(); translate(20, 20); fill(128); rect(0, 0, 50, 50); translate(10, 10); fill(255); rect(0, 0, 50, 50); popMatrix(); translate(10, 10); fill(170); rect(0, 0, 50, 50);

24. Példa fill(0); rect(0, 0, 50, 50); pushMatrix(); translate(20, 20); fill(128); rect(0, 0, 50, 50); translate(10, 10); fill(255); rect(0, 0, 50, 50); popMatrix(); fill(170); rect(10, 10, 50, 50);

25. Transzformációk • Először közös koordinátarendszerbe helyezzük a színtér alkotóelemeit - ez a világ transzformáció • Utána az aktuális nézőpontunknak megfelelően tovább transzformálódik a színtér - ez a nézet transzformáció • Végül pedig létrejön a 3D-s színterünk 2D-s vetülete - ez a vetítési transzformáció

29. Kamera Z center up eye Y X

30. Kamera • camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ): • Két pont és egy vektor segítségével megadhatjuk

31. Vetítési transzformáció • perspective(fov, aspect, zNear, zFar) • Perspektív transzformáció beállítása, aspect a szélesség/magasság arány

32. Vetítési transzformáció • ortho(left, right, bottom, top, near, far): • Ortogonális vetítés • left, right: a vágótéglatest bal és jobb síkja • top, bottom: a vágótéglatest felső és alsó síkja • near: a legnagyobb távolság az origótól a nézőig • far: a legnagyobb távolság az origótól a nézőtől el

33. Beépített alakzatok • sphere(radius) • Origó középpontú gömb • box(size), box(w, h, d): • Origó középpontú, size élhosszúságú kocka, vagy w széles, h magas és d mély téglatest

34. Példa void setup() { size(400, 400, P3D); } void draw() { background(140); box(100); translate(150, 0, 0); box(50); camera( 200, 200, 0, 0, 0, 0, 0, -1, 0 ); }

35. 2. Feladat • Innen tölthetjük le az előbbit: http://people.inf.elte.hu/valasek/bevgraf_esti/06/ForgAlap.zip • Az egér jobbra-balra mozgatásával járjuk körbe a kockáinkat! • A fel-le gomb segítségével közelítsünk/távolodjunk az origótól

36. 3. Feladat • Az „o” billentyű hatására váltsunk át ortogonális vetítésre • A „p” billentyűvel térjünk vissza perspektívre

37. Feladat + • Forogjon a kisebbik kocka a saját tengelyei körül illetve a nagyobbik kocka körül, mindhárom tengely mentén! • Legyen kisebbik kockából 40, mind különböző pályán mozogjon • Mindegyik kocka színe változzon folyamatosan, folytonosan

38. Néhány megjelenítési mód

39. 4. Feladat • A fenti három móddal történő megjelenítést valósítsuk meg az „1”, „2”, „3” gombokkal történő váltással!

40. Utasítások • noFill(): • Nem lesz kitöltése a zárt alakzatoknak • beginShape(), endShape(MODE): • Csúcspontokból (vertex) álló összetett alakzatok (shape) megjelenítése • A MODE határozza meg, miként értelmezendőek a beginShape() és endShape() hívások között definiált csúcspontok („összekötési szabály”)

41. Utasítások

42. 5. Feladat • Csináljunk egy tetraédert háromszöglistával! • Kiindulás: http://people.inf.elte.hu/valasek/bevgraf_esti/06/TetraederAlap.zip