Javascript: The Good Parts, adding icons for the Reactickles and fixing bugs in KeyboardFountain

After reading Javascript: The Good Parts by Douglas Crockford I decided to make some minor changes to the codebase of the suite:

  1. Instead of using the postfix increment operator ++ use += 1
  2. Instead of using the == comparison operator which uses type coercion , use the more reliable ===. Similarly for !=, use !==.

After making those changes, I screen grabbed each Reactickle to make an icon. Midway through the process I realised that it was difficult to tell the difference between some of the mouse based interactions and the keyboard interactions, so decided to make animated video icons instead of a still.

I used Screeny to be able to grab at a fixed pixel dimension of 256×256, but drawn at 128×128 in the main menu.

After adding the video thumbnails I spotted a bug with the KeyboardFountain – objects were being added to the matter.js simulation, but never removed.

First I made sure that the array holding all the circles was empty before I started adding to it:

 while(this.circles.length > 0) { // https://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript
 this.circles.pop();
 }

Secondly, I made sure the matter.js World had been cleared before adding new elements to it:

 World.clear(world);

Finally, I noticed that the circles in KeyboardFountain were being drawn incorrectly, overlapping with each other. I realised two things:

  1. I needed to set the ellipseMode to RADIUS:
    ellipseMode(RADIUS);
  2. I needed to draw the circles in the simulation in a new way because of this mode change:
    ellipse(0, 0, r); //previously ellipse(0, 0, r *2)

    The updated suite can be seen here.

Leave a Reply