I stumbled on a interesting pattern-generating process the other day, called reaction-diffusion. To quote wikipedia: “Reaction–diffusion systems are mathematical models which explain how the concentration of one or more substances distributed in space changes under the influence of two processes: local chemical reactions in which the substances are transformed into each other, and diffusion which causes the substances to spread out over a surface in space.”
There is a lot of different types and variations with names that makes it sound pretty advanced: Turing (which my experiment is based on), Meinhardt, Gray-Scott and Ginzburg-Landau. These patterns can be seen in nature, like dots and stripes on animal fur. There is some java applets (or I’m sure there are flash apps as well) on the web doing this faster and more advanced than mine, but I had some ideas that I wanted to try. More of that in future posts.
Original source can be found here. If you want my haxe-version, just let me know.
I realize all my posts so far has one thing in common. Perlin noise. So why make an exception this time. Remember the post about fire? Make the animation go in the opposite direction, change the colors and some parameters, put in on a texture and mix with blendmodes and filters and you got yourself another element of nature. Water.
When I play first-person-shooters like Just Cause, Far Cry or Uncharted 2 there is one thing that I always remember most. Water-effects. I forget about the story and just play around with it. I hope you will remember this one 😉
The cliff and water is simple models created in 3D Studio Max, then imported as a scene into Away3D with the Loader3D. The materials are converted to PhongMaterials. I tried to use a normal-map and a pixelbender-material on the cliff to get a wet look, but it was to CPU-intense together with the other effects, so that had to go.
The trick to make the water refract the light was to render the view twice. One with the waterfall alone and with just black and red colors. And another pass with the final result. Then the first pass is used to create a displacementMapFilter on the view. It’s quite slow, but I couldn’t resist to activate it by default when the visual result is much better. Try to switch it off to see the difference in quality and speed.
Update: I strongly recommend using Flash player 10.1 with this one, it’s a huge difference in speed! And how come Chrome is so damn faster than the rest? I added a slider for the texture resolution as well, so that performance can be adjusted. Lame, I know…
I found the texture for the cliff over here.
Procedural graphics is surely my favorite. The concept of create visual things with just code. Really comes in handy when your a crappy designer and still want to do visual stuff. Here you can see the result of yet another experiment on this track. It’s a eye-shader for generating procedural eyes. The 3D-engine of choice is Away3d. I use a CompositeMaterial consisting a PhongMultiPassMaterial and a SphericEnvMapPBMaterial (for the environment reflections). The bitmap that is used in the material is generated by a haxe-swf that is loaded in runtime. Just as previous experiments. The same bitmap is used as a base for the spherical normalmap. That adds a nice displacement to the surface. The iris is quite simple and could have more layers and complexity to get a more realistic pattern. Anyway, the texture looks something like this.
When wrapping this on a sphere it will fit seamlessly . I know, the blood-vessels aren’t that great. Perhaps I should use lines with turbulence instead.
Design your own eye
Here is a tool where you can try the different settings and create a unique eye.
This “mars-attacks”-demo follows the mouse. To get two eyes I duplicates the output from the view. Thats why he can’t look at his nose (if existed). Notice that he is reacting to light, sort of…
Last time I made some wood. Now let’s burn that up. Still experimenting with the same 3D perlin noise as before, but this time animated. When you can take control over each pixel of noise it’s easy to add extra rules to form the shape of the noise such as turbulence based on y-value or an offset animation along the z-axis to gain some depth. Applying “ridges” to the perlin noise (invert all negative values when the range is between -1 to 1) makes the flames look more interesting. The bitmap generated is just 80×80 and 2 octaves of Perlin noise, so the possibilities are quite limited.
Click here or on the fireplace above to get warm.
If you want to see how it works, here is a zip with sources for a simple example. No graphics or UI is included though. The noise is compiled with Haxe, but a swf is included if you want to skip that.
See this post for additional credits.
My next track on my journey through procedural domains goes through the woods. Not so revolutionary maybe, but I haven’t seen it in flash before and that’s enough challenge for me. And it’s a good way to learn the basics of textures. Here is the first tests:
For the sphere, I use the spherical mapping from the previous post. The cube has one texture for each side. One benefit if using a 3D procedural texture is that the wrapping is accurate and it looks like a block of massive wood. I can also use the optimized 3D Perlin noise as turbulence to make the grains look more natural.
Simple tree texture designer
I have added a few parameters to change, but several features could be added like: more object types, ring-types (tri,saw, sine), base texture blending.
The images in the last post was created with this tool. I use the heightmap to create a normal map with a excellent class called SphericalDispToNormConverter. So since I now have a heightmap and a normal map, Away3D can do the rest. The material used in this example is the PhongMultiPassMaterial. When “displacement map” is disabled a simple BitmapMaterial is used. The @away3D -team has really done a great job with the pixelbender materials.
Among the settings you can choose between a regular perlin noise or a ridged one. You will notice that the difference is pretty big. Also, check out the different presets.
The resolution on the heightmap is 400×200, but scaled down in the UI. (By the way I can’t tell you enough how I love the minimalcomps by mr @bit101.) The heightmap-generation is pretty heavy on the CPU, so choose browser with care and stay away from debug-players 😉
What do you think? Time for a generative material-library for Away3D?
I’m not quite done experimenting with 3d perlin noise. Another cool feature that I haven’t seen in flash is to wrap the noise on a sphere seamlessly. Here is the result:
Click the spheres for a slightly larger version
To get the texture to wrap seamless without distortion, we can use the 3d nature of the noise in a interesting way. If we evaluating the 3d-position of each point on the surface of a sphere we can get the noise in that particular point. To convert the point from 3d-space to 2d-space some trigonometry is needed. My math-skills really suck, but my cut-n-paste skills are excellent. Once again, LibNoise showed me the way with 5 lines of code. First I only got chaotic noise with some sort of repeating pattern. It took some time to figure out that I had to convert the numbers to a positive range.
lat = py / height * 180- 90;
lon = px / width * 360-180;
r = Math.cos(DEG_TO_RAD * lat);
//range between 0-1
_x = (r * Math.cos (DEG_TO_RAD * lon) +1)*.5
_y = (Math.sin (DEG_TO_RAD * lat)+1)*.5
_z = (r * Math.sin(DEG_TO_RAD * lon)+1)*.5
For the sphere and the material/lighting I use Away3d. In the next post I will show you more about that and the tool for creating the different materials. Oh, and it’s looks a lot better animated
While doing research for the terrain editor I found a lot of different methods for creating noise. One of my favorite algorithms is “ridged fractal noise”. I haven’t found any examples of this in AS3 so I created my own version based on the Optimized Perlin Noise seen in the community before. I think the route of that source began with Ron Valstar’s AS3 version (@Sjeiti), then with a optimized version by @quasimondo, and further optimized with a haxe-version by Nicolas Cannasse. It was very easy to just add the ridged part to the noise generated. There is some source to look at in other languages such as C++, Java or C#. First some examples to see whats the characteristics of ridges. Some of them uses a Stok3d PhongShader created by @DerSchmale to add a nice depth:
It’s quite fun to search for new patterns by just adjusting the few parameters:
Make some noise
Try it out for yourself. I have limited the size of the bitmap to 200×200. It’s pretty optimized, but still to slow for large bitmaps. A Cool thing is that the swf is just 26 kB. Thanks @bit101 for MinimalComps.
Here is a explanations for some of the parameters (I borrowed the descriptions from the reference of world-machine):
Offset: Offset determines at what elevation the fractal behavior begins to change its character.
Gain: A multifractal parameter, Gain typically controls the relative strength of the detailed versus smooth regions of the fractal. Low values are very smooth, while high values bring on the detailed nature more quickly.
Persistence: Controls the degree to which the strength of each layer of noise is reduced as they are layered together. Low persistence values produce very smooth terrains, whereas increasing the persistence produces more detail (and spikiness). Unlike a low octaves value, all layers of noise are still calculated when using a low persistence, so that terrain features are smoothly introduced as the value is increased.
If you’re interested, here is the source code for the noise generator (in Haxe).
In a terrain a heightmap with ridges is suitable for creating high mountains or sand dunes, which was my primary goal. Next step is to visualize it in 3d. The ridges does not look so good with a low poly mesh, so I have to look for a voxel-engine now.