Számítógépes Grafika 1-2. gyakorlat

SzámítógépesGrafika1-2. gyakorlat Programtervezőinformatikus (esti)‏ 2011/2012őszifélév

Információk • Hapák József – hapakj@inf.elte.hu(tárgyba legyen beírva, hogy [szg]) • 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 • Előfeltétel: Linalg, C++ erős

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

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

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

Példaprogram 1

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);

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);

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

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

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

Példaprogram 2

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

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

Színmegadás • A fenti stroke és background példák is lényegében egy szín paramétert várnak • Ez Processingbenez 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)

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

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);

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

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

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

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

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

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

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

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

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!

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

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)

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

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

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

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

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)

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!

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); }

beginShape([kind]) - egy alakzat rajzolásának megkezdése, kind az alakzat típusa.Részletek: 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

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)

Számítógépes Grafika 1-2. gyakorlat