Posted: February 9th, 2010 | Author: Zack | Filed under: Experimental, HTML 5, JavaScript, Standards | Tags: Gaussian Distribution, Gaussian Noise, HTML 5, JavaScript, Noise | No Comments »
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
Posted: February 1st, 2010 | Author: Zack | Filed under: Experimental, HTML 5, JavaScript, Standards | Tags: HTML 5, JavaScript | 2 Comments »
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:
function Emitter(arguments...)
{
...
}
Properties are then created on the object as follows:
function Emitter(arguments...)
{
this.property = value;
}
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:
function Emitter(arguments...)
{
this.method = function() { ... }
}
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.
var canvasContext = document.getElementById('canvasElement').getContext('2d');
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:
canvasContext.fillStyle = 'rgba(red, green, blue, alpha)';
canvasContext.beginPath();
canvasContext.arc(x, y, radius, startAngle, Math.PI*2, antiClockwise);
canvasContext.fill();
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