Email RSS Feed Twitter Facebook YouTube

Simple Fractal terrains cocos2d

I have always been a fan of procedural graphics, though my head was never able to wrap around the concept of generating images on the fly. This time around, I was sure to use procedural graphics for our upcoming Balloon Loons Escape (Balloon loons escape is our next game release, it has not been officially announced yet, so hush hush).

One of my goals in procedural art is generating hill and terrains. After a couple of google searches around, I figured fractals is a great solution for this..

First , lets go over the definition or fractals.

A geometric pattern that is repeated at ever smaller scales to produce irregular shapes and surfaces that cannot be represented by classical geometry.

Basically Fractals work by taking a set numbers and recursively iterate over them.
At every iteration, we define a mid range, thus increasing the amount of values.
The mid point is then displaced with a random number to add irregular characteristics.

By applying these calculations over and over, we can generate hills such as these.



To help demonstrate the equation further, take a look at the image below:

At each iteration, the number points are added via randomly controlled displacement. Giving the effect of irregularity.


And on to the code! We initially start with the following routine.


NSMutableArray *arr = [NSMutableArray arrayWithCapacity:3];

[arr addObject:[NSNumber numberWithFloat:0]]; //1

[arr addObject:[NSNumber numberWithFloat:0]];

float displacement = 1.0; //2

for (int i = 0; i < 8; i++){ //3

displacement *=.5;

arr = [self a_split:arr displacement:displacement ]; //4


return arr;

<div><span style="text-align: left;">

The code above .

1. Define our endpoints, in this case it is always y1=0 and y2=0

2. We setup our initial displacement = 1. Every loop will halve the displacement further.

3. We loop through our fractal generation 8 times. The more loops, the longer it takes to generate the points.

4. Call the routine to generate the points.

The code for fractal generation is done here:

-(NSMutableArray*) a_split:(NSMutableArray*)arr displacement:(float)displacement {

int max = [arr count];

NSMutableArray *r = [NSMutableArray arrayWithCapacity:4];

for (int i=0; i < max-1; i++) {

float a1 = [[arr objectAtIndex:i+1 ] floatValue];//1

float a2 = [[arr objectAtIndex:i ] floatValue];

float dy = (a1 - a2) / 2.0; //2

float random = ((float)rand()/RAND_MAX) ; //3

float d = displacement * random; //4

[r addObject:[NSNumber numberWithFloat:a2]]; //5

[r addObject:[NSNumber numberWithFloat:a2+dy+d ]];


[r addObject:[arr lastObject]];

return r;


<span style="text-align: left;">

    1. We take a value and its next-sequence number from the list.
    2. We then calculate the midpoint between both values.
    3. Generate a random number
    4. Multiply that random number with the displacement value.
    5. We then append the calculation to the list.

The output should be in floating numbers like these:


These number represent the Y height of our terrain. To get our actual height, we just need to multiply these with our intended terrain height (example 300px).

So how do we use these numbers, well its really up to your creativity. A simple way would be to use PRKit to fill these polygon points with a texture.

For those interested, the code for this is available on Github.

And finally, check out how great the background islands look in Balloon Loons Escape.


Leave a Reply

You must be logged in to post a comment.