Számítógépes Grafika 4. gyakorlat

1. SzámítógépesGrafika4. 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 http://people.inf.elte.hu/valasek/bevgraf_esti/04/fnt.vlw void setup(){ size(400, 400); PFont font = loadFont("fnt.vlw"); textFont(font); } void draw(){ text("Helló", 15, 30); }

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

6. NegyszogAlap.pde void mousePressed() { switch (mouseButton) { case LEFT: pts.add(newPVector(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(<file_name>): • 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 <= x+w && mouseY >= 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ő