jgs SER 431 Advanced Graphics Lecture 03: Noise Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1 jgs Clouds, Water, Fire, and Marble

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2 jgs How to do that? 1. Load and image from file and use it as texture 2. Generate a texture (and/or a surface) § texture = 2D array of colors § surface = 2D array of altitudes

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3 jgs Procedural texture § Define a 2D function f(s, t) § Sample the function at each texel (texture pixel)

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4 jgs Noise for Textures Marble Fire Clouds Wood

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5 jgs Noise for Surfaces

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6 jgs A Texture in Memory const int TexHeight = 128; const int TexWidth = 128; GLubyte textureImage[TexHeight][TexWidth][3]; Vec3f pixelColor; for( i = 0; i < TexHeight ; i++) { for(j = 0; j < TexWidth; j++) { pixelColor = myFunction (i, j); // a value 0 to 1 per pixel textureImage[i][j][0] = pixelColor[0]*255; // red 0-255 textureImage[i][j][1] = pixelColor[1]*255; // green 0-255 textureImage[i][j][2] = pixelColor[2]*255; // blue 0-255 } }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7 jgs Linear Color Interpolation • Example: Wood colored color table x=0; myFunction1(x, y) // brown "early wood" x=1; myFunction1(x, y) // tan "latewood" • Code Example: Vec3f myFuntion1(float i, float j) { Vec3f earlywood( .. , .. , ..); vec3f latewood ( .. , .. , ..); return( (1-i) * earlywood + i * latewood); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8 jgs Circle Color Interpolation • Example: Wood colored color table x=0; y=0; myFunction2(x, y) // brown "early wood" myFunction2(n, n) // tan "latewood" • Code Example: Vec3f myFunction2(float a, float b) { int length = 3 // #color changes pos = (a*a + b*b) % length); return myFunction1(pos/length); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9 jgs Adding Noise • Add noise to cylinders to warp wood Vec3f myFunction3(float a, float b) { int length = 3 // #color changes pos = (a*a + b*b + noise() ) % length); // -n <= noise <= n return myFunction1(pos/length); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10 jgs Ken Perlin § Perlin Noise (1983) § 1997 Academy Award for Technical Achievement § http://mrl.nyu.edu/~perlin/

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11 jgs Noise Parameters • Amplitude A: power of noise effect A * noise(i, j) • Frequency fa, fb, fc: coarse vs fine detail A * noise(fa * i, fb * j) • Phase pa , pb , pc: location of noise peaks A * noise(i * fa + pa, j * fb + pb)

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13 jgs Noise Function texture(i, j) = // RGB value j i

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14 jgs Create a texture using a noise function // calculate texture pixel by pixel texture (i, j)= colorMap( scale( PerlinNoise (i * 5, j * 5) // -2 to 2 ) ); // scale [-2,2] range to [0,1] float scale(float x) { return (x + 2) / 4; } // interpolates two colors Vec3f colorMap(float a) { Vec3f white = Vec3f(1, 1, 1); Vec3f color = Vec3f(1, 0, 0); return ((1 - a) * white + a * color); }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15 jgs Multi-scale Function Adding Noise over diverse frequencies and amplitudes )) * , * , * ( * ) , , ( 1 r scale t scale s scale noise amplitude r t s f i i i bands i i å = - =

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 16 jgs Example Multi-scale Function double perlinMultiscale(float x, float y) { double total = 0; double scale = 0.005; double p = 2.0; //persistence double n = 7.0; // number of octaves double frequency, amplitude; for (int i = 0; i

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 17 jgs Sum of Absolute Values Adding Noise over absolute values is Good for fire )) , , ( ( ) , , ( 1 r scale t scale s scale noise amplitude r t s f i i i bands i i å = - =

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 18 jgs Marble Principle ))) , , ( ( * sin( ) , , ( 4 1 r scale t scale s scale noise amplitude s r t s f i i i i i å = - = Using sin( ) function plus noise

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 19 jgs Marble Example § MarbleMap is from black to white § Scale scales [min, max] to [0,1] § u and v are in range [0,1] § Does not look that great, maybe a more complex color ramp is needed )) ) 5 . 11 , * 2 * 5 , * 2 * 5 ( * 2 * 6 * 20 sin ( ( ) , ( 4 1 ÷ ø ö ç è æ + = å = - v u PNoise u Scale MarbleMap v u Texture i i i i

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 20 jgs Example Marble //scale scales from [min, max] to [0,1]; //u and v are in the range [0, 1] double perlinMarble(float x, float y) { double total = 0; double scale = 0.005; double p = 2.0; //0.1; //persistence double n = 4.0; // number of octaves double frequency, amplitude; for (int i = 0; i

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21 • Single Band of Noise • Higher Frequency • Single Band of Noise Height Field

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 22 jgs Height Field - Multiscale § Multi-scale Noise § Multiple bands are added together § Start with the highest amplitude and lowest frequency § Amplitude decreases and frequency increases for subsequent bands

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23 • Low Quality • Bad parameter settings • Medium Quality • Better parameter settings • Note the two valleys from the sine function Height Field - Marble

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 24 jgs Implementation of noise function https://github.com/javiergs/SER431/blob/master/Lecture03 class ImprovedNoise { ImprovedNoise() {} double perlinMarble(float x, float y) {} double perlinMultiscale(float x, float y) {} double noise(double x, double y, double z) {} }

Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 25 jgs Homework Review the source code in GitHub It shows how to use noise to create textures, Can you use it to create surfaces?

jgs SER431 Advanced Graphics Javier Gonzalez-Sanchez [email protected] Fall 2018 Disclaimer. These slides can only be used as study material for the class SER431 at ASU. They cannot be distributed or used for another purpose.