sz m t g pes grafika 1 2 gyakorlat n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Számítógépes Grafika 1-2. gyakorlat PowerPoint Presentation
Download Presentation
Számítógépes Grafika 1-2. gyakorlat

Loading in 2 Seconds...

play fullscreen
1 / 38

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


  • 82 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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