1 / 38

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

Számítógépes Grafika 1-2. gyakorlat. Programtervező informatikus ( esti ) ‏ 20 11 /201 2 őszi fé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 , 1 9 : 3 0- 21 : 0 0 Helyszín : Nyelvi labor

galya
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

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

  4. Ajánlott irodalom • Processing 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. Példaprogram 1

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

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

More Related