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 came up with an idea to translate a physics visualization from the Codea app (using a language called Lua) into Processing (Java) by applying Box2D. The first two videos below show him working on that project.
As he got stuck later, Simon decided to do the same project in p5.js instead, applying Matter.js:
This turned out to be quite difficult as well: he got stuck while trying to calculate the exact coordinates for all the shapes involved in the visualization (it was supposed to resemble bricks falling down and rolling down two slopes). So what Simon did as the next step in this “exercise” was switch back to Processing and create a grid with numbered coordinates. When I asked him, why he didn’t make the same grid in p5, he answered that he just loved Processing so much. Eventually though, this grew into a different project:
Confusing as these sidesteps may seem I’m sure Simon got a lot of practice out of this.
Here is a game Simon tried translating from Lua into Processing, it’s called Brickout:
Simon was training to build console applications with Derek Banas’ tutorial on design patterns. At the end of the third video, Simon says yes to my question if the console app could also be displayed on a webpage. After we stopped filming he corrected himself: Java is never used for websites, he said, but the same techniques he learned today can be useful for Android apps.
Simon has tried using jQuery instead of CSS to style a couple of webpages. The code comes from a Derek Banas tutorial.
These buttons have quite amusing effects:
Simon has followed another batch of wonderfully enriching tutorials by Daniel Shiffman on p5.js, this time all about sound, and made these sound visualisations. The first one is based on the Amplitude Analysis tutorial (the amplitude of a song (any sound input) is being analyzed to control elements of a p5.js sketch):
The next project comes from the Microphone Input tutorial:
Graphing Amplitude tutorial (using the getLevel() function from the p5.js Sound Library to graph the amplitude over time):
And the Frequency Analysis tutorial, analyzing the frequencies (spectrum array) of a sound file. Simon created a “graphic equalizer” like visualization. For this project he used the p5.FFT object from the p5.js library. FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform.
Simon downloaded VisialStudio, one of the ide’s in which you can write in C# on a pc, and has played with it writing a programme for a calculator in C#.
Simon talking about the most dangerous place in the world:
Simon has been into learning about C# the last couple of days. Yesterday he built a calculator. He didn’t actually compose the code himself as one might think after watching the video but recalled it from memory – he has seen many C# tutorials. It is very nice to see how well he has mastered it in such a short time though!
And in this video Simon explains the notion of maximum value of a decimal in C#: