Update: In addition - and just for the fun of it, I produced a stand-alone cellular texture version, which you might find novel. Yes, I need to get out more.

JscriptCellular.htm

Generating turbulent noise textures with Javascript. I think it's safe to put this in the novelty catagory. When using the working example, you may notice that the rendering process takes a while. The method I've been forced to use in order to create a faux-rendering buffer - which involves appending miniature formatted 4x1 'td' cells to a parent table for every four pixels in the buffer - is ridiculously slow. Furthermore, it has to be done in smaller blocks with a timeout in between to stop the script from wigging out. I had a quick look around the net and it appears to be the method of choice but I'm sure there's a faster work-around somewhere.

As it stands, it takes anywhere from 1 to 60 seconds - depending on texture size - to initialise and render a simple image to a buffer. This is in contrast to the fraction of a second that it takes the normal Windows graphics system. Doesn't make a lot of sense to me. Hit the 'Create Noise Texture' link along with the 'R','G','B' palettes to generate different turbulent noise textures. It should take about five to ten seconds, which is slow, but bearable. One day, the various browser programmers may decide to spend a few hours (because that's all it'd take) to provide us with a simple and efficient way to render pixels. I won't hold my breath. The benifit, of course, would be built-in, client-side, image generation. The Flash plugin and the Java Virtual Machine already provide this, but each rely upon external installation and development suites.

Either way, I have, at least, managed to generate a decent cloud texture with nothing but Javascript. That is to say, this document contains no imported image files. In order to keep things simple, I've used a cheap noise smoothing method rather than the prefered, but more involved, Perlin method. The source is contained between the javascript tags residing in this text file and can easily be converted to whatever you want. Just ignore the javascript specifics and use the noise related functions.

Like I said, I did this for the novelty of it all. Javascript is less than suitable for this kind of thing but that's half the fun. If you go to a place called SlimeLand, you'll find a fully functional raytracer done entirely in Javascript. Quite amazing.

shane@archadegames.com

« Back to Code Topics