Evolution Art

After reading up about Genetic Programming by Roger Alsing (http://rogeralsing.com/2008/12/07/genetic-programming-evolution-of-mona-lisa/), I decided to create a very simple version of it in Javascript.

Alsing’s approach is to create a DNA object that contains information about the polygons, such as points and colour. It then iteratively alters the DNA until a closer representation is reached, at which point the DNA strand becomes the basis of the next generation.

I wanted to try it in a slightly different way, where the DNA object is replaced with the contents of the canvas of the most successful mutation of the previous generation.

The code creates a number of in-memory canvases (gene pools) and draws randomly coloured polygons to it, or colours picked from the source image if you select that option. It then compares each child to the source image. If the child is a closer match to the source image than the parent canvas is, (which in the first generation is just a white image), it will replace it and become the parent for the next generation.


This process simulates evolutionary mutation over time.

See the Pen Evolution Art by John Bower (@Beclamide) on CodePen.

It can take a long time for a decent representation of the original image to appear, but it is fairly hypnotic.

Grand Theft CSS3D

Screen Shot 2015-11-17 at 10.22.40

CodePen’s great. It’s a sketchbook for coders so they can demo ideas, crossed with the social networking features of Facebook and Twitter.

After discovering it earlier this year, and seeing a number of very clever CSS3D demos, I decided to try building something myself.

I started with a Div, then another, then another, until I had a cube. Then I created a loop and added JavaScript key events to move them around the document by adjusting each Div’s CSS Translation.

With a 2D map array and some custom Z-ordering code, sectioning off the screen into 9 parts, I came up with this: GTA CSS3D v1.0

Screen Shot 2015-11-17 at 11.06.52

As Mike Dailly (creator of the GTA engine and Lemmings) said after I excitedly showed him on Twitter… “It’s a bit slow”.

The z-ordering was a pain in the ass too. The custom engine was a bit clunky and CSS3D doesn’t handle z-indexing automatically like DirectX or OpenGL. So I looked at ways of making it more efficient.

That’s when I found the excellent prototype CSSRenderer by Keith Clark for THREE.js.

I stripped the code down and rebuilt it again with THREE.js. There were still z-fighting issues (turned out to be a now-fixed Chrome bug), but it was running a LOT smoother.

After making the map bigger, adding colours, collision detection, angular momentum, velocity, and acceleration, I decided to finish it off by adding skid marks on the tires.

So I created a giant 3D Transformed HTML5 Canvas over the whole map, bumped towards the camera by a pixel above the floor tiles. Then on every frame work out where the tires are (offset from the center of the car, adjusted by rotation) and draw two black lines from the tire positions in the previous frame.

function UpdateSkidmarks() {
 var rot = car.rotation.z;
 var ox = car.position.x;
 var oy = (car.position.y);
 var px = car.position.x-25;
 var py = (car.position.y)+12;
 var l = {
 x: Math.cos(rot) * (px-ox) - Math.sin(rot) * (py-oy) + ox,
 y: Math.sin(rot) * (px-ox) + Math.cos(rot) * (py-oy) + oy
 py = (car.position.y)-12;
 var r = {
 x: Math.cos(rot) * (px-ox) - Math.sin(rot) * (py-oy) + ox,
 y: Math.sin(rot) * (px-ox) + Math.cos(rot) * (py-oy) + oy
 var a = ((maxspeed-Math.abs(speed)) / maxspeed) + (Math.abs(steering*5));

 ctx.moveTo(prevmark.l.x+50, prevmark.l.y+50);
 ctx.lineTo(l.x+50, l.y+50);
 ctx.moveTo(prevmark.r.x+50, prevmark.r.y+50);
 ctx.lineTo(r.x+50, r.y+50);
 prevmark = {
 l: l,
 r: r

I was quite surprised how well it turned out! And even Mike Dailly should be happy with how fast it is now 😛

Grand Theft CSS3D v2.0

The source code is completely open for you to look at if you’re interested in any of the techniques I used.



It might seem reasonable to think of the requirements of crucial economico-social matrix as involving an issue of the ethical faculty. Nevertheless, the strategic goals should empower employees to produce the evolution of specific phenomenon over a given time limit.

I needed some legible nonsense for a web application I was building and remembered a PHP script my uncle wrote a few years ago (I believe it’s become an actual product sold by RedGate Software)

So I decided to port it to Angular, just for the laugh. It’s actually turned out to work really well and people showed an interest in using it, so I turned it into a bower component!

It generates names, titles, quotes, lists, and paragraphs. There’s some loose documentation on the GitHub page.

View the demo here

View the code on GitHub here




So what do you do if you’re sick of seeing the same old Instagram filters on everyone’s photos? What if you’re a pixel nerd with a penchant for Javascript?

FilterFactory is a web IDE that lets you build and save your own Instagram-style filters using Javascript. You can manipulate each pixel in the image using whatever mathematical formulas you like. Changes you make to the filter code are updated instantly, and you can save your filters for later use.

There’s a couple of utility objects you can use too like pixel.x / pixel.y, and image.width / image.height

It started as a way of me being able to write EaselJS filters easily, but it sort of escalated fairly quickly (as code demos tend to). I decided to replace the ‘Apply’ button with a number of Webworkers (one dedicated to a section of the image) that fire when you stop typing for a few milliseconds.

Then I added Google+  login so you can save your filters.

At some point I’ll add a Gallery so you can see other people’s filters, but that’ll be after I translate the whole thing to a MEAN stack from PHP. And that’ll be after I’ve done the dishes, hung the washing, finished Fallout 4…



Waggr is a multi room chat client that lets you create a room about any subject in seconds. There’s no sign up or logging in through social networks, you pick a username and join a room. You can also add a room name at the end of the URL and share the address with people you want to invite.


The application itself is completely web based and runs within your web browser.

I also made a Chrome Extension that creates/joins a room about the website you’re currently on so you can chat with other people on the same site.

Download the Chrome extension now!

Ziltoid The Omniscient


After working with Devin Townsend on the official Devin Townsend Project website he contacted me about his new multimedia project, Z2.

Z2 is a concept album (following up from his previous Zliltoid: The Omniscient album) about an alien who comes to Earth to drink all our coffee. It’s as crazy as it sounds, so I was delighted to help him bring his concept to reality.

The Ziltoid Website needed to be fun, interactive, and slightly bonkers. I had long reminiscing sessions with Devin about our favourite old-school computer games, and we agreed that point-and-click games are still the best.

So I made an HTML based point-and-click engine using Javascript and bolted it onto a WordPress back-end.

With Anthony Clarkson, Devin’s long-time album artist, designing the artwork, and Devin himself making the sound effects, we created an interactive experience where you saw the world through Ziltoid’s eyes.

There’s even a hidden easter egg, which I don’t think people have found yet..


SkyBet: Content Information Panels


I was asked to build multiple Flash movies that displayed live odds directly from a JSON feed from Sky’s servers. They allowed Sky Bet’s content management team to choose specific styles, and background images for different sports and events.


Dogstar Superstar


Keep Britain Tidy ran a campaign based around a new character called ‘The Dog Poo Fairy’ and wanted a viral web application to spread the message about picking up dog poop.

The brief was simply that they wanted to be able to make dogs sing songs about picking up dog mess.

I developed the site in Flash, and built an phoneme engine in ActionScript 3 that converted data from an animation tool to a Flash timeline animation.

Open University: World of Inspired Learning


Open University was running a marketing campaign called “World of Inspired Learning” and wanted a website to run along side print, banner, and TV ads.

The idea was that the site would feel like a navigable virtual world with sections representing various courses and subjects. The user could ‘fly’ through the scene and discover what the Open University could offer them.

We built the site in Flash, with Papervision 3D acting as the 3D engine. Each scene was a separate Flash file which kept the site manageable and modular.

The Open University – World of Inspired Learning website won a CSS award for best website in 2010.