08 - Vykresľovací cyklus

Úloha 1

Vytvorte nový skeč, ktorý vygeneruje náhodnú pozíciu do premenných x,y. Na túto pozíciu vykreslí 50 pixelov veľký krúžok. Pozadie je čierne, farba čiary je biela, krúžok je bez výplne.

Váš obrázok vyzerá inak, lebo je náhodný.

Skeč si nezatvárajte, budeme s ním ďalej pracovať.

Podprogramy setup a draw

Doteraz naše programy robili len statické obrázky. Naučili sme sa pri tom veľa kresliacich príkazov aj ako sa pracuje s premennými a náhodnosťou. Teraz je čas, aby sme sa naučili robiť dynamické vizuály.

Na to ale musí mať náš program inú štruktúru. Program z Úlohy 1 teraz rozdelíme na dva podprogramy.

Váš program z Úlohy 1 vyzerá približne nejak takto, že?

size(400,400);
background(0);

float x = random(400);
float y = random(400);

noFill();
stroke(255);

circle(x,y,50);

Možno máte príkazy trochu v inom poradí, možno máte nastavené iné rozmery okna. Ale na tom teraz nezáleží.

Tento program teraz rozdelíme na 2 bloky - podprogramy. Jeden podprogram sa bude volať setup a v ňom budú príkazy, ktoré niečo nastavujú na začiatku programu. Druhý podprogram sa bude volať draw a v ňom budú príkazy, ktoré niečo vykresľujú.

Pozmeňte svoj program takto:

void setup()
{
  size(400,400);
  background(0);
  noFill();
  stroke(255); 
}

void draw()
{
  float x = random(400);
  float y = random(400);
  circle(x,y,50);  
}

Zatiaľ nemusíte rozumieť tomu, čo znamená void. Berte to ako magické slovo.

Ak používate SK alebo CZ klávesnicu:

• znak { napíšete kombináciouAltGr+B

• znak } napíšete kombináciouAltGr+N

Podprogramy sú ohraničené špeciálnymi zátvorkami { a }. Tým sa oficiálne hovorí zložené zátvorky (curly brackets), ale kto rád programuje, volá ich aj kučeravé alebo brčaté. Tieto zátvorky vymedzujú, ktorá časť kódu patrí do podprogramu setup a ktorá časť kódu patrí do podprogramu draw:

Úloha 2

Spustite takto upravený program a sledujte, čo sa deje.

Náš prvý dynamický skeč.

Program donekonečna vykresľuje krúžky na náhodné miesta. Prečo?

Ako fungujú setup a draw

Všetky naše staršie programy sa zatiaľ vykonali vždy len raz. Jeden príkaz println znamenal jeden výpis do konzoly. Jeden príkaz rect znamenal jeden vykreslený obdĺžnik.

Program rozdelený do podprogramov setup a draw už funguje inak.

Príkazy, ktoré sú zavreté v bloku setup sa vykonajú iba raz. Na začiatku spustenia programu.

Príkazy, ktoré sú zavreté v bloku draw sa vykonávajú stále dokola, kým skeč nestopneme.

Úloha 3

Vytvorte nový prázdny skeč a vytvorte v ňom podprogramy setup a draw. Zatiaľ nech sú prázdne, bez ďalších príkazov.

Úloha 4

Doplňte do vnútra bloku setup príkaz, ktorý vypíše do konzoly "Teraz startujem":

void setup()
{
  println("Teraz startujem");
}

void draw()
{
    
}

Spustite svoj skeč pozrite sa, čo vypísal do konzoly:

Úloha 5

Doplňte do vnútra bloku draw príkaz, ktorý vypíše do konzoly "Teraz prekreslujem":

void setup()
{
  println("Teraz startujem");
}

void draw()
{
  println("Teraz prekreslujem"); 
}

Spustite svoj skeč a pozrite sa teraz, čo sa vypísalo do konzoly:

Úloha 6

Skúste teraz znovu spustiť svoj skeč ale rýchlo ho aj stopnite. Buď tlačidlom ⏹️ alebo cez menu Sketch -> Stop. Pozrite znovu do konzoly a vyskrolujte až navrch:

Koľkokrát sa vykonal príkaz println, ktorý je v bloku setup? Koľkokrát sa vykonal príkaz println, ktorý je v bloku draw?

Do bloku setup budeme písať príkazy, ktoré chceme, aby sa vykonali raz na začiatku. Napríklad size na nastavenie veľkosti okna, background na nastavenie farby pozadia.

Do bloku draw budeme písať príkazy, ktoré sa majú vykonávať napríklad nejakú animáciu.

Úloha 9

Vráťte sa k skeču z Úlohy 2, kde sa vykresľovali náhodné krúžky. Upravte skeč tak, aby farba krúžkov nebola biela, ale náhodná. Do ktorého podprogramu musíme vložiť nastavenie náhodnej farby čiar, aby sa vygenerovala iba raz a potom sa už nemenila?

Náhodná farba. Jedna pre všetkých.

Úloha 10

Upravte skeč tak, aby krúžky nemali všetky rovnakú náhodnú farbu, ale aby každý krúžok mal svoju náhodnú farbu. Do ktorého podprogramu musíme vložiť nastavenie náhodnej farby čiar, aby sa generovala stále nanovo?

Náhodná farba. Pre každého iná.

Úloha 11

Vytvorte nový skeč, ktorý bude na biele pozadie kresliť červené a modré krúžky:

Ak neviete ako, skúste si najprv vyrobiť program po starom, bez podprogramov. Program nech vykreslí na náhodnú pozíciu jeden červený krúžok a na inú náhodnú pozíciu jeden modrý krúžok. A potom tento program rozdeľte na podprogramy setup a draw tak, aby sa generovanie náhodných pozícií a vykresľovanie krúžkov opakovalo donekonečna.