Procedural graphics books, sites & resources

(I will constantly edit this post to add what I know. Please add your own suggestions in the comments)

Books: (links go to Amazon)

-Computational beauty of nature by Gary William Flake.

Great book, goes over lots of ideas about how you can write code imitations of the wonderful patterns of nature. He includes source code to his books written in C, I have often looked at these while coding myself.

-The Fractal Geometry Of Nature by Benoit B. Mandelbrot

Mandelbrot coined the word "fractal", brought the field into the computer age and discovered the Mandelbrot set.

-Real Time Rendering (parts, some include) 11.1 Sources of three-dimensional data pg 438

-Texturing & Modeling: A Procedural Approach

-Computer Graphics by Foley, Van Damme etc - various chapters

-Graphics gems - Various techniques spread out among the (many) books

Online Articles:

The AI System for Left 4 Dead by Valve -article describing procedural gameplay. Left 4 Dead is a first person shooter where you are part of a small team and have to fight your way out through a zombie hoarde. The monsters, guns and excitement level is adjusted based on the intensity of the player experience.

The demoscene uses procedural graphics to generate impressive scenes in incredibly small code sizes. A collection of some on pouet.net

Diffusion limited aggregation

Click the image on the left to view the canvas demo. This is an example of diffusion limited aggregation - a natural process where randomly moving particles stick together, to form clusters. A good example is crystals. An initial seed is fixed in place, then particles are randomly moved around until they hit part of the main cluster, where they stick. This leads to a bigger cluster and feeds back on itself, producing a stochastic fractal (Stochastic means a random process) Code comments: I wrote this after looking at the C code for "diffuse.c" from The Computational Beauty of Nature (see books). An optimisation I copied from there is to constrain the particles to within 10 pixels either side of the cluster, to stop particles wandering off where they would never hit anything. This shouldn't have too much effect on the resulting graphics but is much faster (especially at the start)

Future blog posts

I thought I should write about the goals and future directions on the blog. The main point for me is that regularly publishing updates will encourage me to do more, and better coding as I explore procedural graphics. I hope others can learn or enjoy them too.

The demos so far are in canvas, as I started learning Canvas recently. Thoughts on canvas:

-Very easy to share. Just load a page to view demo, and view source to read the code.
-Javascript the language is good and bad, but I miss having a good editor.
-Canvas is really slow.

2d vs 3d: After a certain level of scene complexity, I find it easier to do things in 3d rather than 2d, as you can just create the points and lots of things are taken care of for you. I don't think the web is a great platform for 3d graphics, and so I will be using Java applets and Open GL.

TODO:

canvas:
-Stochastic fractals (see Diffusion)
-A few more generated nature scenes etc like "Forest Night": beach, city scape, snowflakes
-A stripped down format for drawing shapes in canvas
-A polygon, shape etc editor for canvas
-I don't know the word for this subject, but visualisations of entity interactions - eg predator prey, termites, game of life, boids, daisy world, iterated prisoner's dilemma etc

Java applets:
-Procedural city generation (from my existing C++ code)
-Terrain generation (eg mountains)
-Texture generation (eg I have seen algorithms that move pixels randomly in 3d, take a 2d slice and the texture looks something like marble)
-Plant generation (including 3d L-System turtles)

Animation demo

Click the image on the left to view the demo. (requires FireFox/Chrome) View Source code.

 Note (2022): This no longer works I think it's 

The TV should show an image off the web, mixed with random static. You can change the image to something supported by your browser. Andrew M found out animated .gifs work, for instance copy "http://www.moonbattery.com/BashKeyboard.gif" to the URL at the bottom. If you right click on a canvas element, you can get an URL for the current image. I then used that as the input for another tv, to get the recursive picture going on the right. This was made for me to further learn HTML5 canvas, including animation (using callbacks in .js), CanvasPixelArray, masking and using images.