Computer Graphics Samples

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.

Spinning 3-D Ian logo

Created: 1980, expanded: 1990, animated: 2001 Spinning 3-D Ian logo, 36 frames (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.

Chain Image

Created: 1993 Chain image (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

Ian's spinning head animation (1993 / 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 NEON Productions documentary videos (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.

World Zoom animation

Created: 2001 World Zoom animation (2001)

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 Ian's Shoelace Site diagrams

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 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

Created: 2018 Cascade Lacing diagrams construction

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 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.

Sponsored Links