A grafikus felülettel rendelkező Java programok (Swing, FX, webkomponensek, HTML+CSS) fejlesztése során igény adódhat arra, hogy a GUI komponensek saját beépített rajzoló/renderelő képességét felülírjuk/-definiáljuk, hogy egy-egy nyomógomb, menüpont, rádiógomb másképpen nézzen ki. Léteznek beépített rajzoló funkciók is.
Ha például grafikont kell beilleszteni egy alkalmazásba, akkor használjunk és igényeink szerint szabjunk testre egy JFreeChart csomagbeli grafikont, illetve előfordulhat, hogy találhatunk egy olyat a JFreeChart Demo-ban, ami éppen megfelel a megrendelő igényeinek.
Persze a műfaj nem ér itt véget. Időnként kreatívabb ábrák, rajzok, grafikák megjelenítésére is használhatjuk a beépített – általában téglalap alakú – komponenseket. Ehhez egyszerűen csak felül kell írni/definiálni a paint() metódusukat és vászontechnikával, a megszokott képernyős koordináta-rendszerben, grafikai primitíveket (pont, téglalap, ellipszis) és színeket kell megfelelően paraméterezni.
Az optikai csalódások igen népszerűek, és az egyszerűbb fiziológiai és kognitív illúziók könnyen lerajzolhatók a fenti eszköztárral, hiszen csupán színek, alakzatok, kontraszt, távolság, mélység, térhatás segítségével valósulnak meg.
Íme három egyszerű példa, hogyan állítható elő optikai csalódás Java implementációval!
1. példa
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override public void paint(Graphics g) { int egyseg=20, sorDb=10, oszlopDb=20; for(int i=1; i<=sorDb; i++) { int eltolas=(i%2==1)?0:egyseg/2; g.setColor(Color.BLACK); for(int j=1; j<=oszlopDb; j+=2) g.fillRect(eltolas+(j-1)*egyseg, (i-1)*egyseg+i, egyseg, egyseg); g.setColor(Color.LIGHT_GRAY); g.drawLine(0, (i-1)*egyseg+i-1, egyseg*(oszlopDb-1), (i-1)*egyseg+i-1); } } |
2. példa
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@Override public void paint(Graphics g) { int egyseg=50, koz=10, sorDb=6, oszlopDb=8; g.setColor(Color.LIGHT_GRAY); g.fillRect(0, 0, oszlopDb*(egyseg+koz)-koz, sorDb*(egyseg+koz)-koz); g.setColor(Color.BLACK); for(int i=1; i<=sorDb; i++) for(int j=1; j<=oszlopDb; j++) g.fillRect((j-1)*(egyseg+koz), (i-1)*(egyseg+koz), egyseg, egyseg); g.setColor(Color.WHITE); for(int i=1; i<sorDb; i++) for(int j=1; j<oszlopDb; j++) g.fillOval(j*(egyseg+koz)-koz-2, i*(egyseg+koz)-koz-2, koz+4, koz+4); } |
3. példa
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
@Override public void paint(Graphics g) { Point hely; for(int i=1; i<=4; i++) for(int j=1; j<=4; j++) { hely=new Point((i-1)*180, (j-1)*120); if((i+j)%2==1) minta1(g, hely); else minta2(g, hely); } } private void minta1(Graphics g, Point hely) { Point pozicio; for(int i=1; i<=4; i++) for(int j=1; j<=4; j++) { pozicio=new Point(hely.x+(i-1)*45, hely.y+(j-1)*30); if((i+j)%2==1) mintaAlap1(g, pozicio, Color.MAGENTA, Color.YELLOW); else mintaAlap2(g, pozicio, Color.YELLOW, Color.MAGENTA); } } private void minta2(Graphics g, Point hely) { Point pozicio; for(int i=1; i<=4; i++) for(int j=1; j<=4; j++) { pozicio=new Point(hely.x+(i-1)*45, hely.y+(j-1)*30); if((i+j)%2==1) mintaAlap2(g, pozicio, Color.MAGENTA, Color.YELLOW); else mintaAlap1(g, pozicio, Color.YELLOW, Color.MAGENTA); } } private void mintaAlap1(Graphics g, Point hely, Color kitolt, Color szin) { g.setColor(kitolt); g.fillRect(hely.x, hely.y, 45, 30); g.setColor(szin); g.fillRect(hely.x+2, hely.y+2, 13, 9); g.fillRect(hely.x+30, hely.y+19, 13, 9); } private void mintaAlap2(Graphics g, Point hely, Color kitolt, Color szin) { g.setColor(kitolt); g.fillRect(hely.x, hely.y, 45, 30); g.setColor(szin); g.fillRect(hely.x+30, hely.y+2, 13, 9); g.fillRect(hely.x+2, hely.y+19, 13, 9); } |
A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.
Aki ezek után kedvet kapott, keressen hasonló ábrákat és tervezve, kódolva, tesztelve gyakoroljon! Ajánlom ezeket a weboldalakat:
- dreamstime.com – Waving Squares, Black and White Optical Illusion Vector Seamless Stock Vector
- mesosyn.com – Miscellaneous optical illusion
- freepik.com – Optical Illusion Vectors, Photos and PSD files | Free Download
Hasonló feladatok megoldásához a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 29-36. Grafikus felhasználói felület alkalma után bátran hozzá lehet fogni, illetve érintjük még a GUI témakört a Java adatbázis-kezelő tanfolyam 33-40. óra: Grafikus kliensalkalmazás fejlesztése JDBC alapon alkalommal is.
Mit tanuljak meg, hogy ilyet tudjak programozni Java-ban?
Nem kell konkrét forráskód, csak néhány hívószó. Maradjon némi 🙂 kihívás.
András: ennek a Java része egyszerű: vászontechnika, grafikai primitívek, színkódolás,
drawPolygon()metódus. Ez nem animáció, csak annak tűnik. 😉A kihívást jelentő rész inkább matematika: koordináta-geometria, homogén koordináta- és ponttranszformációk (műveletek: eltolás, elforgatás, skálázás), síkidomok és testek egyenletei és metszéspontjaik meghatározása, 3D->2D vetítés (axonometrikus, perspektivikus). Ennyi kezdésnek elegendő lehet.
Még haladóbb a térinformatikai megközelítés, ha ismersz felületek lefedésére használható tesszelációs textúrázó algoritmusokat és néhány vetületet (ezekkel most hatszögeket kell például gömbre feszíteni).
Látom, mélyen belekérdeztem és még nem tartok ott. És ehhez az egyszerűbb ábrához hogy fogjak hozzá? Milyen egyenlete van a görbének?
Könnyebb sikerélményed egyszerű csalással András például így lehet:
AnalogOraforráskódjából, nézd meg hogyan mozgatja az időzítő körbe a másodpercmutatót,Ezzel kapsz egy egyszerű, térbeli hatást keltő, a nézőponttól távolodó hatást keltő ábrát. Ha ez már megy, akkor visszatérünk a görbe egyenletére.
Ez így menni fog, köszönöm.
Nem a fentiek szerinti szabályos, ismétlődő elemekből álló, hanem másképpen trükkös optikai csalódás:
Az érdeklődőket várja az Illúziók Múzeuma, már Budapesten is:
https://illuziokmuzeuma.hu/
Írtam beszámolót a Vasarely Múzeum látogatásomról: Múzeumok Éjszakája 2023.