IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Kaleidoskop (1. časť)

Kaleidoskop, alebo po slovensky krasohled, je detská hračka vytvárajúci za pomoci 3 zrkadiel a niekoľkých farebných kamienkov pôsobivé náhodné obrazce. Jeho programové riešenie je zaujímavou programátorskú hračkou. Zaujímavou tým, že si už nevystačíme s pravouhlým súradným systémom.

2D grafika

Základom kaleidoskopu sú 3 zrkadlá tvoriace rovnostranný trojuholník. V tomto trojuholníku sa "vytvára scéna". Všetko ostatné čo vidíme sú len odrazy v zrkadlách. Na obrázku vyššie je predvolená trojuholník označený písmenom D (teda "dolný"). Vľavo od neho sa nachádza trojuholník L ("ľavý"), v ktorom sa odráža obraz trojuholníka D zrkadlený podľa spoločnej osi, ktorá má uhol 60 stupňov. Na opačnej strane sa nachádza trojuholník R ("pravý"), sa zrkadliace osou -60 stupňov. Viac vľavo a vpravo sú ďalšie násobné odrazy, trojuholníky LL ("ľavý ľavý"), RR atď.

Obraz kaleidoskopu budeme generovať kreslením základných grafických prvkov ako je čiara, trojuholník, kruh atď. Ako je zrejmé z nákresu, všetky odrazy sú symetrické podľa vodorovnej osi. Horná polku kaleidoskopu preto nemusíme riešiť, po vytvorení dolnej polovičky ju jednoducho skopírujeme do hornej polovice zrkadlovo obrátene. Podobne viacnásobné odrazy LL a RR nemusíme kresliť, získame je preklopením odrazov R a L. Trojuholníky L a R by sme mohli získať otočením trojuholníka D o 60 stupňov, ale táto operácia je jednak pomalá (ak zapneme vyššiu kvalitu konverzie) a jednak dochádza k pozorovatelnému skresleniu hrán. Preto budeme generovať trojuholníky D, L i R.

Pri kreslení obrazcov by sme mohli postupovať tak, že grafické prvky budeme kresliť iba vnútri trojuholníkov, aby nedošlo k presahu do susedných trojuholníkov. Tým by sme ale dosiahli veľmi chabého výsledku, pretože zaujímavé grafické efekty vznikajú až keď vzájomným prekryvom obrazov prvkov. Preto použijeme nový grafický príkaz - maskovanie. Vďaka tejto operácii môžeme najskôr vykresliť grafické prvky voľne do plochy, potom je sňať a až dodatočne zamaskovať priehľadnou farbou tak, že výsledkom bude orezaný trojuholník, ktorý už ľahko vykreslíme.

Ako obvykle začneme vytvorením programu. Pomenujte ho Kaleidoskop. Vymažte prázdne políčko a rozmery hlavnej plochy zmeňte na 14 (šírka) x 10 (výška).

K maskovanie naskenovaných obrazcov budeme potrebovať masku, čo je obrázok, ktorého priehľadná farba zaistí spriehľadnenie bodu obrazu, ostatné farby ponechajú bod obrazu bez zmeny. Pripravíme si obrázok masky. Bude to rovnostranný trojuholník. Jeho výška bude polovica výšky plochy, teda 5 krokov. Potrebujeme vypočítať šírku jednej strany trojuholníka. Ako si môžeme ľahko odvodiť z Pytagorovej vety, šírka jednej strany rovnostranného trojuholníka = výška * 2 / sqrt (3) (sqrt je druhá odmocnina). Výška trojuholníka, vyjadrená v grafických bodoch, je 160 bodov. Tomu zodpovedá šírka 184.7521 bodov. Pre uľahčenie kreslenie zaokrúhlime šírku na párne číslo (potrebujeme kresliť grafiku s prírastkom 1/2 šírky), takže dĺžka jednej strany trojuholníka je 184 bodov, čo je 5.75 kroku.

Pripravíme si preto obrázok s rozmermi 5.75 (šírka) x 5 (výška) krokov, tj. 184 x 160 bodov. Nazvite ho maska. Z ľavého dolného rohu veďte bielu čiaru (nástrojom čiara) k hornému okraju uprostred. Kreslenie musíte vykonať presne, preto si obrázok zväčšite na maximum a na navigáciu používajte súradnice X a Y zobrazované dole vľavo na stavovej lište programu Peter. Súradnice X strede hornej hrany bude 2.88 krokov alebo 92 bodov v závislosti na tom, ako ste nastavili prepínač kroky / body v okne nastavenia rozmerov obrázka. Po nakreslení ľavej a pravej hrany trojuholníka vnútro trojuholníka vylejte bielou farbou nástrojom výplň.

2D grafika

Masku uložte do skupiny obrázky (vo Spoločných premenných). Spolu s ňou si pripravte niekoľko prázdnych obrázkov, ktoré budete potrebovať neskôr - maska vľavo a vpravo, obrázok dole, obrázok vľavo a obrázok vpravo. Obrázky budú generované programovo, preto zostanú teraz prázdne. Aby sme minimalizovali výslednú veľkosť programu, nastavte ich veľkosť na rozmer 1 x 1.

2D grafika

Ďalej budeme potrebovať nejaké pracovné číselné premenné. Šírka plochy / 2 je uschovaná polovica šírky plochy programu, výška plochy / 2 je polovica výšky plochy, dĺžka strany trojuholníka je uschovaná dĺžka strany trojuholníka masky, dĺžka strany trojuholníka / 2 je polovica dĺžky strany.

Okrem toho budeme potrebovať zoznam prvkov, ktoré budú počas animácie vykresľované. Prvkov použijeme 30. Zoznam bude mať položky: súradnice prvku X a Y sú súradnice stredu prvku v kresliacom okne. Otočenie prvku je rotácia prvku okolo jeho stredu. Rýchlosť posunu X a Y je rýchlosť posunu súradníc stredu prvku. Rýchlosť otáčania je rýchlosť zmeny rotácie prvku okolo stredu.

2D grafika

Prejdeme k inicializácii programu. Na začiatku inicializácia vypnite Petríka. Ďalej nastavíme pomocné premenné. Šírka plochy / 2 bude polovica šírky hlavnej plochy (ak sa u prvku šírka plochy neuvedie plocha, použije sa implicitne hlavná plocha programu). Výška plochy / 2 bude polovica výšky hlavnej plochy. Dĺžka strany trojuholníka bude zodpovedať šírke obrázku masky. Dĺžka strany tojúhelníku / 2 je polovica dĺžky strany trojuholníka. Masku vľavo a vpravo získame vertikálnom prevrátením obrázku masky.

2D grafika

Pripravíme východiskové parametre grafických prvkov. Vykonáme to pomocou cyklu, ktorý prejde všetky prvky. Súradnice X a Y budú v rozsahu od 0 po maximálne rozmery kresliace plochy trojuholníka, čo je šírka trojuholníka a výška trojuholníka (zodpovedá polovici výšky plochy). Otočenie prvku bude úplne náhodný uhol v rozsahu 0 až 360 °. Rýchlosť posunu X a Y a rýchlosť otáčania budú náhodné v rozmedzi -0.01 až +0.01.

2D grafika

Prejdeme k hlavnej slučke programu. Základom bude, ako vždy, prvok podmienené opakovanie príkazov. Do podmienky slučky použijeme test znaku z klávesnice bez čakania. Program sa preruší, ak používateľ stlačí nejakú znakovú klávesu (vrátane niektorých riadiacich klávesov ako je napr. Esc). Rozdiel medzi vstupom klávesov, ktorý sme používali v predošlých kapitolách, a vstupom znakov je ten, že vstup klávesov navracia číselné kódy klávesov zodpovedajúce ich poradovému číslu na klávesnici. Kým vstup znakov vracia Jednoznakové text vygenerovaný ovládačom klávesnice podľa aktuálne zvoleného rozloženia znakov na klávesnici. To znamená, že sú zohľadnené národnostné kódy, napríklad to môžu byť znaky s diakritikou. Ak nie je stlačená znaková klávesa, navracia sa prázdny text. Znakové kódy generujú aj niektoré riadiace klávesy ako je Enter, Esc, Tab a backspace.

Časovanie tentoraz použijeme s časom 0.025 sekundy, čím zabezpečíme plynulejšie animáciu ako pri časovaní 0.05 sekundy. Ďalej si v slučke zatiaľ predom pripravíme skupiny generovanie grafiky (kde budeme vykresľovať grafické prvky a snímať ich do obrázkov), vykreslenie kaleidoskopu (vykreslíme naskenované obrázky na obrazovku) a posun prvkov (zaistíme animáciu grafických prvkov).

2D grafika

Začneme sa zaoberať vykresľovaním jednotlivých grafických prvkov. Pripravte si vo Spoločných premenných skupinu vykresľovanie prvkov. Bude obsahovať nasledujúci pracovný premenné. Požadovaný uhol pohľadu určí uhol trojuholníka, ktorý budeme generovať (0 °, + 60 ° a -60 °, samozrejme v radiánoch). Súradnice prvku k vykreslenie X a Y sú súradnice stredu prvku prepočítané na súradnice okna. Premenné sin a cos otočenie prvku sú funkcie sin a cos vypočítané z aktuálneho uhla otočenia prvku.

Funkcia vykreslenie prvkov pre jeden pohľad bude postupne volať vykresľovanie všetkých grafických prvkov v aktuálnom pohľade. Vykresľovať sa bude kruh, kružnica, trojuholník a čiara. Každá vykresľovací funkcie na svojom začiatku najskôr zavolá funkciu príprava parametrov pre jeden prvok, ktorá predpripraví parametre pre kreslenie.

2D grafika

Začneme funkcií pre vykreslenie kruhu. Má vstupné parametre farba kruhu a polomer kruhu. Na začiatku zavolá funkciu príprava parametrov pre jeden prvok, ktorá vypočíta potrebné parametre, tj. Súradnice stredu kruhu X a Y.

2D grafika

Podobná je funkcia vykreslenie kružnice, len má navyše jeden parameter, hrúbka kružnice.

2D grafika

Funkcia vykreslenie trojuholníka používa o niečo viac vstupných parametrov. Jednak je to farba trojuholníka a jednak polomery bodov 1, 2 a 3, čo sú vzdialenosti vrcholov trojuholníka od stredu otáčania. Vrcholy 1 a 2 leží na opačných koncoch od stredu otáčania, preto sa v jednom prípade vypočíta ich súradnice pripočítaním funkcií cos a sin, v druhom prípade odčítaním. Vrchol 3 leží na kolmici ku spojnici vrcholov 1 a 2, preto sa jeho súradnice vypočíta pripočítaním sin a odpočítaním cos.

2D grafika

Funkcia vykreslenie čiary má za vstupné parametre farbu čiary, hrúbku čiary (v bodoch) a vzdialenosti bodov 1 a 2, ktoré udávajú vzdialenosť bodov od stredu otáčania.

2D grafika

.... dokončenie nabudúce


 

Stiahnuť

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

Stiahnuté 232x (134.16 kB)
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