JavaFX - címke - it-tanfolyam.hu

Euler állatos feladata – geometriai megközelítés

2024. szeptember 2. Szerző: Kaczur Sándor

Valaki sertést, kecskét és juhot vásárolt, összesen 100 állatot, pontosan 100 aranyért. A sertés darabja 3 és fél arany, a kecskéé 1 és egyharmad, a juhoké fél arany. Hány darabot vehetett az egyes állatokból?

Tudjuk, hogy a feladatnak három megoldása van:

5 db sertés és 42 db kecske és 53 db juh
10 db sertés és 24 db kecske és 66 db juh
15 db sertés és 6 db kecske és 79 db juh

Klasszikus informatikai megközelítést – egymásba ágyazott ciklusokat – bemutattam már: Euler állatos feladata. A brute force alapgondolat fokozatos finomítását követően néhány ötleteket is adtam a továbbfejlesztéshez. Ez igazi örökzöld feladat. Látogatottsága alapján rendületlenül népszerű ez a blog bejegyzés az it-tanfolyam.hu szakmai blogban. Többek között ez inspirált a feladattal való további foglalkozásra.

Mit jelent a geometriai megközelítés?

Egy térbeli pont három koordinátával leírható. Az (s, k, j) ponthármas jelenti a sertések, kecskék és juhok számát. Az RGB színkockához hasonlóan (amibe belefér az összes ábrázolható színhez tartozó koordinátapont), most is elférünk egy kockában. Legyen a kocka egyik csúcsa az origó és az élei legyenek 100 egység hosszúak. A feladat megfogalmazása alapján két egyenlet (e1 és e2) írható fel 3-3 együtthatóval. Mindkét egyenlet meghatároz egy síkot (s1 és s2) a térben, amelynek ábrázoljuk a kockába eső síkmetszeteit. A két sík metszésvonala egyenes (e3), amire esnek a megoldások pontjai (m1, m2, m3). Lépésenként haladunk a geometriai ábrázolás során.

A grafikus felületen történő ábrázoláshoz, rajzoláshoz két korábbi projektünkből indulunk ki. A Kígyókocka grafikus felületen feladat ismertet egy grafikus keretrendszert JavaFX-ben megvalósítva. A három részből álló Naprendszer szimuláció esettanulmányunk pedig ismerteti az ábrázoláshoz szükséges elméleti hátteret, homogén transzformációkat, vetületi leképezést, Java forráskódot is bemutat a transzformációs mátrix alkalmazására. Az eddig említett három blog bejegyzést mind összeépítve készültek a továbbiak.

A geometriai megoldást lépésenként, saját fejlesztésű, grafikus felhasználói felülettel rendelkező, JavaFX alapú programról készült képernyőképek mutatják be – markáns Java forráskód-részletekkel.

Hogy jelenik meg a megoldásokat tartalmazó kocka?

Elegendő ábrázolni a kockának azt a három élét, amik egybeesnek a koordinátatengelyekkel. Az RGB színkockához hasonlóan piros, zöld, kék színekkel jelennek meg a három tengelyen lévő néhány pont. Az ábrázoláshoz érdemes kísérletezni egy kicsit: mekkora méretben (skála), honnan (nézőpont), milyen messziről (vetület, ideális pont, perspektíva, távolság) látszik a modelltérbeli objektum (igen, ez a kocka).

Az alábbi Java forráskód-részlet helyezi el a fenti pontokat. Mindhárom tengelyen 5-től 95-ig, 10-esével haladunk. Így elkerülhető, hogy az origóba kerüljön pont, hiszen az nem tudna egyszerre három színnel megjelenni. Mivel az állatok száma pozitív, így a koordinátapontok is nemnegatívak.

for(int i=5; i<=100; i+=10) {

Point3D cpS=new Point3D(i, 0, 0); //sertés

createPoint(cpS, 5, Color.RED);

Point3D cpK=new Point3D(0, i, 0); //kecske

createPoint(cpK, 5, Color.GREEN);

Point3D cpJ=new Point3D(0, 0, i); //juh

createPoint(cpJ, 5, Color.BLUE);

}

Hol vannak az első egyenlet síkjának pontjai?

A korábbi megoldásnál feltételként megfogalmazott első 3.5*s+4.0/3*k+0.5*j==100 egyenlet egyszerű átalakításokkal megadja a piros és zöld síkbeli ponthoz tartozó kék térbeli pontot: j=(600-21*s-8*k)/3. Ezek az s1 síkra esnek. A citromsárga pontokat páros koordinátapárokra vizsgált feltétel jelöli ki. A narancssárga vonal behatárolja ezt a síkmetszetet. Ez a négyszög (trapéz) esik bele a kockába.

A citromsárga pontokat az első egymásba ágyazott ciklusok adják hozzá az ábrázolt modelltérhez: érzékeltetve a síkbeli pontokat. A narancssárga pontokkal a második egymásba ágyazott ciklusok bővítik a modellteret: behatárolva a kockabeli négyszög síkrészletet. (A trapéz oldalait szakaszként is lehetne ábrázolni, de ez a kellően sűrű ponthalmaz is elegendő).

for(int s=0; s<=100; s+=2)

for(int k=0; k<=100; k+=2) {

int j=(600-21*s-8*k)/3;

if(0<=j && j<=100) {

Point3D cpE1=new Point3D(s, k, j);

createPoint(cpE1, 3, Color.YELLOW);

}

for(double s=0; s<=100; s+=0.1)

for(double k=0; k<=100; k+=0.1) {

long j=Math.round((600-21*s-8*k)/3);

if(((s==0 || s==100) && 0<=j && j<=100) ||

((k==0 || k==100) && 0<=j && j<=100) ||

(j==0 || j==100)) {

Point3D cpE1=new Point3D(s, k, j);

createPoint(cpE1, 2, Color.ORANGE);

}

Hol vannak a második egyenlet síkjának pontjai?

Hasonlóan az eddigiekhez. A korábbi s+k+j==100 feltételből adódik a szintén feltételként megfogalmazott j==100-s-k egyenlet. Ezek az s2 síkra esnek. Világosszürke pontok érzékeltetik a síkot és sötétszürke pontok adják a síkrészlet határait. A síkból ez a háromszög esik bele a kockába.

A Java forráskód nagyon hasonló az előzőhöz.

Hogyan helyezkedik el a két sík a kockában?

Egyben kirajzoltatva a fentieket, könnyen adódik ez az ábra:

Hol van a két sík metszésvonala?

Mivel a két sík nem esik egybe, így van metszésvonaluk. Ez egy egyenes, amiből csak az az e3 szakasz rész szükséges, ami a kockába esik. Bíbor (magenta) szín jelöli az alábbi ábrán:

Ahol a két egyenlethez tartozó konkrét pontok egybeesnek, ott van a metszésvonal. A behelyettesítést behatároló ciklusok szervezéséből (a ciklusváltozók alsó és felső és határaiból) adódik, hogy csak a kockabeli szakaszt rajzolja ki az alábbi Java forráskód-részlet:

for(double s=0; s<=100; s+=0.1)

for(double k=0; k<=100; k+=0.1) {

long j1=Math.round((600-21*s-8*k)/3);

long j2=Math.round(100-s-k);

if(j1==j2) {

Point3D cpE1=new Point3D(s, k, j1);

createPoint(cpE1, 2, Color.MAGENTA);

}

Hol jelenik meg a feladat három megoldása?

A két egyenlethez tartozó síkok kockába eső metszésvonalán helyezkednek el az egész koordinátákkal ábrázolható, koordináta-hármasként megjelenő pontok. Nagyobb fehér pontok jelölik ezeket az alábbi ábrán:

Az eddigiek alapján könnyen adódik a három pont/megoldást ábrázoló Java forráskód-részlet:

Point3D m1=new Point3D(5, 42, 53);

createPoint(m1, 10, Color.WHITE);

Point3D m2=new Point3D(10, 24, 66);

createPoint(m2, 10, Color.WHITE);

Point3D m3=new Point3D(15, 6, 79);

createPoint(m3, 10, Color.WHITE);

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Ez a feladat a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 5-8. óra: Vezérlési szerkezetek, illetve 9-12. óra: Metódusok, rekurzió alkalmához, a 29-36. óra Grafikus felhasználói felület alkalmaihoz, valamint minden tanfolyamunk orientáló moduljának 1-4. óra: Programozási tételek alkalmához kapcsolódik.

Tanfolyamainkon JavaFX grafikus felülettel hangsúlyosan nem foglalkozunk, de egy-egy kész forráskódot közösen megbeszélünk, és össze is hasonlítjuk a swing-es változattal. Fejlesztünk játékprogramot, de inkább konzolosan, vagy swing-es ablakban, vagy webes alkalmazásként.

A grafikus felületek felépítésének megismerése fontos lépcső az objektumorientált programozás elmélyítéséhez, gyakorlásához. A grafikus felületekhez egy másik lényeges szemléletváltás is kapcsolódik, hiszen a korábbi algoritmusvezérelt megközelítést felváltja az eseményvezérelt (eseménykezelés). A GUI-s feladatainkat tudatosan hangsúlyozott MVC-s projektekben készítjük el.

Egy matematika érettségi feladat megoldása programozással 2024

2024. május 18.2024. május 7. Szerző: Kaczur Sándor

A 2024-es középszintű matematika érettségi feladatsorból az 12. feladata inspirált arra, hogy elkészítsem a grafikus ábrázolását Java nyelven. A korábbi Kígyókocka grafikus felületen esettanulmány kiváló alapot, „keretrendszert” adott a továbbfejlesztésre. Érdekes belegondolni, hogy mennyire más lehetne a problémamegoldás, ha programozhatnánk a matematika érettségi vizsgán. A teljes feladatsor letölthető az oktatas.hu-ról.

12. feladat

Egy piros, egy fekete és egy fehér szabályos dobókockával egyszerre dobunk. Határozza meg annak a valószínűségét, hogy a dobás eredménye három különböző szám lesz! Megoldását részletezze!

1. megoldás

public static void main(String[] args) {

int dbKulonbozo=0, dbOsszes=0;

for(int i=1; i<=6; i++)

for(int j=1; j<=6; j++)

for(int k=1; k<=6; k++) {

if(!((i==j && j==k) ||

(i==j && i!=k && j!=k) || (i==k && i!=j && j!=k) ||

(j==k && i!=j && i!=k))) {

// System.out.println(i+"-"+j+"-"+k);

dbKulonbozo++;

}

dbOsszes++;

}

System.out.println(

"mindhárom kockakodobás különbözik: "+dbKulonbozo+" db"+

"\nösszes kockadobás: "+dbOsszes+" db");

double p=1.0*dbKulonbozo/dbOsszes;

System.out.println("A keresett valószínűség: "+p);

}

A kedvező /összes eset száma ad választ a kérdésre. Az egymásba ágyazott ciklusok – i-j-k számhármasokként – előállítják az összes esetet. Ezek száma 216, rendre: 1-1-1, 1-1-2, …, 1-1-6, 1-2-1, …, 6-6-5, 6-6-6-ig. A összes eset között megtalálhatók a kedvező esetek. Ezek száma 120, rendre: 1-2-3, 1-2-4, 1-2-5, 1-2-6, 1-3-2, 1-3-4, 1-3-5, 1-3-6, 1-4-2, 1-4-3, 1-4-5, 1-4-6, 1-5-2, 1-5-3, 1-5-4, 1-5-6, 1-6-2, 1-6-3, 1-6-4, 1-6-5, 2-1-3, 2-1-4, 2-1-5, 2-1-6, 2-3-1, 2-3-4, 2-3-5, 2-3-6, 2-4-1, 2-4-3, 2-4-5, 2-4-6, 2-5-1, 2-5-3, 2-5-4, 2-5-6, 2-6-1, 2-6-3, 2-6-4, 2-6-5, 3-1-2, 3-1-4, 3-1-5, 3-1-6, 3-2-1, 3-2-4, 3-2-5, 3-2-6, 3-4-1, 3-4-2, 3-4-5, 3-4-6, 3-5-1, 3-5-2, 3-5-4, 3-5-6, 3-6-1, 3-6-2, 3-6-4, 3-6-5, 4-1-2, 4-1-3, 4-1-5, 4-1-6, 4-2-1, 4-2-3, 4-2-5, 4-2-6, 4-3-1, 4-3-2, 4-3-5, 4-3-6, 4-5-1, 4-5-2, 4-5-3, 4-5-6, 4-6-1, 4-6-2, 4-6-3, 4-6-5, 5-1-2, 5-1-3, 5-1-4, 5-1-6, 5-2-1, 5-2-3, 5-2-4, 5-2-6, 5-3-1, 5-3-2, 5-3-4, 5-3-6, 5-4-1, 5-4-2, 5-4-3, 5-4-6, 5-6-1, 5-6-2, 5-6-3, 5-6-4, 6-1-2, 6-1-3, 6-1-4, 6-1-5, 6-2-1, 6-2-3, 6-2-4, 6-2-5, 6-3-1, 6-3-2, 6-3-4, 6-3-5, 6-4-1, 6-4-2, 6-4-3, 6-4-5, 6-5-1, 6-5-2, 6-5-3, 6-5-4.

A megszámolás programozási tétel előállítja a szükséges változókat, amik hányadosa megadja a szükséges p valószínűséget és ezt a program ki is írja a konzolra: A keresett valószínűség: 0.5555555555555556. Az esetek/lehetőségek felsorolása egyben a megoldás részletezése. A megszámoláshoz használt sokféle feltétel természetesen átfogalmazható lenne. Az egyszerűsítés többféleképpen is elvégezhető, többek között a De Morgan-azonosságok alkalmazásával.

2. megoldás

A korábbi JavaFX alapon megvalósított program módosításával könnyen állítható a megoldás grafikus/vizuális reprezentációja. Íme egy képernyőkép az elkészült program felhasználói felületéről:

A 3 db dobókockával kapott számhármasok 3D-ben, térbeli pontként jelennek meg egy kockában. A nagy piros gömbök jelölik azt a 6 db esetet, amikor mindhárom kockadobás megegyezik. Ezek a kocka egyik testálójában találhatók. A közepes narancssárga gömbök jelölik azt a 90 db lehetőséget, amikor bármely (pontosan) két kockadobás megegyezik. Végül a kis szürke gömbök jelölik a megoldást. Ez a 120 db kimaradó eset, másképpen: amikor mindhárom kockadobás különbözik. Másféle lehetőség nincs és megvan a 216 esethez tartozó összes gömb.

A megoldás implementálása a korábbi programban szinte csak egy metódus frissítését, kiegészítését igényelte. Ez a korábbi tudatos, objektumorientált, MVC szerkezetnek köszönhető és egyben a forráskód újrafelhasználása is. A createCube() metódus az alábbiak valósítja meg a feladatot:

private Node createCube() {

final int SCALE=50;

final Point3D Y_AXIS=new Point3D(0, 1, 0);

Group group=new Group();

for(int i=1; i<=6; i++)

for(int j=1; j<=6; j++)

for(int k=1; k<=6; k++) {

Point3D cp=new Point3D(i*SCALE, j*SCALE, k*SCALE);

Point3D diff=cp.subtract(cp);

Translate moveToMidpoint=new Translate(

ORIGO.getX()+cp.getX(), ORIGO.getY()+cp.getY(), cp.getZ());

Point3D axisOfRotation=diff.crossProduct(Y_AXIS);

double angle=Math.acos(diff.normalize().dotProduct(Y_AXIS));

Rotate rotateAroundCenter=

new Rotate(-Math.toDegrees(angle), axisOfRotation);

Sphere s=null;

if(i==j && j==k) {

//mindhárom kockadobás megegyezik

s=new Sphere(20);

s.setMaterial(new PhongMaterial(Color.GREEN));

}

else if((i==j && i!=k && j!=k) || (i==k && i!=j && j!=k) ||

(j==k && i!=j && i!=k)) {

//bármely két kockadobás megegyezik

s=new Sphere(15);

s.setMaterial(new PhongMaterial(Color.ORANGE));

}

else {

//mindhárom kockadobás különbözik

s=new Sphere(10);

s.setMaterial(new PhongMaterial(Color.LIGHTGREY));

}

s.getTransforms().addAll(moveToMidpoint, rotateAroundCenter);

group.getChildren().add(s);

}

return group;

}

A belépési pont, a grafikus felület építése, a nyomógombok eseménykezelése, a geometriai transzformációk, és persze a 3D -> 2D leképezés a megjelenítés során megmaradt. A virtuális térben elhelyezett objektumok változtak (pozíció, nézőpont, anyagtulajdonság). További részletes magyarázat érhető el a Kígyókocka grafikus felületen esettanulmányban.

3. megoldás

Itt most csak ötletet szeretnék mutatni. A 2022-es 6. feladat 3-7. kombinatorikai megoldásai könnyen továbbfejleszthetők és sokféle hasznos apróság gyakorolható.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Ajánljuk matematika érettségi feladat címkénket, mert a témában évről-évre blogolunk.

A feladat a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 5-8. óra: Vezérlési szerkezetek, 9-12. óra: Metódusok, rekurzió, valamint 17-28. óra: Objektumorientált programozás alkalmaihoz kötődik.

Multimédia az oktatásban 2022

2024. június 29.2022. július 7. Szerző: Kiss Balázs

A Neumann János Számítógép-tudományi Társaság (NJSZT) „Multimédia az oktatásban” Szakosztály által – évente – szervezett XXVIII. Multimédia az oktatásban nemzetközi konferencia hibrid (jelenléti és online) formában került megrendezésre 2022. július 6-7-én.

A konferencia célja

A szakmai rendezvény célja, hogy elősegítse az oktatás, valamint a kutatás és fejlesztés különböző területein dolgozó, oktató hazai és külföldi szakemberek, PhD és felsőoktatási hallgatók kapcsolatfelvételét, tapasztalatok és jó gyakorlatok cseréjét, egyes képzési szakterületekhez kapcsolódó kreditek gyűjtését.

28 témakörben hirdették meg az előadóknak a jelentkezési lehetőséget, köztük néhány hozzánk kötődő

élethelyzethez igazított tanulás,
a multimédia alkalmazása a felsőoktatásban és a felnőttképzésben,
mLearning, eLearning és környezete,
a tanulási környezet technikai, technológiai változása,
felhőalapú szolgáltatások,
multimédia és a tudományos kutatás összefonódása,
multimédia-fejlesztések, eredmények, alkalmazások bemutatása.

A konferencia programja

Letölthető a konferencia programja. A konferencia az Eszéki Josip Juraj Strossmayer Egyetem Bölcsészettudományi Karáról (University of Osijek) élő közvetítésben zajlott Teams-en. 2 nap alatt 10 szekcióban 30 előadás hangzott el, valamint sor került plenáris előadásokra és műhelymunkára is.

Részt vettünk a konferencián

Oktatóink rendszeresen részt vesznek az MMO konferencián. Szakmai blogunkban több beszámoló is van, lásd MMO címke. Kaczur Sándor oktatónk publikációs listájában szerepelnek a megjelent szakmai cikkek. Jövőre is szívesen csatlakozunk a rendezvényhez.

2022-ben Sándor két előadást tartott előadást tartott 20-20 percben, amelyek a konferencia „Multimédia-fejlesztések, eredmények, alkalmazások bemutatása” című szekciójába kerültek. Az előadások prezentációit ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára. Négy szerző (köztük én is 🙂 ) együttműködésével elkészült egy 5 és egy 7 oldalas szakmai cikk is, amelyek elérhetők a konferencia kiadványban.

Szakmai cikkeink összefoglalói

Kaczur Sándor, Szegedi Kristóf, Bánki Benedek: Variációk egy témára – Szilassi-poliédert megjelenítő grafikus programok fejlesztése

A számítógépes grafika alkalmazásának egyik speciális területe az, amikor saját fejlesztésű, egyedi grafikus objektumokat jelenítünk meg. Ehhez szükséges néhány előismeret, például: modelltér, különböző koordinátarendszerek, grafikus primitívek, grafikus 2D és 3D leképezések, vetítő algoritmusok, vászontechnika, koordináta- és ponttranszformációk. Ezekre építve a továbblépést a következők megismerése biztosítja: adott programozási nyelv(ek) beépített grafikus képességei, korlátai, sajátosságai, osztálykönyvtárai, kiegészítő API-jai, plugin-jai. Természetesen a grafikus fejlesztés megvalósítása objektumorientált megközelítéssel, életciklus modellben, MVC architekturális tervezési mintával, eseménykezelés alkalmazásával történik – hiszen a korszerű megközelítés és az interakció alapkövetelmény.

Az előadás/cikk ismerteti a feladatspecifikációt, majd egy közös koncepcionális tervet mutat be. A cél a Szilassi-poliéder megjelenítése saját fejlesztésű, egyedi grafikus objektumként. Elkészült többféle fejlesztői környezetben és többféle programozási nyelven néhány implementáció Java és Unity alapon. Az előadás/cikk bemutatja az elkészült esettanulmányokat, elemzi, teszteli, össze is hasonlítja azokat és megfogalmaz néhány továbbfejlesztési lehetőséget.

Kaczur Sándor, Kiss Balázs: Tankockák – Java szoftverfejlesztésben használt interaktív tanulási környezet

A 20. századig három jellegzetes pedagógiai paradigma és ezeknek megfelelő didaktikai rendszer alakult ki: ismeretátadás, szemléltetés és cselekedtetés. Két kérdés merül fel: milyen szerepük van a tanításban ezeknek, illetve milyen a tanítási-tanulási folyamatban a tanár és tanuló szerepe.
A 21. században megjelenő folyamatok – a résztvevők együttműködve közös tudásobjektumot alkotnak és a megosztásra alapozva a hálózatiság élményét kapják – következménye a negyedik didaktikai paradigma, amelynek kulcsszavai: hálózatalapú tanulási formák, konnektivizmus, hipertanulás, e-learning.

Nahalka szerint a „tanítási – tanulási folyamat terve, az értékelési technikái, az elképzelt tanulási folyamat elképzelt logikája, koncepcionális háttere, a munka megszervezésének körülményei, azok a speciális eljárások, amelyeket az elképzelt folyamatban fel kívánunk használni, a gyermekek közötti, valamint a pedagógus – gyermek interakciók jellege, lehetőségei, a felhasznált információhordozók és más eszközök egy rendszert alkotnak”. Ez a negyedik paradigma tanulási környezete, amelynek biztosíthatnak egyéni és csoportos, offline és online tanulást, számítógéppel segített tanulást vagy kommunikációt, valamint aszinkron és szinkron kommunikációt. Prensky megalkotta a „digitális bennszülött” és „digitális bevándorló” fogalmait. Jukes és Dosaj ezekre alapozva meghatározta a „született digitális tanuló” és az „emigráns digitális tanár” jellemzőit.

Az előadás és a cikk egyrészt ismerteti a fenti folyamat tipikus mérföldköveit. Másrészt pozicionálja, hol tart ebben a folyamatban az it-tanfolyam.hu oktatói csapata az e-learning tananyagaik és online tartalmaik tekintetében. Harmadrészt bemutatásra kerül 12 db tankocka – interaktív tanulási környezetként –, amelyek elérhetőek az it-tanfolyam.hu szakmai blogban. Ezek élményszerű tanulást biztosító gamifikációs elemek, interaktív, weboldalakba ágyazható kisalkalmazások, amelyek kiválóan használhatók gyakorlásra, rendszerező összefoglalásra Java szoftverfejlesztés, Java programozás témában.

Kígyókocka grafikus felületen

2024. július 1.2017. augusztus 18. Szerző: Kaczur Sándor

A JavaFX grafikus felhasználói felületének és eseménykezelésének megvalósítása némileg eltér más Java GUI implementációk működésétől, például swing vagy Java3D. Főként animációk során hasznos használni. Megközelítése természetesen objektumorientált: a térbeli objektumok koordinátái, viselkedésük, transzformációkkal valósul meg, és azok is objektumok. A korábban elkészített konzolos kígyókocka programot valósítjuk meg most JavaFX GUI-val.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

A program működése

A program megvalósítása

A start() JavaFX életciklust indító eljárás felépíti a createGridUI() függvényt meghívva a felhasználói felületet (színpad/jelenet JavaFX-ben), beállítva a méreteket, címsort, és meghívja az eseménykezelésért felelős handleRotateButtons() eljárást.

@Override

public void start(Stage stage) {

StackPane root=new StackPane();

root.getChildren().add(createGridUI());

Scene scene=new Scene(root,

DRAW_AREA.getWidth()+160, DRAW_AREA.getHeight()+146);

stage.setTitle("Snake cube 2.0");

stage.setScene(scene);

stage.setResizable(false);

stage.show();

handleRotateButtons();

}

A createGridUI() függvény a grafikus felhasználói felület elemeit paraméterezi (szerepe szerint Factory metódus). Öt elemből álló rács ( GridPane osztályú grid nevű objektum) készül el, amelyre nyilakat tartalmazó nyomógombok (pl.: Button típusú btLeft objektum) kerülnek fel a négy égtájnak megfelelően, valamint rajta középen helyezkedik el a kígyókocka 3D megjelenítését megvalósító objektum. A nyilak entitásai az Unikód karaktertáblából származnak. A kígyókocka objektumot a meghívott createSnakeCube() függvény hozza létre. A Node osztályú snakeCube nevű objektum geometriai transzformációs objektumot is hozzá kell rendelni: ez most a négyirányú forgatást megvalósítani képes névtelen Rotate osztályú objektum lesz. A forgatást 5 paraméterrel célszerű beállítani (van rá megfelelő túlterhelt konstruktor), ezek rendre: szög, X, Y, Z tengely origója és a forgatás tengelye. Az objektumok tulajdonosi hierarchiája swing-es szemmel nézve szokatlannak tűnik, de szemléletben legalább azonos a Java3D és a JavaFX megvalósítás.

private GridPane createGridUI() {

String textStyle="-fx-font-size:32; -fx-text-fill: blue";

btUp.setStyle(textStyle);

btDown.setStyle(textStyle);

btLeft.setStyle(textStyle);

btRight.setStyle(textStyle);

GridPane grid=new GridPane();

grid.setHgap(10);

grid.setVgap(10);

grid.add(btUp, 1, 0);

GridPane.setHalignment(btUp, HPos.CENTER);

grid.add(btLeft, 0, 1);

grid.add(btRight, 2, 1);

grid.add(btDown, 1, 2);

GridPane.setHalignment(btDown, HPos.CENTER);

Pane drawSnakeCube=new Pane();

drawSnakeCube.setPrefSize(

DRAW_AREA.getWidth(), DRAW_AREA.getHeight());

grid.add(drawSnakeCube, 1, 1);

snakeCube=createSnakeCube();

snakeCube.getTransforms().add(

new Rotate(30, ORIGO.getX(), ORIGO.getY(), 0,

new Point3D(1, 1.5, 1.5)));

drawSnakeCube.getChildren().add(snakeCube);

return grid;

}

A createSnakeCube() függvény előállítja a színpadra/jelenetbe kikerülő kígyókockát Node osztályú objektumként. A konstans CUBE tömb egységvektor rendszerben tartalmazza a kígyót alkotó kockák középpontjait. Az első ciklus mindezt nagyítást alkalmazva skálázza. A második ciklus koordináta és pont transzformációk alkalmazásával ( moveToMidPoint: eltolás középre, rotateAroundCenter: forgatás a középpont körül) a kiinduló állapotnak megfelelő méretben és pozícióban elhelyezi a kígyó útvonalát mutató hengerobjektumokat. A konstrukciós és transzformációs műveletek esetén alkalmazkodni kell ahhoz, hogy a JavaFX koordinátarendszerben az X jobbra, az Y lefelé, a Z pedig befelé (a nézőponttól távolodva a térben) növekszik. A matematikai hátteret részletesen most nem magyarázzuk el.

private Node createSnakeCube() {

final int SCALE=100;

final Point3D Y_AXIS=new Point3D(0, 1, 0);

final int[][] CUBE=new int[][] {

{-1, 1, -1}, {0, 1, -1}, {1, 1, -1}, {1, 1, 0},

{1, 1, 1}, {0, 1, 1}, {-1, 1, 1}, {-1, 0, 1},

{-1, -1, 1}, {0, -1, 1}, {0, 0, 1}, {1, 0, 1},

{1, 0, 0}, {1, 0, -1}, {0, 0, -1}, {-1, 0, -1},

{-1, -1, -1}, {-1, -1, 0}, {-1, 0, 0}, {-1, 1, 0},

{0, 1, 0}, {0, 0, 0}, {0, -1, 0}, {0, -1, -1},

{1, -1, -1}, {1, -1, 0}, {1, -1, 1}

};

Point3D[] cube=new Point3D[CUBE.length];

for(int i=0; i<cube.length; i++)

cube[i]=new Point3D(

CUBE[i][0]*SCALE, CUBE[i][1]*SCALE, CUBE[i][2]*SCALE);

Group group=new Group();

for(int i=0; i<cube.length-1; i++) {

Point3D p1=cube[i];

Point3D p2=cube[i+1];

Point3D diff=p2.subtract(p1);

double height=diff.magnitude();

Point3D mid=p2.midpoint(p1);

Translate moveToMidpoint=new Translate(

ORIGO.getX()+mid.getX(), ORIGO.getY()+mid.getY(), mid.getZ());

Point3D axisOfRotation=diff.crossProduct(Y_AXIS);

double angle=Math.acos(diff.normalize().dotProduct(Y_AXIS));

Rotate rotateAroundCenter=

new Rotate(-Math.toDegrees(angle), axisOfRotation);

Cylinder c=new Cylinder(5, height);

c.getTransforms().addAll(moveToMidpoint, rotateAroundCenter);

group.getChildren().add(c);

}

return group;

}

A handleRotateButtons() eljárás a forgatás 4 nyíl eseménykezelésének hozzárendelést végzi el. A nyomógomb objektumok setOnAction() hozzárendelő metódusának paramétere EventHandler funkcionális interfésszel és lambda művelettel működik. A forgatás irányát hozzárendeljük a megfelelő nyomógombhoz. Ez még csak végrendelkezés a jövőre: csak definiáljuk, hogy minek kell majd történnie, ha bekövetkezik az esemény (valamelyik nyílra/nyomógombra kattint a felhasználó).

private void handleRotateButtons() {

btUp.setOnAction((event) -> { rotateSnake(Pos.TOP_CENTER); });

btDown.setOnAction((event) -> { rotateSnake(Pos.BOTTOM_CENTER); });

btLeft.setOnAction((event) -> { rotateSnake(Pos.CENTER_LEFT); });

btRight.setOnAction((event) -> { rotateSnake(Pos.CENTER_RIGHT); });

}

A rotateSnake() eljárás minden nyíl feliratú nyomógombra kattintva reagál a bekövetkezett eseményre. A rotateAxis objektum a forgatás tengelye, a paraméterként átvett direction enum-tól függ, szinkronban azzal a nyomógombbal, amelyikre kattintott a felhasználó.

Ötletek a továbbfejlesztésre

Lehetne többféle irány is, például a négy sarokba átlós vagy mélységi irányú elforgatással.
Beépülhetne többféle transzformáció is, például skálázás (kicsinyítés, nagyítás), eltolás (közelítés, távolítás).
A kígyó útvonalát mutató hengerobjektumok kirajzolásának sorrendjén lehetne változtatni, mert a megjelenítés nem tökéletes. Jelenleg néhány helyzetben lehetetlennek, Escher lehetetlen konstrukcióihoz hasonlónak tűnhet a kígyókocka. Ha a tér mélységéből a nézőpont felé közeledve rajzolnánk ki a hengerobjektumokat, akkor a 3D látvány nem sérülne.

Tudatosan hangsúlyozott MVC-s projektben megoldva a feladatot, a modell rétegben tárolhatnánk többféle kígyókocka megjelenítéséhez és animációjához szükséges adatszerkezetet és transzformációs objektumokat/metódusokat is és a nézet/vezérlő rétegekben biztosíthatnánk ezek közül a kijelölést/kiválasztást menüvel, ikonokkal, eszköztárral, gyorsbillentyűkkel.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Tanfolyamaink orientáló moduljának 9-12. óra: Mesterséges intelligencia alkalmához kapcsolódóan a kígyókocka véletlenszerű előállítása helyett stratégiával rendelkező visszalépéses algoritmust specifikálhatunk és implementálhatunk.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

Hello World! másképpen

2023. augusztus 4.2017. június 20. Szerző: Friedel Attila

Hello World! - Piet programozási nyelven

A programozási nyelvek tanulásának első lépése a „Hello World!” szintaktikájának megismerése, és egyben teszt arra is, hogy megfelelő-e a fejlesztői környezet telepítése, konfigurálása. Megjelenik-e a „Hello World!” a konzolon, felbukkanó ablakban, önálló ablakban, weblapon, üzenetben? Mit kell ezért tenni? Néhány Java példát nézünk erre.

1. Konzolos megoldás

Ez a kiinduló állapot. Futtatva a programot, a konzolon jelenik meg a szöveg.

public class Hello1 {

public static void main(String[] args) {

System.out.println("Hello World!");

}

2. Swing 1. megoldás

Itt felbukkanó párbeszédablakban jelenik meg a szöveg. A JOptionPane ablaka itt önálló, így nincs olyan szülője/tulajdonosa ( null), ahonnan elveheti a fókuszt.

import javax.swing.JOptionPane;

public class Hello2 {

public static void main(String[] args) {

JOptionPane.showMessageDialog(null, "Hello World!");

}

3. Swing 2. megoldás

Itt egy testre szabott JFrame utód készül, alapvető beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik, vagyis gondoskodik saját maga láthatóságáról, fókusz- és eseménykezeléséről (utóbbi 2 most nincs).

import javax.swing.JFrame;

public class Hello3 extends JFrame {

public Hello3() {

setDefaultCloseOperation(EXIT_ON_CLOSE);

setSize(400, 200);

setTitle("Hello World!");

setVisible(true);

}

public static void main(String[] args) {

new Hello3();

}

4. JavaFX megoldás

Itt egy testre szabott Application utód készül, minimál beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik.

import javafx.application.Application;

import javafx.stage.Stage;

public class Hello4 extends Application {

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Hello World!");

primaryStage.show();

}

public static void main(String[] args) {

launch(args);

}

5. Applet megoldás

Böngészőben fut a testre szabott JApplet utód. A weblapon elfoglalt téglalap alakú területen vízszintesen balra és függőlegesen középen jelenik meg a címke komponensben a szöveg.

import javax.swing.JApplet;

import javax.swing.JLabel;

public class Hello5 extends JApplet {

@Override

public void init() {

add(new JLabel("Hello World!"));

}

6. JSP 1. megoldás

Ez egy JSP weboldal automatikusan generált forráskódja. Böngészőben jelenik meg a szöveg.

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

7. JSP 2. megoldás

Ez egy JSP weboldal egyszerű direktívával a h1 címsorban.

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

8. Servlet megoldás

Itt egy szervlet által generált weboldal, amely fixen tartalmazza a szöveget.

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/Hello6"})

public class Hello6 extends HttpServlet {

protected void processRequest(

HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

try(PrintWriter out=response.getWriter()) {

out.println("<!DOCTYPE html>");

out.println("<html>");

out.println("<head>");

out.println("<title>Servlet Hello6</title>");

out.println("</head>");

out.println("<body>");

out.println("<h1>Hello World!</h1>");

out.println("</body>");

out.println("</html>");

}

...

}

9. Atipikus 1. megoldás

„Adatbázisból is lekérdezhető” a szöveg.

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

public class Hello7 {

public static void main(String[] args) {

try {

Class.forName("oracle.jdbc.driver.OracleDriver");

Connection c=DriverManager.getConnection(

"jdbc:oracle:thin:@localhost:1521:xe", "HR", "hr");

ResultSet rs=c.createStatement().executeQuery(

"SELECT 'Hello World!' FROM DUAL");

rs.next();

System.out.println(rs.getString(1));

c.close();

}

catch(SQLException | ClassNotFoundException e) {

e.printStackTrace();

}

10. Atipikus 2. megoldás

Ebben az esetben a Java nyelv által biztosított véletlenszám generáló osztályra támaszkodva állítjuk elő a szöveget. Mivel a random objektum által előállított számok csupán a véletlenség látszatát keltik, de valójában egy algoritmus szerint készülnek, ezért előre teljes pontossággal megjósolható a kimenet. Csupán meg kell találni azt a kezdőértéket, ami után „véletlenül” pont a h, e, l, l, o betűk fognak következni. Megismételve a folyamatot egy másik kezdőértékkel, megkapjuk a w, o, r, l, d betűket is.

import java.util.Random;

public class Hello8 {

static String randomString(int seed) {

Random random=new Random(seed);

StringBuilder word=new StringBuilder();

int i;

while((i=random.nextInt(27))!=0)

word.append((char)('`' + i));

return word.toString();

}

public static void main(String[] args) {

String hello=randomString(-229985452);

String world=randomString(-147909649);

System.out.println(hello+" "+world);

}

A bejegyzéshez tartozó teljes forráskódot – több projektben – ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A példák a Java SE szoftverfejlesztő tanfolyam, a Java EE szoftverfejlesztő tanfolyam és a Java adatbázis-kezelő tanfolyam több alkalmához is kötődnek (kivéve 4. és 5.).

Hivatkozások a témakörben, amelyek más programozási nyelvek példáit is tartalmazzák: