számítógépes grafika 1-2. gyakorlat
Post on 13-Jan-2016
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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)
top related