V pátém článku věnovaném programovacím jazykům a taktéž knihovnám, které mohou být vhodné pro výuku programování i základů počítačové grafiky, si ukážeme, jakým způsobem je možné v knihovně LÖVE vytvářet zajímavé grafické efekty s využitím takzvaných částicových systémů.
Obsah
1. Programovací jazyky a knihovny určené pro výuku základů počítačové grafiky (5)
2. Demonstrační příklad číslo 12: změna souřadnicového systému
3. Částicové systémy v knihovně LÖVE
4. Vytvoření a vykreslení jednoduchého částicového systému
5. Parametry částicového systému
6. Demonstrační příklad číslo 13: jednoduchý částicový systém
7. Změna základních parametrů částicového systému: gravitace, změna velikosti částic
8. Demonstrační příklad číslo 14: padající globusy
9. Změna vlastností emitoru částic: počáteční směr a rozptyl
10. Demonstrační příklad číslo 15: ohnivý déšť
11. Změna barvy a rotace emitovaných částic
12. Demonstrační příklad číslo 16: výbuch
13. Repositář se zdrojovými kódy dnešních demonstračních příkladů
15. Literatura, v níž jsou zmíněny částicové systémy
1. Programovací jazyky a knihovny určené pro výuku základů počítačové grafiky (5)
V předchozích dvou částech [1] [2] seriálu o programovacích jazycích a taktéž o knihovnách, které mohou být použity pro výuku programování i základů počítačové grafiky, jsme se seznámili se základem tvorby aplikací s využitím programovacího jazyka Lua a knihovny LÖVE. I v dnešní části se budeme věnovat popisu možností nabízených touto knihovnou. Nejprve si řekneme základní informace o práci se souřadnicovým systémem (i když je nutné poznamenat, že v případě 2D grafiky se nejedná o tak důležité téma, jako by tomu bylo u „plnohodnotné“ prostorové grafiky) a druhá část článku bude věnována zmínce o takzvaných částicových systémech (particle systems), které jsou v knihovně LÖVE taktéž k dispozici a s jejichž využitím je možné relativně snadným způsobem vytvářet různé grafické efekty a zejména pak animace.
Obrázek 1: Screenshot z demonstračního příkladu (změna režimu směšování barev), který jsme si popsali minule.
2. Demonstrační příklad číslo 12: změna souřadnicového systému
Minule jsme se mj. zabývali i problematikou vykreslování a otáčení spritů (rastrových obrázků s průhlednými a poloprůhlednými pixely). Připomeňme si, že pro otáčení spritů je možné ve funkci love.graphics.draw předat i úhel otočení, ovšem vlastní otáčení je implicitně prováděno okolo bodu [0,0], tj. střed otáčení leží v levém horním rohu spritu. Většinou však vyžadujeme, aby se sprite otáčel okolo svého středu a nikoli okolo rohu. Problém s rotací obrázků je možné řešit minimálně dvěma způsoby: změnou souřadného systému, popř. použitím dalších parametrů již zmíněné funkce love.graphics.draw. Toto řešení již známe, takže nám zbývá si vysvětlit, jak je možné změnit souřadný systém (a taktéž jak nastavení vrátit do výchozí podoby, což je neméně důležité). Výchozí nastavení souřadného systému je snadno pochopitelné: jeho počátek leží v levém horním rohu okna, x-ová souřadnice roste v horizontálním směru (doprava), y-ová souřadnice ve směru vertikálním (dolů). Měřítko je nastaveno tak, že jednotka odpovídá jednomu pixelu.
Souřadný systém je interně reprezentován transformační maticí, pro jejíž změnu se používají tyto funkce:
| # | Funkce | Význam |
|---|---|---|
| 1 | love.graphics.push | uložení aktuální matice na zásobník (aby se dalo obnovit předchozí nastavení) |
| 2 | love.graphics.pop | obnovení předchozího nastavení ze zásobníku |
| 3 | love.graphics.rotate | rotace o zadaný úhel (v radiánech) |
| 4 | love.graphics.scale | změna měřítka (lze nastavit nezávisle v obou směrech) |
| 5 | love.graphics.translate | posun |
Manipulace se souřadným systémem je v demonstračním příkladu realizována ve funkci drawSprite, jejíž nová podoba vypadá následovně:
--
-- Vykreslení spritu s jeho otočením.
--
function drawSprite(sprite)
-- uložení transformační matice
love.graphics.push()
-- zajištění posunu a rotace
love.graphics.translate(sprite.x, sprite.y)
love.graphics.translate(sprite.image:getWidth()/2, sprite.image:getHeight()/2)
love.graphics.rotate(sprite.r)
love.graphics.translate(-sprite.image:getWidth()/2, -sprite.image:getHeight()/2)
-- vykreslení spritu
love.graphics.draw(sprite.image, 0, 0)
-- obnovení původní transformační matice
love.graphics.pop()
end
V této funkci došlo k několika dílčím transformacím, které se postupně skládají (a to jakoby odzadu, protože nemanipulujeme se spritem, ale s plochou, na kterou se vykresluje):
- Na začátku leží levý horní roh spritu na souřadnicích [0,0]
- Posun počátku na střed otáčení (nyní je střed spritu na souřadnicích [0,0])
- Otočení (okolo počátku, tedy okolo středu spritu)
- Posun zpět
- Posun celého systému tak, aby se sprite vykreslil na pozici [sprite.x, sprite.y]
Obrázek 2: Scéna vykreslená demonstračním příkladem.
Obrázek 3: Otočení spritů po uplynutí určitého časového úseku.
Úplný zdrojový kód tohoto demonstračního příkladu vypadá následovně:
--
-- Knihovna LÖVE
--
-- Dvanáctý demonstrační příklad
--
-- Práce se sprity: zobrazení, otočení změnou souřadnicového systému.
--
-- rozměry okna
width = 450
height = 450
-- objekty představující sprity zobrazené v okně
local sprite1 = {x=100, y=100, r=0, dr=-0.17}
local sprite2 = {x=185, y=80, r=0, dr=0.1}
local sprite3 = {x=300, y=100, r=0, dr=0.05}
--
-- Funkce volaná při inicializaci aplikace.
--
function love.load()
-- načtení standardního fontu a nastavení grafického režimu
local font = love.graphics.newFont(love.default_font, 40)
-- načtení spritů
sprite1.image = love.graphics.newImage("sprite2.png")
sprite2.image = love.graphics.newImage("sprite1.png")
sprite3.image = love.graphics.newImage("sprite2.png")
love.graphics.setMode(width, height, false, false, 0)
-- nastavení fontu
love.graphics.setFont(font)
end
--
-- Vykreslení spritu s jeho otočením.
--
function drawSprite(sprite)
-- uložení transformační matice
love.graphics.push()
-- zajištění posunu a rotace
love.graphics.translate(sprite.x, sprite.y)
love.graphics.translate(sprite.image:getWidth()/2, sprite.image:getHeight()/2)
love.graphics.rotate(sprite.r)
love.graphics.translate(-sprite.image:getWidth()/2, -sprite.image:getHeight()/2)
-- vykreslení spritu
love.graphics.draw(sprite.image, 0, 0)
-- obnovení původní transformační matice
love.graphics.pop()
end
--
-- Tato funkce je volána automaticky při překreslení obsahu
-- okna či obrazovky.
--
function love.draw()
-- vykreslení prvního spritu přes ostatní sprity
drawSprite(sprite1)
-- vykreslení druhého spritu přes ostatní sprity
drawSprite(sprite2)
-- vykreslení třetího spritu přes ostatní sprity
drawSprite(sprite3)
love.graphics.print("Press escape to exit.", 30, 433)
end
--
-- Změna rotace spritů v okně
--
function updateSpriteAngle(sprite)
sprite.r = sprite.r + sprite.dr
end
--
-- Funkce volaná cca 30x za sekundu
--
function love.update(dt)
updateSpriteAngle(sprite1)
updateSpriteAngle(sprite2)
updateSpriteAngle(sprite3)
local delay = 1/30
if dt < delay then
love.timer.sleep(delay - dt)
end
end
--
-- Callback funkce zavolaná při stisku klávesy.
--
function love.keypressed(k)
if k == 'escape' then
love.event.quit()
end
end
--
-- finito
--
3. Částicové systémy v knihovně LÖVE
V knihovně LÖVE nalezneme podporu i pro takzvané částicové systémy (někdy taktéž nazývané systémy částic, anglicky particle systems). Ty pro relativně velké množství aplikací představují velice silnou modelovací a současně i animační techniku určenou pro vytváření takových objektů, které není možné jednoduše reprezentovat svým povrchem nebo objemem. Jedná se například o objekty představující přírodní fenomény jakými jsou sníh, déšť, oheň, mlha, dým nebo tekoucí voda. Velikou předností částicových systémů je fakt, že se s jejich využitím dají jednoduše vytvářet animace. Při použití klasických modelovacích metod se při animování musí použít složitější techniky, například animační křivky, morfing, přímá kinematika nebo inverzní kinematika, což klade zvýšené požadavky jak na vlastní animační systém, tak i na znalosti a schopnosti uživatele obsluhujícího tento systém (i to je však v knihovně LÖVE alespoň částečně podporováno).
Obrázek 4: Výbuch vytvořený pomocí částicových systémů. Rendering tohoto obrázku byl proveden v programu POVRay.
U částicových systémů se při animaci nemusí pracně zadávat jednotlivé polohy částic v čase, ale je možné jednoduše zadat počáteční polohu a rychlost částic (vlastnosti takzvaného emitoru) a poté nechat proběhnout simulaci, ve které se automaticky, podle zadaných fyzikálních vlastností, vypočítají nové polohy částic. Právě z tohoto důvodu jsou částicové systémy oblíbené například mezi tvůrci her. Celý částicový systém je modelován jako soubor určitých základních prvků –částic (particle)– jejichž vlastnosti se průběžně mění v čase. Mezi základní vlastnosti částice patří zejména:
- Poloha částice v rovině či prostoru (v případě knihovny LÖVE v rovině)
- Vektor rychlosti částice (počítá se automaticky)
- Zrychlení částice
- Hmotnost částice
K těmto základním vlastnostem většinou přidáváme i vizuální vlastnosti, například:
- Velikost částice a změna velikosti v čase
- Tvar a způsob vykreslení částice (v knihovně LÖVE se jedná o sprite)
- Barva částice
- Obrázek představující částici
- Průhlednost částice a změna průhlednosti v čase
Obrázek 5: Částicové systémy lze použít i při simulaci tekoucí vody. Rendering tohoto obrázku byl opět proveden v programu POVRay. Výpočet tekoucí vody sice není přesný (voda je reprezentována množstvím jednodušších těles), nicméně po účely počítačové grafiky je přesnost dostačující.
Z důvodu vytváření a provádění animací se zavádí také vlastnost nazvaná „doba života částice“. Při simulacích se po uplynutí doby života částice může částice zrušit nebo se na místě zániku částice mohou generovat další částice (rozpad částice). U složitějších částicových systémů lze reagovat i na vzájemné střety částic nebo interakci částic se svým okolím, tj. s tělesy, které se ve scéně nachází (tyto vlastnosti jsou v systému LÖVE podporovány jen v omezeném rozsahu, zabývat se jimi budeme až příště).
Obrázek 6: Poměrně jednoduchý dvoudimenzionální částicový systém, kde je každá částice reprezentována jediným pixelem.
4. Vytvoření a vykreslení jednoduchého částicového systému
V knihovně LÖVE jsou částicové systémy (v jednom okamžiku jich totiž může existovat větší množství) představovány objektem nazvaným ParticleSystem. Částicový systém lze vytvořit pomocí funkce (konstruktoru) love.graphics.newParticleSystem(image, buffer), která má dva parametry – obrázek, pomocí něhož se vykreslují jednotlivé částice (typicky načtený z externího souboru) a numerickou hodnotu, kterou je možné omezit maximální celkový počet částic v částicovém systému. V závislosti na konfiguraci se totiž může počet částic v různých časových okamžicích lišit; na začátku „života“ systému typicky ještě neexistují žádné částice.
Obrázek 7: Velmi jednoduchý částicový systém vykreslený pomocí systému LÖVE. Vizuální podoba částic je uložena v rastrovém obrázku, na rozdíl od systému zobrazeného na obrázku číslo 7.
Po vytvoření částicového systému a nastavení jeho parametrů (viz též následující kapitolu) lze částicový systém vykreslit do libovolného místa obrazovky (okna) pomocí přetížené funkce love.graphics.draw(particlesystem, x, y), které se předává jak objekt představující částicový systém, tak i souřadnice na obrazovce, ve kterých se má nacházet střed částicového systému. Ovšem již z předchozího dílu víme, že tato funkce má i další volitelné parametry, například otáčení či změnu velikosti. Systém LÖVE neobsahuje žádné další funkce, které by pracovaly s objektem částicového systému, veškeré nastavení jeho parametrů se provádí přímo voláním jeho metod, které jsou popsány v navazující kapitole.
Obrázek 8: Další částicový systém vykreslený pomocí systému LÖVE. Na částice sice nepůsobí gravitační síla, ale jejich radiální zrychlení je záporné, tj. částice jsou přitahovány zpět ke středu částicového systému.
5. Parametry částicového systému
Po vytvoření částicového systému výše popsanou funkcí love.graphics.newParticleSystem() je možné parametry částicového systému takřka libovolně měnit, spouštět či naopak zastavovat simulaci pohybu částic atd. V následující tabulce jsou vypsány některé vybrané metody ovlivňující parametry částicového systému – jedná se o metody použité v následujícím demonstračním příkladu:
| # | Metoda | Význam |
|---|---|---|
| 1 | setEmmisionRate() | Počet částic, které mají být vytvořeny (emitovány) za jednu sekundu. Skutečný počet emitovaných částic však může být nižší, v závislosti na jejich životnosti a maximálním povoleném počtu částic v systému. |
| 2 | setLifetime() | Životnost celého systému částic. Pokud je překročena doba života částicového systému, přestane emitor vytvářet další částice. Lze nastavit i hodnotu -1, která znamená neomezenou dobu života částicového systému. |
| 3 | setParticleLife() | Nastavení průměrné či minimální a maximální doby života částic. Buď je zadán pouze jeden údaj, který je chápán jako průměrná doba života částice v sekundách, nebo údaje dva – minimální a maximální doba, opět specifikovaná v sekundách. |
| 4 | setPosition() | Specifikace souřadnic emitoru částic v rovině. |
| 5 | setDirection() | Nastavení průměrné hodnoty úhlu, pod kterým částice vyletují ze svého zdroje (emitoru). Tento parametr má smysl nastavovat pouze v případě, že je rozptyl menší než 360°. |
| 6 | setSpread() | Nastavení rozptylu vyletujících částic. Standardně je nastaven rozptyl 360°, tj. částice jsou emitovány do všech směrů. |
| 7 | setSpeed() | Zadání průměrné, popř. minimální a maximální počáteční rychlosti částic. |
| 8 | setSizes() | Nastavení relativní velikosti částice popř. její počáteční a koncové velikosti. Částice může v průběhu svého života měnit velikost – růst či se naopak zmenšovat. Hodnota 1 značí původní velikost rastrového obrázku s předlohou částice, 2 dvojnásobnou velikost atd. |
| 9 | start() | Zapnutí emitoru částic. Po zavolání této metody vytváří emitor nové částice až do chvíle, než je zavolána metoda stop(), pause() či až do konce života částicového systému nastaveného metodou setLifetime(). |
| 10 | stop() | Vypnutí emitoru částic a vymazání interního časovače, pomocí kterého se testuje, zda již není překročena doba života částicového systému. |
| 11 | update() | Po zavolání této metody se provede změna stavu částicového systému na základě jeho parametrů, tj. dojde k vytvoření (emitaci) nových částic, ke zrušení částic, které překročily dobu svého života i ke změně dalších parametrů částic (polohy, rychlosti, barvy, tvaru, natočení atd.). Tuto metodu je zapotřebí volat průběžně, ideálně z callback funkce draw() či update(). |
Obrázek 9: Částicové systémy je možné použít i pro vizualizaci různých fyzikálních simulací.
6. Demonstrační příklad číslo 13: jednoduchý částicový systém
Metody objektu typu ParticleSystem, o nichž jsme se zmínili v předchozí kapitole, jsou použity v dalším demonstračním příkladu. Po spuštění tohoto příkladu je částicový systém vytvořen a následně jsou nastaveny jeho základní parametry. Následně aplikace čeká na stisk klávesy [Enter], která slouží pro „nastartování“ částicového systému. Změna stavu částicového systému (vytvoření částic, zrušení starých částic, změna jejich polohy atd.) je provedena přibližně třicetkrát za sekundu v callback funkci love.update. Po stisku klávesy [Esc] se celá aplikace ukončí a zavře se její hlavní okno. Samotný částicový systém je představován emitorem umístěným ve středu obrazovky, z něhož vyletují částice na všechny strany (se stejnou pravděpodobností). Každá částice je představována obrázkem (spritem) globusu, který jsme využili i v demonstračních příkladech popsaných v předchozí části tohoto seriálu.
Podívejme se nyní na zdrojový kód tohoto demonstračního příkladu:
--
-- Knihovna LÖVE
--
-- Třináctý demonstrační příklad
--
-- Použití jednoduchého částicového systému.
--
-- rozměry okna, do něhož se bude provádět vykreslování
width = 450
height = 450
-- asociativní pole představující částicový systém
local particleSystem = nil
-- maximální počet částic v částicovém systému
particleCount = 1000
--
-- Funkce volaná při inicializaci aplikace.
--
function love.load()
-- načtení standardního fontu a nastavení grafického režimu
local font = love.graphics.newFont(love.default_font, 40)
-- inicializace grafického režimu
love.graphics.setMode(width, height, false, false, 0)
-- nastavení fontu
love.graphics.setFont(font)
-- načtení obrázku představujícího jednu částici
local particleImage = love.graphics.newImage("sprite1.png")
-- vytvoření částicového systému s jeho inicializací
particleSystem = love.graphics.newParticleSystem(particleImage, particleCount)
-- kolik nových částic se průměrně vygeneruje za sekundu
particleSystem:setEmissionRate(4)
-- životnost emitoru částic i jednotlivých částic vytvářených v emitoru
particleSystem:setLifetime(-1)
particleSystem:setParticleLife(5)
-- pozice emitoru na obrazovce
particleSystem:setPosition(width/2, height/2)
-- počáteční rychlost částic
particleSystem:setSpeed(70, 100)
particleSystem:setDirection(0)
particleSystem:setSpread(360)
-- další parametry systému
particleSystem:setSizes(1)
particleSystem:stop()
end
--
-- Funkce volaná cca 30x za sekundu
--
function love.update(dt)
-- přepočítat parametry částicového systému
particleSystem:update(dt)
local delay = 1/30
if dt < delay then
love.timer.sleep(delay - dt)
end
end
--
-- Tato funkce je volána automaticky při překreslení obsahu
-- okna či obrazovky.
--
function love.draw()
-- režim vykreslování
love.graphics.setBlendMode("alpha")
-- vykreslení částicového systému na obrazovku
love.graphics.draw(particleSystem, 0, 0)
-- zprávy vypsané na obrazovky
love.graphics.print("Press Enter to start particle emitter.", 30, 415)
love.graphics.print("Press Escape to exit.", 30, 433)
end
--
-- Callback funkce zavolaná při stisku klávesy.
--
function love.keypressed(k)
-- klávesou "Return" či "Enter" se částicový systém zapne
if k == 'return' then
particleSystem:start()
end
-- klávesou "Escape" se aplikace ukončí
if k == 'escape' then
love.event.quit()
end
end
--
-- finito
--
Obrázek 10: Emitor částic je zastaven.
Obrázek 11: Začátek emitování částic.
Obrázek 12: Další stav částicového systému.
7. Změna základních parametrů částicového systému: gravitace, změna velikosti částic
V předchozím demonstračním příkladu byl emitor částic umístěn do středu obrazovky a částice z něj vylétaly ve všech směrech. Navíc na částice ani nepůsobila gravitace. Tento demonstrační příklad je samozřejmě možné upravit, a to hned několika způsoby. Asi největší změnou, která je po spuštění animace ihned viditelná, je nastavení gravitace, která má na částice působit. Vektor gravitační síly je orientován kolmo dolů a jeho velikost je určena metodou particleSystem:setGravity(min) popř. particleSystem:setGravity(min, max). Další ihned viditelnou změnou je nastavení proměnné velikosti částic metodou particleSystem:setSizes(size1, size2, ...size8). Tato metoda je v příkladu volána se dvěma parametry představujícími počáteční a koncovou relativní velikost částic, kde hodnota 1 znamená původní velikost spritu a hodnota (například) 0.25 čtvrtinovou velikost spritu v porovnání s původní velikostí. Ve skutečnosti je však možné metodě particleSystem:setSizes() předat až osm relativních velikostí a vytvořit tak relativně složitý částicový systém.
Obrázek 13: Čtrnáctý demonstrační příklad: počáteční stav.
Obrázek 14: Čtrnáctý demonstrační příklad krátce po svém spuštění.
Obrázek 15: Další stav částicového systému.
8. Demonstrační příklad číslo 14: padající globusy
Změny, které byly popsány v sedmé kapitole, jsou součástí následujícího demonstračního příkladu, jenž po svém spuštění a stisku klávesy [Enter] zobrazí padající globusy. Toto chování je zajištěno jednoduchým způsobem – emitor částic totiž není umístěn v oblasti okna aplikace, ale nad tímto oknem, takže není vidět místo, v němž částice vznikají. Navíc mají částice díky vysoko umístěnému emitoru dostatek času na to, aby na ně začala působit gravitace, takže vzniká efekt patrný na obrázcích 14 a 15. Následuje výpis zdrojového kódu demonstračního příkladu:
--
-- Knihovna LÖVE
--
-- Čtrnáctý demonstrační příklad
--
-- Použití jednoduchého částicového systému na nějž působí gravitace.
--
-- rozměry okna, do něhož se bude provádět vykreslování
width = 450
height = 450
-- asociativní pole představující částicový systém
local particleSystem = nil
-- maximální počet částic v částicovém systému
particleCount = 1000
--
-- Funkce volaná při inicializaci aplikace.
--
function love.load()
-- načtení standardního fontu a nastavení grafického režimu
local font = love.graphics.newFont(love.default_font, 40)
-- inicializace grafického režimu
love.graphics.setMode(width, height, false, false, 0)
-- nastavení fontu
love.graphics.setFont(font)
-- načtení obrázku představujícího jednu částici
local particleImage = love.graphics.newImage("sprite1.png")
-- vytvoření částicového systému s jeho inicializací
particleSystem = love.graphics.newParticleSystem(particleImage, particleCount)
-- kolik nových částic se průměrně vygeneruje za sekundu
particleSystem:setEmissionRate(10)
-- životnost emitoru částic i jednotlivých částic vytvářených v emitoru
particleSystem:setLifetime(-1)
particleSystem:setParticleLife(5)
-- pozice emitoru na obrazovce (mimo obrazovku)
particleSystem:setPosition(width/2, -50)
-- počáteční rychlost částic
particleSystem:setSpeed(70, 100)
particleSystem:setDirection(0)
particleSystem:setSpread(360)
-- další parametry systému: gravitace působící na částice
particleSystem:setGravity(100, 200)
-- velikost částic a relativní změna velikosti v čase
particleSystem:setSizes(1, 0.3)
particleSystem:stop()
end
--
-- Funkce volaná cca 30x za sekundu
--
function love.update(dt)
-- přepočítat parametry částicového systému
particleSystem:update(dt)
local delay = 1/30
if dt < delay then
love.timer.sleep(delay - dt)
end
end
--
-- Tato funkce je volána automaticky při překreslení obsahu
-- okna či obrazovky.
--
function love.draw()
-- režim vykreslování
love.graphics.setBlendMode("alpha")
-- vykreslení částicového systému na obrazovku
love.graphics.draw(particleSystem, 0, 0)
-- zprávy vypsané na obrazovky
love.graphics.print("Press Enter to start particle emitter.", 30, 415)
love.graphics.print("Press Escape to exit.", 30, 433)
end
--
-- Callback funkce zavolaná při stisku klávesy.
--
function love.keypressed(k)
-- klávesou "Return" či "Enter" se částicový systém zapne
if k == 'return' then
particleSystem:start()
end
-- klávesou "Escape" se aplikace ukončí
if k == 'escape' then
love.event.quit()
end
end
--
-- finito
--
9. Změna vlastností emitoru částic: počáteční směr a rozptyl
Připomeňme si, že nejdůležitějšími vlastnostmi emitoru částic je jeho poloha v ploše a dále pak směr „vystřelování“ nových částic. Poloha emitoru je určena jednoduše s využitím metody particleSystem:setPosition(x,y), což jsme si již ostatně ukázali na dvou příkladech. Směr vystřelování nových částic je určen metodami particleSystem:setDirection(úhel) a particleSystem:setSpread(úhel). Zatímco úhel předaný první z těchto metod reprezentuje směr, kterým je emitor obrácen (resp. přesněji řečeno směr jeho osy), tak úhel předaný druhé metodě reprezentuje rozptyl částic. Emitor částic si totiž můžeme představit jako reflektor, který můžeme libovolně natáčet a navíc můžeme měnit i rozptyl paprsku, a to od 0° do celých 360° (jen si musíme dát pozor na to, že velikosti všech úhlů se musí zadávat nikoli ve stupních, ale v radiánech).
Obrázek 16: Patnáctý demonstrační příklad: počáteční stav.
Obrázek 17: Patnáctý demonstrační příklad krátce po svém spuštění.
Obrázek 18: Další stav částicového systému.
10. Demonstrační příklad číslo 15: ohnivý déšť
Změna směru emitování nových částic i rozptylu těchto částic je použita v patnáctém demonstračním příkladu pro vytvoření iluze ohnivého deště. Emitor je umístěn na plochu okna, takže uživatelé mohou vidět místo, kde částice vznikají, Namísto obrázku (spritu) globusu je zde použit poněkud odlišný obrázek, jehož pixely mají rozdílnou průhlednost, což díky nastavení míchacího režimu (blend mode) vede k tomu, že se intenzity barev jednotlivých částic slévají. Podívejme se na zdrojový kód tohoto (dnes již předposledního) příkladu:
--
-- Knihovna LÖVE
--
-- Patnáctý demonstrační příklad
--
-- Použití jednoduchého částicového systému.
--
-- rozměry okna, do něhož se bude provádět vykreslování
width = 450
height = 450
-- asociativní pole představující částicový systém
local particleSystem = nil
-- maximální počet částic v částicovém systému
particleCount = 1000
--
-- Funkce volaná při inicializaci aplikace.
--
function love.load()
-- načtení standardního fontu a nastavení grafického režimu
local font = love.graphics.newFont(love.default_font, 40)
-- inicializace grafického režimu
love.graphics.setMode(width, height, false, false, 0)
-- nastavení fontu
love.graphics.setFont(font)
-- načtení obrázku představujícího jednu částici
local particleImage = love.graphics.newImage("particle.png")
-- vytvoření částicového systému s jeho inicializací
particleSystem = love.graphics.newParticleSystem(particleImage, particleCount)
-- kolik nových částic se průměrně vygeneruje za sekundu
particleSystem:setEmissionRate(100)
-- životnost emitoru částic i jednotlivých částic vytvářených v emitoru
particleSystem:setLifetime(-1)
particleSystem:setParticleLife(3)
-- počáteční rychlost částic
particleSystem:setSpeed(100, 400)
-- další parametry systému: gravitace působící na částice, změna barvy apod.
particleSystem:setGravity(200,500)
particleSystem:setColors(255, 255, 0, 255, 255, 0, 0, 255)
-- pozice emitoru částic, směr generování částic a rozptyl
particleSystem:setPosition(width/2, 50)
particleSystem:setDirection(3.14/2)
particleSystem:setSpread(0.3)
-- další parametry systému: gravitace působící na částice
particleSystem:setGravity(100, 200)
-- velikost částic a relativní změna velikosti v čase
particleSystem:setSizes(1, 0.3)
particleSystem:stop()
end
--
-- Funkce volaná cca 30x za sekundu
--
function love.update(dt)
-- přepočítat parametry částicového systému
particleSystem:update(dt)
local delay = 1/30
if dt < delay then
love.timer.sleep(delay - dt)
end
end
--
-- Tato funkce je volána automaticky při překreslení obsahu
-- okna či obrazovky.
--
function love.draw()
-- režim vykreslování
love.graphics.setBlendMode("alpha")
-- vykreslení částicového systému na obrazovku
love.graphics.draw(particleSystem, 0, 0)
-- zprávy vypsané na obrazovky
love.graphics.print("Press Enter to start particle emitter.", 30, 415)
love.graphics.print("Press Escape to exit.", 30, 433)
end
--
-- Callback funkce zavolaná při stisku klávesy.
--
function love.keypressed(k)
-- klávesou "Return" či "Enter" se částicový systém zapne
if k == 'return' then
particleSystem:start()
end
-- klávesou "Escape" se aplikace ukončí
if k == 'escape' then
love.event.quit()
end
end
--
-- finito
--
11. Změna barvy a rotace emitovaných částic
Dalším důležitým parametrem částicového systému je barva částic, která může být – podobně jako jejich velikost – v čase proměnná. Nastavení barvy se provádí metodou particleSystem:setColors( r1, g1, b1, a1, r2, g2, b2, a2, ..., r8, g8, b8, a8 ). Jak je z hlavičky této funkce patrné, lze jí předat až osm barev, resp. přesněji řečeno osm trojic představujících barvové složky červená+zelená+modrá a průhlednost aplikovanou na všechny pixely. Posledním parametrem částicového systému, o němž se dnes zmíníme, je rotace částic (neboli spin), který lze zadat metodou particleSystem:setSpin(). Předávaný parametr udává úhel rotace částice (v radiánech) za sekundu; tj. čím vyšší hodnota je předána, tím rychleji částice rotují. Oba tyto parametry jsou použity v dnešním posledním příkladu, který po svém spuštění vytvoří tuto animaci:
Obrázek 19: Šestnáctý demonstrační příklad krátce po svém spuštění.
Obrázek 20: Pokračování výbuchu.
Obrázek 21: Pokračování výbuchu.
12. Demonstrační příklad číslo 16: výbuch
Zatímco v patnáctém příkladu byly částice emitovány směrem dolů a vytvářely tak představu ohnivého deště, v příkladu šestnáctém směřuje počáteční vektor pohybu částic směrem nahoru (tj. vlastně proti gravitaci). Tímto způsobem lze vytvořit iluzi výbuchu. Barva částic je proměnná – od sytě žluté po červenou. Částice taktéž rotují, což celou simulaci dále vylepšuje. Opět se podívejme na zdrojový kód, který se příliš neliší od předchozích příkladů:
--
-- Knihovna LÖVE
--
-- Šestnáctý demonstrační příklad
--
-- Použití jednoduchého částicového systému.
--
-- rozměry okna, do něhož se bude provádět vykreslování
width = 450
height = 450
-- asociativní pole představující částicový systém
local particleSystem = nil
-- maximální počet částic v částicovém systému
particleCount = 1000
--
-- Funkce volaná při inicializaci aplikace.
--
function love.load()
-- načtení standardního fontu a nastavení grafického režimu
local font = love.graphics.newFont(love.default_font, 40)
-- inicializace grafického režimu
love.graphics.setMode(width, height, false, false, 0)
-- nastavení fontu
love.graphics.setFont(font)
-- načtení obrázku představujícího jednu částici
local particleImage = love.graphics.newImage("particle.png")
-- vytvoření částicového systému s jeho inicializací
particleSystem = love.graphics.newParticleSystem(particleImage, particleCount)
-- kolik nových částic se průměrně vygeneruje za sekundu
particleSystem:setEmissionRate(200)
-- životnost emitoru částic i jednotlivých částic vytvářených v emitoru
particleSystem:setLifetime(-1)
particleSystem:setParticleLife(3)
-- počáteční rychlost částic
particleSystem:setSpeed(100, 400)
-- další parametry systému: gravitace působící na částice, změna barvy apod.
particleSystem:setGravity(200,500)
particleSystem:setColors(255, 255, 0, 100, 255, 0, 0, 100)
-- pozice emitoru částic, směr generování částic a rozptyl
particleSystem:setPosition(width/2, height)
particleSystem:setDirection(-3.14/2)
particleSystem:setSpread(0.3)
particleSystem:setSpin(1, 3)
-- další parametry systému: gravitace působící na částice
particleSystem:setGravity(100, 200)
-- velikost částic a relativní změna velikosti v čase
particleSystem:setSizes(3, 0.5)
particleSystem:stop()
end
--
-- Funkce volaná cca 30x za sekundu
--
function love.update(dt)
-- přepočítat parametry částicového systému
particleSystem:update(dt)
local delay = 1/30
if dt < delay then
love.timer.sleep(delay - dt)
end
end
--
-- Tato funkce je volána automaticky při překreslení obsahu
-- okna či obrazovky.
--
function love.draw()
-- režim vykreslování
love.graphics.setBlendMode("alpha")
-- vykreslení částicového systému na obrazovku
love.graphics.draw(particleSystem, 0, 0)
-- zprávy vypsané na obrazovky
love.graphics.print("Press Enter to start particle emitter.", 30, 415)
love.graphics.print("Press Escape to exit.", 30, 433)
end
--
-- Callback funkce zavolaná při stisku klávesy.
--
function love.keypressed(k)
-- klávesou "Return" či "Enter" se částicový systém zapne
if k == 'return' then
particleSystem:start()
end
-- klávesou "Escape" se aplikace ukončí
if k == 'escape' then
love.event.quit()
end
end
--
-- finito
--
13. Repositář se zdrojovými kódy dnešních demonstračních příkladů
Všech pět demonstračních příkladů, s nimiž jsme se v dnešním
článku seznámili, bylo uloženo do Git repositáře na GitHubu (https://github.com/tisnik/presentations).
Každý demonstrační příklad obsahuje jak zdrojový kód main.lua,
tak i sprity potřebné pro jeho spuštění:
| # | Příklad | Zdrojový kód |
|---|---|---|
| 1 | example12 | https://github.com/tisnik/presentations/tree/master/love/example12 |
| 2 | example13 | https://github.com/tisnik/presentations/tree/master/love/example13 |
| 3 | example14 | https://github.com/tisnik/presentations/tree/master/love/example14 |
| 4 | example15 | https://github.com/tisnik/presentations/tree/master/love/example15 |
| 5 | example16 | https://github.com/tisnik/presentations/tree/master/love/example16 |
14. Odkazy na Internetu
- Particle Systems From the Ground Up
http://buildnewgames.com/particle-systems/ - Particle Systems
http://natureofcode.com/book/chapter-4-particle-systems/ - Domovská stránka systému LÖVE
http://love2d.org/ - Dokumentace k systému LÖVE
http://love2d.org/wiki/love - Domovská stránka programovacího jazyka Lua
http://www.lua.org/ - Seriál o programovacím jazyku Lua (root.cz):
http://www.root.cz/serialy/programovaci-jazyk-lua/ - Domovská stránka systému LÖVE
http://love2d.org/ - Domovská stránka programovacího jazyka Lua
http://www.lua.org/ - Web o Lieru, Gusanos, GeneRally, Atari atd.
http://karelik.wz.cz/ - Web o Lieru, Gusanos
http://karelik.wz.cz/gusanos.php - GUSANOS
http://gusanos.sourceforge.net/ - GUSANOS Download
http://sourceforge.net/projects/gusanos/ - Lua
http://www.linuxexpres.cz/praxe/lua - Lua
http://cs.wikipedia.org/wiki/Lua - Lua (programming language)
http://en.wikipedia.org/wiki/Lua_(programming_language) - The Lua Programming Language
http://www.tiobe.com/index.php/paperinfo/tpci/Lua.html - Lua Programming Gems
http://www.lua.org/gems/ - LuaForge
http://luaforge.net/ - Forge project tree
http://luaforge.net/softwaremap/trove_list.php - SdlBasic home page
http://www.sdlbasic.altervista.org/main/ - SdlBasic examples
http://nitrofurano.linuxkafe.com/sdlbasic/ - SdlBasic na Wikipedii
http://en.wikipedia.org/wiki/SdlBasic - Simple DirectMedia Layer
http://en.wikipedia.org/wiki/Simple_DirectMedia_Layer - SDLBASIC – The high-level interpreter for all?
http://openbytes.wordpress.com/2008/11/08/sdlbasic-the-high-level-interpreter-for-all/ - FreeBasic home page
http://www.freebasic.net/ - FreeBASIC (Wikipedia EN)
https://en.wikipedia.org/wiki/FreeBASIC - FreeBASIC Wiki
http://www.freebasic.net/wiki/wikka.php?wakka=FBWiki - FreeBASIC Manual
http://www.freebasic.net/wiki/wikka.php?wakka=DocToc - FreeBASIC (Wikipedia CZ)
http://cs.wikipedia.org/wiki/FreeBASIC - The Griffon Legend
http://syn9.thingie.net/?table=griffonlegend - Seriál Letní škola programovacího jazyka Logo
http://www.root.cz/serialy/letni-skola-programovaciho-jazyka-logo/ - Scratch: oficiální stránka projektu
http://scratch.mit.edu/ - Scratch: galerie projektů vytvořených ve Scratchi
http://scratch.mit.edu/galleries/browse/newest - Scratch: nápověda
file:///usr/share/scratch/Help/en/index.html - Scratch: obrazovky nápovědy
file:///usr/share/scratch/Help/en/allscreens.html - Scratch (Wikipedie CZ)
http://cs.wikipedia.org/wiki/Scratch - Scratch (programming language)
http://en.wikipedia.org/wiki/Scratch_(programming_language) - Scratch Modification
http://wiki.scratch.mit.edu/wiki/Scratch_Modification - Scratch Lowers Resistance to Programming
http://www.wired.com/gadgetlab/2009/03/scratch-lowers/ - Snap!
http://snap.berkeley.edu/ - Prostředí Snap!
http://snap.berkeley.edu/snapsource/snap.html - Alternatives to Scratch
http://wiki.scratch.mit.edu/wiki/Alternatives_to_Scratch - Basic-256 home page
http://www.basic256.org/index_en - Basic-256 Language Documentation
http://doc.basic256.org/doku.php - Basic-256 Art Gallery
http://www.basic256.org/artgallery - Basic-256 Tutorial
http://www.basic256.org/tutorials - Why BASIC?
http://www.basic256.org/whybasic - A book to teach ANYBODY how to program a computer (using BASIC)
http://www.basicbook.org/ - BASIC Computer Games (published 1978) - Hammurabi
http://atariarchives.org/basicgames/showpage.php?page=78 - Hamurabi - zdrojový kód v BASICu
http://www.dunnington.u-net.com/public/basicgames/HMRABI
15. Literatura, v níž jsou zmíněny částicové systémy
- Arvo James (editor):
Graphics Gems II,
Academic Press, 1991, ISBN 0-120-54481-9 - Baraff David and Witkin Andrew:
Physically Based Modeling,
SIGGRAPH Course Notes, July 1998, pages B1–C12 - Beer and Johnson:
Vector Mechanics for Engineers: Dynamics,
Sixth Edition, WCB/McGraw-Hill, New York, 1997, ISBN 0-07121-828-9 - Beneš B., Felkel P., Sochor J. and Žára J.:
Vizualizace
Skripta ČVUT, Praha, 1997 - Benson Richard:
Particle Systems,
PowerPoint Presentation, 2002 - Blinn J. F.:
Light Reflection Functions for Simulation of Clouds and Dusty surfaces,
Computer Graphics 16(3), 1982, pages 21–29 - Blinn J. F.:
Jim Blin's Corner: Dirty Pixels,
Morgan Kaufmann, 1996, ISBN 1-558-60455-3 - Foley J., Dam van A., Feiner S., Hughes J.:
Computer Graphics – Principles and Practice (Second Edition),
Addison-Wesley, Reading, Massachusetts, 1990, ISBN 0-201-12110-7 - Hausen Ch.:
Visualization of Vector Fields (2D and 3D),
tutorial, National Laboratory, Los Alamos, 1993 - Intarrante V. and Grosch Ch.:
Visualizing 3D Flow,
IEEE Computer graphics and Applications, July 1998, pages 49–53 - Landers, J.:
The Ocean Spray in Your Face,
Game Developer, Volume 5, Number 7, July 1998, pages 13–15. - Loke T., Tan D., Seah H. and Er M.:
Rendering Fireworks Displays,
IEEE Computer Graphics & Applications, May 1992, Volume 12, Number 3, pages 33–43 - Magnetat-Thalmann B., Thalmann D. and Arnaldi B.:
Computer Animation and Simulation 2000,
Springer Verlag, Wien, ISBN 3-2118-3549-0 - Max N., Crawfis R. and Williams D.:
Visualization for climate Modeling,
IEEE Computer graphics and Applications, July 1993, pages 34–40 - Reeves William T.:
Particle Systems – A Technique for Modeling a Class of Fuzzy objects,
Computer Graphics vol.17, Number 3, July 1983, pages 359–376 - Reeves William T. and Blau R.:
Approximate and Probabilistic Algorithms for Shading and Rendering Structured Particle System,
Proceedings of SIGGRAPH 1985, Volume 19(3), 1985, pages 313–322 - Rhudy R.:
Rendering Particle Systems Fast and Accurately,
(listopad 2002) - Sims K.:
Particle Animation and Rendering Using Data Parallel Computation,
Computer Graphics (SIGGRAPH '90), Volume 24, Number 4, August 1990, pages 405–413 - Stalling D. et al.:
Fast Display of Illuminated Field Lines,
IEEE Transactions of Visualization and Computer Graphics, Volume 3, April 1997, pages 118–127 - Wijk van J.J:
Flow Visualization with Surface Particles,
IEEE Computer Graphics & Applications, July 1993, pages 19–24 - Wijk van J.J, Hin A. J. S., de Leeuw W. C., Post F. H.:
Three Ways to Show 3D Fluid Flow,
IEEE Computer Graphics \& Applications, September 1994, pages 33–39
