How to generate Perlin Noise on an iPhone

Question

I want to create an animated perlin noise on the iPhone, so I can ultimately do something like this: http://dl.dropbox.com/u/1977230/example.png

I've looked and looked, but can't find anything similar or a way to actually display a Perlin Noise.

I've been told to look at OpenGL ES, but even searching for an example of Perlin noise or a lava/plasma effect doesn't result in anything.

I'd really appreciate some help on this one.

Thanks guys, Andre

Answer 1

Well, first study the Perlin Noise algorithm itself. http://en.wikipedia.org/wiki/Perlin_noise looks just the best place to take off.

Once you have the RGBA data of this effect of yours, the nasty thing begins.

There are two options basically.

• Create a UIView subclass and override the draw:(CGRect) method. Use Converting RGB data into a bitmap in Objective-C++ Cocoa wisely to create a CGImage from your data and and draw that image to the current context in draw.

  CGContextDrawImage(UIGraphicsGetCurrentContext(), <#CGRect rect#>, <#CGImageRef image#>);
  

  If this is a still image, you are ok. if it's animating, this might not be the best solution.

• Get familiar with OpenGL ES on the iPhone. The iPhone SDK's OpenGL ES example is an excellent starting point. Study texture mapping. Once you are familiar with glTexImage2D, use that to load your image.

  The example can be easily extended with the following:

  have these defines:

    GLuint spriteTexture;
    GLubyte *spriteData;  // the perlin noise will be here
    size_t    width, height;
  

  then in the ESRenderer init method create space for the texture:

  - (id) init { ....
  width = 512;  // make sure the texture size is the power of 2
  height = 512;
  
  glGenTextures(1, &spriteTexture);       
  glBindTexture(GL_TEXTURE_2D, spriteTexture);        
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);       
  //free(spriteData); // free this if not used any more
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);   
  glEnableClientState(GL_VERTEX_ARRAY);
  glEnableClientState(GL_TEXTURE_COORD_ARRAY);         
  

  In case the noise is periodically updated, update the texture in the render method

          - (void) render { .....
  glBindTexture(GL_TEXTURE_2D, spriteTexture);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);   
  

Ah, I miss the good old video is on $A000 days :)

Answer 2

I started an open source project on Github that you can use for generating Perlin noise. It supports full 4-dimensional (x,y,z,t) Perlin generation. It also includes a project with a sandbox app to play with texture ideas. http://czgarrett.com/code/2011/05/18/perlin-noise-generator-for-ios.html

Answer 3

Now there is another Perlin noise function for GLSL shader that doesn't require lookup textures: https://github.com/ashima/webgl-noise/tree/master/src. This should work on iPhones.