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

HTML 5 & JavaScript Particle Emitter

With all the buzz around the HTML 5 Canvas Element, I wanted to give it a try myself. So i pulled together this particle emitter, using JavaScript as the controller and the Canvas Element as the renderer.

I started of with what I am going to call the “Base Class”, within the particleEmitter.js file. In JavaScript you can create classes by following this simple structure:

Properties are then created on the object as follows:

You can see in the Emitter class i create some properties that will affect the environment of the emitter. Then, there are the methods of the class, which are created as follows:

The logic behind the the “createParticle” method is that it checks to see if there are more than the allotted number of particles, if so, it grabs the “oldest” particle and reuses it by resetting it’s properties. The “step” method loops through all the particles and applies the conditions of the environment, i.e. gravity, velocity, lifespan, etc. Finally, the “draw” method actually renders the particles to the Canvas Element. The particles in JavaScript are just represented by placeholder objects that store the position, velocity and lifespan of the particle. There are no “display objects” in the Canvas Element, you can only draw to it.

The Canavs Element is very easy to draw to. Once the element is created in HTML, you need to get the Canvas’ context, which is what you draw to.

For there you can draw in the Canvas context a number of different ways. In this example, I am using a simple circle using the “arc” method:

Pretty simple huh? From here, the “Base Class” creates and monitors some slider controls and color picker. It also creates a timer that fires off the specified amount of particles at the specified interval. From here, you can really go anywhere with this simple combination of JS and HMTL 5. To dive further into the Canavs Element, stop over at the Mozilla Developers Center where you can find a great set of tutorials. You can snag my source below.

VIEW EXAMPLE
SOURCE FILES

HTML 5 and the future of Flash Devs

Is HTML 5 going to change the future for Flash developers? The answer is “yes”, but the change will be in a positive way.

I think that Flash will continue to flourish and ground-breaking content will continue to be delivered on the Flash Platform in the coming years. That being said, these new standards-based technologies are going to provide some interesting possibilities for Flash Developers to cross over to the standards world in the future.

When you boil it down, Adobe based ActionScript 3 on ECMAScript, the same specifications that JavaScript 1 and JavaScript 2 are based on (more or less). Flash Developers can easily leverage their ActionScript 3 skills via JavaScript. Any good developer can grapple the basics of DOM just as easily. So the missing links and HTML and CSS.

For developers like me, who have a standards background, this possibility is exciting. I look forward to the adoption of W3C Standards across all browser. I’ve never believed that one platform should be used over another because of obligation. If I was a carpenter i wouldn’t use a hammer to do a screwdriver’s job just becuase I paid more for the hammer. Which brings us to “free”.

These standards technologies are all free to get started with and require no browser plugins for users, on top of their SEO and accessibility benefits. A lot of Flash developers seem to be apprehensive of this movement when, to me, it makes sense to accept it with open arms. It affords us new opportunities in a different realm and the ability to leverage skills we already posses.

The proposed specs for HTML 5, CSS 3, and JavaScript 2 are far from universally implemented, in addition to not being backwards-compatible. It could easily be five years before these specs become widely accepted and used by major brands.

So, stay calm people and don’t be scared of progress. Remember that the entire reason flash was created was to accomplish what you couldn’t do with standards. Now we’ve finally got our gift horse, and we are already looking it in the mouth.