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ő