01 - Perlin Noise
Random so súvislosťou
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.
Mimochodom, algoritmus objavil Perlin práve pre generovanie textúr pre film Tron (1982)
Dokumentácia
noise()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 ako0.02alebo0.05).
Spusti program a pozri si výsledok.
Experimentuj:
Zmeň hodnotu prírastku
xoff(napr.0.01alebo0.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:
bezier() v referenčnej príručke
Čo sa stane, keď parametre beziérovej krivky budeme generovať pomocou perlin noise? Pohrajte sa s príkladom nižšie:
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
Last updated