Biology, Coding, Experiments, JavaScript, Milestones, Simon teaching, Simon's Own Code, Simon's sketch book

Evolving Creatures in p5.js

Simon’s latest independent coding project involved some biology lessons! He loves the channel Primer by Justin Helps and watched his evolution series many times, studying the rules for species’ survival and multiplication. This resulted in two interactive evolution simulations, in both of which Simon recreated the rules he learned. The first simulation doesn’t involve natural selection and is based on these two videos: Simulating Competition and Logistic Growth and Mutations and the First Replicators.

Full Screen interactive version: https://editor.p5js.org/simontiger/present/MK4b75542

Code: https://editor.p5js.org/simontiger/sketches/MK4b75542

Simon added natural selection in Part 2, based on Primer’s video Simulating Natural Selection (the code Simon wrote from scratch):

Full Screen interactive version: https://editor.p5js.org/simontiger/present/68WXliTza

Code: https://editor.p5js.org/simontiger/sketches/68WXliTza

Coding, JavaScript, Notes on everyday life, Simon makes gamez, Simon's Own Code, Together with sis

Tic-Tac-Tic-Tac-Toe-Toe in p5.js

Simon has programmed this game of Tic-Tac-Tic-Tac-Toe-Toe Game in p5.js from scratch. He and his sister have had hours of fun playing it (and she turned out to be better at this strategic game):

Play Simon’s game online at: https://editor.p5js.org/simontiger/present/k9NfaDmpi

Code: https://editor.p5js.org/simontiger/sketches/k9NfaDmpi

Coding, Contributing, Group, JavaScript, live stream, Milestones, Notes on everyday life, Simon teaching

How Simon takes part in the Coding train live sessions

Every live session Daniel Shiffman mentions Simon several times, usually because Simon gives good feedback/ advice. On the other end, Simon is invigorated and jumping about the room. Sometimes resulting in serious bumps against the furniture.

Coding, Crafty, Experiments, Geometry Joys, JavaScript, Math and Computer Science Everywhere, Math Riddles, Milestones, Murderous Maths, Notes on everyday life, Simon makes gamez, Simon teaching, Simon's Own Code, Simon's sketch book

Approximating pi and e with Randomness

This has been one of Simon’s most ambitious (successful) projects so far and a beautiful grand finale of 2019, also marking his channel reaching 1K subscribers. The project – approximating Euler’s number (e) in a very weird way – is based upon a Putnam exam puzzle that Simon managed to prove:

The main part of the project was inspired by 3Blue1Brown Grant Sanderson’s guest appearance on Numberphile called Darts in Higher Dimensions, showing how one’s probable score would end up being e to the power of pi/4. Simon automated the game and used the visualization to approximate e. Below is the main video Approximating pi and e with Randomness. You can run the project online at: https://editor.p5js.org/simontiger/present/fNl0aoDtW

Code: https://editor.p5js.org/simontiger/sketches/fNl0aoDtW

The history and the math behind the project:

Simon’s proof od the math behind the project:

Simon has visualized this problem and proof at: https://editor.p5js.org/simontiger/present/2uMPZ8THW

Code: https://editor.p5js.org/simontiger/sketches/2uMPZ8THW

Coding, Crafty, Experiments, JavaScript, Math and Computer Science Everywhere, Milestones, Murderous Maths, Physics, Simon teaching, Simon's Own Code, Simon's sketch book

Galton Board in p5.js

Simon saw a prototype of this Galton Board in a video about maths toys (it works similarly to a sand timer in a see-through container). He created his digital simulation using p5.js online editor, free for everyone to enjoy:

https://editor.p5js.org/simontiger/sketches/h7p-wZCw8

Coding, Computer Science, Contributing, JavaScript, Milestones, Murderous Maths, Notes on everyday life, Simon makes gamez, Simon teaching, Simon's Own Code, Simon's sketch book

Simon Builds a Chess AI with Minimax

I’ve been terrible at keeping this blog up to date. One of Simon’s best project in December 2019 was creating a chess robot and I haven’t even shared it here.

We were joking how this is Simon’s baby and her name is Chessy. Simon also made an improved version with a drop-down menu allowing to choose 1 to 5 steps ahead difficulty level (warning: levels 4 and 5 may run quite slowly): https://chess-ai-user-friendly–simontiger.repl.co/

Code: https://repl.it/@simontiger/Chess-AI-User-friendly

Simon’s original 2-steps-ahead game: https://chess-ai–simontiger.repl.co/ Code: https://repl.it/@simontiger/Chess-AI

While researching how to apply the Minimax algorithm, Simon has relied on Sebastian Lague’s Algorithms Explained – minimax and alpha-beta pruning; Keith Galli’s How does a Board Game AI Work? (Connect 4, Othello, Chess, Checkers) – Minimax Algorithm Explained; a Medium article on Programming a Chess AI: A step-by-step guide to building a simple chess AI by Lauri Hartikka; of course, The Coding Train’s challenge Tic Tac Toe AI with Minimax; and What is the Minimax Algorithm? – Artificial Intelligence by Gaurav Sen.

Simon contributed his chess robot to the MINIMAX coding challenge page on the Coding Train website:

And naturally we’ve had a lot of fun simply playing with Chessy as a family:

Coding, Computer Science, Experiments, JavaScript, Logic, Murderous Maths, Simon teaching, Simon's sketch book

Nash Equilibrium

Simon explaining the Nash Equilibrium with a little game in p5.js. Play it yourself at: https://editor.p5js.org/simontiger/sketches/lfP4dKGCs
Inspired by TedEd video Why do competitors open their stores next to one another? by Jac de Haan.

Coding, English and Text-Based Data, Python, Simon teaching, Simon's Own Code

It takes the sun to the ground, and violet on the observer’s eye.

Simon writes:

This amazing sentence is generated by a Markov Text-Generation Algorithm. What is a Markov Algorithm? Simply put, it generates the rules from a source text, and it generates a new text that also follows those rules. The rules are often called the Markov Blanket, and the new text is also called the Markov Chain. OK, how does this all work?

Let’s take an example: let’s consider the source text to be “Hello, world!”. Then we pick a number called the order. The higher the number, the more sense the text makes. We’ll pick 1 for the first examples, we’ll examine what happens with higher numbers later.

Then we generate the Markov Blanket. This is a deterministic process. We start from the beginning: “H”. So we put H in our Markov Blanket. Then we come across “e”. So we put e in our Markov Blanket, but to specify that it’s next from H, we connect H to e by an arrow. Then we stumble on “l”. So we put l in our Markov Blanket, but again, to specify that it’s next from e, we connect e to l by an arrow.

Now, here’s where it gets interesting. What’s next? Well, it’s “l” again. So now we connect l to itself, by an arrow. This is interesting because it’s no longer a straight line!

And we keep going. Once we’re done, our Markov Blanket will look something like this:

Once we’ve created our Markov Blanket, then we start generating the Markov Chain from it. Unlike the Markov Blanket, generating the Markov Chain is a stochastic process.

This is just a process of wandering about the Markov Blanket, and noting down where we go. One way to do this, is just to start from the beginning, and follow the path. And whenever we come across some sort of fork, we just spin a wheel to see where we go next. For example, here are some possible Markov Chains:

Held!
Helld!
Hellld!
Helorld!
Hello, world!
Helllo, wo, wo, world!

That was an easy one, so let’s do something more complex with code.

First, just an interface to enter in the text, and the order:

text = "" # Variable to hold the text

print("Type your text here (type END to end it):")

while True:
  line = input("") # Read a line of text from standard input
  if line != "END": text += line + "\n" # If we didn't enter END, add that line to the text
  else: break # If we entered END, signify that the text has ended

text = text[:len(text)-1] # Remove the last line break

order = int(input('Type the order (how much it makes sense) here: '))

input("Generate me a beautiful text") # Just to make it dramatic, print this message, and ask the user to hit ENTER to proceed

Next, the Markov Blanket. Here, we store it in a dictionary, and store every possible next letter in a list:

def markov_blanket(text, order):
  result = {} # The Markov Blanket

  for i in range(len(text) - order + 1): # For every n-gram
    ngram = ""
    for off in range(order):
      ngram += text[i+off]
    
    if not ngram in result: # If we didn't see it yet
      result[ngram] = []
    if i < len(text) - order: # If we didn't reach the end
      result[ngram].append(text[i+order]) # Add the next letter as a possibility
  
  return result # Give the result back

Huh? What is this code?

This is what happens when we pick a number >1. Then, instead of making the Markov Blanket for every character, you make it for every couple of characters.

For example, if we pick 2, then we make the Markov Blanket for the 1st and 2nd letter, the 2nd and 3rd, the 3rd and 4th, the 4th and 5th, and so on. When we generate the Markov Chain, we squash the ngrams that we visit together. So next, the Markov Chain:

def markov_chain(blanket):
  keys = blanket.keys()
  ngram = random.choice(list(keys)) # Starting Point
  new_text = ngram
  while True:
    try:
      nxt = random.choice(blanket[ngram]) # Choose a next letter
      new_text += nxt # Add it to the text
      ngram += nxt # Add it to the ngram and remove the 1st character
      ngram = ngram[1:]
    except IndexError: # If we can't choose a next letter, maybe because there is none
      break
  return new_text # Give the result back

# Now that we know how to do the whole thing, do the whole thing!
new_text = markov_chain(markov_blanket(text, order), num)
print(new_text) # Print the new text out

OK, now let’s run this:

Type your text here (type END to end it):
A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light in water droplets resulting in a spectrum of light appearing in the sky. It takes the form of a multicoloured circular arc. Rainbows caused by sunlight always appear in the section of sky directly opposite the sun.
Rainbows can be full circles. However, the observer normally sees only an arc formed by illuminated droplets above the ground, and centered on a line from the sun to the observer's eye.
In a primary rainbow, the arc shows red on the outer part and violet on the inner side. This rainbow is caused by light being refracted when entering a droplet of water, then reflected inside on the back of the droplet and refracted again when leaving it.
In a double rainbow, a second arc is seen outside the primary arc, and has the order of its colours reversed, with red on the inner side of the arc. This is caused by the light being reflectedtwice on the inside of the droplet before leaving it.
END
Type the order (how much it makes sense) here: 5
Generate me a beautiful text

And……..it..stops.

Why did it do that?

You see, this is not such a good method. What if our program generated a Markov Blanket that didn’t have an end? Well, our program wouldn’t even get to the end, and it would just wander around and around and around, and never give us a result! Or even if it did, it would be infinite!

So how do we avoid this?

Well, we set another much bigger number , let’s say 5000, to be a callout value. If we don’t get to the end within 5000 steps, we give up and output early. Let’s run this again…

And now, it doesn’t stop anymore! Snippets of example generated text:

It takes the sun to the ground, and violet on the observer’s eye.

This rainbow, a second arc formed by illuminated droplets resulting it.
In a primary rainbow is a meteorological phenomenon the back of the ground, and has the sky. It takes the order of its coloured circles. However, the sun.

Rainbow, a second arc shows red on a line from the section of light in water droplet and has the sun.

In a double rainbow is caused by illuminated droplet on the outer part and refracted when leaving in a spectrum of a multicoloured circles. However, the droplet of water droplets resulting it.
In a double rainbow is a meteorological phenomenon the droplets resulting in a spectrum of a multicoloured circular arc. Rainbow is caused by the inner side the observer’s eye

Play with this project online at: https://repl.it/@simontiger/Markov-Text