07. Náhodný šum

Úloha 1

Urobte skeč, ktorý po celej dĺžke obrazovky nakreslí sínusoidu:

Sínusoida je nakreslená tak, že v cykle ideme s x zľava doprava po obrazovke. Pre každé x vypočítame sínus. Tu napríklad s frekvenciou f = 0.03. Výsledok mapujeme na rozsah výšky obrazovky (0, height) a nakreslíme zvislú bielu čiaru od stredu obrazovky (x, height/2) do tejto hodnoty.

Riešenie

float f = 0.03;

void setup()
{
  size(900, 400);
  stroke(255);
}

void draw()
{
  background(0);
  
  for (int x = 0; x < width; x++)
  {
    float y = map(sin(x*f), -1, 1, 0, height);
    line(x, height/2, x, y);
  }
}

Úloha 2

Upravte skeč tak, aby sínusoida bola len v hornej tretine obrazovky:

Riešenie

float f = 0.03;

void setup()
{
  size(900, 400);
  stroke(255);
}

void draw()
{
  background(0);
  
  for (int x = 0; x < width; x++)
  {
    float y = map(sin(x*f), -1, 1, 0, height/3);
    line(x, height/6, x, y);
  }
}

Oscilácia, náhoda, šum

Oscilácia cez sínus je pravidelné opakovanie a pôsobi niekedy umelo a strojene. Periodické opakovanie začne byť po chvíli nudné a nepôsobí organicky.

Preto často používame náhodnosť pomocou random(). Doplníme teraz do programu ukážku ako vyzerajú úplne random čísla v porovnaní so sínusom:

  for (int x = 0; x < width; x++)
  {
    // Sinus
    float y = map(sin(x*f), -1, 1, 0, height/3);
    line(x, height/6, x, y);
    
    // Random
    float yr = random(height/3, 2*height/3);
    line(x, 3*height/6, x, yr);    
  }

Takáto náhoda je zase až príliš náhodná a divoká. Potrebovali by sme niečo čo je menej divoké, ale zároveň nie je také pravidelné a predvídateľné ako sínus. Tu nám pomôže šum pomocou funkcie noise().

Funkcia noise() funguje podobne ako sínus. Dáme jej ako parameter nejaké číslo a ona vygeneruje výšku v tomto čísle. Sínus generuje pravidelné kopce a doliny. Noise generuje náhodné "pohoria".

Sínus generuje hodnoty od -1 po 1 a tie potom mapujeme na rozsah, aký potrebujeme. Noise generuje hodnoty od 0 po 1, takže mapovanie si podľa toho treba upraviť.

  for (int x = 0; x < width; x++)
  {
    // Sinus
    float y = map(sin(x*f), -1, 1, 0, height/3);
    line(x, height/6, x, y);
    
    // Random
    float yr = random(height/3, 2*height/3);
    line(x, 3*height/6, x, yr);
    
    // Noise
    float yn = map(noise(x*f), 0, 1, 2*height/3, height); 
    line(x, 5*height/6, x, yn);
  }

Tu vidíte porovnanie troch druhov generátorov. Jeden je sin(), ako pravidelné, predvídateľné opakovania. Druhý je random(), ako úplne nekontrolovateľné divoké hodnoty. Tretí je noise(), ktorý akoby kombinoval tieto dva extrémy do náhodnosti, ktorá nie je ani nudne predvídateľná, ani nekontrolovateľne divoká.

Noise budeme používať, keď budeme chcieť plynulé organické zmeny.

Vlastnosti šumu

Na šum pôsobí frekvencia takisto ako na sínus. Vyskúšajte rôzne hodnoty frekvencie f:

f=0.1

f=0.01

Na šum pôsobí aj fázový posun takisto ako na sínus. Pridajte do sínusu aj do noisu ako fázový posun animovaný parameter, napríklad frameCount * 0.03:

    // Sinus
    float y = map(sin(x*f + frameCount*0.03), -1, 1, 0, height/3);
    line(x, height/6, x, y);
    
    // Random
    float yr = random(height/3, 2*height/3);
    line(x, 3*height/6, x, yr);
    
    // Noise
    float yn = map(noise(x*f + frameCount*0.03), 0, 1, 2*height/3, height); 
    line(x, 5*height/6, x, yn);
  }

Šum ako farba

Takisto ako sme ofarbovali pixely pomocou sínusu v minulej lekcii, tak vieme ofarbovať aj pomocou šumu. Tu je základná kostra pre štvorcovú mriežku na obrazovke, do nej budeme dopisovať šum:

float f = 0.2;
int d = 10;
int riadkov, stlpcov;

void setup()
{
 size(400, 400);
 stlpcov = width/d;
 riadkov = height/d;
 colorMode(HSB, 360, 255, 255);
}

void draw()
{
  background(0);
  
  for (int r = 0; r < riadkov; r++)
    for (int s = 0; s < stlpcov; s++)
    {
       // Tu je fill, ten budeme menit
       fill(255);
       
       square(s*d, r*d, d);     
    }
}

V tejto základnej podobe vykreslí biele štvorce:

Ale môžeme fill upraviť tak, aby sme použili noise. Ako parameter do noisu použijeme frekvenciu f a riadku r, v ktorom sa nachádzame:

  for (int r = 0; r < riadkov; r++)
    for (int s = 0; s < stlpcov; s++)
    {
       // Noise
       fill( map(noise(r*f), 0, 1, 0, 60), 255, 255);
       
       square(s*d, r*d, d);     
    }

Noise tu mapujeme na rozsah 0 až 60, čo je v HSB červená až žltá farba. Vznikne tak ohnivý vzor:

Vypnite si čiernu mriežku príkazom noStroke(), už ju nebudeme potrebovať.

Dvojrozmerný šum

Ale pozor. Šum pomocou noise() vie byť aj dvojrozmerný. Ak mu dáme dva parametre, tak bude operovať na mriežke a vygeneruje náhodné "oblaky", alebo škvrny:

  for (int r = 0; r < riadkov; r++)
    for (int s = 0; s < stlpcov; s++)
    {
       // Noise
       fill( map(noise(r*f, s*f), 0, 1, 0, 60), 255, 255);
       
       square(s*d, r*d, d);     
    }

Ako druhý parameter sme použili číslo stĺpca s a opäť frekvenciu f. Dostávame ohnivé oblaky:

A keď pridáme ešte animovanú fázu do oboch parametrov, vznikne pohyblivý požiar:

  for (int r = 0; r < riadkov; r++)
    for (int s = 0; s < stlpcov; s++)
    {
       // Noise
       float p = frameCount * 0.03;
       fill( map(noise(r*f + p, s*f + p), 0, 1, 0, 60), 255, 255);
       
       square(s*d, r*d, d);     
    }

Šum ako smer pohybu

Skombinujeme teraz niekoľko zručností dohromady. Animovaný pohyb, vektory a šum.

Takto vyzerá program, ktorý hýbe objektom v nejakom smere:

PVector pos;
PVector smer;
float rychlost = 3;

void setup()
{
  size(400, 400);
  pos = new PVector(width/2, height/2);
  smer = PVector.random2D();  
}

void draw()
{
  background(0);
  
  pos = PVector.add(pos, PVector.mult(smer, rychlost));
  
  pos.x = (pos.x + width)%width;
  pos.y = (pos.y + height)%height;
  
  circle(pos.x, pos.y, 20);
  
}

Smer zatiaľ nijak nemeníme a objekt sa tak pohybuje stále tým istým smerom:

Ak by sme uhol smerovania generovali náhodne, bude pohyb chaotický:

void draw()
{
  background(0);
  
  pos = PVector.add(pos, PVector.mult(smer, rychlost));
  
  pos.x = (pos.x + width)%width;
  pos.y = (pos.y + height)%height;
  
  circle(pos.x, pos.y, 20);
  
  float uhol = random(0, 2*PI);
  smer = PVector.fromAngle(uhol);
}

Používate tu funkciu PVector.fromAngle(), ktorá pre zadaný uhol vygeneruje vektor ktorý smeruje v tomto uhle.

My už ale vieme, že noise() je to, čo nám dáva organickú náhodnosť. Použijeme teda šum, do ktorého ako animovaný parameter dáme frameCount vynásobený nejakou frekvenciou. Výsledok, ktorý noise() dáva v intervale 0,1 budeme mapovať na celý rozsah možných uhlov 0, 2*PI:

void draw()
{
  background(0);
  
  pos = PVector.add(pos, PVector.mult(smer, rychlost));
  
  pos.x = (pos.x + width)%width;
  pos.y = (pos.y + height)%height;
  
  circle(pos.x, pos.y, 20);
  
  float uhol = map(noise(frameCount * 0.03), 0, 1, 0, 2*PI);
  smer = PVector.fromAngle(uhol);
}

Výsledkom je pekný organický pohyb:

Bonus

Namiesto jedného bodu si vytvoríme celé pole bodov na náhodných pozíciách. Súradnicu z každého bodu zneužijeme na to, že tam uložíme nejaké náhodné číslo. Toto číslo potom pridáme ako fázový posun do noise() pri generovaní uhla.

Ak namiesto krúžkov budeme vykresľovať čiary medzi dvojicami bodmi, tak vznikne cool efekt.

Vykresľovanie čiar sa riadi pravidlami:

• čiara sa kreslí, iba ak je vzdialenosť medzi bodmi menej ako 100

• dĺžka čiary sa mapuje na jej priesvitnosť.