Color Box in Processing. Simon’s own code.

“This one doesn’t have that much code inside!” – Simon explains. It’s still a fun idea though: drawing a box (a cube) that “has all of the colors you can possibly see” in it! And you can make it change colors by moving the mouse. Every face of the cube is a different set of colors (the vertices are quite blur, so you might not be able to see the cube shape immediately). By moving the mouse to the left you get black, red, yellow, green, and by moving to the right – blue, magenta, white, cyan.

Smart Rockets Coding Challenge translated into Processing (Java)

And here is Simon’s translation of Daniel Shiffman’s Smart Rockets Coding Challenge into Processing (Java). This challenge (originally in JavaScript) was about implementing a genetic algorithm from scratch and create “smart rockets” (based on a simulation by Jer Thorp). The rockets evolve the “best” path to a target, moving around obstacles.

Perlin Noise Combined with Sine Wave Translation into Processing

Simon translated Daniel Shiffman’s Graphing 1D Perlin Noise tutorial into Processing (Java). The project involved combining perlin noise and sine wave:


He also attempted to translate Perlin Noise Flow Field into Processing:







Polar to Cartesian converter (Simon’s own code)

Simon built a Polar to Cartesian converter (Simon’s own code). You can enter the radius in pixels and the angle in degrees, click “convert” and you get the coordinates in x and y and a circle appears n that spot.

You are welcome to play with Simon’s converter online in CodePen at:

Simon is also planning to make a similar converter for Spherical to Cartesian (where you would enter radius, latitude and longitude and convert those into x,y,z).



Here Simon explains the formulas to convert between Polar and Cartesian coordinates:


Plinko game translated into Processing (Java) and Box2D

Simon translated Daniel Shiffman’s Plinko game coding challenge from JavaScript and Matter.JS into Processing (Java) and Box2D:

Simon adds that he didn’t actually do part 4 of the coding challenge, because part 3 is recorded after part 4.

Back to Physics: Displacement, Velocity and Time, Acceleration

Someone has been very much into Physics here, devouring Khan Academy‘s courses on . Even switched to Physics during math class this morning (luckily, Simon’s math tutor also teaches high school Physics).

= Simon, do you like Physics more than programming now? – I asked.

– Mom, everything I do is physica!

Position vs Time Graphs. Physics from Khan Academy 22 Mei 2017 2





Steering Behaviors: flow field, dot product, scalar projection

Simon’s big project the last couple of days was about making a steering behaviors database, complete with a navigation menu (in Cloud9):

Steering Behaviors Navigation Menu 24 Mei 2017

He managed to finish the first two examples – “Seek and Flee” and “Pursuit and Evasion” – and worked on the Flow Field Following and Path Following.

As recommended by Daniel Shiffman, Simon largely relied on the paper called Steering Behaviors For Autonomous Characters (written by Craig W. Reynolds from Sony). As Simon told me, he tried to guess the code to make the static drawings in the paper come to life. For instance, for the “Seek and Flee” example, Simon animated this drawing:

Craig W. Reynolds Steering Behaviors Seek and Flee 25 Mei 2017




Simon also made a “Seek” example in the language called Lua (from the Codea app):


The second example was about Pursuit and Evasion:

Craig W. Reynolds Steering Behaviors Pursuit and Evasion 25 Mei 2017



Simon also explained to me how Flow Field Following worked:


Another steering behavior he scrutinized was Path Following. For Path Following, he first had to learn what the “dot product” was. In math, the dot product or scalar product is an algebraic operation that takes two equal-length sequences of numbers (usually coordinate vectors) and returns a single number.

The way Simon learns is usually by studying (deconstructing) and memorizing the formulas (even if he doesn’t fully understand them in the beginning). After he comes back to the formula later on he seems to have grasped the meaning of it.  I often observe him actually apply different formulas in real life. When it comes to the “dot product”, Simon is in the beginning of the learning curve:




The formula for scalar projection is:

s=|{\mathbf  {a}}|\cos \theta ={\mathbf  {a}}\cdot {\mathbf  {{\hat  b}}},

or the way Simon put it:


Box2D, Matter.JS and ToxicLibs

One more thing I’d like to share from this weekend is Simon’s lecture comparing three Physics libraries: Box2D, Matter.JS and ToxicLibs. He partially borrowed the lecture from Daniel Shiffman, but added extra info and even rated the libraries:


And here are two projects involving translating from library examples. The Bridge ( from Matter.JS into Box2D:


And from Box2D into JavaScript: