Pattern Generator

Some time ago I tried to write a generator for random colorful textures for a 3D project. I was inspired by pictures from a video installation seen on TheCoolHunter.

For the original cause the code proved to be useless, though I thought the result to be quite appealing. But judge yourself!

Just click into the flash movie to generate a new random pattern.

Better go fullscreen, as it looks much prettier in fullscreen-mode!

The theory behind: the basis are horizontal stripes. Width and padding can vary. The color varies in random direction, R, G and B on their own. The “cuts” are based on the brightness distribution of a random perlin-noise-map and are scattered randomly around their origin. Finally, the map get multiplied on top of it all, to get more horizontal saturation differences.

The get a reproducable result, I wrote a pseudo-random number generator, as the Math.random() function does not provide a seed functionality, like in other programming languages (as far as I know). Now the random numbers from a specific seed are everytime the same. I you find this useful, download the class here:

Pseudo Random Number Generator


PseudoRandom.seed(1);  // set your seed

PseudoRandom.random(); // get a pseudo random number

I implemented this, so one can be sure to re-generate a specific pattern. Remember, my original intention was to create a texture generator for 3D. Having a possibility to consistently re-generate textures saves you from having the textures saved as images and therefore saves you a lot of space :) You can see this behavious when reloading the page. The patterns should appear in the same order everytime .

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>