Demo

Inspired by Craig Reynolds' work on the subject I spent some time this weekend playing around with procedural texture generation, putting together a webpage where you can type in a small Javascript program that when run will generate a 512x512 image in a canvas element on the page. The image above is the output from the default sample program that is loaded up when you visit the page.

A bit of explanation from the help text. The page presents an interface for the creation and execution of small texture synthesis programs. Fundamentally, the program you type in needs to return some primitive function taking as input a point in R2 and returning an RGB floating point triple. There are several functions provided to aid in this process: generator functions which simply take some set of inputs and themselves return an appropriate primitive function, and mutator functions which will take some set of parameters as input as well as one or more primitive functions and return a new primitive function as a result. So, for example, the program typed in could simply be:

return TexGen.SoftSpot([0.3,0.6]);

SoftSpot is an example of a generator function - in this case it will return a primitive function that takes a point as input and returns white if its distance is less than 0.3 from the origin, black if its distance is more than 0.6 from the origin and a linear interpolation between.

There are a number of built-in functions provided to aid the creation of interesting images and I will be expanding it in the future. For now though you can go to the page, read more of the help text to get a list of the available functions and have some fun playing around with it. As always - feedback is appreciated.