Wavy Waves (JS1k) – How it works

Ok, after submitting this script, will be nice if I explain how the Wavy Waves Mesmerizer works…

Lets start from the beginning: the global variables.

The code above declares everything that will be needed by the script to run. As the script will be minified, some things are done just for the minification.

In the first line, the doc var is created just to avoid references to the word ‘document’ that is too long. The minifier will change the name from doc to something like a, so this also leaves a hint for the minifier.

In the second and third line the script acquires the canvas and the context respectively. And on fourth and fifth lines the width and height are set.

The max_particles variable uses a magic number to make the quantity of particles comfortable. This number can be increased or decreased according to your will. Right below a follows the declaration of a empty array, that will host all the particles responsible to draw the screen. All the following lines are for hints for minification – the most important is that methods can be called using subscripting (eg.: Math[‘sin’](10);).

On the next two instructions, the on-click-function-randomizing-callback and the background color are set:

Oh… ok… what is that |0 making there? This instruction truncates the number to its integer part. So if my random index is 1.6646, it will be evaluated to 1! Impressive! If you prefer, you can use the double-binary-negation technique to achieve the same result:

After the boring initialization, we get some more boring initialization… Lets put the particles to fly:

This loop create max_particles particles containing x and y attributes, distributed randomly across the canvas. The particles also retains their velocities with vx and vy attributes.

The functions that controls the particle movement are fixed as follows.

It was coded this way to allow the easy replacement of the movement function. Both functions should return the velocity for the x and y axis, calculated using whatever is wanted.

Now lets see the soul of the wavemaker, the update function.

It is ridiculous, but this function just updates the position summing the velocities to their position and recalculate their positions, respecting the screen boundaries.

The body of the mesmerizer, the draw function:

The draw function draws circles in the position of each particle. The size is affected by its speed: as faster its goes, smaller it is – this is what 5 / max( ( p.vx * p.vx + p.vy * p.vy ), 0.5 ) says.

But before drawing the circle, the fillStyle is set, composing the color with formulas based on the coordinates of the particles. This color setting uses the clamp_str() function.

This function just ensures that the input floating number is between 0.0 and 1.0 and that it results in a integer value ranging from 0 to 255, keeping its proportions.

The final touch is putting the pieces together, the timer to run it all:

The interval calls a fill rect which have a ridiculous alpha of 0,01… why? The low alpha allows the trails of the particles. If the alpha is 1, the user would see only some balls changing sizes and walking across the screen – this is what makes it to be beautiful, just forget about the rest. =)

After clearing the screen, the particles are updated and drawn.

Ok! Nice! You got 1927 bytes of code. so what?

You have three choices:

You can polish the bits and bytes;

Use a JavaScript minifier/compiler;

Use a JavaScript minifiercompiler and polish the bits and bytes;

My pick was the second one. I used the Closure Compiler service to do the job (and I will make some optimizations on the generated code). It reduced the 1927 bytes to 819. I believe that it can get better, but not on a automated system.

Here is the final code:


You may also like...