számítógépes grafika 4. gyakorlat
Post on 14-Jan-2016
58 Views
Preview:
DESCRIPTION
TRANSCRIPT
Számítógépes Grafika4. 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: 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)
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
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);}
NegyszogAlap.pdevoid mousePressed(){ switch (mouseButton) { case LEFT: pts.add(new PVector(mouseX,
mouseY)); break; case RIGHT: pts.clear(); break; }}
NegyszogAlap.pdevoid 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);...
NegyszogAlap.pdeif ( i > 0 ){
strokeWeight(1);
if (i % 4 != 0) { PVector prev =
(PVector)pts.get(i-1); line(prev.x,prev.y,
p.x,p.y); } ...
NegyszogAlap.pdeif ( (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
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
Fájl output
PrintWriter wr = createWriter(“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[] 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");
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,“,;”);
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);
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
MyButtonMButton b = new MButton (100,100,80,20);
void setup(){ size(400, 400);}
void draw(){ background(255); b.Update(); b.Draw();}
MyButtonclass 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); }...
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); }
MyButton
boolean isMouseOver() { if (mouseX >= x && mouseX <= x+w &&
mouseY >= y && mouseY <= 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ásvoid mouseClicked(){ if (mouseButton == LEFT) if (b.isMouseOver()) 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ő
top related