Optikai csalódások

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

Optikai csalódás 1

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

Optikai csalódás 2

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

Optikai csalódás 3

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:

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.

Szólj hozzá!