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

Az előadások a következő témára: "Számítógépes Grafika 1-2. gyakorlat"— Előadás másolata:

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

2 Információk ETR kód: IP-eSZG1G Időpont: csütörtök, 16:00-17:30
Helyszín: D (PC9 labor) Jegyszerzés: két beadandó + órai/házik Gyakorlati diák:

3 Mire lesz szükség Processing:

4 Ajánlott irodalom Processing 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] ): background(r, g, b [, t] ):
A kirajzolás vonalának színe Minden paraméter 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 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)

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: rect(x, y, width, height):
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(): mouseMoved(): mouseClicked():
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(): mouseReleased(): 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: mousePressed: pmouseX, pmouseY:
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 keyType(): keyReleased():
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(): Megjegyzés: 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): int millis()
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 Utasítások PImage: .gif, .jpg, .tga és .png képek megjelenítését szolgáló osztály A .width és .height mezők az adott kép szélességét és magasságát tárolják A .pixels tömbje pedig a színeket A képet a Sketch/Add file-lal hozzá kell adni a sketch-hez

35 Utasítások A pixels[] tömb használata a következő:
Először img.loadPixels() függvényhívás kell, ami feltölti a pixels[] tömböt Utána használhatjuk a img.pixels[]-t a kép pixeleinek lekérdezésére és módosítására (1D-s a tömb!) Végül ha módosításokat végeztünk, akkor img.updatePixels()-t kell hívnunk

36 Utasítások loadImage(eleres): visszaad egy PImage-t, ami az első paraméterben megadott elérési útvonalon található (lehet URL is!) image(img, x, y, width, height): kirajzol Az img nevű PImage típusú képet kifeszíti az (x, y, width, height) által meghatározott téglalapra (ha kell nagyít/kicsinyít)

37 Házi feladat – 1 pontért Kiindulás: Bal egérgombos vonszolás: kép elhelyezésének meghatározása (mintha kijelölés téglalap lenne) Jobb egérgombos vonszolás: a kép kimozdítása a helyéből (NE ugorjon a jobb-klikk helyére, az elmozdulás legyen relatív!)

38 Házi feladat - +0.5 pontért
Egér görgetésének hatására növekedjen/csökkenjen a kép (=nagyítás/kicsinyítés)