Automatic Magformers Table

Magformers (magnetic building sets involving maths) used to be Simon’s greatest passion when he was six (just a year ago!) and this week he has been travelling in time to revisit this old love, after his little sis received a new Magformers set as a present. What Simon did next was to combine Magformers and programming: he created an automatic table listing various Magformers models (in HTML/ JavaScript). The sets that can be used to build those models were to get filled in automatically, depending on the number of specific shapes needed for every model and the number of such shapes available in every set. As you might imagine, this involved many lines of code and a whole lot of computational thinking. At one point, when Simon was nearly done, he realized that the column listing the sets wouldn’t get filled in properly. He had a bug in his program that he couldn’t find, so he turned to his older friends in Slack for help. It’s such a pleasure to see him communicate with these experienced programmers on a regular basis now and unbelievable how eager and resourceful they are. One of Simon’s friends from Slack even created his own version of Simon’s program in CodePen! What makes it even more wonderful is that Simon no longer hesitates to apply the good advice he gets. The next day he wrote some “helper functions” and the table worked!

Simon hasn’t put this project online yet, as he wanted to make it more interactive and hasn’t managed to do that so far.

 

 

 

 

 

 

Maze Generator Game in Processing

Simon has turned Daniel Shiffman’s Maze Generator Coding Challenge (generating a maze using the Depth-First Search Recursive algorithm) into a game in Processing (Java). It’s not fully operative yet, as the player can partially walk through walls, but Simon did get quite far and even received positive comments from Daniel Shiffman.

Simon’s own little neural network

Connected Perceptrons in Processing 26 Jul 2017

This is one of Simon’s most enchanting and challenging projects so far: working on his own little AIs. As I’ve mentioned before, when it comes to discussing AI, Simon is both mesmerized and frightened.  He watches Daniel Shiffman’s neural networks tutorials twenty times in a row and practices his understanding of the mathematical concepts   underlying the code (linear regression and gradient descent) for hours. Last week, Simon built a perceptron of his own. It was based on Daniel Shiffman’s code, but Simon added his own colors and physics, and played around with the numbers and the bias. You can see Simon working on this project step by step in the six videos below.

His original plan was to build two neural networks that would be connected to each other and communicate, he has only built one perceptron so far.

 

 

 

 

 

 

Hero Game in Processing. Simon’s Own Code.

Hero Game 24 Jul 2017 High Score

Simon has created a great new game in Processing: The Hero Game! It is somewhat like the good old Mario, except that Simon has no idea what Mario is and came up with the concept himself. The game is based upon Circle-Rectangle Intersection, something that he was studying for the past several days. It was impressive to see how quickly he wrote the program for the game, I think it took him something like an hour, while waiting for dinner. The game has a hero (Simon), represented by the yellow circle, obstacles (from below and above) and money that the hero collects to get points. The game stops once the hero hits an obstacle. Simon is planning to add extra random obstacles and maybe also create a winning score threshold (around 50 or 65, he says). His own highest score so far has been 35.

Below are the making-of videos, step by step:

 

 

 

 

 

Update: Simon added trees!

Hero Game 24 Jul 2017 Tree 2

Circle-Rectangle Intersection (Collision)

Simon has been studying  various 2D collisions (via the p5.collide2D library and paulbourke.net), especially the Circle-Rectangle Intersection (Collision). He was so busy with this problem that he even put it down in chalk at the playground:

 

DSC_0888

DSC_0892

DSC_0888

And on the whiteboard at home:

DSC_0900

And spent nearly his entire math lesson today talking about the math behind 2D object collision to his math teacher:

DSC_0912

DSC_0911

DSC_0915

DSC_0916

Simon also used Circle-Rectangle Collision for his awesome new Hero Game in Processing!

 

Interactive Math Functions

Simon was reading about math functions on Wikipedia and came up with an idea to create an interactive math functions editor in JavaScript that would visualize (i.e. show the graphs for) all the functions. Simon was especially excited about cosecant, secant and cotangent (csc, sec and cot for short), which were new to him:

DSC_0901DSC_0902

Simon partially programmed the interactive math functions editor, but it remained unfinished:

 

 

 

The Sea Game. Simon’s First Own Game.

Simon created his very first video game completely on his own. Everything in this game he came up with by himself – from the original idea and design to the final code. The game is about a little man (actually, Simon himself) jumping over the waves in the sea. Every time he lands on an actual wave it’s game over.

Simon used collision detection (point-rectangle instead of rectangle-circle collision detection) and array lists to duplicate the waves. He created an illusion of 3D by choosing the viewing angle “almost as if it were an orthographic camera”, he explains.

The code for this game (in Processing i.e. Java) is available on GitHub at

https://github.com/simon-tiger/video-games

 

The making of, step by step:

 

 

Simon had trouble with the game over function. Originally, it was only triggered once the player clicked the mouse to jump again while on a wave, instead of reading to the circle-rectangle (little man-wave) collision. Simon asked about this problem in the Coding Train slack channel and got some great responses. Eventually he solved the problem is his own way (see the “Debugged” video):