Szmtgpes Grafika 4 gyakorlat Programtervez informatikus esti 20092010

Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti) 2009/2010 őszi félév

Információk Gyakorlati diák: http: //people. inf. elte. hu/valasek/bevgraf_esti/ E-mail: valasek@inf. elte. hu

Szövegkirajzolás PFont: text. Font(PFont): A Processing karakterkészlet osztálya Használat: PFont font = load. Font(“fnt. vlw"); Az aktuális kirajzolási karakterkészletet a paraméterben kapottra módosítja text(str, x, y[, w, h, z]) text. Size(int)

Példa http: //people. inf. elte. hu/valasek/bevgraf_esti/04/fnt. vlw void setup() { size(400, 400); PFont font = load. Font("fnt. vlw"); text. Font(font); } void draw() { text("Helló", 15, 30); }

Innen indulunk ki Negyszog. Alap. pde: http: //people. inf. elte. hu/valasek/bevgraf_esti/04/ Negyszog. Alap. zip Array. List pts = new Array. List(); void setup() { size(400, 400); }

Negyszog. Alap. pde void mouse. Pressed() { switch (mouse. Button) { case LEFT: pts. add(new PVector(mouse. X, mouse. Y)); break; case RIGHT: pts. clear(); break; } }

Negyszog. Alap. pde void draw() { background(255); for (int i=0; i<pts. size(); ++i) { PVector p = (PVector)pts. get(i); stroke. Weight(10); stroke(0); . . . point(p. x, p. y);

Negyszog. Alap. pde if ( i > 0 ) { stroke. Weight(1); . . . if (i % 4 != 0) { PVector prev = (PVector)pts. get(i-1); line(prev. x, prev. y, p. x, p. y); }

Negyszog. Alap. pde if ( (i+1) % 4 == 0 ) { PVector prev = (PVector)pts. get(i-3); } } line(prev. x, prev. y, p. x, p. y);

Feladat 1 A négyszögek csúcspontjainak koordinátáit rajzoljuk ki a csúcspontok mellé ha “k” betűt leüti a felhasználó

Fájl output Print. Writer: Fájlba kiírásra Használat: Stream. Writer w = create. Writer(“file. txt”); Eljárások: print(): paraméterben kapott string fájlba írása println(): ua. mint fent + új sor a végén flush(): maradék adat kiírása (close előtt!) close(): fájl lezárása

Fájl output Print. Writer wr = create. Writer(“a. txt"); wr. print(“H”); wr. println("at: " + 6); wr. flush(); wr. close();

Feladat 2 A létrejövő négyszögek koordinátáit írjuk ki egy fájlba (negyszogek. txt) ha a felhasználó ‘s’ betűt nyom

Fájl input • String[] load. Strings(<file_name>): Betölti a paraméterben kapott fájlt soronként, visszaadja a beolvasás eredményét Használat: • String lines[] = load. Strings("szoveg. txt");

Szövegek feldolgozása String[] split(str, delim): – String gy = "alma, korte”; String[] l = split(gy, ', '); String[] split. Tokens(str, delims): – String gy = "alma, korte; eper”; String[] l = split. Tokens(gy, “, ; ”);

String osztály Eljárások Java-ból ami ismerős: substring(int fi, int li); trim() … Számmá alakítás: parse. Int(s); parse. Float(s);

Feladat + Az „L” billentyű lenyomásával töltődjön be a fájlból az összes elmentett négyszögkoordináta és rajzoljuk ki a négyszögeket

GUI GUI: Graphical User Interface Gombok, listák, feliratok stb. Asztali gépeken általában WIMP-es filozófia szerint Írjunk egy gomb osztályt! Ebből indulunk ki: link

My. Button MButton b = new MButton (100, 80, 20); void setup() { size(400, 400); } void draw() { background(255); b. Update(); b. Draw(); }

My. Button class MButton { int x, y; int w, h; color c. Line, c. Fill; MButton( int ix, int iy, int iw, int ih) { x = ix; y = iy; w = iw; h = ih; c. Line = color(50); c. Fill = color(140); }. . .

My. Button void Update() { if (is. Mouse. Over()) c. Fill = color(180); else c. Fill = color(140); } void Draw() { stroke. Weight(1); stroke(c. Line); fill(c. Fill); rect(x, y, w, h); }

My. Button boolean is. Mouse. Over() { if (mouse. X >= x && mouse. X <= x+w && mouse. Y >= y && mouse. Y <= y+h) return true; else return false; } } // Mbutton vege

Feladat 3 Legyen egy szövege is a gombnak Ez a felirat változzon meg, ha rákattintanak a gombra

Kattintás void mouse. Clicked() { if (mouse. Button == LEFT) if (b. is. Mouse. Over()) b. Clicked(); } class MButton{. . . void Clicked() { //. . . } }

Feladat 4 Ha rákattintanak a gombokra induljanak el a képernyőn Pattanjanak vissza a határokon A gombok szövege legyen az aktuális pozíció

Feladat + (HF) Ha rákattintanak a gombokra induljanak el a képernyőn Pattanjanak vissza a határokon A gombok szövege legyen az aktuális pozíció Ha üres helyre kattintunk induljon el onnan egy új gomb Ha ütköznek a gombok, akkor pattanjanak vissza egymásról

Általánosságban Képernyők, menük tervezésekor érdemes figyelni: Az ember rövid távon (RTM) kb. 7 „homogén dologra” (szó, szám, művelet) emlékszik, ennyivel dolgozik Ennél több elemből ne álljon egy menü, inkább legyen akkor almenü vagy szétválasztás Vizuális dolgoknál ez kb. 4 (ennyi színnél ne nagyon használjunk többet pl. ) Legyünk konzisztensek: hasonlót hasonlóval, hasonló színnel stb.

Általánosságban Színeknél: Egyes kultúrkörökben színeknek implicit jelentése Nyugatiaknál például: piros: állj, veszély, forró, tűz, közeli sárga: óvatosság, lassan, ellenőrzés zöld: mehet, rendben, érthető, biztonság, növényzet kék: hideg, víz, nyugalom, ég, távoli, biztonság Általában kb. : meleg színek: tevékenység, közelség hideg színek: állapot, távolság szürke, fehér: semlegesség

Általánosságban Képernyők tervezésekor legyünk tekintettel a felhasználói csoportra és igényeire Ne legyen túl zsúfolt Csoportosítás logikailag, tagolás Tartalomnak megfelelő szövegillesztés Különböző funkciójú képernyők elrendezése is legyen különböző