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!
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:
And on the whiteboard at home:
And spent nearly his entire math lesson today talking about the math behind 2D object collision to his math teacher:
Simon also used Circle-Rectangle Collision for his awesome new Hero Game in Processing!
We were caught up in the rain and had to wait at a restaurant. What do you do in a situation like this? Simon made a snake game on his iPad, inspired by something he saw on the D3 library:
Simon partially programmed the interactive math functions editor, but it remained unfinished:
Simon playing around with sine, cosine and radii in Grapher:
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
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):
Simon has recorded his first set of web development tutorials, about how to create a slideshow. The original code comes from the w3schools.com website.
Simon got stuck in the previous video, but debugged his code in #1.5:
Update: Simon has recorded the last how to in this Slideshow series, about hoe to make the slideshow automatic: