Here Simon explains how to calculate the magnitude of a 3D vector. This is something he partially figured out on his own and partially learned from Daniel Shiffman’s tutorial on Trigonometry and Polar Coordinates.

Skip to content
# Category: Geometry Joys

# Magnitude of a 3D vector

# Translating Car On Terrain project from Phaser.io into Processing

# Old men from the 19th century

# Infinite Line in Processing. Simon’s own code.

# Ellipse Mode and Physics Lab tests translated from Codea into Processing

# Buzzing Bee translated into Lua (Codea)

# Perlin Noise Combined with Sine Wave Translation into Processing

# Polar to Cartesian converter (Simon’s own code)

# Steering Behaviors: flow field, dot product, scalar projection

# Pinball Dilemma. Simon’s own code.

This blog is about Simon, a young gifted programmer, who had to move from Amsterdam to Antwerp to be able to study at the level that fits his talent, i.e. homeschool.

Here Simon explains how to calculate the magnitude of a 3D vector. This is something he partially figured out on his own and partially learned from Daniel Shiffman’s tutorial on Trigonometry and Polar Coordinates.

Today Simon spent hours translating this Car On Terrain project from Phaser.io (where it appears in JavaScript) into Processing (Java). He loved doing it in a form of a lesson for me, while I was filming him and asking questions about loops, arrays, fixtures, shapes and bodies (and there are many things I don’t understand). Simon also spoke about “the three most important properties: density, friction and restitution”. The project involved a lot of Physics, using many Box2D sub-libraries and translating between pixels and mm.

In the end, he got tired of writing all the coordinates for the terrain vertices, but he did get quite far.

Applying Box2D to translate from pixels into mm:

Almost every evening, before going to bed, we are reading books and Simon mostly prefers math adventures. Russian author Vladimir Levshin (1904-1984) published several books about geometry, algebra and math history, with numbers and letters as the leading characters. Most chapters contain complicated riddles that we solve along the way. Sometimes, Simon gets up to fetch some paper and pencils to write down what he thinks the formula or the geometrical pattern should be for a particular story. And because Levshin’s books often mention famous mathematicians of the past, I see Simon learn about history through math. What he knows about Ancient Greece or the 1970’s mainly comes from his interest in early math and geometry or the dawn of computer science.

A couple days ago we were reading about George Boole, yet another example of someone way ahead of his time (200 years to be precise), the inventor of Boolean algebra. Simon was so excited when he recognized his name, and the name of Georg Cantor, a German mathematician, whose work was just as shocking to his contemporaries as Boole’s work was. Simon recognized both of their names because of his programming. This way, a connection was traced in his mind between these two 19th century men and today’s cutting edge projects in Java and JavaScript.

Here Simon was drawing his impressions of Cantor’s set theory, inspired by a passage about him in Levshin’s book:

Levshin’s book that we’re reading now:

Passage on Boole and Cantor:

Another book by Levshin we have recently read, about Algebra:

A chapter from that book talking about finding a sum of all the members of an arithmetic progression:

Simon stormed out the bedroom and came back with a sheet of paper where he wrote down the formula, before we read about it in the book (he often tries to come up with his own formulas):

The same formula in the book:

A beautiful project in Processing (Java), Simon’s own code, resembling an El Lissitzky painting that you can control and change with the mouse (without Simon knowing El Lissitzky). Resulted from thinking about and playing with infinite line and line segments. Simon used the following formula: *slope times x plus yIntercept*.

Some more translations, this time from Codea (Lua) into Processing (Java).

Ellipse Mode:

Blend Modes:

Physics Lab tests from Codea:

Simon really enjoyed Daniel Shiffman’s “buzzing bee” (from the Graphing 1D Perlin Noise tutorial) into Lua, the language of the Codea app.

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:

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: https://codepen.io/simontiger/pen/MmdodP

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:

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

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:

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

The second example was about Pursuit and Evasion:

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:

or the way Simon put it:

Simon heard the word “pinball” and looked it up on Google (never played it himself). He then decided to write a pinball program in Processing (Java), but soon encountered a mathematical dilemma: the flippers at the bottom of the canvas (their role is to protect the ball from falling) didn’t stop rotating the way Simon wanted. This slowly unfolded into a real drama.

Here Simon explains the problem:

As his math tutor came to give Simon his regular math lesson, Simon turned to him for help and they thought to have solved the problem by applying cosine and setting it to 1. But after the teacher left Simon realized that the angular velocity of the flipper was too high for the cosine to reach 1, which would mean the flipper wouldn’t stop. Unless approximate values could be programmed, which Simon said he doubted. Simon was crying hard. We just sat there hugging after we recorded this:

Then Simon tried writing an approximate function.

I’m not sure he will come back to this unfinished project. It is all part of his learning experience and learning to apply math/ physics though.

Approximate cosine:

Approximate Function and 1D distance function: