Tag Archives: canvas

Update: Tangles

While giving my website a facelift I deciced that the Tangles (Live page) project needed some attention. The page was previously the main game, followed by a mess of buttons and then instructions. I rearranged the content to give a proper introduction and made an in-canvas transition screen between levels. The end result looks much nicer and now it’s almost a completely self contained game. With some more work it could be made into a standalone app for the App Store. This project also benefitted from a higher resolution canvas than the actual element size, leading to better graphics.

Screenshot

Tangles, with a new transition screen
Tangles, with a new transition screen

Meta: Variable width style

As part of the updates to my website I dediced to add some variable width CSS styles. This allows the width of the main container to change in a fluid manner as the user changes the window size. This meant making two major changes.

First the menu had to change in size and content to respond to the changing window size. This now supports window widths down to 610 px. I may add support for window sizes down to 320 px, although to be honest most of the content on this website is not designed to be viewed on such a small device and supporting such antiquated devices seems counterproductive.

The second major change was changing the size of the canvas elements dynamically. This proved to be a bit tricky, since I wanted to keep the dimensions of the canvas the same, while changing the size on screen. It turns out the way to do this is to allow the canvas containter to change, and set the width of the canvas in terms of %. This has the added advantage of allowing the developer to use a higher resolution for the canvas, leading to superior graphics (at the expense of some more CPU time and RAM.)

Screenshots

The wide menu
The wide menu
The narrow menu
The narrow menu

Update: Wolfram rules

While updating my website, another project that needed a little attention was the Wolfram rules (Live page) project. Apart from looking a little poor in its presentation, it was an experiment in DOM manipulation where a huhe HTML table was used to display the resulting algorithm. While it was nice to see that the DOM and CSS worked as they should, this project was better suited to the canvas, so I moved over to the canvas and added some colour to improve the presentation.

Before and after

Wolfram rules before the update
Wolfram rules before the update
Wolfram rules after the update
Wolfram rules after the update

Update: Conway’s game of life

As part of my website’s facelift I decided to update the Conway’s game of life (Live page) project. The content was rearranged to make more sense to the first time user, a the controls organised in a way that made them larger and easier to navigate. I also changed the links to different shapes to be gallery objects (similar to what I had for the Mandelbrot project.) This is also the first page to get the “You might also like…” feature at the bottom, which will soon appear on most other pages when I get time to add them.

Before and after

Conway before the update
Conway before the update
Conway after the update
Conway after the update
Conway after the update
Conway 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.