Translating from Java to JavaScript. The Bubble Project

“Just recycling some building blocks here”, I heard Simon say Monday.

Bubble Project 3 Apr 2017

This is a screenshot of Simon’s Bubble Project – an animation he built by translating a Java code from a Processing tutorial he saw a while ago (he reproduced it from memory now) to JavaScript.

Simon put the project on GitHub the following day.


Direct link to the animation (click on the canvas to make the bubbles appear):

You can also both the code and play with the animation via the p5.js web editor (hit Download to get the animation on your computer):

A couple videos of the making of:




3D Earthquake Data Visualization Coding Challenge

The earthquake data visualization coding challenge by Daniel Shiffman went further than just a 2D map – it went 3D! Simon managed to complete the challenge, except for the very last bit where he was supposed to correct the skewed GPS positions of the earthquake locations on his own (this part was not included in the challenge).






Matter.js (Physics Library)

Simon got seriously hooked on Matter.js, a a 2D JavaScript physics library that supports rigid body collisions and constraints.

He started with Daniel Shiffman intro to Matter.js, downloaded it using GitBash and then went on by following further Matter.js tutorials on Daniel Shiffman’s channel. Simon built two physics simulations with static shapes and circular bodies: one resembling a waterfall and another resembling a dangling chain. The sketches involved constraints for mouse interaction. Simon also learned how to delete off-screen bodies from the physics world, removing them from both his particle array as well as








The Threejs Library

Simon keeps finding awesome libraries online, this weekend he came up with this gem of 3D JavaScript:

There are masses of examples, this one was our favourite. Can’t wait until Simon can create things like that on his own. It felt almost like an extraterrestrial experience, as if we traveled to another reality for a glimpse. His younger sis enjoyed it, too. But Simon cut our excursion short and said he had to get back to work. After which he produced this small animation:


Perlin Noise Flow Field Coding Challenge

I think this is probably the most beautiful coding challenge Simon has completed so far. It’s based on a Perlin noise coding challenge by Daniel Shiffman where you’re asked to create a two-dimensional flow field with the help of the p5.js library, using the z-axis to represent time. Instead of actually writing it in p5, however, Simon created the project on the website (he has recently discovered through GitHub) and saved it online, so the animation he made is available at at his permanent link:

Perlin noise is a type of gradient noise that is used in computer visual graphics to increase the appearance of realism. In this video, Simon talks about the project:

Perlin noise is most commonly implemented as a two-, three- or four-dimensional function, but can be defined for any number of dimensions. An implementation typically involves three steps: grid definition with random gradient vectors, computation of the dot product between the distance-gradient vectors and interpolation between these values. Here are some videos of how Simon completed the coding challenge step by step. The project relies heavily on vectors:

This is what you need math for

“Well, do you know what pi divided by four is? That’s an eighth of the full rotation!” – I hear Simon talk to himself in English from the living room. For two or three days already he is busy recreating the beautiful visual projects from the Processing website. And now we also see where his math skills (knowledge of what a factorial, pi or the trigonometric circle is) come in handy! Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

Here is the Fractal Tree Project that impressed me most:



The sketch with pi/4 and 2pi:


Notes involving 2pi from Simon’s math classes last spring (made by his math tutor):