Hullámok

Ha most azt mondod magadban: „Hát, mindez nagyon szép, de én igazából egy hullámot szeretnék rajzolni”, nos, akkor most eljött ennek az ideje. Már a szükséges munka 90%-át elvégeztük. Amikor egy kört hintáztatunk a szinusz függvény szerint fel és le, akkor nem teszünk mást, mint egy pontot követünk az x-tengelyen a hullámvonal mentén. Nem kell hozzá más, csak egy kis önbizalom, no meg egy for ciklus ahhoz, hogy egymás mellé egy csomó hintázó kört kirajzoljunk.

Ez a hullámos minta felhasználható egy lény testének vagy tartozékának megtervezéséhez, vagy egy lágy felület (pl. víz) szimulálásához.

Itt újból előjön az amplitúdó (a minta magassága) és a periódus hossza. Mivel itt a teljes hullámról van szó, itt a periódus nem az időre vonatkozik, hanem a hullám ciklus hosszát jelenti (pixelben). És hasonlóan az egyszerű rezgőmozgáshoz, itt is számolhatunk a pontos periódus adatok alapján, vagy egyszerűen a szögsebességet alapul véve.

Válasszuk az egyszerűbb megoldást, a szögsebességet! Tudjuk, hogy valamilyen kezdő szögből, szögsebességből és amplitúdóból kell kiindulni:

var angle = 0;
var angleVel = 0{,}2;
var amplitude = 100;

Ezután egy ciklusban végigvesszük az összes xértéket, ahova a hullám egy pontját ki akarjuk rajzolni. Itt most mondjuk azt, hogy ez legyen 24 pixelenként. Ebben a ciklusban három dolgot akarunk csinálni:

Kiszámolni az y-t az amplitúdó és a szög szinusza alapján.
Megrajzolni a kört az (x, y) helyzetben.
Megnövelni a szög értékét a szögsebesség alapján .

for (var x = 0; x <= width; x += 24) {
    // Az y kiszámítása az amplitúdó és a szög szinusza alapján
    var y = amplitude * sin(angle);
    // Kör rajzolása az (x, y) helyzetben
    ellipse(x, y+height/2, 48, 48);
    // Szög növelése a szögsebesség alapján
    angle += angleVel;
}

Nézzük meg, mit kapunk különböző angleVel értékekre:

Figyeld meg, hogy, bár nem számoljuk ki a pontos hullámhosszat, minél magasabb a szögsebesség értéke, annál rövidebb lesz a periódus! Azt is érdemes megfigyelni, hogy ahogy a periódus rövidül, egyre nehezebb kivenni magát a hullámvonalat, ahogy az egyes pontok közötti távolság nő. A beginShape() és endShape() használatával lehetőségünk van a pontokat összekötni egy vonallal. (A programban található megjegyzések: 1. sor: Dan Shiffman, natureofcode.com példája alapján; 15. sor: Ebben a példában megmutatjuk, hogyan lehet a map függvényt használni az amplitúdó helyett; 17. sor: A beginShape és az endShape között az alakzat pontjait a vertex segítségével kell megadni.)

A fenti egy statikus példa. A hullám soha nem változik, nem hullámzik, pedig ezt céloztuk meg. A hullám animálásához még kell egy kicsit trükkösebb lépés. Ráérzésre azt mondanád: „Semmi baj, legyen a szög globális változó, és növeljük meg a draw() ciklusok között!”

Nem rossz gondolat, csak éppen nem működik. Ha megnézed a statikusan rajzolt hullámot, a draw() ciklus végén a jobboldali széle nem egyezik a baloldalival; nem kezdődhet a következő ciklus ott, ahol az előző abbahagyta. Ehelyett szükség van egy változóra, amit arra használunk, hogy megőrizzük annak a szögnek az értékét, ahol a következő ciklust el kell kezdeni. Ez a szög (amit startAngle néven szerepeltettünk) a saját szögsebességével növekszik.

Itt a végeredmény, amibe már beépítettük a kezdőszöget. Próbáld megváltoztatni a különböző számokat, hogy lásd, hogyan változik a hullámvonal! (A programban található megjegyzések: 1. sor: Dan Shiffman, natureofcode.com példája alapján; 12. sor: A hullám mozgatásához minden alkalommal máshol kezdünk; 17. sor: Az y helyzetének kiszámítása az amplitúdó és a szög szinusza alapján; 19. sor: Kör rajzolása az (x, y) helyzetben; 24. sor: Szög növelése a szögsebesség alapján.)

Ez a „Természetes szimulációk" tananyag a Daniel Shiffman által készített „The Nature of Code” alapján készült, a Creative Commons Attribution-NonCommercial 3.0 Unported License szerint.

Szeretnél részt venni a beszélgetésben?

Jelentkezz be

Rendezés:

Még nincs hozzászólás.

Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.