Update: Alarm clock

In the past few weeks I’ve been giving my website a facelift and updating many of the projects that were looking a little less presentable than the rest. One of the biggest changes was to the Alarm clock (Live page). Previously the clock had to be set in the source code (which was easy enough for me to do) and set using a time interval. I updated the code so that any user could set their own alarms and use a fixed time rather than an interval. At the same time I improved the general layout of the page and am now rather pleased with how it looks.

Before and after

Alarm clock before the update
Alarm clock before the update
Alarm clock after the update
Alarm clock after the update

Update: Trigger game

In recent weeks I’ve been working a lot on the Trigger game (Live page.) These update have included an overhaul of the style, addition of new pages, rewriting of the “Spy mode”, adding new particles, tweaking the graphics, and many more changes behind the scenes. The code was significantly refactored to make it easier to extend and understand, as now this has becomes a collaborative project. The game has been tested on a few schools and shown to be a good success with children (and adults) and it seems to have a bright future. I also added sounds, music, and a simple music player.

Screenshots

Updated event display
Updated event display
Showing the various modes (some in development) with a garish colour scheme.
Showing the various modes (some in development) with a garish colour scheme.
Updated Spy mode, analysing the data.
Updated Spy mode, analysing the data.

Update: Painter

Recently I wanted to make some pixel art for a mobile version of my website (which is very different to anything I’ve done before, and more confusing than I thought it would be.) To do that I decided to use the Painter tool (Live page) I’d written a few years ago. Unfortunately the tool no longer worked, for reasons that I’m still trying to debug. (Possible to cross-domain restrictions when using the full path, but more likely due to the limits of the GET request.) The old method used PHP to generate the image, and the HTML DOM to manage the editing, using an HTTP request when the image needed to be generated. It’s not hard to see why this is inefficient, so once the canvas became available I decided to transition from PHP to JavaScript and the canvas.

The painter, after a facelift and going from PHP to JavaScript.
The painter, after a facelift and going from PHP to JavaScript.

Given my previous experience with the canvas it didn’t take long to code up a new version of the painter, and the biggest challenge was extending the scope of the line paintbrush to create lines at any angles, not just vertical or horizontal. The updated look is more sleek and professional, the performance is better, and there are fewer failure modes. I’ve kept the legacy version for interest, but I have no plans on using that again. I am also considering adding two new featuers in the future: allowing the user to save their image to an online database, and allowing the user to upload an image so they can edit existing images pixel by pixel.

Work in progress: Google Maps war

This project was made partly to combine the Hexagonal civ game with Google Maps, and partly to push the Google maps API to its limits. It turns out that Google Maps is not suited to this heavy use.

Links

Live page
GitHub repository

Overview

This project is intended to be a Risk style conquest game based on a map of Europe. The maps would be split into hexagons with rules for how the different unit (land, air, sea) could move from place to place. The map is split into equal areas of latitude and longitude with values chosen to best suit the arrangement of cities. Ideally the economic value of each hexagon would be taken into account, although this would require quite a bit of research. The connections between the hexagons is already defined, so in principle this could lead to a rather simple game by randomising the economic and defensive values of each hexagon (or giving them all equal value.)

Challenges

Challenge: The hexagons should be arranged in equal latitude and longitude, which isn’t necesarily equal area on the page.
Solution: The hexagons are not equal in area, so I had to draw them from the centre of each hexagon and find their vertices using polar coordinates around the centre of the hexagon. This was the first time I had drawn the hexagons this way and it turned out easier to make the drawing functions if I did it like this, given that I had already solved the coordinate problem in the hexagonal civ project. (Resolved)
Challenge: The game requires quite a bit of data entry.
Solution: Finding the economic values of each hexagon is very difficult and time consuming, so this has been put off indefinitely. The connections for the land, sea and air units have already been determined. (To be revisited)
Challenge: Drawing the hexagons requires drawing many polygons.
Solution: Using geometrical experience from the Skyline project, I found a reasonable way to label the hexagons with hatching in a colourblind friendly way. However the sheer number of polygons means that the performance is quite poor. It might be prefereable to draw the large map without Google Maps, and only underlay Google Maps when the user requests it. (Resolved, to be revisited)

Screenshot

Sample Google Maps War map.
Sample Google Maps War map.

Work in progress: Skyline

One of the features I want on my webpage is the silhouette of a skyline to use as background image. This project is aimed at allowing the user to draw a complex skyline, with the possibilty for animation.

Links

Live page
GitHub repository

Overview

The user can create individual “buildings” with many layers, and then arrange the buildings into a skyline to generate an image. If possible, the user can animate the image (for example adding lights at night, allowing the sky to change to match the time of day.)

The design would take place on the canvas, with a suite of tools to allow the user to correctly determine the size of buildings, add arches, spires etc. A second layer would allow the user to add windows, and a third layer would allow them to add other features. These would then be saved to file and a script would read the file to render the images on screen. The images would be rendered on a canvas that sits behind the main content of the page. This project is largely a problem of geometry.

Challenges

Challenge: Initially I wanted to set the canvas as the background of the page.
Solution: There are methds of taking the content of a canvas and using it to draw images that can be used with the DOM. I tried to use Javascript to change the source of the background image to match the canvas, but this lead to “flickering” effects, even when to canvases were used. As a result this was not a viable option. (Abandoned)
Challenge: The user needs a simple and intuitive interface.
Solution: This project allows the user to draw wire frames for the buildings. They can draw straight lines, circle arcs, and quadratic curves. The interface is not perfect, but it is easy enough to quickly make buildings. A grid is also provided so the user can keep track of sizes. (Resolved)
Challenge: This projects needs to be able to calculate interections and unions of polygons.
Solution: One of the hardest problems to solve is the interserction and union of two shapes, so that the user can make complex shapes. This is a non-trivial problems of geometry and finding solutions online was not east. I honest cannot remember if I completely solved this problem or not. (Resolved, to be revisited)
Challenge: This project would ideally respond to the client’s time.
Solution: Animation and time dependence has not been implemented yet, but eventually the colour of the sky and weather would chance, lights would turn on and off, and vehicles would move. This should be relatively simple to implement, once I find the time. (To do)

Sample output

Sample skyline.
Sample skyline.

Work in progress: Hexagonal civilisation game

It’s another unfinished game!

Ever since I played Sid Meier’s original Civilisation I’ve wanted to make something similar to explore the gameplay and create something fun to pass the time.

Links

Live page
GitHub repository

Overview

In principle this game should be fairly easy to develop because it is turn based and each problem (except the AI) is well defined. I first tried developing a game using SVG and one of my friends suggested using hexagons, which gives it a nicer, more rounded feel. However like many other projects this one is much lower priority than the others and it’s hard to justify the large amount of time required for development, so it’s stayed in a very rudimentary state for a long time.

As usual this game uses the canvas with the normal model for user interaction that I developed when writing the Feynman diagram maker. The rest is simply a matter of keeping track of the variables needed for the game to function. The interface would be as clean and elegant possible, as I felt this was the main advantage the original game had over the rest of the series.

Challenges

Challenge: This was one of the first games I developed using hexagons.
Solution: The choice to use hexagons leads to some non trivial problems. The most important challenge is the choice of coordinate systems and arranging it in an intuitive manner. It tooks some trial and errr but in the end I created a map that could be used for the development of the game. (Resolved)
Challenge: This game would need some (basic) artificial intelligence.
Solution: This is something I haven’t even started to think about yet! (To do)

Screenshot

Screenshot of the game, showing units and overlapping cities.
Screenshot of the game, showing units and overlapping cities.

Project management

Here’s something special for the 100th post! It’s project I use to manage projects.

This project was made to manage other projects. Each project has its own metadata which is parsed and arranged to give a useful summary of what the project does, how it was developed, and what I learned during development.

Links

Blog
GitHub repository

Overview

Each project has a python script that summarises the metadata, including the GitHub repository, the relevant links, a short description of the project, and details of implementation. Summaries are made for the Projects WordPress blog, and special links made for the PHP pages for projects that are hosted on my website. The scripts are organised so that they iterate over all projects (currently 83 and growing) at once, allowing a summary of all projects to be formulated.

This project management will eventually be extended to include icons, images, and other useful information. So far this has mostly be used to allow me to catalogue my existing projects in my spare time, which has taken ~15 months, but now that is nearly complete my needs will change, so I will add new functionalities.

Challenges

Challenge: This project needs to be versatile enough to handle a lot metadata about many projects.
Solution: In order to accommodate so many projects I had to create a new top level directory in my user space which is arranged hierarchically by category to contain all the projects. The choice to use python is motivated by the need to have a project management system that is versatile enough to handle a wide divrersity of projects with different metadata. (Resolved.)
This is how the sausage is made...
This is how the sausage is made…

Project 365

I keep a project 365 page, which means one photo per day. It’s a good way to keep track of the passage of time and as I take my camera everywhere with me it’ quite easy. After using a blog for the photos I soon became frustrated at how long it took, so I decided to make my own wrapper for the images.

Links

Live page
GitHub repository

Overview

The images are stored on disk, with automator scripts to resize them to the appropriate sizes. They are then arranged hierarchically according to date so that they can be arranged easily on the page. A list of comments, also arranged by date, is read via PHP and served up to the client as a Javascript file. There are event listeners added to each thumbnail so that the user can browse the images.

Challenges

Challenge: Given the large number of images there are a huge amount of HTTP requests.
Solution: Each thumbnail image comes with an overhead that could be reduced in the following way. The thumbnails can be combined into a single image which is indexed according to the date of each thumbnail. This can then be sliced up by client using a canvas and arranged on the page. Doing this would save a lot of time and bandwidth for both the client and server, but would require rewriting much of the code, and it is a low priority. (To be revisited.)

Screenshots

Screenshot of Project 365.
Screenshot of Project 365.
Screenshot of Project 365.
Screenshot of Project 365.

Work in progress: Maze game

Following on from the Platform game and Explorer game I wanted to create a tile based game. This was partly inspired by the game Kharne which I had played many times, and I became frustrated with the lack of similar games online. (It was this frustration that lead to a minro obsession with 91, and the creation of the huge 91 map poster.)

Links

Live page V1
Live page V2
GitHub repository

Overview

This game builds on the experience I gained from the Platform game, Explorer game and others. The player finds themself on an island where they must pursue several adventures. All of the graphics are procedurally generated and the emphasis is placed on making each adventure unique and special, rather than “Collect 100 coins” or “Beat this boss”. Like the other similar game projects the progress has been postponed here, as other projects are considered more important.

Challenges

Challenge: This game needed dialgoue trees and combat.
Solution: I wanted to make a game with some standaard dialogue and combat functionality for NPCs. The dialogue tree to a while to work out, mostly because there’s no clean way to do it, but I’m quite happy with the outcome. The combat was easier to manage, but it will take some iteration before it becomes optmised. (Resolved)
Challenge: I wanted to arrange object pseudorandomly on the canvas.
Solution: One of the things I wanted to do was auto-generate environemnts (for example, arrange flowers on grass randomly.) Initially I used random number to do this, but immediately found that the flowers would move around as the player moved! To get around this I used the room and position coordinates to generate pseudorandom numbers, which work much better. Some objects moved (such as bees around the beehive) so for those I added a time dependent part to the motion. (Resolved)
Challenge: I wanted to envinonment to change slowly.
Solution: I wanted to have an adventure where the life on the island slow dies, and I made an effect where the grass slowly fades from green to grey. This needs to be changed so that it only comes into play during certain missions, but I am very pleased with the result. It looks very creepy and it was quite easy to implement. I took some inspiration from for this. (Resolved)

Screenshots

Screenshot of the first iteration, testing dialogue trees and NPCs.
Screenshot of the first iteration, testing dialogue trees and NPCs.
Screenshot of the first iteration, testing objects, button, and doors.
Screenshot of the first iteration, testing objects, button, and doors.
Start sceen in V2.
Start sceen in V2.
Special effects in V2!
Special effects in V2!
One of the more complex rooms in V2, showing the grass slightly faded.
One of the more complex rooms in V2, showing the grass slightly faded.

Work in progress: Explorer game

This project is a game where the player explores rooms with a top down view and does all the normal things, such as traverse mazes, open doors, fight monsters and so on. This is a gravity-less version of the Platform game and has an even more retro feel to it. It’s obviously a work in progress and needs a lot more work, but the main mechanics are complete and it even has its own editor.

Links

Live page
GitHub repository

Overview

The game works mostly through simple collision detection. This differs from the platform game in that is has moving enemies that can be killed through shooting. Given that it’s in the development phase it’s lacking any coherent narrative, but one day when I get time I’ll come back to this game and add a lot more to it and make it much more interesting.

The game has an editor where the developer draws lines onto the canvas to define where the walls are. There are some features that need to be added to the editor, such as choosing the line colour, and being able to move vertices around or break up lines.

Unlike the platform game, this game uses procedurally drawn graphics. This was quite fun to write!

Challenges

Challenge: This game requires fairly robust collision detection.
Solution: Collision detector has to consider two different cases in this game: the intersection of lines and the intersection of rectangles. For recangles it’s easy enough but for lines I needed to write an algorithms to check the overlap. Once I had this I could use it in other projects. The number of potential collisions scales with the number of lines in each room, so I tried to minimise the number of lines to something sensible for gameplay reasons. (Resolved)

Screenshots

A screenshot of the game in all its simplicity.
A screenshot of the game in all its simplicity.
Screenshot of the game editor.
Screenshot of the game editor.