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

Az előadások a következő témára: "Számítógépes Grafika 4. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév."— Előadás másolata:

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

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

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

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

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

6 NegyszogAlap.pde void mousePressed() { switch (mouseButton) { case LEFT: pts.add(new PVector(mouseX, mouseY)); break; case RIGHT: pts.clear(); break; }

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

8 NegyszogAlap.pde if ( i > 0 ) { strokeWeight(1); if (i % 4 != 0) { PVector prev = (PVector)pts.get(i-1); line(prev.x,prev.y, p.x,p.y); }...

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

10 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ó

11 Fájl output PrintWriter:  Fájlba kiírásra  Használat: StreamWriter w = createWriter(“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

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

13 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

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

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

16 String osztály Eljárások Java-ból ami ismerős:  substring(int fi, int li);  trim()‏  … Számmá alakítás:  parseInt(s);  parseFloat(s);

17 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

18 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

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

20 MyButton class MButton { int x, y; int w, h; color cLine, cFill; MButton(int ix, int iy, int iw, int ih)‏ { x = ix; y = iy; w = iw; h = ih; cLine = color(50); cFill = color(140); }...

21 MyButton void Update()‏ { if (isMouseOver())‏ cFill = color(180); else cFill = color(140); } void Draw()‏ { strokeWeight(1); stroke(cLine); fill(cFill); rect(x, y, w, h); }

22 MyButton boolean isMouseOver()‏ { if (mouseX >= x && mouseX = y && mouseY <= y+h)‏ return true; else return false; } } // Mbutton vege

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

24 Kattintás void mouseClicked()‏ { if (mouseButton == LEFT)‏ if (b.isMouseOver())‏ b.Clicked(); } class MButton{... void Clicked()‏ { //... }

25 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ó

26 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

27 Á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.

28 Á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

29 Á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ő