Evolution Art – A Genetic Image Algorithm

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.0

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

Making Grand Theft Auto With 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

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!


Screen Shot 2014-10-05 at 13.32.35

If you make games you’ve no doubt had to create heightmaps for your terrains. I did, so I decided to make my own heightmap generator web application.

I used a combination of Perlin and Voronoi fractal algorithms to auto generate heightmap data using your settings to control them. When you’re happy with your heightmap, just right-click on the top-down view and save the image.