After reading Javascript: The Good Parts by Douglas Crockford I decided to make some minor changes to the codebase of the suite:
- Instead of using the postfix increment operator ++ use += 1
- 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:
- I needed to set the ellipseMode to RADIUS:
ellipseMode(RADIUS); - 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.