Computer Graphics Samples
This is a collection of various graphics that were particularly complex to produce, complete with explanations of the steps used in their creation. One example is my "World Zoom", which took over a week to create yet runs for just over 15 seconds.
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!
Spinning 3-D Ian logo
Created: 1980, expanded: 1990, animated: 2001
I designed my personal logo circa 1980 while experimenting with 3-D images on my TRS-80 computer, using my own custom programs and 3-D rotation formulae.
In 1990 I used the same data and formulae to demonstrate the powerful graphing capabilities of spreadsheets.
In 2001, I captured 36 images of the logo at different rotation angles, from which I created this spinning version in
animated GIF format.
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!
NEON Productions documentary videos
Created: 2000 / 2001
These documentary videos were a collaboration between myself and my good friend Neil Winstone, in which we interviewed some friends from secondary school with whom we still kept in close contact more than 25 years later.
Besides the logistics of filming, the real fun came afterwards as we built a desktop computer video editing system (which
was rare in those days!) and were thus able to perform extremely complex and accurate editing.
Bonbeach High School logo scan
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.
World Zoom animation
This little movie (see link below) zooms all the way from outer space to Australia > Victoria > Port Phillip > Chelsea > Our house. It was considered quite impressive before "Google Earth" came along and made such things more common.
I created it for part of a documentary video I made with my friend Neil. It took over a week to create, yet runs for just over 15 seconds.
The data from outer space down to about the level of Port Phillip came from the "Encarta World Atlas" (that was easy). After that I scanned dozens of pages from the "Melways Street Directory" plus council street plans and used them as the source material for drawing 13 of my own maps with increasing levels of detail and with the same color scheme as the Encarta maps. I already had our house plan drawn up, which only needed to be rotated to the correct angle and overlaid onto those maps.
Now that I had the source material, I created a spreadsheet that performed all of the calculations needed to turn them into a smooth series of almost 400 frames. I wrote several custom programs to extract the computed images, then assembled the resultant frames with some video editing software to compile the finished video. Phew!
View Movie (about 3.5Mb) (Right-click to download.)
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
Australian $20 banknote with Warden Norton
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
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
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.