01 - Perlin Noise

História

Dobrý náhodný generátor nám vracia čísla bez ohľadu na vzťah s ich predchodcom. Avšak pri sledovaní prírodných procesov obvykle vidíme plynulé prechody a postupné zmeny.

Práve pre pohyb sa nám oplatí zapojiť Perlin noise ktorý ho premení na plynulejší.

Pomenovaný po svojom objaviteľovi - Ken Perlin.

Používa sa na modelovanie pohybu, textúr a terénu.

Dokumentácia

noisep5xjs

Noise(x) vracia vždy číslo medzi 0 a 1 - a preto ho vždy potrebujeme namapovať na nami očakávaný rozsah - buď prenásobením (* width) alebo pompcou funkcie map()

1D, 2D, 3D Noise

Perlin noise si môžeme predstaviť ako pohyb v priestore noise-u (v oblakoch). Kde pre dané koordináty x (príp. aj y a z) vrátia "nejaké" číslo.

noise(x)

noise(x,y)

noise(x,y,z)

Úloha 1

• Doplň _____:

  • Aký parameter použiješ pre noise()? (Tip: premenná xoff).

  • Aký prírastok nastavíš pre xoff? (Tip: Skús hodnoty ako 0.02 alebo 0.05).

• Spusti program a pozri si výsledok.

• Experimentuj:

  • Zmeň hodnotu prírastku xoff (napr. 0.01 alebo 0.1) a pozoruj, ako sa mení textúra.

  • Skús použiť rôzne hodnoty pre výšku čiar v line().

function setup() {
  createCanvas(400, 200);
  noLoop(); // Vykreslíme len raz
}

function draw() {
  background(220);

  let xoff = 0; // Počiatočný offset pre Perlin noise

  for (let x = 0; x < width; x++) {
    let gray = noise(_____); // Získaj hodnotu noise pre aktuálny offset
    stroke(gray * 255); // Nastav odtieň šedej
    line(x, height / 2 - 10, x, height / 2 + 10); // Nakresli krátku čiaru
    xoff += _____; // Posuň offset o malú hodnotu
  }
}

Úloha 2

Otvor random walker z minulej lekcie a uprav ho tak, aby používal perlin noise. Hint: map()

Úloha 2 (bonus)

Aplikuj perlin noise na farbu.

Mimochodom keď už sme pri perlin noise, používa sa aj na oblaky / terragen / mramor a podobne... k tomu sa ale dostaneme inokedy.

Záver

Náhodilosť a noise má množstvo aplikácií a viete ich vyziť od simulácie pohyby cez generovanie oblakov cez terén, zvuk atď. V tom spočíva mimochodom trocha aj pasca perlin noise - jeho pekný "organický" priebeh láka priam až k nadmernému používaniu. Avšak nateraz si vyskúšajme ešte aplikáciu v niečom vizuálne príťažlivejšom, než náhodne sa hýbanie priestorom.

Bezierové krivky

Poďme si vyskúšať pre vás určite už známu bezrierovú krivku v prostredí p5.js. Dokumentácia k metóde bezier() je tu:

bezierp5xjs

Čo sa stane, keď parametre beziérovej krivky budeme generovať pomocou perlin noise? Pohrajte sa s príkladom nižšie:

p5.js Web Editor

  let x1 = width * noise(t + 15);
  let x2 = width * noise(t + 25);
  let x3 = width * noise(t + 35);
  let x4 = width * noise(t + 45);
  let y1 = height * noise(t + 55);
  let y2 = height * noise(t + 65);
  let y3 = height * noise(t + 75);
  let y4 = height * noise(t + 85);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

Zadania / Recepty

1. Farba

2. Cover art

3. Terrain

Zdoje a ďaľsie informácie

An introduction to Perlin Noise in P5JS and ProcessingGorilla Sun

Noisecompform.net