21 - Recepty

Kolekcia niekoľkých užitočných postupov, ktoré v kreatívnom programovaní využijete.

Náhodné vetvenie

Doteraz sme vetvenie v programe robili na základe nejakých presných hodnôt. Ak je vek menej ako 18, pozdravíme Ahoj, inak pozdravíme Dobrý deň:

if (vek < 18)
{
  println("Ahoj");
}
else
{
  println("Dobry den");
}

Alebo ak je y súradnica v hornej polovici obrazovky, nastavíme farbu na bielu, inak nastavíme farbu na červenú:

if (y < height/2)
{
  fill(255);
}
else
{
  fill(255, 0, 0);
}

Ale ako by sme urobili napríklad program, ktorý sa bude medzi červenou a bielou farbou rozhodovať nie podľa pozície, ale náhodne? Napríklad, že pri každom stlačení myši sa sa náhodne rozhodne, či nastaví farbu na bielu alebo červenú:

Takto vyzerá kód podprogramu mousePressed, ktorý to robí:

void mousePressed()
{
  float p = random(100);
  if (p < 50)
  {
    fill(255);
  }
  else
  {
    fill(255,0,0);
  }
  circle(mouseX, mouseY, 30);
}

Pri každom kliku myšou si tu vytvoríme pomocnú premennú p, ktorej hodnota je náhodné číslo od 0 do 100. A v podmienke if sa potom program vetví, podľa toho, či táto náhodná hodnota je menšia ako 50 alebo nie.

Úloha 1

Dorobte k tomuto kódu setup a draw a vyskúšajte, že naozaj funguje.

Úloha 2

Čo sa zmení, ak podmienku if prepíšeme takto?

  if (p < 90)

Úloha 3

Vytvorte skeč, ktorý na náhodné súradnice x, y kreslí písmená. Niekedy nakreslí červené X a niekedy biele O:

Zaokrúhľovanie

Čo by sme urobili, keby sme chceli, aby sa X-ká a O-čka z Úlohy 3 negenerovali na úplne náhodné súradnice, ale pekne do mriežky? Povedzme s rozostupmi 30 pixelov?

Ak by sme chceli, aby boli súradnice od seba v pravidelných rozostupoch, musíme z nich urobiť "pekné" čísla. Ak by sme chceli rozostupy 10 pixelov, tak potrebujeme aby sa súradnice x a y zmenili z "nepekných" čísel ako 7, 94 a 19 na "pekné čísla ako 0, 90, 10. Na okrúhle násobky čísla 10. To sa dá urobiť takto:

x = 10 * int(x/10);
y = 10 * int(y/10);

Ak by sme chceli zaokrúhľovať na násobky 30 namiesto násobkov 10, tak len použijeme 30 namiesto 10.

Ak vás zaujíma prečo to funguje, rozbaľte si toto vysvetlenie.

Každú súradnicu vydelíme 10 a vynásobíme 10. To znie ako zbytočná vec, najprv vydeliť a potom vynásobiť tým istým číslom, že? V tomto prípade ale nie. Pretože medzi vydelením a vynásobením tu ešte hodnotu zaokrúhľujeme nadol pomocou int(...).

Napríklad pre x=19 sa najprv urobí x/10, to je 1.9. Potom sa pomocou int(x/10) stane z 1.9 hodnota 1, zaokrúhli sa nadol. A nakoniec sa vynásobením 10 * int(x/10) stane z hodnoty 1 hodnota 10.

Úloha 4

Použite zaokrúhlenie na násobky 30 v programe z Úlohy 3. Tak, aby vaše písmená boli v mriežke:

Úloha 5

Vytvorte program, ktorý bude v mousePressed zaokrúhľovať súradnice myši na násobky 50 a vykreslí na tieto súradnice štvorec o veľkosti 50. Štvorec nech je náhodnej farby.

Tlačidlo na myši

Čo by sme urobili, keby sme chceli Úlohu 5 modifikovať tak, že pri ľavom kliku myšou sa nakreslí červený štvorec a pri pravom kliku myšou sa nakreslí modrý štvorec?

Využijeme novú systémovú premennú. Už poznáme mouseX a mouseY. Teraz použijeme premennú mouseButton, ktorá nadobúda tri rôzne hodnoty: LEFT, CENTER a RIGHT, podľa toho, ktoré tlačidlo na myši bolo stlačené.

Namiesto náhodnej farby fill(random(256), random(256), random(256)) použijeme vetvenie:

  if (mouseButton == LEFT)
  {
    fill(255, 0, 0);  
  }
  else
  {
    fill(0, 0, 255);
  }

Úloha 6

Upravte takto svoj program z Úlohy 5, aby sa nastavila červená farba, ak bolo stlačené ľavé tlačidlo, inak sa nastaví modrá farba:

Stlačený kláves

Podobne ako mouseButton uchováva informáciu, aké tlačidlo myši bolo stlačené, tak systémová premenná key uchováva písmeno, ktoré bolo stlačené.

Úloha 7

Vyskúšajte tento program:

void setup()
{

}

void keyPressed()
{
  println("Bolo stlacene:", key);
}

void draw()
{
 
}

Úloha 8

Vytvorte skeč, ktorý pri stlačení klávesy do stredu obrazovky stlačené písmeno:

Špeciálne klávesy

Čo sa v Úlohe 8 stane, ak stlačíte napríklad šípku? Aký znak sa vykreslí na obrazovku?

Niektoré klávesy nemajú písmená, majú špeciálne kódy. A tie kódy sú uložené v systémovej premennej keyCode.

Takto napríklad vyzerá program, ktorý pri stlačení šípky vľavo vymaže pozadie bielou farbou a pri stlačení šípky vpravo vymaže pozadie čiernou farbou:

void setup()
{
}

void keyPressed()
{
  if (keyCode == LEFT)
  {
    background(255);  
  }  
  
  if (keyCode == RIGHT)
  {
    background(0);
  }
}

void draw()
{
 
}

Hodnoty LEFT a RIGHT sú špeciálne kódy kláves. Ďalšie kódy nájdete v dokumentácii k systémovej premennej keyCode.

Všimnite si tiež, že môžem mať if bez else. A že môžem mať viacero if-ov za sebou.

Úloha 9

Vytvorte skeč, ktorý vnútri draw vykresľuje krúžok o veľkosti 10 na súradnice x,y.

Tieto súradnice sú na začiatku programu nastavené v strede obrazovky.

Napíšte podprogram keyPressedtak, aby sa pri stlačení šípky vpravo zväčšilo x o 10, pri stlačení šípky vpravo zmenšilo x o 10. Vytvoríte tak pohyb krúžku:

Dorobte aj pohyb nahor a nadol pomocou šípok na klávesnici:

Použite recepty v príkladoch

Úloha 10

Vytvorte program, ktorý generuje náhodný čiarový kód. Čiarový kód pozostáva z 20 obdĺžnikov vykreslených vedľa seba. Každý z nich má náhodne buď bielu alebo čiernu farbu.

Na obrázku je naschvál ponechaný stroke, aby ste videli, ako sú vedľa seba obdĺžniky.

Úloha 11

Vytvorte skeč, ktorý v draw vykresľuje náhodne zafarbený krúžok do náhodnej pozície v mriežke s rozostupmi 50 pixelov.

Úloha 12

Vytvorte skeč, ktorý pri pohybe myšou kreslí krúžky o veľkosti, ktorá je uložená v premennej velkost. Premenná velkost začína na hodnote 5. Pri stlačení šípky nahor sa zväčší o 5, pri stlačení šípky nadol sa zmenší o 5.

Úloha 13

Vytvorte skeč, ktorý v draw kreslí do mriežky s rozostupmi 50 pixelov krúžky alebo štvorce. Náhodne sa rozhoduje, či nakreslí krúžok alebo štvorec. Nezávisle na tom sa náhodne rozhoduje, či bude farba biela alebo čierna.

Úloha 14

Vytvorte skeč, ktorý vyplní výšku obrazovky obdĺžnikmi. Počet dielikov je uložený v globálnej premennej pocet a môže sa meniť. Pri stlačení šípky nahor sa pocet zvýši o 1, pri stlačení šípky nadol sa pocet zmenší o 1.

Pri stláčaní šípok sa zväčšuje/zmenšuje počet dielov.