Drawing Gaussian Noise with HTML 5

While playing around with some new ideas to execute with the HTML 5 drawing capabilities I realized it has a very limited set of drawing commands. Sure, the commands are an amazing leap forward for standards, but there were some concept I wanted to port over from ActionScript that I couldn’t. This is because of the lack of BitmapData manipulation available with the canvas. I started off wanting to create Perlin Noise, but realized quickly there is no built method for drawing noise, which led me to this post.

I am by no means a mathematical genius, but with a bit of research I found a great article by Taygeta Scientific Incorporated explaining the Gaussian Distribution formula, which is the core of Gaussian Noise. I used the polar form of the Box-Muller transformation which is faster to process and offers a more robust range of numbers, according to the above mentioned article.

Performing these calculations at the client side with JavaScript is never going to touch the speed of C++ or even built operations in ActionScript 3. That being said, it is still possible and my version renders up to 20000 dots or particles at an respectable speed.

The aforementioned algorithm creates two pairs of Gaussian Numbers. While trying to get the effects just right, I experimented with plotting the particles at different combinations of the resulting Gaussian Numbers. Immediately I began to recognize patterns and shapes. Here are my results:

VIEW EXAMPLE
SOURCE FILES