Simon’s Lecture on Programming Languages

In this video, Simon gives an introduction to the basics of programming languages (what languages there are, which ones are front end and which ones are back end and what libraries and data interchange formats go with different languages):

 

DSC_1807 - kopie

Advertisements

Coding everywhere, swimming and popping giant balloons

A few more pics from the coding everywhere series:

DSC_0618

wp-image-630951689

wp-image-1094961898

wp-image-1337992596

Here Simon made a game especially for his sister:

wp-image-2011983519

wp-image-1696618370

wp-image-1067236208

wp-image-872329122

wp-image-42781354

Among the remaining favorites were reading (see an earlier post), swimming (and playing in the water) and, surprisingly still very high up on the list, popping giant balloons. City trips, walking and museums were way down below or even cancelled all together, even though the visit to Park Güell can be rated as successful.

DSC_0711

DSC_0613

wp-image-1963826101

wp-image-240956575

wp-image-983415705

wp-image-1829492110

wp-image-899124593

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

Translating Bit Invader from Codea into JavaScript

Simon tried to reconstruct Bit Invader game (from Codea.io) in JavaScript, but got stuck at a certain point when he was programming the enemy to recognize the hero and the bullets. Here is how far he got. The project is available on Simon’s page in Codepen:

https://codepen.io/simontiger/project/editor/AdyVmr/

 

Simple Physics. Translating from Lua (the language in the Codea app) into Java

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:

Console Application in Java

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.

 

 

Sound Visialization

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.