Lomená čiara

Vytvoríme náhodne sa kresliacu súvislú lomenú čiaru. Lomená čiara pozostáva z krátkych úsečiek, ktoré na seba nadväzujú. V princípe ide o to, ako kresliť náhodné malé čiarky tak, aby ďalšia začínala tam, kde predošlá skončila. A spolu tak vytvoria veľkú lomenú čiaru.

Základný program

Základ je štandardný skeč so setup a draw. Keďže budeme kresliť čiaru, tak si vyrobíme dvojicu súradníc x1,y1 a x2,y2, ktoré budú predstavovať začiatočný bod a koncový bod jedného segmentu:

// Suradnice zaciatku ciary (x1,y1) a konca ciary (x2,y2)
float x1, x2, y1, y2;

void setup()
{
  size(400, 400);
  background(0);
  x1 = width/2;  // Ciara zacina v strede obrazovky
  y1 = height/2;
  stroke(255);
}

void draw()
{
  
}

Nadväzovanie čiar

V každom draw() chceme vykresliť vykreslíme jednu náhodnú čiaru a v ďalšom draw() budeme chcieť, aby ďalšia čiara začínala tam, kde skončila predošlá:

void draw()
{
  // Nahodny koniec ciary
  x2 = random(width);
  y2 = random(height);  
  
  // Vykreslenie ciary
  line(x1,y1,x2,y2);
  
  // Nastavenie zaciatku buducej ciary na koncove suradnice terajsej ciary
  x1 = x2;
  y1 = y2;
}

Takto vykreslená čiara je naozaj lomená, jednotlivé segmenty na seba nadväzujú, ale problém je, že sú až priveľmi náhodné. Skáču po celej obrazovke a sú tým pádom veľmi dlhé:

Súradnice z náhodného okolia

Zatiaľ sme vyberali náhodné súradnice najčastejšie z celej obrazovky:

  x2 = random(width);
  y2 = random(height);  

Ak chceme, aby sa koncové súradnice x2,y2veľmi nevzdialili od súradníc x1,y1, použijeme súradnice x1,y1 v parametroch príkazu random takto:

  x2 = random(x1 - 30, x1 + 30);
  y2 = random(y1 - 30, y1 + 30);

To zabezpečí, súradnica x2 bude vygenerovaná z rozsahu od 30 pixelov menej ako x1 až do 30 pixelov viac ako x2.

Čiara hneď vyzerá organickejšie:

Loopovanie obrazovky

Pri náhodnom pohybe čiary sa deje to, že čiara môže vyliezť von z obrazovky alebo sa stratí úplne. S tým si poradíme tak, že ak čiara vylezie von vľavo, vráti sa sprava. Ak vylezie von dole, vráti sa zhora a tak podobne.

A urobíme to tak pekne, že keď čiara vylezie von o napríklad 23 pixlov, tak ju na opačnom konci obrazovky vrátime o 23 pixlov dovnútra:

void draw()
{
  // Nahodny koniec ciary je v plusminus 30 pixelovom okoli
  x2 = random(x1 - 30, x1 + 30);
  y2 = random(y1 - 30, y1 + 30);  
  
  // Vykreslenie ciary
  line(x1,y1,x2,y2);
  
  // Zaloopovanie obrazovky
  // Pravy okraj
  if (x2 > width)
  {
    x2 = x2 - width;
  }
  
  // Nastavenie zaciatku buducej ciary na koncove suradnice terajsej ciary
  x1 = x2;
  y1 = y2;
}

Loopovanie obrazovky sme umiestnili do kódu ZA vykreslenie súčasnej čiary a PRED to, ako si uložíme koncové súradnice do začiatočných.

Zatiaľ máme loopovanie na pravom okraji obrazovky. Ak je x2 väčšie ako width, tak ho zmenšíme o width. Takže pri šírke obrazovky 400 sa z hodnoty 423 stane 23. Inými slovami, ak je x2 veľmi veľké, tak ho zmenšíme o width.

Naopak, na ľavom okraji obrazovky sa nám stáve, že bude x2 príliš malé, menšie ako 0. Tak tam ho zväčšíme o width:

void draw()
{
  // Nahodny koniec ciary je v plusminus 30 pixelovom okoli
  x2 = random(x1 - 30, x1 + 30);
  y2 = random(y1 - 30, y1 + 30);  
  
  // Vykreslenie ciary
  line(x1,y1,x2,y2);
  
  // Zaloopovanie obrazovky
  // Pravy okraj
  if (x2 > width)
  {
    x2 = x2 - width;
  }
  // Lavy okraj
  if (x2 < 0)
  {
    x2 = x2 + width;
  }
  
  // Nastavenie zaciatku buducej ciary na koncove suradnice terajsej ciary
  x1 = x2;
  y1 = y2;
}

Ak má napríklad x2 hodnotu -17 a je tak mimo ľavého okraja obrazovky, tak po pričítaní width bude jeho hodnota hodnota 17 pixlov vnútri obrazovky, pri jej pravom okraji.

Analogicky si doplňte aj horný okraj (y2 < 0) a dolný okraj (y2 > height).

Zmena farby

Aby čiara nebola taká fádna, ešte pre dekoráciu doplníme náhodnú zmenu farby vždy, keď čiara vylezie mimo obrazovky. Takže do každého prípadu loopovania doplníme príkaz na nastavenie náhodnej farby čiary:

  // Pravy okraj
  if (x2 > width)
  {
    x2 = x2 - width;
    stroke(random(256), random(256), random(256));
  }
  // Lavy okraj
  if (x2 < 0)
  {
    x2 = x2 + width;
    stroke(random(256), random(256), random(256));
  }
  // Dolny okraj
  if (y2 > height)
  {
    y2 = y2 - height;
    stroke(random(256), random(256), random(256));
  }
  // Horny okraj
  if (y2 < 0)
  {
    y2 = y2 + height;
    stroke(random(256), random(256), random(256));
  }

Hotový skeč

Tu si môžete stiahnuť finálny skeč:

700B

random_polyline.zip

archive

Úloha 1

Vyskúšajte, ako sa bude čiara správať, keď jej y2 súradnicu budeme generovať takto:

  y2 = random(y1, y1+30);

Úloha 2

Upravte spôsob náhodného generovania x2,y2 tak, aby vznikali čiary horizontálneho charakteru:

Úloha 3

Upravte spôsob náhodného generovania x2,y2 tak, aby vznikali diagonálne čiary: