Web Posts


posted in Web, P5, Generative at 02 September 2017

GERBIL is an application for making your own pretty L-Systems made in December 2015.

GERBIL Screenshot

It was made by me and Kirsty in p5.js, which is essentially a Javascript version of Processing. It also doesn't use jQuery, instead using the raw Javascript options for DOM manipulation, although in hindsight using jQuery would have been much more sensible (at the time I knew very little about jQuery). Also in hindsight this could have been done with raw SVG processing rather than p5.js, but p5.js is really nice to use and still worked.

An Introduction to L-Systems

An L-System is a way of generating fractals using "replacement rules" - essentially string replacements - to increase the detail of a pattern infinitely. Each rule transforms a single letter into a string, like in the following example:

F: F-F++F-F
+: +
-: -

If we start with the string F, then we produce the following with each iteration (the brackets are there to separate the replacements out for easier reading):

F -> F-F++F-F -> (F-F++F-F)-(F-F++F-F)++(F-F++F-F)-(F-F++F-F) -> ...

Which generates the following pattern, if F is mapped to forwards and +,- to clockwise and anticlockwise turns respectively:

L-Systems Example

We can keep applying this to add further detail. Each symbol is mapped to one of a set of instructions: either move forwards some distance, backwards, rotate, push the current state to the stack, or pop the last state off the stack and move there.

Reading L-Systems

To read the given L-System, we first need to load the rules given. In our website we allow users to define as many rules as they want. To import these we sort them into their different types of symbol (whether it goes forwards, rotates etc) and store the [character, replacement] pairs.

To perform an iteration (set of replacements), we can just search through those pairs and apply the replacement. To draw our system's current state, we just go through the symbols, check which type of symbol it is (forwards, rotate...) and perform that operation.

The website also provides capability for saving your own L-Systems, which simply creates a set of key-value pairs that can be read and written.

Work at Tech Will Save Us

posted in Arduino, Web, Hardware at 01 September 2017

For most of the last few summers (2013-2016), I have been at Technology Will Save Us (a London-based tech startup that makes kits to teach children about electronics and programming) for summer work. Spending time there has let me work on some very cool stuff on some of their kits and their website, including:

The DIY Gamer

For the DIY Gamer Kit, I was able to work on part of the library (creating a font for printing words to the display, and working on the beginnings of its IR functionality) and also code the game Snake for it. I also worked on an implementation for the game Simon Says, providing code that was easy for a beginner to read and understand. Multiple versions of the code were provided so that people could work through each version, slowly adding features until they had the complete game. I then combined these games into one program that allows you to switch between these two games, Pong and Breakout.

I also prototyped a scoreboard for the Gamer, which had an IR receiver and three seven-segment displays so it could display the highest score it had received for each game.

Website Work

During one of the summers I worked on elements of the website, helping them shift it over from Wordpress to a Mustache templating system based setup. This involved rewriting pages to suit the new format. I also worked on their (previously live, not sure what happened to it) Meet The Team page, which involved writing Javascript to not load full animated GIFs. In the end I had to load the GIFs via Javascript. Previously I'd tried only loading the GIFs while hovered over, but this required giving users instructions about how to use the page which is a bad sign for something as simple as the Meet The Team page.

MicroBit Compiler

In the summer of 2016, I worked on a preliminary web-based compiler for the MicroBit kit for TWSU's online interface for programming it. This involved researching what compilers are available and discussing what language to translate the online interface into (the online programming environment is block-based, so would be translated into code before compilation). This also involved writing some Node.js to actually build this.

In the end I built two compilers, one which compiles Arduino code and one which attaches an interpreter to Python code.

Other Work

I did some work attempting to get a desktop application for programming Arduino boards from the web working on Windows, my favourite (read: not favourite) operating system. This involved working with formatting system paths and various options to get the Arduino npm module to even consider working.

I also got to experiment with compilation over audio and while I didn't get very far with it, I learned a lot about how Arduino code is compiled and controlling audio using the Web Audio API.

I also helped out at a few of their workshops helping people program and use some of TWSU's kits.


posted in Web, Youngrewired, Music, Generative at 01 September 2017

Birdsong is a website that plays back a subset of real-time tweets in a given area, performs basic sentiment analysis on them via an API and plots them on a map while playing a tune depending on the mood of the tweet. It was made by Freddy (freddinator on Github) and myself for the YRS 2014 event.


How does it work?

Structure Diagram

The diagram is pretty self-explanatory. We have a Python harvester collect and write a subset of all tweets in a certain area to a .json file, which is read by PHP. The PHP script also queries the language analysis API (we used this one but in hindsight could have used Python's Natural Language Toolkit on our Python server and returns these tweets to our client-side Javascript. This Javascript uses Mapbox and the WebAudio API to plot our tweets and make pretty tunes for them.

My job was working on the frontend side of things, so I turned our PHP output into pins on a map and music. The pins on a map bit was mostly basic parts of Mapbox's functionality, but the music generation was more interesting so I'll touch on that.

Music Generation

To generate the music, we start in a key and move around the Circle of Fifths randomly. This allows us to easily shift key without causing too much of a jump in the music. We change key every time we encounter a space character in a direction dependent on the previous character.

Before playing notes, we split our tweet up into words. We split the allocated time (each tweet takes a second to play) equally between each word and equally between the letters of each word, so shorter words will have longer tones for each letter.

Once we have a word, we parse it. Rather than randomly choosing like in some procedural generation, everything in this relies on the code of each character of the tweet. To decide where in the scale of our key we jump when playing a note, we pass in the character code and change position based on it (mod 18) - e.g. an "a" might mean going one step up our scale. We do this for each letter, keeping track of where in the scale we are so that it doesn't jump too far throughout the scale.

All of this can be seen in the song.js file in the repo linked below.