Random terrain and perlin noise with SDL
In this tutorial the goal is to render to a texture and create a random terrain with perlin noise with SDL.
You will need to have a good understanding of texture for this tutorial, if it’s your first time you can see the other tutorial : Display an image with SDL_image
Generating perlin noise with SDL
Noise function
To construct the perlin noise we need to have a 2D noise function, this function will generate a pseudo random number from two number.
To help us with this task we define an arbitrary SEED and a arbitrary array of number HASH. Then the noise function will use the x and y position as index of the HASH array. Here is the source of the HASH.
static const int SEED = 1985;
static const unsigned char HASH[] = {
208,34,231,213,32,248,233,56,161,78,24,140,71,48,140,254,245,255,247,247,40,
185,248,251,245,28,124,204,204,76,36,1,107,28,234,163,202,224,245,128,167,204,
9,92,217,54,239,174,173,102,193,189,190,121,100,108,167,44,43,77,180,204,8,81,
70,223,11,38,24,254,210,210,177,32,81,195,243,125,8,169,112,32,97,53,195,13,
203,9,47,104,125,117,114,124,165,203,181,235,193,206,70,180,174,0,167,181,41,
164,30,116,127,198,245,146,87,224,149,206,57,4,192,210,65,210,129,240,178,105,
228,108,245,148,140,40,35,195,38,58,65,207,215,253,65,85,208,76,62,3,237,55,89,
232,50,217,64,244,157,199,121,252,90,17,212,203,149,152,140,187,234,177,73,174,
193,100,192,143,97,53,145,135,19,103,13,90,135,151,199,91,239,247,33,39,145,
101,120,99,3,186,86,99,41,237,203,111,79,220,135,158,42,30,154,120,67,87,167,
135,176,183,191,253,115,184,21,233,58,129,233,142,39,128,211,118,137,139,255,
114,20,218,113,154,27,127,246,250,1,8,198,250,209,92,222,173,21,88,102,219
};
static int noise2(int x, int y)
{
int yindex = (y + SEED) % 256;
if (yindex < 0)
yindex += 256;
int xindex = (HASH[yindex] + x) % 256;
if (xindex < 0)
xindex += 256;
const int result = HASH[xindex];
return result;
}
Linear interpolation
Another useful function we will need to compute the perlin noise is linear interpolation :
static double lin_inter(double x, double y, double s)
{
return x + s * (y-x);
}
But unfortunately for the algorithm to work we will use a smooth version of the linear interpolation :
static double smooth_inter(double x, double y, double s)
{
return lin_inter( x, y, s * s * (3-2*s) );
}
Final noise function
This is time for creating a final noise function consisting of a first iteration of the perlin noise. We will construct this noise function by using the previous defined functions.
static double noise2d(double x, double y)
{
const int x_int = floor( x );
const int y_int = floor( y );
const double x_frac = x - x_int;
const double y_frac = y - y_int;
const int s = noise2( x_int, y_int );
const int t = noise2( x_int+1, y_int );
const int u = noise2( x_int, y_int+1 );
const int v = noise2( x_int+1, y_int+1 );
const double low = smooth_inter( s, t, x_frac );
const double high = smooth_inter( u, v, x_frac );
const double result = smooth_inter( low, high, y_frac );
return result;
}
Perlin noise function
This time we can define the perlin noise function, we simply iterate over noise2d, and we can control more precisely the amount of noise by ajusting the frequency and the depth.
double perlin2d(double x, double y, double freq, int depth)
{
double xa = x*freq;
double ya = y*freq;
double amp = 1.0;
double fin = 0;
double div = 0.0;
for (int i=0; i<depth; i++)
{
div += 256 * amp;
fin += noise2d( xa, ya ) * amp;
amp /= 2;
xa *= 2;
ya *= 2;
}
return fin/div;
}
Render to a texture
Basic perlin texture
The next step is to render to a texture, for that we need to create a renderer with the flag SDL_RENDERER_TARGETTEXTURE:
SDL_Renderer *renderer = SDL_CreateRenderer(win, -1,SDL_RENDERER_ACCELERATED | SDL_RENDERER_TARGETTEXTURE);
Then we can create the texture with the right RGBA format:
SDL_Texture *texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_RGBA8888, SDL_TEXTUREACCESS_STATIC,WIN_WIDTH, WIN_HEIGHT);
Here the size of the texture is simply the size of the screen:
#define WIN_WIDTH 800
#define WIN_HEIGHT 600
To get the pixel color we will use an object called pixel format, we need to define it with the same format RGBA8888:
SDL_PixelFormat *formatPix = SDL_AllocFormat(SDL_PIXELFORMAT_RGBA8888);
Then we can start generating some perlin noise in a pixel array:
int xOrg = 100000;
int yOrg = 100000;
float freq = 0.7f;
int depth = 5;
int scale = 10;
Uint32 pixels[WIN_WIDTH*WIN_HEIGHT];
for (int y = 0; y < WIN_HEIGHT; y++) {
for (int x = 0; x < WIN_WIDTH; x++) {
float xCoord = xOrg + x / ((float)WIN_WIDTH) * scale;
float yCoord = yOrg + y / ((float)WIN_HEIGHT) * scale;
float value1 = perlin2d(yCoord, xCoord, freq, depth);
Uint8 color = 255*value1;
pixels[y * WIN_WIDTH + x] = SDL_MapRGBA(formatPix, color, color, color, 255);
}
}
After the pixels array is filled with shade of grey computed by the perlin noise function.
We can update the texture accordingly:
SDL_UpdateTexture(texture, NULL, pixels, sizeof(Uint32) * WIN_WIDTH);
The texture should look like this :
To visualize the texture you will need to have an event loop, something simple like this :
while (true) {
SDL_Event e;
if (SDL_WaitEvent(&e)) {
if (e.type == SDL_QUIT) {
break;
}
}
SDL_RenderClear(renderer);
SDL_Rect rect{0, 0, WIN_WIDTH, WIN_HEIGHT};
SDL_RenderCopyEx(renderer, texture, NULL, &rect, 0, NULL, SDL_FLIP_NONE);
SDL_RenderPresent(renderer);
}
Random terrain texture
To generate the terrain we need to pick some colors for that we choose and array of 7 colors of some shade of blue and grey.
SDL_Color pickColor(int val)
{
SDL_Color arrColors[] = {
SDL_Color{40,40,40,255}, // black
SDL_Color{41,54,111,255}, // dark blue
SDL_Color{59,93,201,255},
SDL_Color{64,166,245,255},
SDL_Color{114,239,247,255}, // light blue
SDL_Color{148,175,194}, // light grey
SDL_Color{86,108,134} // dark grey
};
return arrColors[val];
}
After that wee need to use that function when we fill the array of pixels:
for (int y = 0; y < WIN_HEIGHT; y++) {
for (int x = 0; x < WIN_WIDTH; x++) {
float xCoord = xOrg + x / ((float)WIN_WIDTH) * scale;
float yCoord = yOrg + y / ((float)WIN_HEIGHT) * scale;
float value1 = perlin2d(yCoord, xCoord, freq, depth);
SDL_Color col = pickColor((int)(value1*16)%7);
pixels[y * WIN_WIDTH + x] = SDL_MapRGBA(formatPix, col.r, col.g, col.b, 255);
}
}
Full source code for random terrain and perlin noise with SDL
#include <iostream>
#include <math.h>
#include <SDL2/SDL.h>
#include <SDL2_image/SDL_image.h>
#define WIN_WIDTH 800
#define WIN_HEIGHT 600
static const int SEED = 1985;
static const unsigned char HASH[] = {
208,34,231,213,32,248,233,56,161,78,24,140,71,48,140,254,245,255,247,247,40,
185,248,251,245,28,124,204,204,76,36,1,107,28,234,163,202,224,245,128,167,204,
9,92,217,54,239,174,173,102,193,189,190,121,100,108,167,44,43,77,180,204,8,81,
70,223,11,38,24,254,210,210,177,32,81,195,243,125,8,169,112,32,97,53,195,13,
203,9,47,104,125,117,114,124,165,203,181,235,193,206,70,180,174,0,167,181,41,
164,30,116,127,198,245,146,87,224,149,206,57,4,192,210,65,210,129,240,178,105,
228,108,245,148,140,40,35,195,38,58,65,207,215,253,65,85,208,76,62,3,237,55,89,
232,50,217,64,244,157,199,121,252,90,17,212,203,149,152,140,187,234,177,73,174,
193,100,192,143,97,53,145,135,19,103,13,90,135,151,199,91,239,247,33,39,145,
101,120,99,3,186,86,99,41,237,203,111,79,220,135,158,42,30,154,120,67,87,167,
135,176,183,191,253,115,184,21,233,58,129,233,142,39,128,211,118,137,139,255,
114,20,218,113,154,27,127,246,250,1,8,198,250,209,92,222,173,21,88,102,219
};
static int noise2(int x, int y)
{
int yindex = (y + SEED) % 256;
if (yindex < 0)
yindex += 256;
int xindex = (HASH[yindex] + x) % 256;
if (xindex < 0)
xindex += 256;
const int result = HASH[xindex];
return result;
}
static double lin_inter(double x, double y, double s)
{
return x + s * (y-x);
}
static double smooth_inter(double x, double y, double s)
{
return lin_inter( x, y, s * s * (3-2*s) );
}
static double noise2d(double x, double y)
{
const int x_int = floor( x );
const int y_int = floor( y );
const double x_frac = x - x_int;
const double y_frac = y - y_int;
const int s = noise2( x_int, y_int );
const int t = noise2( x_int+1, y_int );
const int u = noise2( x_int, y_int+1 );
const int v = noise2( x_int+1, y_int+1 );
const double low = smooth_inter( s, t, x_frac );
const double high = smooth_inter( u, v, x_frac );
const double result = smooth_inter( low, high, y_frac );
return result;
}
double perlin2d(double x, double y, double freq, int depth)
{
double xa = x*freq;
double ya = y*freq;
double amp = 1.0;
double fin = 0;
double div = 0.0;
for (int i=0; i < depth; i++)
{
div += 256 * amp;
fin += noise2d( xa, ya ) * amp;
amp /= 2;
xa *= 2;
ya *= 2;
}
return fin/div;
}
SDL_Color pickColor(int val)
{
SDL_Color arrColors[] = {
SDL_Color{40,40,40,255}, // black
SDL_Color{41,54,111,255}, // dark blue
SDL_Color{59,93,201,255},
SDL_Color{64,166,245,255},
SDL_Color{114,239,247,255}, // light blue
SDL_Color{148,175,194}, // light grey
SDL_Color{86,108,134} // dark grey
};
return arrColors[val];
}
int main(int argc, const char * argv[]) {
SDL_Init(SDL_INIT_VIDEO | SDL_INIT_EVENTS);
SDL_Window *win = SDL_CreateWindow("Random Terrain", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, WIN_WIDTH, WIN_HEIGHT, 0);
SDL_Renderer *renderer = SDL_CreateRenderer(win, -1,SDL_RENDERER_ACCELERATED | SDL_RENDERER_TARGETTEXTURE);
SDL_PixelFormat *formatPix = SDL_AllocFormat(SDL_PIXELFORMAT_RGBA8888);
SDL_Texture *texture = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_RGBA8888, SDL_TEXTUREACCESS_STATIC,WIN_WIDTH, WIN_HEIGHT); /* Il ne faudra pas oublier les vérifications */
int xOrg = 100000;
int yOrg = 100000;
float freq = 0.7f;
int depth = 5;
int scale = 10;
Uint32 pixels[WIN_WIDTH*WIN_HEIGHT];
for (int y = 0; y < WIN_HEIGHT; y++) {
for (int x = 0; x < WIN_WIDTH; x++) {
float xCoord = xOrg + x / ((float)WIN_WIDTH) * scale;
float yCoord = yOrg + y / ((float)WIN_HEIGHT) * scale;
float value1 = perlin2d(yCoord, xCoord, freq, depth);
SDL_Color col = pickColor((int)(value1*16)%7);
pixels[y * WIN_WIDTH + x] = SDL_MapRGBA(formatPix, col.r, col.g, col.b, 255);
}
}
SDL_UpdateTexture(texture, NULL, pixels, sizeof(Uint32) * WIN_WIDTH);
SDL_FreeFormat(formatPix);
while (true) {
SDL_Event e;
if (SDL_WaitEvent(&e)) {
if (e.type == SDL_QUIT) {
break;
}
}
SDL_RenderClear(renderer);
SDL_Rect rect{0, 0, WIN_WIDTH, WIN_HEIGHT};
SDL_RenderCopyEx(renderer, texture, NULL, &rect, 0, NULL, SDL_FLIP_NONE);
SDL_RenderPresent(renderer);
}
SDL_DestroyTexture(texture);
SDL_DestroyRenderer(renderer);
SDL_DestroyWindow(win);
SDL_Quit();
return 0;
}