The main purpose of this blog is to keep track of my various projects and to document them. The end result would be a long list of projects with all the associated metadata which can then be summarised to make browsing them easier. The Project List is a meta project that does just that. Each project on my website gets a file named project.php associated with it that contains the meta information. They are then gathered by the Project List and can be sorted, filtered, and displayed online. I’ve also added static pages, blogs, and talks to the lists of resources. You can view the Project List to read more it. This was tied in to a major update of my website, as I had to create new preview images and new styles to match the new way of showing the projects. This will probably evolve further over time, but for now it’s fine.
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.
One of the criticisms of my site was that there were too many 90 degree corners. CSS has had rounded corners for a long time, so I decided to finally use this to make things look a little nicer. Now I have rounded corners on most of my website, which makes things look a little more inviting and soft.
At the same time I decided to update the style in general, taking as much of the project-specific styles out of the main style sheets as possible. This cut down the size of the main file by about 50%. The transition was not entirely smooth, and there are some parts that need to be fixed (most notably on the Project 365 page) but this does not affect the readibility of the website, so it’s a low priority.
In addition to the rounded corners and separation of main from project based styles, I also introduced some style related variables. Now a single style can define a set of colours that can be used to reskin the entire website. This uses PHP variables and several source files, which are then compiled into a single, relatively small stylesheet.
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.)
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.
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.
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.
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.
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.
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)
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.
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.)