Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév.

Az előadások a következő témára: "Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév."— Előadás másolata:

1 Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév

2 Információk Hapák József – hapakj@inf.elte.hu (tárgyba legyen beírva, hogy [szg])hapakj@inf.elte.hu Kód: IP-08eSZGG Időpont: szerda, 19:30-21:00 Helyszín: Nyelvi labor Jegyszerzés: beadandók + órai/házik http://hapakj.web.elte.hu/ Gyakorlati diák: http://hapakj.web.elte.hu/szgesti http://hapakj.web.elte.hu/szgesti Előfeltétel: Linalg, C++ erős

3 Mire lesz szükség Processing: http://processing.org/download/http://processing.org/download/

4 Ajánlott irodalom Processing reference: http://processing.org/reference/ http://processing.org/reference/ Casey Reas, Ben Fry: Processing: A Programming Handbook for Visual Designers and Artists

5 Processing Java-ra épülő nyelv, grafikus, interaktív, vizualizációs alkalmazások fejlesztésére Nem szükséges előzetes Java tudás Tud futtatható fájlba exportálni Linux, Mac és Windows alá is Saját IDE-vel jön: Processing Development Environment

6 Példaprogram 1

7

8 Utasítások print(s): – A státuszsorba ír – Konkatenáció jele: + – Támogatott típusok: boolean, byte, char, color, int, float, String, Object float a = 4.3; int b = 2; print(“a = “ + a + “ és b = “ + b);

9 Utasítások println(s): – Új sort kezd – A print típusain túl tömböket is meg tud jeleníteni float[] a = {4.3, 2.4, 3, 5}; println(a);

10 Utasítások Kommentek a szokásos módon: // egysoros komment print(“Hello!”); /* hosszú komment */

11 Alap típusok long color double char float int boolean byte

12 Példaprogram 2 // Helló Vonal példaprogram line(15, 25, 70, 90);

13 Példaprogram 2

14 Utasítások size(width, height): (több később) – A megjelenítő ablak méretének beállítása line(fromX, fromY, toX, toY): – KKR-ben, tehát (0,0) a bal-felső sarok (0,0)X Y

15 Utasítások stroke(r, g, b [, t] ): – A kirajzolás vonalának színe – Minden paraméter 0-255 között – A t az átlátszóság – stroke(s [, t]): r=g=b=s, pl. stroke(255) = fehér background(r, g, b [, t] ): – Háttérszín beállítása – Egyúttal törli is a képernyő tartalmát

16 Színmegadás A fenti stroke és background példák is lényegében egy szín paramétert várnak Ez Processingben ez a color, ami lehet: – 1 skalár = szürkeárnyalat (0-255) – 2 skalár = szürkeárnyalat (0-255) és átlátszatlanság (0- 255) – 3 skalár = R, G, B vörös, zöld és kék komponensek (mind 0-255) – 4 skalár = R, G, B és A, átlátszatlanság (mind 0-255)

17 Példaprogram 3 size(400, 400); background(192, 64, 0); stroke(255); line(150, 25, 270, 350);

18 Példaprogram 3’ size(400, 400); color bg = color(192, 64, 0); color st = color(255); background(bg); stroke(st); line(150, 25, 270, 350);

19 Processing A programokat sketch-eknek hívják Háromféle módon programozható: – Alap – Folytonos – Java

20 Példaprogram 4 void setup() { size(400, 400); stroke(255); background(32, 64, 16); } void draw() { line(0, 0, mouseX, mouseY); }

21 Processing Az előző kód már folytonos típusú volt A setup() függvény a program inicializálásakor A draw() minden egyes képkocka kirajzolásakor meghívódik

22 Utasítások mouseX, mouseY: – Az egér pillanatnyi X és Y koordinátái (KKR)‏ rect(x, y, width, height): – Egy téglalapot rajzol ki – Bal-felső sarka: (x,y) – szélessége/magassága: width/heigth random(min, max)‏ fill(r, g, b [, t] ): – Kitöltési szín zárt alakzatok rajzolásakor

23 Feladat 1 Az egérmutató pozíciójába egy 10x10-es négyzet kirajzolása véletlenszerű kitöltési- és keretszínnel

24 Feladat 2 Az egérmutató pozíciójába egy 10x10-es négyzet kirajzolása véletlenszerű kitöltési- és keretszínnel Ne látszódjanak a korábbi képkockákban kirajzolt dolgok

25 Egér mouseDragged(): – Meghívásra kerül, ha mozgatják az egeret és közben valamelyik gomb nyomva van mouseMoved(): – Az egér mozgatásakor hívódik meg mouseClicked(): – Meghívódik ha valamelyik egérgombot megnyomták majd felengedték

26 Egér mousePressed(): – Egérgomb lenyomásakor hívódik – A mousePressed bool típusú változó azt tárolja le van-e nyomva egy egérgomb mouseReleased(): – Egérgomb felengedésekor hívódik

27 Egér változók mouseButton: – melyik egérgomb van lenyomva – LEFT, RIGHT, CENTER mousePressed: – Változó, true, ha le van nyomva egy egérgomb pmouseX, pmouseY: – Az X és Y irányú elmozdulás mértéke a legutóbbi pozícióhoz képest – Más a draw() és más az egér callback függvényekben!

28 Billentyűzet keyTyped(): – Az OS billentyűismétlési szabályának megfelelően hívódik meg – A módosítók (ctrl, alt, shift stb.) nincsenek figyelembe véve keyReleased(): – Billentyű felengedésekor – A felengedett billentyű: Nem ASCII karakterek: keyCode ASCII karakterek: key

29 Billentyűzet keyPressed(): – Lenyomott billentyű: Nem ASCII karakterek: keyCode ASCII: key Megjegyzés: – ASCII specifikációban benne vannak ezek is: BACKSPACE, TAB, ENTER, RETURN, ESC, DELETE PC, Linux, …: ENTER Mac: RETURN – Iránybillentyűk keyCode-ban (UP, DOWN, LEFT, RIGHT)

30 Utasítások A szokásos módon: – switch-case – for ciklus – if-else

31 Billentyűzet void keyPressed() { switch (keyCode) { case UP: // felfelé break; } if (key == ‘c’) { // c }

32 Példaprogram 5 void setup() { size(400, 400); stroke(255); } void draw() { background(32, 64, 16); strokeWeight(10); point(mouseX, mouseY); }

33 Utasítások strokeWeight(w): – A vonalvastagság pixelben, nemnegatív érték kell legyen int millis() – Az alkalmazás indítása óta eltelt idő ms-ben year(), month(), day(), hour(), minute(), second(): – Aktuális dátum – Mind int, megfelelő intervallumokból sin(x), cos(x): – Az x radiánban adott

34 Feladatok Az 1, 2, 3 gombok megnyomására változtassátok meg a háttérszínt Az egérrel lehessen változtatni a háttérszínt! X tengely mentén piros komponenst, Y tengely mentén pedig a zöld komponenst! (segítség az ablak aktuális méretét a width, height értékek tárolják)

35 Feladatok Rajzoljatok ki egy folyamatosan mozgó, az ablak oldalain pattogó kört Rajzoljatok ki egy tetszőleges méretű téglalapot. A téglalapot a kurzorverzérlőkkel és/vagy az AWSD gombokkal lehessen mozgatni az ablakban. A téglalap ne tudjon kilógni az ablakból!

36 Példaprogram 6 void setup() { size(400, 400); } void draw() { background(128); beginShape(); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape(CLOSE); }

37 beginShape([kind]) - egy alakzat rajzolásának megkezdése, kind az alakzat típusa. Részletek: http://processing.org/reference/beginShape_. html http://processing.org/reference/beginShape_. html vertex(x,y) – egy csúcspont megadás endShape([mode]) – az alakzat befejezése, ha a paraméter CLOSE, lezárja az alakzatot

38 Nehezebb feladatok Rajzoljatok ki egy kört, ami folyamatosan az egér pozíciója felé igyekszik lineárisan elmozdulva. A sebességet a kódban lehessen megadni egy változóba Rajzoljatok ki egy n oldalú sokszöget. A ‚+’, ‚-’ gombokkal lehessen növelni csökkent a csúcsok számát. (tipp: beingShape, endShape használata, és a vertex parancs kiadása egy ciklus magjában)