IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

Zátišie pri potoku

Peter sa vydal na ryby, aby si užil ticha a pohody. A my si užijeme trochy matematiky.

Už ste niekedy sedeli pri vode, pozerali sa na vodu a premýšľali, čo robí vodu vodou, prečo sa obraz na vode tak vlnia a ako tento pôsobivý efekt napodobniť?

2D grafika

Najskôr si predstavme hladinu vody ako rovnú plochu. Každému je jasné, že v tejto chvíli sa chová ako zrkadlo, kedy vidíme obraz pozadia presne rovnako, iba "hore nohami". Predstavme si, že hladina sa začne vlniť vlnami rovnobežnými s našim horizontom. Pomyselnej lúče pohľade, vychádzajúce z nášho oka, sa začnú modulovať funkcií sínus okolo pôvodnej strednej polohy, rovnako ako sa moduluje povrch hladiny. Navyše s rastúcou vzdialenosťou sú vlny na pohľad čím ďalej menší.

Všetko, čo teda potrebujeme na simuláciu vodnej hladiny, je vykresľovanie obrazu pozadie po linkách s tým, že linky sú vychyľovanie sínusovou funkciou, ktorej perióda sa s rastúcou vzdialenosťou skracuje a rozkmit zmenšuje.

Založte si nový program s názvom Hladina. Vymažte prázdne políčko priehľadnou farbou, tým zaistíte zviditeľnenie grafické plochy.

Budeme potrebovať obrázok pozadia brehu rieky. Môžete použiť obrázok z príkladu, je k stiahnutiu spolu s ostatnou grafikou a zvuky na konci lekcie. Vložte ho do progamy, môže sa volať pozadí. Obrázok by mal mať šírku 20 krokov a výšku 8 krokov. Ďalej budeme potrebovať zvuky prírody. Opäť môžete použiť tie ukážkové ktoré si stiahnete. A nakoniec obrázok káčera a kačice, ktorí budú plávať po hladine, tiež k stiahnutiu.

Obrázky a zvuky uložte do poľa Spoločných premenných. Príprave zoznam náhodných zvukov. Bude mať len jednu položku - náhodný zvuk. Ďalej pripravte dátové premenné pre program. Prvok ukazovateľ fázy animácie hladiny bude slúžiť k animácii vlnenia hladiny. Prvok vzdialenosť linky od brehu je pomocná premenná používaná pri animácii hladiny pod káčerom a kačicou. Prvok súradnice Y brehu je konštanta vypočítaná na začiatku programu a predstavuje súradnicu Y, od ktorej sa zobrazí obrázok pozadia. Prvok modulácia linky je pomocná pracovná premenná predstavujúca odchýlku clip linky od lineárneho zrkadlového obrazu. Prvok vykresľovanie linka je ukazovateľ súradnice linky počas vykresľovanie liniek hladiny.

Okrem uvedených premenných si pripravte ešte premenné pre kreslenie káčera a kačice. Prvky súradnice X káčera a súradnice Y káčera predstavujú súradnice obrázku káčera v okne. Príznak káčer je v pohybe indikuje, že káčer je viditeľný a pláva po hladine. Príznak káčer smer doprava udáva, či káčer pláva zľava doprava alebo obrátene. Prvok súčasný obrázok káčera je obrázok káčera buď v pôvodnom tvare (zľava doprava) alebo zrkadlovo obrátený (sprava doľava). Obdobné premenné sú pre kačicu.

2D grafika

Na začiatku programu si pripravíme skupinu inicializácia programu. Obsah vidíte na obrázku nižšie. Petríka vypneme, nebudeme ho používať. Uložíme náhodné zvuky do zoznamu náhodných zvukov. Pre ten účel nastavíme počiatočný index zoznamu na 0 a automatickú inkrementácia na 1. Po naplnení zoznamu navrátime automatickú inkrementácia na 0. Pripravíme súradnicu Y brehu ako výšku plochy zníženú o výšku obrázku.

2D grafika

Ďalej v inicializácii spustíme prehrávanie opakovaných zvukov zvukovej kulisy scény (šumenie vody, spev vtákov). U zvukov sa musíme zastaviť podrobnejšie. Chceme, aby zvuky zneli pestro a náhodne. Preto nestačí aby sme si pripravili jednu dlhú nahrávku - nemali by sme ju dostatočne dlhú a veľmi skoro by sme narazili na opakovanie, kedy sa nahrávka už stáva nudnou. Pestrosť preto musíme zabezpečiť opakovaním viac zvukov naraz s tak rozdielnymi dĺžkami, aby sa nahrávky opakovane nestretávali.

Okrem toho, že budeme prehrávať rôzne nahrávky, môžeme využiť ešte jeden trik, vďaka ktorému nemusíme mať nahrávok toľko. Budeme prehrávať niektoré nahrávky viackrát naraz, ale rôznou rýchlosťou, čím môžeme zabrániť pocitu opakovaniu aj u jedinej nahrávky. Navyše pridáme rozdielne nastavenie stereobázy, takže zvuky budú prichádzať z rôznych smerov. Tým sa výrazne zvýši priestorovosť zvuku a zvuková kulisa sa stáva oveľa bohatší. To je základná prednosť stereofónneho zvuku - poslucháči je jedno či niektorý zvuk prichádza zľava a iný sprava, hlavnou prednosťou stereofonie je to, že zvuky sa rozloží do širokého priestoru, čo pôsobí jednak menší pocit únavy sluchu a jednak pocit pestrosti.

Príkazy pre prácu so zvukom pracujú so zvukom tak, že si udržujú zoznam prehrávaných zvukov a akonáhle príde príkaz pre manipuláciu so zvukom (napríklad príkaz pre prehrávanie), prejde sa zoznam prehrávaných zvukov a ak je tento zvuk už prehrávaný, bude sa manipulovať s týmto zvukom (napríklad sa upraví hlasitosť prehrávania). Preto ak chceme prehrávať jeden zvuk viackrát, musíme použiť prvok rozlišovaciu kód (0 až 65535). Je to interná číselná premenná používaná ako doplnkové kritérium pri vyhľadávaní zvuku v zozname prehrávaných zvukov. Ak bude rozlišovaciu kód pred jedným príkazom nastavený na inú hodnotu ako pred iným príkazom, bude sa zvuk považovať za iný zvuk a vďaka tomu môže byť spustené jeho novej prehrávanie.

Posledným príkazom v inicializácii programu je príkaz pre vykreslenie obrázku pozadie od súradnice Y brehu.

Budeme pokračovať hlavné slučkou programu. Použite cyklus podmienené opakovanie príkazov. Do podmienky dajte test prerušenie cyklu stlačením klávesy Esc a na koniec cyklu príkaz pre čakania. Ako bude slučka v závere vyzerať vidíte na nasledujúcom obrázku. Program teraz môžete na skúšku spustiť - mali by ste vidieť v hornej časti plochy obrázok pozadia a malo by byť počuť prehrávanie opakovaných zvukov pozadie scény.

2D grafika

Obsluhu slučky začneme vykresľovaním animované hladiny vody. Pripravte si do slučky cyklus opakovania príkazov s počtom. Cyklus bude slúžiť na kreslenie jednotlivých liniek hladiny vody. Pred cyklom vynulujte premennú vzdialenosť linky od brehu, tá bude ukazovateľom súradnice linky počas vykresľovanie. Za cyklom zvýšte ukazovateľ fázy animácie hladiny o 0.4, čo je rýchlosť, ako rýchlo sa budú pohybovať vlny na vode.

Do počtu opakovaní cyklu vložte súradnicu Y brehu vynásobenú číslom 32. Ako si iste spomínate, jednotkový krok v súradnicovom systéme Petra predstavuje šírku 1 políčka. Každé políčko (predmet) má rozmer 32 x 32 grafických bodov. Preto vynásobením súradnice Y brehu číslom 32 získame počet grafických liniek hladiny, ktorú chceme kresliť.

Na konci cyklu zvýšte ukazovateľ vzdialenosť linky od brehu o konštantu 1/32 (nájdete ju v číselných konštantách Petra), čo je vzdialenosť jedného grafického bodu v súradnicovom systéme Petra. Tým posunieme ukazovateľ clip linky na súradnici ďalšie linky.

2D grafika

Na začiatku cyklu vypočítame premennú modulácie linky, čo je, dá sa povedať, centrálne výpočtové operácie celého programu. Jedná sa o sínusovou odchýlku linky od lineárneho zrkadlového obrazu, teda výchylka vlny tak ako ju vidíme pri pozorovaní vodnej hladiny.

Funkcia bude modulovaná sínusovou funkciou (ako by sa dalo u vĺn na hladine očakávať). Vynásobením koeficientom 0.1 uvedieme rozkmit vĺn do "rozumných" medzí. Argument funkcie sínus bude závisieť jednak na fázu animácie - tým sa zaistí pohyb vĺn v čase - a jednak na vzdialenosti od brehu - tým sa zaistí zvlnenie hladiny od brehu smerom k nám. Ukazovateľ fázy animácie hladiny môžeme jednoducho pripočítať k funkcii závislosti od vzdialenosti od brehu.

Ak by sme dosadili priamo premennú vzdialenosť linky od brehu, vlnila by sa hladina lineárne od brehu. Všetky vlnky by boli rovnako široké. My ale potrebujeme, aby najvzdialenejšie vlnky boli najmenšie a smerom k nám sa zväčšovali. Tejto závislosti najlepšie zodpovedá prevrátená hodnota vzdialenosti linky od brehu. Aby sme zabránili delenie nulou (a pretože pri brehu by boli vlnky až príliš malé) ku vzdialenosti linky pripočítame číslo 1 (inkrementácia). Do čitateľa zlomku uvedieme číslo 200, ktoré udáva šírku vlniek. Ešte doladíme rozloženie vlniek - vlnky sú u brehu malé a blízko nás príliš veľké. Preto vzdialenosť linky od brehu ešte odmocníme, tým zmenšíme prírastky veľkých čísel a vlnky sa tak stanú rovnomernejšie. Vo výsledku teda mocníme vzdialenosť linky číslom -0.5.

2D grafika

Teraz vykreslíme linku hladiny vody. Súradnicu Y linky vypočítame odčítaním vzdialenosti linky od brehu od súradnice Y brehu. Navyše odpočítame šírku 1 grafického bodu, pretože prvý linka musí začínať presne pod spodným okrajom obrázka pozadia. Výška výrezu je 1 grafický bod, teda číslo 1/32. Ak by sme ako súradnicu výrezu Y dosadili priamo premennú vzdialenosť linky od brehu, vzniklo by nám lineárne zrkadlo (tj, pozadia by sa zobrazilo hore nohami). Ku vzdialenosti linky od brehu prirátame moduláciu linky a tým zabezpečíme rozmietanie liniek vlnami a teda animáciu vĺn hladiny. Pretože potrebujeme, aby sa rozkmit vĺn zväčšoval od brehu smerom k nám, modulácii linky ešte vynásobíme vzdialenosťou linky od brehu.

Program môžete vyskúšať, uvidíte vlniace sa vodnú hladinu.

2D grafika

Cyklus kreslenie hladiny na chvíľu opustíme a budeme sa venovať animáciu káčera a kačice. Na začiatok hlavnej slučky pridajte podmienku pohyb káčera. Podľa prepínača káčer je v pohybe sa rozlíšia dva prípady - buď je káčer v pohybe a je potrebné ho animovať alebo je mimo obrazovku a môže byť znovu privolaný na scénu.

2D grafika

Ak je káčer v pohybe, zaistí sa jeho pohyb zmenou súradnice X v závislosti na tom, ktorým smerom sa pohybuje. Ak sa pohybuje smerom doprava, jeho X súradnice sa zvýši o 0.05. Ak súradnice X presiahne hodnotu 21 (stačilo by aj 20), káčer sa dostal mimo obrazovku a vypne sa príznak pohybu. Od tejto chvíle je neaktívny a môže byť znovu vyvolaný. Obdobne sa zaistí obsluha pre smer sprava doľava s tým rozdielom, že od súradnice X sa odpočíta 0.05 a kontroluje sa spodná hranica -5 pre ukončenie animácie (obrázok je 4 široký, 1 je rezerva).

2D grafika

Ak nie je káčer v pohybe, môže sa začať jeho nová animácia. Animácia sa spustí s pravdepodobnosťou 1% (tj. Náhodné číslo je menšie ako 0.01). Pri začatí pohybe sa najskôr nastaví príznak, že káčer je v pohybe. Ďalej sa náhodne určí (s 50% pravdepodobnosťou), či sa bude pohybovať zľava doprava alebo obrátene. Súradnice Y bude náhodná v rozmedzí 4.5 až 5.5. Obrázok káčera má výšku 1.5, pri súradnici 5.5 bude teda jeho horný okraj na súradnici 7.0, čo je horný okraj hladiny. Ak by sme káčera nechali zobrazovať vyššie, museli by sme prekresľovať aj obrázok pozadia, inak ho bude káčer přemazávat.

2D grafika

Podľa príznaku smeru pohybu určíme východzí súradnicu X káčera - buď -5 (vľavo) alebo 21 (vpravo). Zároveň pripravíme súčasný obrázok káčera. Pre smer doprava je to pôvodný obrázok bez zmeny, pre smer doľava je to obrázok zrkadlovo obrátený.

2D grafika

Teraz do hlavnej slučky, ihneď za cyklus pre vykreslenie jednej fázy hladiny, doplňte obsluhu pre vykreslenie káčera. Ak je káčer v pohybe, zobrazí sa súčasný obrázok káčera na aktuálnych súradniciach X a Y. Program môžete skúsiť - mali by ste vidieť náhodne sa objavujúceho káčera, ako pláva po hladine. Zatiaľ bez odrazu na vodnej hladine. Obdobne obslúžte aj kačicu, s tým rozdielom, že jej súradnice Y bude v rozmedzí 3 až 4.

2D grafika

Vrátime sa do slučky vykreslenie jednej fázy hladiny. Doplňte za príkaz pre vykreslenie jednej linky hladiny podmienku, ktorá vykreslí káčera v prípade, že káčer je v pohybe (tj. Zobrazený). Najskôr si pripravíme súradnicu linky v obrázku káčera - od vzdialenosti linky od brehu odpočítame vzdialenosť obrázku káčera od brehu. Namiesto dvojité negácia len zameníme prvky, takže odpočítame súradnicu Y káčera mínus súradnicu Y brehu. K výsledku prirátame vypočítanú moduláciu linky, čím zabezpečíme vlnenie hladiny, a malú korekciu 0.5, ktorá zaistí, že sa obraz káčera zobrazí kúsok vyššie (aby sa s káčerom mierne prekrýval).

2D grafika

Teraz môžeme zobraziť linku odrazu káčera. Overíme, či je vypočítaná linka v obrázku platná

  • tj. či je súradnice nezáporná. Či leží nad horným

okrajom obrázku testovať nemusíme, pretože to overí kresliace funkcie. Ak je súradnice Y nad horným okrajom, kreslenie sa nevykoná. Kým je pod dolným okrajom (tj. Záporná), obmedzí sa na hodnotu 0 a v takom prípade by sa vykreslila linka 0, preto dolnú hranicu testovať musíme.

2D grafika

Program môžete opäť vyskúšať. Pod káčerom by sa mal objaviť jeho vlniace sa odraz vo vode. Obdobne obslúžte aj kreslenie kačice. Kreslenie kačice musí prebiehať vždy neskôr ako kreslenie káčera, pretože jej Y súradnice je nižšie, teda akoby bližšie k nám.

2D grafika

Zostáva posledný úkon - náhodné prehrávanie zvukov. Obsluhu umiestnite do hlavnej slučky, pred obsluhu čakania. Nový náhodný zvuk sa prehrá s 2% pravdepodobnosťou, tj. Ak je náhodné číslo menšie ako 0.02. Nastavením indexu náhodného zvuku na náhodné číslo sa náhodne vyberie niektorý zo zvukov a spustí sa jeho prehriatiu s náhodným vyvážením stereobázy v rozsahu -1 až +1. Tým je program hotový.

2D grafika

 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 263x (1.99 MB)
Aplikácia je vrátane zdrojových kódov v jazyku Petr Lite (sú obsiahnuté v EXE súbore, ktorý možno v programe priamo otvoriť)

 

Všetky články v sekcii
2D grafika
Článok pre vás napísal Panda38
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Programátor C++, WinAPI, ASM.
Aktivity