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.

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);  
}

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.

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:

Ú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?

Ú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?

Úloha 11

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