Wolfram rules

I enjoy playing with recreational mathematics and the Wolfram rules are a rich source of complex behaviour from simple rules. So I created this project to explore how the rules can lead to different patterns.

Links

Live page
GitHub repository

Overview

This project allows the user to input different rules to create different patterns. The results are displayed in an HTML table which is automatically generated. I cannot remember the motivation for using an HTML table rather than the canvas, as there are obvious disadvantages to using a table, even if it does arrange the results in a semantic manner.

Challenges

Challenge: The interface has to be relatively intuitive.
Solution: Although the interface is simple, I am not satisfied that it is intuitive enough for someone new to Wolfram rules. This may need to be revisited, with some example rules explained to show how the game works. (Resolved, to be revisited)

Sample output

A rather interesting Wolfram pattern
A rather interesting Wolfram pattern

Image transformer

When I discovered I could manipulate images with PHP one of the first things I wanted to do was perform coordinate transformations. They have fascinated me since I first came across them and so I developed this project to satifsy my curiosity about what a skyline might look like when transformed into polar coordinates.

Links

Live page
GitHub repository

Overview

This project takes an image and uses PHP to manipulate it pixel by pixel so that the \((x,y)\) coordinates get translated into \((r,\theta\) coordinates.

Challenges

Challenge: The transformation itself isn’t trivial.
Solution: The first difficulty to overcome is the transformation itself. The details are given on the page, so I won’t reproduce them here. (Resolved)
Challenge: The transformation has to be performed “backwards”.
Solution: It took me a while to realise that the transformation has to be performed from target to source rather than the other way around. Rather than taking a pixel from source to the target, the pixel must be taken from the target to the source, because otherwise the target image will have “gaps” in it. (Resolved)

Sample input and output

An image before the transformation
An image before the transformation
An image after the transformation
An image after the transformation

Pebbling a Chessboard

One of the channels I follow on YouTube is called Numberphile, and they give plenty of good ideas for mathematical games. In this game the user has to move pieces around a chessboard in order to liberate “clones” from a prison. On Numberphile, they suggested playing this game using an actual chessboard, but I decided that a better way to do it would be to write my own game. So here it is.

Links

Live page
GitHub repository

Overview

The user interacts by clicking on the clones it wants to move around. In addition to this the user can create their own puzzles. Since I had already developed a lot with the canvas, this was simply a matter of using existing experience to make a game.

Challenges

Challenge: Making the weights.
Solution: Ideally the weights of the squares should be displayed when requested. In Firefox this worked fine, but not in Chrome. The reason for this is that I wanted to make a fraction line with a length proportional to the number of digits in th denominator. This meant I had to use a log10 function, but his does not exist in Chrome. After much debugging I found the problem and fixed it. This one bug prevented me from sending this page to Numberphile within a few days of making the game. (Resolved)

Sample game

A sample game of pebbling
A sample game of pebbling

Tricolor (cellular automata)

While investigating Conway’s game of life I wanted to see if I could easily extend the framework I’d developed to explore other systems. One of the more interesting cellular automata is the rock-paper-scissors system where three populations feed on each other.

Links

Live page
GitHub repository

Overview

The algorithm used to make the rock-paper-scissors cellular automata is does not seem to be well documented in an easy to obtain source, so I had to interpet much of the algorithm based on subjective descriptions. Each cells has a health which can take a value between \(0\) and \(10\). If a prey species is adjacent to its predator species then the prey species gives a health point to the predator species. When the prey species health reaches \(0\) it is replaced by a predator species. The result is that this creates spiral patterns on the canvas.

Challenges

Challenge: The algorithm needed some experimentation and tweaking to get right.
Solution: There are numerous papers and articles about how these algorithms work, but I couldn’t find a source that was explicit or that I could understand. As a result I had to create my own algorithm and tweak it until it was stable. Hopefully others users can read my code and develop it further. (Resolved)

Sample outputs

Sample 1, early in the evolution of a system
Sample 1, early in the evolution of a system
Sample 2, late in the evolution of a system
Sample 2, late in the evolution of a system

Recolourer

This project has been on my to-do list for a very long time. The idea is to take an image which is difficult for a colour blind person to view, and then remap the colours to make it easier for them to view.

Links

Live page
GitHub repository

Overview

This project has been on the back-burner for many years, and a physicist interested in equal opportunities this issue has been of interest to me since my sabbatical year working as an equal opportunities officer. Scientists often use colour to make plots clearer, most physicists are male, most colourblind people are male, and most scientist generally do not care about making their plots more accessible. The situation is getting better, slowly, but I thought it would be useful to have a stop gap tool to help people. This project was the first step in that direction, but since making the first step there have been many other higher quality tools out there. As a result I stopped working on this project and left it as a legacy tool.

The project takes an image and maps the colours from one part of the rgb space to another, essentially removing the red component. This should in principle make the images easier to view for someone with red-green colourblindness, although in practice an individual user’s colourblindness would have to be mapped out and a custom built algorithm made. In principle this is not difficult to achieve, I simply didn’t dedicate time to this part of the project given the success of other tools.

Challenges

Challenge: The colours had to be matched in a way that retained good discrimination between colours in a smaller colour space.
Solution: I’m not actually sure I achieved a good discrimination by removing the red component, but this is as good as I could manage with fairly little time. The sample image suggests that the boundaries between the various colours looks clear enough. (Resolved)
Challenge: As usual, when using external images it’s important to check the input.
Solution: I recycled code from the pixeler project to make sure the images were safe server-side. Since this tool is used for remapping colours of any image I cannot limit it to the same domain, so PHP must be used. (Resolved)

Sample input and output

Sample image before remapping
Sample image before remapping
Sample image after remapping
Sample image after remapping

Parodier

This was something I made a while back for reasons that I can’t quite remember. It allows the user to create their own version of the “KEEP CALM AND CARRY ON” posters that have been popular in the past decade.

Links

Live page
Background information on the original
GitHub repository

Overview

The user inputs up to five lines of text which are sent via a GET request to the server. The server then parses the input, assembles the image and returns it, and then adds the input to a MySQL database on the backend.

Challenges

Challenge: The project needed to interact with a source image and a font.
Solution: One of the main reasons for working on this project was to learn how to use fonts with PHP and how to create meme-like images. Finding a suitable font was not easy, and I suspect the actual “font” does not exist. I cannot remember if the font I used was royalty free or not, so I should probably check on that. The source image itself was quite easy to use. (Resolved, to be revisited)
Challenge: This project uses a MySQL database, and had to be secure.
Solution: As usual, the input to the database has to be sanitised. First time round I left a loophole in there, but that’s fixed now. I might revisit this again to tidy up the code a little, it could be made more elegant. (The MySQL backend was just for my own amusement really. It’s fun to see what strangers have used this project to create.) (Resolved, to be revisited)
Challenge: The layout should look good and be semantically correct.
Solution: To my shame I used a table to make this layout look good. It’s not best practice and it’s not semantically correct so I should come back to this next time I have the urge to practice my CSS skills and remake it using div elements. (Resolved, to be replaced)

Sample output

Sample output
Sample output

Pixeler

This project was made rather quickly in response to an image challenge. Afterwards I changed the project to allow the user to choose any image to pixelate.

Links

Live page
Stack overflow: 100% safe photo upload script
GitHub repository

Overview

The user specifies the uri of an image, and the settings for pixelation. The image is loaded server side using PHP and then the pixels are manipulated and the image returned. The image has to be loaded safely server side and the following code is used to check the MIME type:

$imageURI = (isset($_GET['uri'])) ? $_GET['uri'] : 'monalisa_before.png' ;
$image_extension = substr(strrchr($imageURI, '.'), 1) ;

// Taken from http://stackoverflow.com/questions/3114147/100-safe-photo-upload-script
$mime_mapping = array('png' => 'image/png', 'gif' => 'image/gif', 'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg') ;
$info = getimagesize($imageURI);
if(!$info){ exit('not an image') ; }
$type = $mime_mapping[$image_extension] ;
if($info['mime']!=$type){ exit('wrong extension given') ; }

switch($type){
case 'image/jpeg': $source = imagecreatefromjpeg($imageURI) ; break ;
case 'image/gif' : $source = imagecreatefromgif ($imageURI) ; break ;
case 'image/png' : $source = imagecreatefrompng ($imageURI) ; break ;
default : quit('File type not known.') ; break ;
}

Challenges

Challenge: Ideally the page should be able to load any image, including those from external domains.
Solution: Although I’d prefer to use the canvas to pixelate images (as can be done with the ASCII art maker) that solution would be limited by the same source restrictions. As a result, this project will stay with PHP until further notice. (Resolved)
Challenge: The user needs to be able to specfiy any URI and the server must be able to handle this safely.
Solution: Safely loading images in PHP is easier than I thought it would be. Thanks, Stack Overflow! (Resolved)

Sample input and output

Sample image before pixelating
Sample image before pixelating
Sample image after pixelating
Sample image after pixelating

The iPhoto scare

This weekend I had a scare concerning my iPhoto libraries, spanning over a decade of photos, which I use in many of my projects. I had purchased a new PC over the weekend to help with some of the more CPU intensive projects (mostly related to videos) and used this as an opportunity to rearrange my computing space. This lead to an arrangement which was not fail safe, and failed in the following way.

I had a power strip which relied on an uninterrupted power being drawn from the first outlet in order to power the other outlets. A PC tower should draw enough current to keep the rest of the outlets active, so this arrangement saves energy when I’m using the PC. I had the PC hooked up, and connected my external hard drives to my macbook to browse some photos. One of the iPhoto libraries needed to be upgraded, and just as the upgrade started the PC went into sleep mode, reducing the current and cutting power to the external hard drive. At this point the macbook complained and when the power returned to the external hard drive, the macbook could not mount it. I had already mounted the hard drive on the PC without any problems, so I decided to use the PC to save the hard drive. The drive mounted successfully, so I swapped it back to the macbook, which still refused to mount. Connecting it to the PC again, I ran the check disk feature and had a quick look. The iPhoto libraries seemed to be missing, but the remaining disk space hadn’t changed, so I assumed that the files were still there, just not readable by Windows. So I hook up the hard drive once more to the macbook and try to mount the drive. It fails, but this time I can repair the disk. The disk is repaired and all the files are there. Except for the iPhoto libraries. To make matters worse the free disk space is now about 1.1TB larger, roughly the same size as all my photos. Between them, the PC and macbook had managed to delete all my iPhoto libraries, and all because the setup I had arranged was not fail safe.

I think what happened was the following: The macbook uses “special” directories to store the iPhoto libraries, which Windows can browse, but doesn’t recognise fully. When the check disk feature was used in Windows is remade the partition and no knowing what to do with these directories, put them in some kind of trash area. Then the macbook decided to repair the partition to be readable by OSX and finding this strange directory that it couldn’t read but saw was marked as trash, deleted it and freed up 1TB of space.

In principle those files are all recoverable, but that’s not necessary. I made a complete backup of everything two days previously (partly in anticipation of buying a new PC) so nothing was lost and no harm was done. It was an interesting problem and the system failed in a rather perverse manner. It’s good to have scares like these every now and then, to remind us of our single points of failure. Tom Scott has something interesting to say on that subject:

It was his video that reminded me that it’s worth spending about 24 hours of CPU time to back up our files.

Painter

Many years ago I wanted to make a platform game (I still do) and I needed to be able to make simple and small graphics quickly and easily. Once I realised I could manipulate images using PHP it became easy to create a simple application to make pixel art.

Links

Live page
GitHub repository

Overview

The user can create an image pixel by pixel, or with rectangles of colour, or using a simple fill function. The pixel data are stored in an array and when the user asks for the image to be generated the data set sent via a POST request to the server, which then interprets the data and returns a png file.

The drawing area is arranged as an HTML table with event listeners waiting for user input. There is also a thumbnail display that consists of a similar table with cells 1px in width and 1px in height. The user can choose the colour, and choose which “brush” to use (brush, line, rectangle, fill).

Challenges

Challenge: The page needs to able to respond to the user’s interactions quickly and efficiently.
Solution: The user interaction is handled with a series of automatically generated eventListeners which parse element ids. This works well enough, but it really needs to be replaced with a single event listener and handled with a single element instead of a large array of elements that take up more CPU time and memory. This can be handled by using the canvas instead of an HTML table. (Resolved, to be replaced)
Challenge: The image needs to be generated for the user.
Solution: At the moment the painter uses PHP to generate an image pixel by pixel. This is a very inefficient way to generate the image, as it requires a large bandwidth and for very large images, a lot of server CPU time. This should be replaced with client side processing to remove these uncesseary overheads. (Resolved, to be replaced)
Challenge: The user needs to be able to select a colour from a rich palette.
Solution: This project made me realise how difficult working with colours spaces is. A full colour space can’t be easily represented in two dimensions, so I need to create a colour cube and show slices, making the space somewhat counter intuitive. It works, but it would be nice to develop other respresentations. As with the drawing space, the colour palette should be replaced by a single canvas element. (Resolved, to be revisted)

Screenshot

A screenshot of the painter (with some horizontal stretching)
A screenshot of the painter (with some horizontal stretching)