Tetris Game in JavaScript

Simon built this Tetris game in one day on Wednesday. He didn’t use any libraries. The code largely comes from a Meth Meth Method video tutorial, but Simon made it object oriented and adjusted some parameters.
You increase your score for every row that’s fully populated. However, if you have four rows that are almost fully populated and you get them fully populated at once, you increase your level.
Link to Simon’s code: https://github.com/simon-tiger/tetris-js

Play Simon’s Tetris Game online: https://simon-tiger.github.io/tetris-js/
Link to the Meth Meth Method video: https://www.youtube.com/watch?v=H2aW5V46khA&t=1s

Advertisements

Simon’s Fibonacci function and Fibonacci counter in p5.js

Simon came up with this Fibonacci function while taking a walk downtown:

Schermafbeelding 2017-12-23 om 02.41.53

f(0) = 0

f(1) = 1

f(n) = f(n-1)+f(n-2)

When we got home, he used the function to build a Fibonacci counter in p5.js:

You can play with Simon’s Fibonacci counter online at: https://alpha.editor.p5js.org/simontiger/sketches/Skhr3o8Gf

The idea about the Fibonacci function struck Simon when he was looking down at the cobbles under his feet. “Look, Mom! It’s a golden rectangle!”, he shouted:

DSC_3157

He had read that golden ratio has a direct connection to the Fibonacci sequence. The same evening, he took out his compasses to draw a golden rectangle (this time not his own invention, but following the steps from his Murderous Math book):

DSC_3168

DSC_3169

If you turn the page, the smaller rectangle is a golden rectangle as well, and if you slice a square off of it, the remaining rectangle will also have the golden proportions. You can continue doing this infinitely. The sizes of the rectangles will exactly correspond to the numbers in the Fibonacci sequence, which makes these drawings an illustration to the sequence.

DSC_3170

The next day, Simon showed his function to his math teacher. Below are the Fibonacci sequence numbers he got through his selfmade JavaScript program. After a certain number, the computer started taking too long to compute the following number in the sequence (several seconds per number), but didn’t crash.

DSC_3164

Tetris in Processing continued

Inspired by a Meth Meth Method Tetris video, Simon has come back to his Tetris project in Processing, something he started a long while ago and never finished. At the moment, the primary difficulty he experiences is having the pieces accumulate at the bottom of the grid and not vanish immediately once hit by other pieces. Work in progress.

The Snowball Throwing Game in Processing

Simon invented this fun game in Processing after he and his little sister had some proper winter fun outdoors in the fresh December snow (quite rare for the local climate and thus immensely cherished by the little people). The game is about throwing  snowballs in such a trajectory that they stick to one another, forming a super-snowball. After I finished filming this, the two snowball throwers had such a great time with the game that I dare say the giggling effect from of this 2D simulation overshadowed the real snowball fight that had originally inspired it. They did love playing in the real snow on the next day though, until it melted away.

 

This slideshow requires JavaScript.

The Genetic Algorithm Game Bug Solved!

Simon’s version of the Citius Invaders game in Processing is finally working! The big bug that seemed so unsolvable (enemies endlessly crossing over) has been defeated!

Siraj Raval presented this game in Python during Week 9 of his “Math of Intelligence” course. Simon’s is a simplified version that still incorporates a genetic algorithm.

Link to code on github at: https://github.com/simon-tiger/citius-invaders/

Link to our previous post on this project: https://antwerpenhomeschooling.wordpress.com/2017/11/23/problem-with-a-genetic-algorithm-game/

Link to Simon’s archived Live Stream about the project: https://antwerpenhomeschooling.wordpress.com/2017/12/01/live-stream-30-november-speechjs-and-citius-invaders/

Live Stream 30 November. Speechjs and Citius Invaders.

Below are the archived versions of Simon’s live streams today. The second part (starting with a genetic algorithm game in Processing/ p5.js) was an emotional roller-coaster, with the OBS software failing to capture sound and giving Simon a hard time jumping between scenes, and yet he didn’t give up.

Simon writes: In the first part of this live session, I redid my speechsynth.js tutorial (so it has some coding in it). In the second part (which will likely be WAY longer), I will do a Processing/p5 challenge about Citius Invaders.

 

Problem with a Genetic Algorithm Game

Simon has been working very hard at making his version of the Citius Invaders game that Siraj Raval presented in Python during Week 9 of his “Math of Intelligence” course. It’s a simplified version that still incorporates a genetic algorithm. Simon’s plan is to code the same game in P5 during his next live tutorial (at 17:00 CET on 30 November). Unfortunately, after many lines of code in several files, when the game was nearly ready, he faced a problem he doesn’t know how to resolve. He tried getting some online help via the Coding Train Slack channel but didn’t get much feedback. The code is now on github at: https://github.com/simon-tiger/citius-invaders/

Here is how Simon describes the problem:

Hi! I’m working on a “Citius Invaders” game, and I have a problem.
In the game, there are enemies, a spaceship, and bullets that it shoots.
The parameters of the game are:
* The game starts with 6 enemies.
* The minimal amount of enemies is 4.
* The maximal amount of enemies is 100.
The rules of the game are:
* When a bullet collides with an enemy, the bullet and the enemy get deleted.
* If there are 4 enemies on the screen, you’re not allowed to shoot any bullets any more.
* If there are 100 enemies on the screen, you’ve lost the game.
* The enemies reproduce every 5 seconds (this amount of time decreases every generation).
The goal of the game is to stay as close to 4 enemies as possible.
The problem is that: After the 5 seconds, the enemies don’t stop crossing over! I think the order that I’m crossing them over is wrong. They breed (cross over) forever and that makes the game pause forever. Maybe the algorithm in which I let them cross over is wrong. I have a `while` loop somewhere, maybe it became a forever loop. The `while` loop is at line 52 in `Population.pde`:

 while (!selectedEnemies1.isEmpty() || !selectedEnemies2.isEmpty()) {
 int index1 = int(random(selectedEnemies1.size()));
 int index2 = int(random(selectedEnemies2.size()));
 if (index1 == index2) {
 index2 = (index2 + 1) % selectedEnemies2.size();
 }

Below are a some videos showing Simon at different stages of the project. In the top video, he speaks of the difficulties he encountered with the frame rate and the genetic algorithm.

 

 

Cannon Game in Processing

Simon shows the Cannon game he created in Processing (Java). He says he was inspired by the Stackoverflow forum, where he saw an example of the game and later wrote the code for a similar game himself. I saw him quickly write the code in a matter of perhaps two hours. Simon will post his code on GitHub once he has added a couple extra features.

Wikipedia Crawler

Simon has made his version of Daniel Shiffman’s Wikipedia Crawler, graphing the relatedness between Wikipedia articles.

Play with it yourself online at: https://simon-tiger.github.io/wikipedia-crawler/wikipedia/

Code: https://github.com/simon-tiger/wikipedia-crawler/

Simon writes:

How it Works

Enter a query (e. g. apple) and either hit Enter or press the button “Query the API”. If an article called “Apple” exists, a circle will pop up with th word “Apple” in it. If an article called “Apple” doesn’t exist, a circle with something alse will pop up. Click the circle (or article) to reveal its related articles. As you might expect, you can click any of those articles to reveal its related articles.

Inspiration

The inspiration comes from Daniel Shiffman and its Coding Train. Link to Daniel’s version here.

Simon’s Acrostic Machine

Last Friday Daniel Shiffman was finally back with his weekly livestreams! Simon was delirious with joy that he could be part of the team again and weeping and panicking every time Daniel experienced technical difficulties. During the days that followed, Simon made his own two versions of the coding challenge Daniel presented in the livestream and shared those with his colleagues on GitHub and the Slack channel: “I made *two* versions of the acrostic coding challenge. Link to a github repo: https://github.com/simon-tiger/acrostics (Links to both of the versions in the README).

The coding challenge was part of Daniel Shiffman’s Programming A to Ze course at NYU (a course focusing on analysis and generation of text-based data) and was about creating an Acrostic machine – an algorithm that would use a source text to create a “poem”. Every word in the poem would begin with the consecutive letter from a word one enters.

One version that Simon created uses an API as the source text:

https://simon-tiger.github.io/acrostics/00_acrostic_api/

In the second version, the user can type the source text (like in the screenshot below), use a text sample or drag a source text file into a special dropbox:

https://simon-tiger.github.io/acrostics/01_acrostic_userinput/

Screenshot of the second version (with drag and drop):

Acrostic 11 sep 2017

Simon making his versions of the Acrostic machine: