Circle Intersection with Perlin Noise in Processing (Interactive)

Simon built a beautiful interactive circle intersection program in Processing, in which the circles detect intersection and change colors (according to Perlin Noise) once it occurs. The player can control the number of circles by adding and removing them in two modes (mouth clicked and mouth dragged). Simon added a button to switch between the two modes. (Loosely based upon Daniel Shiffman’s tutorials on checking object intersection).

 

 

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.

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!

 

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):

 

 

Evolutionary Steering Behaviors Game

Note: See the update at the bottom of this post!

We’ve had quite a dramatic situation here for the past couple of days, after Simon turned Daniel Shiffman’s Evolutionary Steering Behaviors Coding Challenge into a game in Processing (Java) and then also in JavaScript (with p5). After completing the game in JavaScript, Simon wanted to add a new feature – a checkbox he programmed using the p5.js library. The checkbox would give the player the option to play with or without the timer, adjust the timer and also had a “New game” button. In the end it turned out that the checkbox didn’t really work. Simon was very upset and it took me hours to talk him into putting the game online even though the checkbox didn’t function (he wanted everything to be perfect) and ask for advice. “I have got a problem with a p5 element: In my setup function, I defined my checkbox. In my reset function, my checkbox is undefined. Why?” – Simon asked in the “Share Work” section of the Coding Train Slack channel, where he has the opportunity to communicate with experienced programmers. He received quite a lot of help and was enthusiastic about it at first, but for some reason, he hasn’t tried the solutions he was suggested. Perhaps it’s his gut feeling that the bind function suggested is still too difficult at the moment. I have decided not to push anymore and trust him on this one, although it’s always a dilemma for me whether I should sometimes “force” him into taking instructions from others or let him solely rely on his fantastic intrinsic autodidact mechanisms. The second seems to work better in terms of the learning process, but I do push him into sharing his work.

Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 3Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 4Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 5Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 6Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 7Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 8

Evolutionary Steering Behaviors game. Asking help in Slack 10 Jul 2017 2

Simon’s game is online at: https://simon-tiger.github.io/Game_SteeringBehaviorsEvolution/SteeringBehaviours_EvolutionGame_p5/

In the videos below Simon shows how he made the game. It’s an ecosystem type of genetic algorithm (with no generations), where the organisms (autonomous steering agents) clone themselves. The autonomous steering agents evolve the behavior of eating food (green dots) and avoiding poison (red dots). Simon added two invaders into the game, one giving food and the other randomly spreading poison. The player can control the “good” invader by moving him and making new food. The goal of the game is to make the agents survive for as long as possible.

The Processing (Java) version:

The thinking behind the game (Simon explains everything at the whiteboard):

The JavaScript version (now online):

In the last video, Simon talks about his problem with the p5 element.

 

Evolutionary Steering Behaviors game seek algorithm part 1. DESIRED equals TARGET minus POSITION:

Evolutionary Steering Behaviors game seek algorithm part 1. DESIRED equals TARGET minus POSITION 4 Jul 2017

Evolutionary Steering Behaviors game seek algorithm part 2. STEERING equals DESIRED minus VELOCITY:

Evolutionary Steering Behaviors game seek algorithm part 2. STEERING equals DESIRED minus VELOCITY 10 Jul 2017

UPDATE: When Simon saw Daniel Shiffman’s comment on Slack this morning (Daniel saying Simon did a fantastic job and that he might even include Simon’s game in the next Live Stream), he sat down and applied the bind function as suggested by his older peers above – without any incentive on my behalf! And it worked! I think we’ve hit a true milestone again. Simon has this growing feeling that he’s got friends out there, his tribe, who understand and who are ready to help.

One day later: Simon had another chat with his friends on Slack and got a lot of help with the last remaining small bug in his game (the New Game button didn’t start a new game if the player had chosen to play with no timer but jumped to Game Over instead). In the video below, Simon shows how that problem got solved:

Translating Car On Terrain project from Phaser.io into Processing

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:

CarOnTerrain translating from pixels into mm