Computer Graphics Samples

Radio Shack Logo

Created: 1980, re-drawn: 2001

Sometime around 1980, I created this image as part of an exercise in representing logos on the chunky display of the TRS-80 computer.

In 2001, with no easy way of transferring it directly to my IBM PC, I simply recreated it using the template from which it was originally drawn. Imagine how chunky this would look today viewed full-screen!

Chain Image

Created: 1993

This chain image came about while experimenting with "Ray Tracing", a process for creating photo-realistic looking computer generated images. I wrote a small computer program to perform the mathematics required to generate a single chain link, then fed its output into the ray tracing software "Vivid", with that one link duplicated to create the alternating gold & silver links of the chain.

Spinning Ian's head

Created: 1993, animated: 2001

In 1993, I filmed myself rotating on a swivel chair and captured some footage to my computer. From this I took 54 frames (the maximum I could fit into 600Kb of memory) and wrote a tiny program to continuously display my spinning head.

In 2001, I converted 1/2 of that data (27 frames) into animated GIF format suitable for displaying on web pages without needing the additional program. I'll have to do an updated version now that I have a beard!

Bonbeach High School logo scan

Created: 2001

This is an example of an unorthodox method of obtaining an image. With Bonbeach High School having closed years prior, I was hard pressed to find a suitably hi-res copy of the school logo. The best example that I had was on a commemorative beer glass, presenting me with the interesting topographical dilemma of scanning from the curved surface of the glass.

My best result came from placing the glass on my flat bed scanner and rolling it just fast enough to stay above the scan head as it moved along underneath. It took a couple of test runs before I had my rolling motion synchronised well enough, followed by a little cleanup to produce a reasonable finished result.

Ian's Shoelace Site diagrams

Created: 2000, optimized: 2004

When I first drew the diagrams for my Ian's Shoelace Site, I took care to optimize them. I experimented with color reduction – the process of reducing the colors in an image in order to reduce filesize. I tried 256, 128, 64, 32 and even 16 colors, eventually settling on 64 colors as the best balance of reasonable image quality & compact filesize.

By 2004, the sheer volume of shoelace diagrams downloaded daily from my website made them worth optimizing further. I therefore created a custom palette of 16 carefully chosen colors: 8 × Greyscale, 4 × Blue, 4 × Yellow. The resultant images were almost indistinguishable, while the files ended up about 40% smaller!

Australian $20 banknote with Warden Norton

Created: 2017

This animation was just for fun, showing the resemblance between Rev. John Flynn on our Australian $20 banknotes and the character of Warden Norton from the 1994 film "The Shawshank Redemption".

Cascade Lacing diagrams

Created: 2018

The animated shoe lacing diagrams on my Ian's Shoelace Site consist of many separate image fragments of the individual shoelace segments overlaid to form a completed image. Normally, these are all fairly straightforward to create, but in the case of Cascade Lacing, there were several particular challenges.

• Firstly – the many required image fragments. Unlike other lacing methods with fairly similar image fragments throughout, Cascade Lacing required a different image fragment for each row because each loop-under occurs at a different position horizontally.

• Secondly – the angles of the shoelace segments entering and exiting the loop-unders differ for layouts with 2, 3, 4, 5, 6, 7 or 8 eyelet pairs. This required creating even more image fragments.

• Finally – getting all the angles exact. In the real world, the tension on each segment will cause the loop-unders to be exactly aligned and evenly spaced between the lower-right and upper-left eyelets. Initially I'd tried to get away with approximations, but the end result didn't look at all neat and orderly. I therefore bit the bullet and used some Pythagoras and trigonometry to calculate everything exactly.

After two days of hand sketches, maths, spreadsheets, Illustrator drawings and Photoshop finishing, the end result was a library of 35 individual image fragments, all of which are required to build up the animated Cascade Lacing diagrams.

Looking at the finished result, it all looks so neat and simple that almost no-one would suspect how much work went into it!

The animation shown above demonstrates how a series of alignment lines was drawn to a calculated length and rotated through a calculated angle to form the intersections through which the shoelace segments were then drawn.

Kingston Boatshed Association website menus

Created: 2018

When creating the website for the Kingston Boatshed Association, it seemed a fun idea to use a row of boatsheds as themed menu elements. Clicking any boatshed to select that page would open the boatshed doors, revealing some occupants.

I began with photos of some representative boatsheds, but I knew from the outset that these wouldn't scale very well on different screens. In particular, that some of the typical colored stripes on the walls and doors of the boatsheds would become blurred – or disappear completely – unless they were spaced at an exact multiple of the displayed resolution.

I therefore carefully re-drew each boatshed image with the stripe spacings chosen to display accurately at four different scales (100%, 75%, 50% and 37.5%). It's a small but nonetheless important touch to ensure that the boatsheds always look their best, regardless of the device used to view the website.