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

Programtervező informatikus (esti)2011/2012 ő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, 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

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, Objectfloat 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 kommentprint(“Hello!”);/* hosszú komment */

Alap típusok

• long• color• double• char• float• int• boolean• byte

Példaprogram 2

// Helló Vonal példaprogramline(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 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)

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 4void 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űzetvoid keyPressed(){ switch (keyCode) { case UP: // felfelé break;

}if (key == ‘c’){

// c}

}

Példaprogram 5void 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 6void 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)