Kecske Bak

Synfig Studio Gate Weave

2012-01-22T14:14:00.000+01:00

If I wasn't so stupid, I’d have realised you could add gate weave to my animations in Synfig Studio without the need for any coding whatsoever.

Here’s an example:

You simply need to add a translate layer to your animation. The translate layer is used to move things around the canvas. Here’s one in my layers panel:

Translate layer in layers panel

The translate layer should be at the top, so everything in your animation will weave (Z Depth 0.000000).

Next, you need to convert the Translate layer's Origin into a Composite. That means the X-axis and Y-axis values are separated instead of being a vector.

You then convert the X-axis and Y-axis values to Random. Put in some suitable values, such as these:

Example X and Y axis values

Export the resulting animation as video and that’s all there is to it.

Weave All Wobbles

2012-01-15T10:44:00.000+01:00

Back in July, I wrote about some of the techniques I used to simulate old 16mm film entirely using free software.

One technique I mentioned was using Kdenlive to simulate gate weave – that strangely pleasing effect whereby picture moves almost imperceptibly around the screen as you watch. If you’re not familiar with what gate weave looks like, here’s an example:

I mentioned in my previous article that I discovered I could simulate gate weave manually using the Kdenlive “Pan and Zoom” filter.

I did this by zooming in on my video slightly…

Video resized by 108% to zoom in on it slightly

…and then moving the picture around randomly at 5 frame intervals.

Keyframes added a five frame intervals; X and Y changed randomly

Once this is done, I could save this portion gate weave as a custom effect so I could re-use it:

Save effect button in Kdenlive

When you do this, your zoom, keyframes and random movements are stored in the ~/.kde/share/apps/kdenlive/effects folder as an XML file. The XML file created by Kdenlive for some manually created gate weave looks like this:

<effect tag="affine" type="custom" id="test">
<name>test</name>
<description>Adjust size and position of clip</description>
<author>Charles Yates</author>
 <parameter opacity="false" 
    default="0%,0%:100%x100%" 
    type="geometry" 
    value="-29,-23:778x622:100;
      25=-30,-25:778x622:100;
      50=-29,-22:778x622:100;
      75=-31,-24:778x622:100;
      100=-28,-24:778x622:100;
      123=-31,-21:778x622:100" 
    name="transition.geometry">
  <name>Rectangle</name>
 </parameter>
</effect>

Obviously, creating gate weave by hand for a long piece of video using the Kdenlive interface would take hours. Luckily, because the resulting gate weave custom effect is stored as a simple XML file, you can write a quick script to create the gate weave instead.

So I thought I'd use this post show you the script I use to create “automatic” gate weave.

When I do scripting jobs I prefer to use Python if possible. For this task I needed to get it to write out an XML file. Python comes with a selection of complex but hugely flexible ways to do this. However, to make this as quick and easy as possible, I used a lovely Python module called pyfo which was developed by Luke Arno and did everything I needed.

Although you can install pyfo if you want to, there’s no need; you can just extract the pyfo.py file and put it in the same folder as your Python scripts that use it.

As you can see below, my Python script is pretty self-explanatory. The script below is suitable for adding gate weave to PAL 4:3 video.

The variable value_string determines how much the video is zoomed in by initially. For wide-screen PAL 16:9 video I adjust this value to "-29,-23:1034x622:100;". The value of the step_value variable determines how often the video frame moves. I think every 5 frames often works best.

You can run the script multiple times to create different xml files, but if you do remember that you will need to change the value of the custom_effect_name variable each time to something different so you’ll be able to tell your gate weave custom effects apart.

#!/usr/bin/env python2.4

""" This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see http://www.gnu.org/licenses/."""

import random
from pyfo import pyfo

custom_effect_name = "weave"

#Number of seconds of gate weave required
frames_required = 750

#Initial value of frame
value_string = "-29,-23:778x622:100;"

#Origin
origin = {'x':-29, 'y':-23}

#Step value (in frames)
step_value = 5

#Maximum weave distances
max_distance = {'x': 1, 'y': 1}

for i in range(0, frames_required, step_value):
    x = random.randrange(origin['x'] - max_distance['x'],
            origin['x'] + max_distance['x'] + 1)
    y = random.randrange(origin['y'] - max_distance['y'], 
            origin['y'] + max_distance['y'] + 1)
    value_string += str(i) + "=" + str(x) + "," + str(y) + ":778x622:100;"

xml_output = \
    ('effect', [
    ('name', custom_effect_name),
    ('description', 'Adjust size and position of clip'),
    ('author', 'Charles Yates'),
    ('parameter', ('name', 'Rectangle'),
    {'opacity':'false', 'default':'0%,0%:100%x100%', 
    'type':'geometry', 'value':value_string, 'name':'transition.geometry'}),
    ], {'id':custom_effect_name, 'type':'custom', 'tag':'affine'})

result = pyfo(xml_output, pretty=True, prolog=False, encoding='ascii')
print result.encode('ascii', 'xmlcharrefreplace')

As it is, my Python script writes the XML file it produces to the console window. You can copy and paste the resulting XML into a blank text file and save it to ~/.kde/share/apps/kdenlive/effects folder,

However, you can pipe the output into straight into an XML file instead. For instance:

$ python gateweave.py > gateweave.xml

Obviously, my Gate Weave solution isn’t very elegant, but who cares – it works, and it’s all free software!

ATV Yesterday and Today

2012-01-14T14:59:00.000+01:00

If you’ve read my blog before, you may have come across some posts about my friend Roddy Buxton. Roddy is an incredibly inventive chap – he’s rather like Wallace and Grommit rolled into one! He has his own blog these days and I find everything on it fascinating.

One of Roddy’s cracking contraptions

One of the subjects recently covered on Roddy’s blog is the home-made telecine machine he built. The telecine was a device invented by John Logie-Baird at the very dawn of broadcasting (he began work on telecine back in the 1920s) for transferring pictures from film to television.

Roddy also shares my love of everything ATV, so naturally one of the first films Roddy used to demonstrate his telecine was a 16mm film copy of the ATV Today title sequence from 1976.

This title sequence was used from 1976-1979 and proved so iconic (no doubt helped immeasurably by the rather forgetful young lady who forgot to put her dress on) it is often used to herald items about ATV on ITV Central News. Sadly, as you can see below, the sequence was not created in widescreen so it usually looks pretty odd when it’s shown these days.

How the sequence looks when broadcast these days.

The quality of Roddy’s transfer was so good I thought it really lent itself to creating a genuine widescreen version. In addition, this would provide me with a perfect opportunity to learn some more about animating using the free software animation tool Synfig Studio.

The first thing to do when attempting an animation like this is to watch the source video frame by frame and jot down a list of key-frames – the frames where something starts or stops happening. I use a piece of free software called Avidemux to play video frame by frame. Avidemux is like a Swiss Army knife for video and I find it handy for all sorts of things.

Video in Avidemux

I write key-frame lists in text file that I keep with all the other files for a project. I used to jot the key frames down on a pad, but I’ve found using a text file has two important advantages: it’s neater and I can always find it! Here is my key frame list in Gedit, which is my favourite text editor:

Key-frame list in Gedit

After I have my key-frame list I then do any experimenting I need to do if there are any parts of the sequence I’m not sure how to achieve. It’s always good to do this before you start a lot of work on graphics or animation so that you don’t waste a lot of time creating things you can’t eventually use.

The ATV Today title sequence is mostly straightforward, as it uses techniques I’ve already used in the Spotlight South-West titles I created last year. However one thing I was not too sure about was how to key video onto the finished sequence.

Usually, when I have to create video keyed onto animation I cheat. Instead of keying, I make “cut-outs” (transparent areas) in my animation. I then export my animation as a PNG32 image sequence and play any video I need underneath it. This gives a perfect, fringeless key and was the technique I used for my News At One title sequence.

However, with this title sequence things were a bit trickier – I needed two key colours, as the titles often contained two completely different video sequences keyed onto it at the same time.

Two sequences keyed at once

Therefore I had to use chromakeying in Kdenlive using the “Blue Screen” filter, something I had never had a lot of success with before.

The first part was simple – I couldn’t key two different video sequences onto two different coloured keys at once in Kdenlive. Therefore I had to key the first colour, export the video losslessly (so I would get no compression artefacts), then key the second colour.

The harder part was making the key look smooth. Digital keying is an all or nothing affair, so what you key tends to have horrible pixellated edges.

Very nasty pixel stepping on the keyed video

The solution to this problem was obvious, so it took me quite a while to hit upon it! The ATV Today title sequence is standard definition PAL Widescreen. However, if I export my animation at 1080p HD and do my keys at HD they will have much nicer rounded edges as the pixels are “smaller”. I can then downscale my video to standard definition when I’ve done my keying and get the rounded effect I was after.

Smooth keying, without pixel stepping

The other thing I found is that keying in Kdenlive is very, very sensitive. I had to do lots of test renders on short sections as there was only one “Variance” setting (on a scale between 1 and 100) that was exactly right for each colour.

So now I was convinced I could actually produce the sequence, it was time to start drawing. I created all of my images for the sequence in Inkscape, which is a free software vector graphic tool based around the SVG standard.

However, in order to produce images in Inkscape I needed to take source images from the original video to trace over. I used Avidemux to do this. The slit masks that the film sequences are keyed on to are about four screens wide, so once I had exported all the images I was interested in I needed to stitch them together in the free software image editor The GIMP. Here is an example, picked totally at random:

She'll catch her death of cold…

Back in Inkscape I realised that the sequence was based around twenty stripes, so the first thing I did before I created all the slit mask images was created guides for each stripe:

These guides saved me a lot of time

The stripes were simply rounded rectangles that I drew in Inkscape. It didn't take long to trace all of the slit masks for the title sequence. Two of the masks were repeated, which meant that I didn’t have as many graphics to create as I was fearing.

Once the slit masks were out of the way I could create the smaller items such as the logo:

ATV Today logo created in Inkscape

And, with that, all the Inkscape drawing was done. It was time to animate my drawings now, so I needed to export my Inkscape drawings into Synfig Studio. To do this I was able to use nikitakit’s fantastic new Synfig Studio SIF file Exporter plug-in for Inkscape. This does a fabulous job of enabling Inkscape artwork to be used in Synfig Studio, and it will soon be included as standard in Inkscape releases.

When I did my Spotlight title sequence I exported (saved) all of my encapsulated canvases (akin to Symbols in Flash) that I needed to reuse within my main Synfig file. This was probably because I came to Synfig from Macromedia Flash and was used to the idea of having a large file containing all the library symbols it used internally.

I have been playing with Synfig Studio a lot more since then, and I realised a far more sensible way to work was to have each of what would have been my library symbols in Flash saved as separate Synfig files. Therefore I created eight separate Synfig Studio files for each part of the sequence and created a master file that imports them all and is used to render out the finished sequence.

The project structure

This meant that my finished sequence was made up of nine very simple Synfig animation files instead of one large and complicated one.

The animation itself mainly consisted of simply animating my Inkscape slit masks across the stage using linear interpolation (i.e. a regular speed of movement).

I could type my key-frames from my key-frame text file directly into the Synfig Studio key-frame list:

Key-frames for one part of the animation

The glow was added to the ATV Today logo using a “Fast Gaussian Blur”, and the colour was changed using the “Colour Correct” layer effect – exactly the same techniques I used in the Spotlight South-West titles.

ATV Today logo in Synfig

In order to improve the rendering speed I made sure I changed the “Amount” (visibility) of anything that was not on the stage at the present time to 0 so the renderer wouldn't bother trying to render. You do this using Constant interpolation so that the value is either 0 or 1.

I had a couple of very minor problems with Synfig when I was working on this animation. One thing that confused me sometimes was the misalignment of key-frame symbol between the Properties panel and the Timeline.

This misalignment can be very confusing

As you can see above, the misalignment gets greater the further down the “Properties Panel” something appears. This makes it quite hard at times to work out what is being animated.

Some very odd Length values indeed!

Another problem I had was that the key-frame panel shows strange values in the time of length columns - particularly if you forget to set your project to 25 frames per second at the outset.

However, overall I think Synfig Studio did brilliantly, and I would chose it over Flash if I had to create this sequence again and could choose any program to create it in.

The most important technical benefit of Synfig Studio for this job was the fact that it uses floating point precision for colour, so the glows on the ATV Today logo look far better than they would have done in Flash as the colour values would not be prematurely rounded before the final render.

I rendered out my Synfig Studio animation as video via ffmpeg using the HuffyUV lossless codec, and then I was ready to move onto Kdenlive and do the keying.

Obviously I needed some “film sequences” to key into the titles, but I only have a small selection of videos as I don't have a video camera. To capture video I use my Canon Ixus 65, which records MJPEG video at 640 x 480 resolution at 30fps.

My 16mm film camera

Bizarrely, when the progressive nature of its output is coupled with the fact it produces quite noisy pictures, I’ve found this makes it a perfect digital substitute for 16mm film camera!

I “filmised” all the keyed inserts, so that when they appear in the sequence they will have been filmised twice. Hopefully, this means I’ll get something like the degradation in quality you get when a film is then transferred to another film using an optical printer.

Once the keying was done the finished sequence was filmised entirely using Kdenlive using techniques I've already discussed here.

And so, here’s the finished sequence:

Although I’m not happy about the selection of clips I’ve used, I’m delighted with the actual animation itself. I’m also very pleased that I’ve completed another project entirely using free software. However, I think the final word should go to Roddy:

Thanks for the link. I had a bit of a lump in my throat, seeing those titles scrolling across, hearing the music, while munching on my Chicken and Chips Tea… blimey, I was expecting Crossroads to come on just after!

If you are interested in ATV, then why not buy yourself a copy of the documentary From ATV Land in Colour? Three years in the making, over four hours in duration, its contains extensive footage (some not seen for nearly fifty years) and over eleven hours of specially shot interviews edited into two DVDs.

Merry Christmas to both my readers!

2011-12-24T09:24:00.001+01:00

Sunday’s Newcomers

2011-08-07T10:39:00.005+02:00

Click to enlarge

Going through my old Flash files, I stumbled across an early version of this image, which I first produced in 2005. I didn’t know how to make it look realistic then, but I’ve since been given lots of good advice from Rory Clark. This new version was produced in Inkscape and aged in The GIMP.

In case you’re wondering, these were all real IBA Transmitters.

Doing my pennants…

2011-08-03T16:43:00.002+02:00

I often spend idle half hours looking around flickr for anything of interest. The other day I found a very nice Anglia logo from 1959. Obviously, I couldn’t resist recreating it in Inkscape while I was listening to a pod-cast:

Click to enlarge

This stylised Anglia pennant logo formed the basis of Anglia Television’s original end-caps, including the one seen on their opening program.

Cheap Dirty Film

2011-07-28T05:48:00.006+02:00

Three years ago I talked about the programs I used to simulate old 16mm film. Back in 2008 I was using Windows XP, Adobe Premiere Elements 4.0 and a VirtualDub filter called MSU Old Cinema. I found I could use them to create some half-decent 16mm film:

These days I’m using Fedora 15 as my operating system and Kdenlive as my off-line video editor. That meant I’ve had to change the way I simulate old film quite a bit. I have been continuing to use VirtualDub and the MSU Old Cinema plug-in via WINE. Although VirtualDub is free software, the MSU Old Cinema plug-in is not, and this bothered me. I wondered what I could achieve in Kdenlive alone and I started experimenting.

In the course of this blog post I’m going to use the same image – an ITV Schools light-spots caption from the 70s that I recreated in Inkscape. Here’s the original image exported directly from Inkscape as PNG:

Created in Inkscape

The most obvious sign that you are watching something on a bit of old film are the little flecks of dirt that momentarily appear. If the dirt is on the film itself it will appear black. If it was on the negative when the film is printed it will appear white.

Kdenlive comes with a Dust filter that tries to simulate this effect. However, it has a very small database of relatively large pieces of dirt. In total there were just six pieces of dirt, drawn as SVG files, and that limited number led to an unconvincing effect. If I used the filter on a long piece of video I found I began to recognise each piece! There were also no small bits of dirt.

I drew 44 extra pieces of dirt in Inkscape and added them to the Dust filter. I also redrew dust2.svg from the default set. I call this particular piece of dirt “the space invader” as I found it was too large and too distracting!

The video below compares the Dust filter (with identical settings) before and after I added my extra files:

You may find you prefer the Kdenlive dust filter with just the default six SVG files. However, if you prefer what I have done you can download my extra SVG files from here.

With the modifications I’ve made, I actually prefer the dirt created by the Dust filter in Kdenlive to the dirt you get in the MSU Old Cinema plug in. The dirt from Kdenlive’s filter is less regular in shape and simply by changing the SVG files in the /usr/share/mlt/oldfilm folder I can tailor the dust to any specific application I have in mind.

After flecks of dirt, the second most obvious effect that you are watching old film is a non-uniform shutter causing the picture to appear to flicker very slightly. The MSU Old Cinema plug-in can simulate this effect, but wildly over does it. It is not suitable for anything other than simulating silent movies, so I never used it.

Luckily the Kdenlive Old Film plug-in does a much more convincing job. The settings that I found worked for me are shown below:

KdenLive Old Film settings for uneven shutter

And they create the results shown below:

It looks a bit odd on it’s own, but when added to all the other effects I’m describing here it will look fine.

I’ve noticed that when I am creating these effects it’s best if I move away from the monitor to a normal TV viewing distance to see how they look – otherwise I tend to make the effects too subtle to be noticed when I come to watch the results on my television!

The next thing that will help to sell the output as film is having some film grain. Film grain is irregular in shape and coloured. In fact, I used the Colour Spots setting of the MSU Noise filter to create film grain in VirtualDub.

Kdenlive has a Grain filter, which simply creates random noise of 1 pixel by 1 pixel in size. Although technically this is not at all accurate, it can look pretty good if you are careful. The settings for film grain will vary from job to job, so some trial and error is involved.

As a starting point, these settings are good:

Kdenlive Grain settings

And will look like this:

Again, it looks odd by itself (and you can't really see it at all on lossy YouTube videos!) but it will look fine when added to the other effects. You’ll start to notice the rendering begin to slow down a bit when you have added Grain! Incidentally, Grain is still worth adding even if YouTube is your target medium because it helps break up any vignette effect you add later.

The next thing you need to do is to add some blur – edges on 16mm film in particular tend to be quite soft. Kdenlive has a Box Blur filter which works just fine for blurring. How much blur you add depends on your source material, but a 1 pixel blur is fine as a starting point.

Colour film is printed with coloured dyes, so it has a different colour gamut to the RGB images you create with The GIMP, Inkscape or a digital video camera. In addition, it also fades over time. Therefore to make computer-originated images look like film-originated images some colour adjustment is normally required.

Luckily, Kdenlive has a Technicolor filter that allows you to adjust the colours to better resemble film.

Kdenlive Technicolor settings

The way colour film fades depends on whether it has been kept in a dark or light place. If I’m recreating a colour 16mm film that has been stored safely in a dark tin for many years, I make it look yellowish. If I'm recreating a colour 16mm film that’s been left out in the light a bit too much I make it look blueish. Both these looks rely adjusting the Red/Green axis slider – not the Blue/Yellow axis slider as you might think!

Source image faded with Technicolor

You soon begin to notice that the telecine machines used by broadcasters could adjust the colours they output to make colours that were impossible to resolve from the film. For instance, some of the blue backgrounds on ATV colour zooms were too rich to have been achieved without some help from the settings on the telecine machine. So the precise colour effect you want to achieve varies from project to project, and sometimes you will be actually increasing colour saturation rather than decreasing.

The Technicolor filter is, ironically, the filter you use to make colour source material monochrome too!

The biggest problem when trying to recreate old film is recreating gate weave – that strangely pleasing effect whereby picture moves almost imperceptibly around the screen as you watch.

MSU Old Cinema created an accurate but very strong gate weave which was too severe for recreating 16mm film. The Kdenlive Old Film filter has what it calls a Y-Delta setting, that makes the picture jump up and down by a set number of pixels on a set number of frames. It’s easy and quick (a Y-Delta of 1 pixel on 40% of frames is good) but introduces black lines at the top of the frame and is so obviously fake it won’t really fool anyone!

So there is, sadly, no quick way to create gate weave in Kdenlive. However, the good news is there is a way, provided you’re prepared to do a bit of work. You need to use the Pan and Zoom filter. The Pan and Zoom filter is intended to do Ken Morse rostrum camera type effects – it’s particularly good if you have a large image and want to create a video to pan around it.

However, what we can do is use the Pan and Zoom filter to move the frame around once per second. Firstly you zoom the image in by 108%. This means you won’t see any black areas around the edge of the frame as the picture moves around.

First of all, zoom the image very slightly

Next, you create key frames on each second:

Then add one key frame per second

Then you move the image around slightly on each keyframe – plus or minus two or three pixels from the starting position is often plenty.

Obviously, for a 30 second caption that's 30 keyframes and 30 movements – a lot of work if done “by hand”. However it won’t go to waste, as you can save your Pan and Zoom settings as a Custom effect and resuse it again and again on different clips.

And, luckily, doing all this by hand isn’t even necessary. Custom effects are stored as simple XML files in the /kde/shared apps/kdenlive effects folder so it is possible to write a small Python script to automatically create as much gate weave as you want – something I’ll come back to.

As well as gate weave, you can also use the Pan and Zoom filter to stretch the frame, which is perfect for simulating stretched film. Again, that’s hopefully something I’ll return to another time.

Here’s an example of video moving with the Pan and Zoom filter:

The Pan and Zoom filter also adds hugely to your rendering time, so it’s best to switch it off until you do your final render.

Glow is a very important effect to add when simulating film, particularly monochrome film. Kdenlive does not have a glow filter, so if I need to add glow to a video file I have to improvise. I export the video as a PNG sequence, add glow to the PNG files using a GIMP batch script (written in Scheme), and then reimport the video file. It’s worth the effort, as it’s amazing how much glow helps to sell something as being originated on film.

Glow added using The GIMP

The GIMP glow filter tends to be rather harsh, and tends to wash out images if you use too much glow. Therefore you have to experiment a lot.

Finally, there is often uneven brightness or contrast visible across a film frame. In VirtualDub I used a filter called the Hotspot filter. The hotspot filter is actually designed to remove this effect from old film, but turned out to be just as good at putting the effect in!

However, with Kdenlive, this effect is best achieved in the GIMP when required as Kdenlive’s Vignette effect is too unsubtle to be of any real use.

So, put it all together, and you get something like this:

All in all, Kdenlive does a pretty good job of making digitally originated images look like 16mm film but although there is room for improvement. The film scratches filter needs work, there is no glow and the film grain is really just noise rather than grain. However you can still get some excellent results and I’m really pleased with it.

Walk Cycle Train

2011-07-16T16:37:00.002+02:00

A lot of the Flash animation on the internet consists of characters blinking whilst the camera pans or zooms Ken Morse style. I can sympathise – the mere thought thought of, for instance, producing a walk cycle for an animated character can be really terrifying.

Indeed, I have a couple of projects on the back burner that I’ve put off for just that reason – they would require me producing an animated walk cycle and I really didn't know where to start.

Sammy The Chamois

I remember producing a walk cycle for a Flash game called Sammy The Chamois from Alan Scragg's drawings. The walk cycle I produced was ridiculous and broke every known rule of anatomy and physics. Scraggie said he loved the way I’d broken all the rules in Sammy’s walk – I was too ashamed to admit that was because I didn't know what the rules were!

However playing with Synfig Studio gave me a new impetus to think about animation again, and I started searching for walk cycles on the internet.

Dermot O’Connor’s website

I was lucky enough to come across a brilliant web tutorial in Flash by the Irish animator Dermot O’Connor. Dermot explains, over four videos, how to produce the classic Preston Blair animated walk cycle in Flash in the most clear and concise way imaginable. If you have ever been interested in animation I recommend that you look at them.

Having looked through these tutorials, I thought it would be a good exercise to produce Dermot’s rig in Synfig Studio and try animating the character in Synfig Studio instead of Flash. The term “rig” is a rather pretentious term for what is basically the digital version of a paper puppet jointed with brass paper fasteners.

Dermot’s Rig In Synfig Studio

Producing the rig in Synfig Studio was very straightforward. I simply traced Dermot’s drawing using Bline layers (a Bline layer is a layer made up of Bézier curves). The only tricky thing was getting the centres of rotation in the correct position. In Synfig Studio each Bline’s origin (and hence its centre of rotation) is the centre of the screen. That means you need to trace the shape, move it to somewhere near the centre of the screen to get the centre of rotation correct, and then move it back into position.

This became even more fiddly when I created Paste Canvas layers (what would be nested symbols in Flash) as you had to do a lot of mucking about to get the origin points correct. However, the great thing about Paste Canvas layers is that is completely explicit if a layer has other layers nested inside of it. That meant I didn't need to use Dermot’s asterisk convention to denote nesting.

Rotation Layers

The other main difference between a Synfig Studio rig and a Flash rig is that the rotation is provided by a rotation layer, so they had to be added to the rig amongst the other layers.

The bright orange points are “linked”

For the arms and legs, I linked the two common nodes together so I could change the shape of the arms and legs in exactly the same way as Dermot could on his Flash rig.

Once the rig was set up, I could start animating. This was much easier in Synfig Studio than it would have been in Flash. The great thing about Synfig Studio was that I didn’t have to worry about shape hints for shape tweening. I didn’t have to decide whether I wanted a shape tween or a motion tween. I didn’t have to worry about creating new time-lines for nested layers and I could name my key-frames with meaningful labels rather than abbreviations such as “c” for “contact”, and then jump to them by clicking on the JMP in the layers panel.

My key-frames panel

The main disadvantage of Synfig Studio over Flash for animating is the lack of an outline mode. This meant that you have to do more layer hiding to animate the left hand leg and arm than you would in Flash.

There were a couple of other niggles in Synfig Studio – firstly when moving multiple layers you had to make sure the canvas window has the focus before using the arrow keys. This became very annoying until I learnt to do it instinctively. Secondly, it would be great if there was a visual indication of whether a node has merged or split tangents as there is in Inkscape.

This is what I did in ten minutes in Synfig Studio – it would have taken me a lot longer to achieve in Flash:

The walk cycle so far…

It's not finished, as the arms are still very mechanical and I haven't put the bend in on the feet. However thanks to Dermot I now have the both the confidence and the knowledge to try and working with my own projects either in Flash or Synfig Studio.

You can download the Synfig Studio rig I made from the Synfig Studio forum here.

Ewe In A Draft?

2011-07-14T15:33:00.004+02:00

One of the biggest limiting factors in all the projects I’ve blogged about over the past three years is the fact that I can’t draw for toffee. My draughtsmanship is absolutely lousy.

I have always loved drawing, but I always knew that I was rubbish at it. It wasn’t helped by the fact that my best friend at school, Mike, was brilliant. One art lesson we were supposed to bring in something to draw. Mike turned up, took his shoe off, plonked it on the desk and half an hour later had drawn one of the most beautiful pencil sketches I’d ever seen. So I just gave up and regretted it ever since.

A few years ago I bought one of those “How To Draw Anything” books from the cheap bookshop in Yeovil. Me being me, I read it from cover to cover a few times, didn’t draw a stroke and then forgot all about it. However whilst playing with Synfig Studio over the past few weeks I realised that I longed desperately to be able to draw so I set about trying to actually learn.

2B or not 2B?

So a few days ago I bought two 2B pencils, a drawing board and a rubber – a total outlay of 3 quid. Given I only have 8 quid in the bank it was a sizeable investment which meant now I was committed!

I dug out the book I had bought. It was by a self-taught artist called Mark Linley, whose warm, conversational style reminds me very much of my old friend Scraggie (if you want to see what a real artist can do look at Scraggie’s website). Mark recommended drawing sheep as they are basically “boxes with a leg at each corner”.

My first attempts were simple but I was very pleased with them:

Sheep-ish

So I took the plunge and decided to try the sheep’s head:

You never have enough ram…

Obviously, I’m supposed to rub out the pencil and ink the drawings in with pens but I’m not doing that as I simply want to be able to draw things in pencil that I can transfer to the computer to work on in Inkscape, The GIMP or Synfig Studio.

It’ll probably take about two years until I get my sketching skills to anything like a standard I’m not ashamed of but I’m determined to keep at it. I won’t be boring you by uploading any more of my sketches to my blog, but I thought I’d share these to encourage anyone thinking about taking up drawing to have a go as well.

From Recreations to Replicas

2011-07-13T19:02:00.003+02:00

If you’ve been reading my blog for a while, you’ll know that whenever my attention turns to the Midlands it’s usually at the prompting of my friend Roddy Buxton.

Roddy Buxton, courtesy Fake Festivals

Roddy is a lighting engineer, electrician and visual effects designer. He is now based in South Yorkshire but grew up in ATV Land. Roddy’s TV career started in the Central Television film department, working as a spark on such programmes as Peak Practice and Boon.

As with Oliver Postgate, Roddy’s branching out into visual effects design happened quite by chance when a director noticed how practical he was and decided he’d be the perfect person to knock up a semi-practical suitcase nuke for a film!

In 2009 Roddy thought he’d like to have a go at creating a working replica of the ATV station clock from the sixties. As far as I know, this clock only exists as an off-air photograph in the Transdiffusion archive.

Photo courtesy Transdiffusion

Station clocks used to be shown at numerous times during the day by all televisions stations from the 1950s to the early 1990s. Giving the correct time was not only seen as a valuable public service to the viewer, but the clock equipment was used to sync the studio’s signals with external sources. This was vital to prevent visual glitches such as this:

Roddy asked if I could supply him with the artwork in a format suitable for printing, something I was only too happy to do. I sent him two Inkscape files, one for the clock face, the other for the hands:

Watch your face…

…and hands.

Roddy soon had other things on his mind – a new addition to his family! – and I thought no more of the model clock.

However, earlier this year Roddy started asking me questions about my Flash recreation of the BBC Schools dots. The BBC Schools dots were shown in the minute immediately preceding BBC One’s programmes for schools and colleges between September 1977 and June 1983.

In the final year the dots were digitally originated using technology similar to Richard Russell’s GNAT clock, but before that the dots were a mechanical model in the “Noddy room”.

Noddy Room, courtesy VT Old Boys

The Noddy room was a special studio in the BBC that held various mechanical models and 12" by 10" captions. These were captured in black and white by a remote controlled camera that used to “nod” up and down as different ones were selected – hence the name “Noddy” room. Colour was usually added electronically to the images before they were broadcast.

Roddy discussed the lighting for the dots:

The lighting for the BBC Noddy wasn't anything specialised. It consisted of two P38 flood lamps (available from all good DIY/Electrical stores) – these are likely to have been photographic lamps – however the only difference being is the price and box they come in. They are the same voltage, wattage and colour temp. The lamps were attached to the camera, so wherever the camera was pointing that area would be lit.

So I supplied Roddy with the dots artwork as an Inkscape SVG file and I also uploaded my latest recreation of the dots in Flash to YouTube:

In May I was delighted to receive a mail from Roddy with a photograph of this prototype dots model:

Prototype dots, courtesy Roddy Buxton

Roddy said:

The clock face is made from hardboard; though I am not happy with the results; as the dots are not that hard edged. I think I will end up using this clock face as a template to make the actual clock out of punched steel/aluminium – that way I can get hard edged dots.

Here are some more of Roddy’s pictures of making the prototype:

Holes drilled through the hardboard

Temporary captions applied to check sizing

Matt paint added to remove the reflections

I thought the prototype looked absolutely fabulous, and by now I was looking forward to seeing the finished product enormously. I didn’t have long to wait – on the 11th June Roddy wrote to say:

The artwork for the BBC “Dots” has arrived in printed form. The company I have used did all of my printing for me for £11 including P&P, and to the correct sizes – and in a matt finish too.

And on the 6th of July I finally got to see how the final schools dots model was progressing:

I showed the progress so far to my friend Rory Clark who summed it all up beautifully when he said:

Bloody hell – they're impressive!

Not only that, but Roddy had started work on something else as well!

In Colour – the ATV Station Clock replica

Roddy assures me:

Another week and the dots will be vanishing ;-)! (Finally)

I’m very much looking forward to that. And I’m also hoping Roddy will also recreate some other models from times past – and it looks like I’m in luck!

Roddy tells me:

On the “to do list” – I have always wanted a BBC Globe – so will look at that. The “Diamond” is pretty easy to do (will definitely look at that!)

Then there's the "Pie Chart"!!

Stay tuned!

Spotlight on Synfig

2011-07-05T12:17:00.014+02:00

The only thing I haven’t been able to do using free software since moving to GNU/Linux in 2008 is animate. And it bugged me. Everything else – raster graphics, vector graphics, offline video editing, audio editing, font design, desktop publishing – I could achieve, but animation was the reason I’ve had WINE and Macromedia Flash 8 installed on my machine for the past three years.

When I first started playing with GNU/Linux I came across a program called Synfig Studio which could do animation, but at that time it needed to be compiled from source code. It seemed a bit too much like brain surgery for a GNU/Linux beginner! However, the other day I was banging my head trying to do some animation in Flash. I decided to Google for any free software tools that might be able to help and I was reminded of Synfig Studio once again.

Blue hair? Why, it’s Mrs. Slocombe!

I went to the Synfig Studio website and the first thing I noticed was that a brand new shiny version of Synfig Studio was available as an RPM for Fedora. In other words, all I had to do was download, double click and go. Everything worked perfectly. I found the Synfig Studio website was excellent, there were a large number of tutorials and an extensive manual and so I set about reading.

Animation programs are always off-putting to beginners due to their complexity, and Synfig Studio was no exception – partly because it began life as an in-house tool in a professional animation company and that really shows in the power and complexity of what it offers.

I learned Flash 2 back in 1998 by trying to create the ATV Colour Zoom ident as I thought it would be quite a good challenge and force me to look into the tool properly. For the same reason I dusted off one of the more challenging animations in my “TODO” list to learn Synfig – the BBC South West Spotlight dots titles.

My plan was to draw the Spotlight logo in Inkscape, import that into Synfig Studio and then animate it. The first thing I did was set up my canvas. Changing the units to pixels is very important – Synfig Studio uses points by default which seems a strange choice for a tool not centred on printed work.

When I tried importing my artwork from Inkscape it came in at the wrong size:

Imported SVG from Inkscape

The reason was obscure and not what I had been expecting. I had assumed it was the old Inkscape dpi (dots per inch) problem, but it was to do with something called Image Span which is related to the aspect ratio of the end animation. After reacquainting myself with Pythagorean theorem I worked out I needed to set the Image Span to 16 for 768 by 576 pixel artwork from Inkscape.

Setting Image Span in Synfig Studio

Then artwork comes in correctly from Inkscape. However, now I could see some problems with imported SVG:

Problems with Imported Inkscape SVG

There were two problems – the holes had disappeared in the “P” and “O” and there was a segment missing from the circle of the letter “O”.

Paths with holes are imported into Synfig Studio as two objects or “layers” (everything in Synfig Studio is a layer) – the letter and its hole. To make a letter with a hole in it you need to place the hole layer above the letter layer, and then give the hole a layer an “alpha over” blend method. As you can see, the logic behind the program is very different to Flash!

Using Alpha Over in Synfig

The nick out of the letter “O” was Inkscape’s fault. When you convert text to paths in Inkscape you often get double nodes (nodes stacked on top of each other). Double nodes also cause problems in Inkscape itself so it’s always a good idea to merge these nodes in Inkscape.

The join nodes button in Inkscape

Inkscape ellipses don’t import as Synfig Studio circles (they come in as something called Blines instead), so I redrew the dots in the Spotlight logo as Synfig Studio circles to make animation easier later. In fact to get an ellipse in Synfig Studio you draw a circle and then apply a transformation layer to it – again, a bit strange for a beginner! So, now I had the artwork imported:

Inkscape SVG imported perfectly

I discovered I didn’t actually need the background rectangle I’d drawn in Inkscape in Synfig Studio, there’s a special type of layer for solid backgrounds called “Solid Colour” that always fills the background however large your animation is. This is analogous to “Background Colour” in Flash, only in Synfig Studio you could use a “Gradient” instead.

Now I needed to colour my artwork. I found a small bug in Synfig Studio which means that you cannot use the HTML-style RGB value (a six digit hexadecimal number) to enter colours. My background colour in hexadecimal was #171a17. When I entered this into Synfig Studio I got a mid grey, instead of the charcoal colour I was expecting.

A Lighter Shade of Dark

I went into the GIMP and discovered that #171a17 is equivalent to the the RGB percentages 9% 10% 9%.

The GIMP Colour Picker information dialog

I entered the values 9%, 10%, 9% into the Red, Green and Blue spinboxes on the Synfig Colours dialog box, and I got the colour I expected. However, I also found that the HTML code displayed on the Colours dialog became 010101 – not what I expected!

In Synfig Studio, the HTML code is wrong

The ever-helpful Genete on the Synfig Studio Forums suggested that I might have a non-linear palette selected for my file, but this turned out not to be the case. So the moral of the story is, sadly, only enter colour values as RGB percentages.

Speaking of colours, it would be great if Synfig Studio could load GIMP palettes, or create a palette from the currently imported layers.

I then set about animating. This is quite different to Macromedia Flash as in addition to “keyframes” you also have the concept of “waypoints”. A “keyframe” stores every setting of every “layer” item on the current canvas at a particular point, whereas a “waypoint” just stores one setting. You also have to forget about the concept of “frames” that was so key to Macromedia Flash. Synfig Studio, in common with Swift 3D, uses the concept of time instead. As far as the time-line was concerned I am very glad that I had done some work in Swift 3D before approaching Synfig Studio.

Keyframe labels appear on the canvas too

One thing I did like is the fact you could label not only your layers but your keyframes – that saved me an awful lot of scribbling! Once you have your keyframes set up Synfig Studio really excels. There are numerous different ways of defining how the animation gets from one keyframe to another. The default was TCB which gives beautiful naturalistic movement, but for Spotlight it would cause arcing like this:

Arc caused by TCB Interpolation

When I really wanted linear tweening to give me straight edges like this:

Corrected by Linear Interpolation

Another little gotcha I found whilst animating was that the time-lines starts at “0f”, not “Frame 1” as in Flash. This caught me out when I was putting the animation together as I was getting odd blank frames!

Whilst animating I came across a niggle caused by my operating System. In GNU/Linux Alt and left-click is used to move windows around. However, in Synfig Studio Alt and left-click is used to transform (i.e. scale) objects. Fedora 15’s deskptop GNOME 3 compounds this problem by removing the “Windows Movement Key” setting that you could adjust in Gnome 2 to change this behaviour. Fortunately the wonderful Synfig Studio forum came to the rescue as “nikolardo” had a cunning work-around:

“Another workaround for the Alt issue presents itself when you realize it only happens when you Alt-click. Pressing Alt and then clicking gets picked up by the WM (openbox, in my case), but clicking on a vertex and then holding the Alt key produces the scaling behavior intended. So, next time you Alt-click and the window moves, let go, and then click-Alt.”

Whilst working I found that “Groups” were not what I expected at all. The purpose of Groups in Synfig Studio is to collect disparate items around your animation so they can be selected together. In fact, when creating the animation I never used any groups at all, although I can see how they would be useful on other animations.

I loved the fact I could enter a frame number e.g. 454 to move somewhere on the time-line and it got converted into seconds and frames. I tend to think in frame numbers and it’s great I don't have to keep dividing by 25 and working out the remainder. This was a huge help when setting up keyframes.

Useful for creating guides at 0x and 0y

Another thing I found was I could use the Canvas Metadata window, which at first seemed useless, to adjust the guides. It would be even better if you could use pixels instead of internal units to adjust the guide positions in this window.

One thing I soon learned as I worked was that Synfig Studio’s canvas window is not always WYSIWYG, and the Preview Window isn’t always an accurate reflection of the end result either (but this is being rewritten for the next release) – you have to do a render in order to see how your final result is coming along. This is particularly true if you are using effects like Motion Blur. For instance, when the Spotlight S is rotating, this is what I get to see on the stage:

What you see in Synfig Studio…

Whereas this is what the end result looks like:

…is much more impressive when rendered!

Correction from Genete:

“That’s because your display quality settings were not set to high quality. There is a spin button on the top of the canvas that allows you to set the quality to 1 (better), instead of use 8 (worse) the default value. WYSIWYG is fully done always in Synfig Studio. The problem is that it takes some time to render complex effects like motion blur, duplicate layer, etc.”

For my renders I used a PNG sequence, and only rendered the frames I'd just worked on. One thing I noted when rendering is that the render progress bar and cancel button on the canvas window don’t work. In the future I would love it if a WebM render option was added to Synfig Studio, particularly given the popularity of YouTube.

Notice that zooms, blurs and colour corrections are layers.

As I've said before, in Synfig Studio everything is a layer. Not just every single shape but a whole host of other things such as colour changes, blur effects, tranforms. So, obviously the number of layers you get soon gets large and unwieldy. However you can “encapsulate” layers together into what are called “Paste Layers” and then deal with these encapsulated layers as one object.

The capsules show encapsulated layers

You may be thinking this sounds a bit like the Flash concept of having symbols, but it isn’t – yet. The encapsulated layers are still on the main canvas and therefore use the main canvas’s time-line. In order to use encapsulated symbols in a way analogous to Flash library symbols you need to “Export” the Paste Layer as a separate Canvas. It will then appear in the Canvas Browser.

The Canvas Browser

Now your capsule of layers is a canvas in its own right, with its own independent time-line and you can use it in a way akin to library symbols in Flash. As you work, you’ll find that the main canvas’s time-line gets cluttered with keyframes and waypoints, so it’s worth exporting encapsulated layers to simplify your work.

The only real downside of the Synfig Studio time-line design is shared by Swift 3D. It’s that you can’t add and remove things from your animation easily. If you want to “hide” something you have to set its amount to 0 and then you have to fiddle about with waypoints with constant interpolation in order to show it again. It seems too much work when you simply want to put things on and take things off of your canvas.

Exporting a Paste Layer after you have already done work on an animation needs some care. Key frames are not brought across to the new canvas, and the exported animation duration defaults to 5s (five seconds) which means you have to increase it to the right length manually. So, before you start work on an animation it’s better to decide upon its structure first. But that was always the case anyway!

One minor thing – I found that I could only remove things out of encapsulated layers by dragging and dropping which was not discoverable for me – I expected to find another way of doing it via a button of some kind too.

Put a space in an Exported Canvas name and…

Entering a canvas name with a space in gives a message telling you about the C++ standard type library throwing an exception - not something most cartoonists would find particularly helpful!

When adding an exported canvas from the canvas browser on your main canvas you can offset its start-point by any number of frames. However, the offset needs to be a negative number of frames to make it appear a positive number of frames later and a positive number to make it start earlier which foxed me for a bit too!

Anyway, enough moaning – these are only very minor points! What you should take away from all this is that with exported canvases I found I could work exactly the same way as I was used to in Flash.

This does the hard work in the Spotlight animation.

Meanwhile, back to my animation. I wanted to emulate some optical film effects in my animation. The first one, motion trails, was easy to do with the Synfig Studio Motion Blur layer. This gives you a huge amount of control over the appearance of your finished trail.

Software doesn’t get any more magical.

I also needed some “optical glow”. I achieved this very easily by using the Colour Correct layer. This actually had a setting for Over Exposure – the exact effect I wanted to emulate – built into it! I was absolutely amazed! And not only that, I could animate the Over Exposure setting too. Incredible.

A bit of Blur (of which there are a dazzling array) helped to sell the glow even more.

The range of effects you can add to your animations in Synfig Studio is truly overwhelming. I think I'll be blogging for months about the huge range of things you can do in Synfig Studio. It is an enormous amount of fun.

Zoom layers are a very clever idea.

To zoom in and out I used, naturally enough, the Zoom layer. Having a zoom on a separate layer is incredibly sensible when you actually start using it, but seemed very odd at first appearance.

And, it goes without saying, moving the dots around the canvas in Synfig Studio was simplicity itself.

So, here’s the finished result:

Did I mention Craig Rich knew my Granny…

Synfig files are very small and compact. The final file size was tiny – 11.9KB. I found that utterly incredible and it compares very favourably to Flash.

I could have completed these titles in about two hours in Macromedia Flash 8, in Synfig it took me two days to learn the tool and complete the animation which I was quite pleased with.

Synfig is an excellent tool that is staying firmly installed on my computer! I really love using it and I am excited about what I can achieve using it in the future and the vast range possibilities it opens up. It is powerful, flexible, stable and rewards the effort you put into learning it a thousand times over. It also has a friendly and helpful community. Recommended.

Chroma Kee

2011-06-13T07:28:00.002+02:00

I’ve always found that I learn far more about a piece of software through playing rather than working and that’s certainly been the case with the offline video editing program Kdenlive. I’ve also found that when you have a definite goal in mind then “the software doesn’t do that” no longer becomes an option and you use the software far more inventively in order to achieve it.

And so it proved when I decided, using Flash 8 and Kdenlive, I’d try and recreate the title sequence for ITN’s News At One. I first saw this title sequence back when the programme was called First Report – that was before the soporific Aussie soap The Sullivans pushed the programme to its more familiar one o’clock slot.

Here are the original News At One titles that someone culled from TV Ark:

As you can see, it’s quite a complicated title sequence and people who know far more about this sort of thing than me have noted how hard it would have been to achieve in the 70s. They’ve always been very, very good technically at ITN.

Although I haven’t got a clue how ITN did it, I decided on the basic approach of having two layers of video in Kdenlive for my version.

The bottom layer would be the typing hands (or paws in my case – thanks Lionel!). These were shot on my little Canon Ixus camera and then put through the Kdenlive “Threshold” filter and coloured with, of all things, the MSU Old Cinema filter.

Lionel touch-typing

The top layer of video would consist of the zoom out of the Houses of Parliament’s clock tower (replaced by the block of flats where I live) which fades out, and the photo montage of odd people and drab places (replaced by pictures of my daughters, their toys and things in the square outside).

Creating the montage for the top layer was straight forward. I loved the fact that, on the original, the outlines around the images were all different widths, and some of them were even bent out of true. Even the top of the News at One logo was at an angle!

Creating the montage in Flash

The problem I faced was how to merge these two layers. My first thought was to use a Chroma key, but this gave me all sorts of problems and some rather nasty digital fringing that looked like anything but 70s television.

Click to enlarge

What I really needed was to be able to export transparency from Flash into Kdenlive – and it turned out that I could. The first step was to export the sequence out of Flash 8 as a PNG sequence at 24 bits per pixel with alpha channel, like this:

Getting transparency from Flash to Kdenlive

Then I could import the PNG sequence into Kdenlive, and use a Composition transition to knit the two layers together.

Click to enlarge

PNG sequences are the best thing ever invented for my work – everything can use them perfectly and they mean that I can transfer work between packages without losing quality or suffering odd effects.

So, here’s the finished sequence:

Now I understand keying properly I can do loads of things I thought I simply couldn’t do before. And all because I thought I’d do a little sequence to make my daughters laugh.

Test Card F Prototype

2011-06-11T10:54:00.005+02:00

One of my favourite websites is Mikey Bennett’s Vintage Technology page. I love looking at all the vintage television sets Mikey has lovingly restored back to full working order. If your old Bush has lost its colour or your horizontal hold is ruining your enjoyment of your Rank then Mikey’s your man.

Mikey on an experimental 1969 3-D television

A few years back Rory Clark created a very entertaining DVD to demonstrate all the sets in the South West England Vintage Television Museum collection that Mikey curates. The DVD featured a range of test cards and tuning signals from the very old up to the present day accompanied by a selection of tones and music. Although it has given sterling service since then, Rory wanted to create an updated and expanded DVD for Mikey.

One of the cards Rory wanted to include this time was a prototype Test Card F featuring a rather different picture in place of Carol Hersee. Here’s the original:

String vests have never photographed better

Unfortunately the surviving scan of the card wouldn’t really show off Mikey's television sets to best effect as it has faded quite considerably – the grey linearity squares had a distinctly reddish cast and the green castellations in the reference generator area had almost gone black. Therefore Rory asked me if I could recreate the card.

To do this, I used Inkscape as I only draw items in Flash now if it’s completely unavoidable. This is what I came up with in Inkscape:

She’s gone. Was it something I said?

The hardest job when recreating the card was doing the hand lettering on the caption. I did experiment to see if I could get away with using Benguiat Condensed, but it simply didn’t look close enough. In the end, the lettering took as long as the whole of the rest of the card.

It’s interesting to see the differences between this card and Test Card F. A good place to go to find out what's missing is Alan Pemberton’s Pembers’ Ponderings website. He has two clickable Test Card Fs which will tell you exactly what each part of the card does.

I can't wait to see how Rory “distresses” the my Inkscape drawing to make it look like a real transparency on the finished DVD.

It’s BBC 2 you want…

2011-05-29T11:18:00.016+02:00

I felt it was time for an update of my 2008 showreel as the network globes in particular were a mortal embarrassment to me and I also hadn’t “distressed” anything on the old version as, back in 2008, I didn’t know how. I’ve thoroughly picked Rory Clark’s brains since then!

The Flash was exported out as PNG sequences for processing. The film effect was done using the MSU Old Cinema plug-in in VirtualDub and the MLT Old Film plug-in in Kdenlive. I also used The GIMP in batch mode with some Scheme scripts I wrote to add some “glow”.

I found Kdenlive to be an excellent and extremely capable off-line editor but cutting to music was hard as what you saw in the application didn’t always reflect what you saw in the finished video. I’ve found out that this was not a problem with Kdenlive – apparently it’s due to the various bits of the Fedora 15 audio stack not talking to each other nicely. Whatever the cause, it meant I had to edit the whole of the last thirty seconds by rendering to video, adjusting and then re-rendering as the timing shown in the time-line was at least a second adrift of the finished video by then! Therefore the cutting isn’t as tight as I’d like in places.

The captions were all “distressed” using The GIMP. I’m still a bit hit and miss at doing this but I’m very pleased with the Lancashire and Central Scotland IBA Transmitters In Service captions.

Please go to the Barclay James Harvest home page and buy a copy of Grim by Maestoso if you like the music. The song is called “Location Location Location”.

How to make envelopes…

2011-05-25T08:18:00.001+02:00

Bizarrely, although I uploaded this video as a shiny new WebM file, YouTube needlessly transcoded the video to H.264 and insists I need to download the Flash Plug-in to watch it. How strange…

Numlock Edge

2011-05-18T08:42:00.002+02:00

If you are considering installing the Fedora GNOME 3 Beta and want to try and use it for anything vaguely useful, I’d strongly advise installing numlockx along with it. This ensures your Num Lock key is enabled by default, thus preventing you from inadvertently teaching your neighbours some new English vocabulary.

Feeling cut off…

2011-05-11T05:51:00.003+02:00

If you are wondering why you can’t contact me today, it’s because I won’t have any electricity and probably no telephone either. The cables that are currently suspended from telegraph poles in my street are being being buried under the pavement.

Lime Grover Washington

2011-05-09T16:59:00.001+02:00

Lime Grove with Washington signs

I’ve kerned A–Z, a–z and 0–9 of the Washington typeface so that it’s useful for most English language applications. Version 2 of the typeface is available to download here. The version 2 package includes the FontForge source file, along with a PDF showing the available glyphs. Windows users will probably need to download the 7-zip utility in order to decompress the archive file.

Washington Post

2011-05-06T09:54:00.015+02:00

For a child born in 1971 and growing up in 70s Britain, probably the most magical place in Britain would have been BBC Television Centre. And, thanks to Blue Peter, it was a building that I was pretty familiar with. After all, Peter Purves had shown me countless times that the building was ‘like a huge doughnut, with studios around the outside, offices inside the centre ring and a fountain in the middle’.

BBC Television Centre, front gate

One of the most distinctive features of the building was its signage. The same typeface was used on everything from cameras to warning lights to the front gate.

EMI 2001 with Raymond Baxter

The typeface employed was a very common sight when I was five years old. It was used all over Chard Post Office, on signs made by SWEB (the South Western Electricity Board), and even for signs on the changing room doors at Maiden Beech School in Crewkerne. But, as I grew up, this signage was slowly replaced by signs using more modern faces. By the early 80s BBC Television Centre was just about the only place where it could be seen.

BBC Television Centre Studio One

I’d always wondered what the typeface was. The first clue was when I bought the book Encyclopedia of Typefaces by W.P. Jaspert et. al. The book contained a small scan of the face labelled as ‘Doric Italic’. This led me to search on font websites under the ‘Ds’ until I found a typeface that was called ‘AT Derek Italic’. This was close. In fact, it was very close. But it wasn’t right.

AT Derek Italic

For instance, in order to recreate the 1960s caption below, I had to alter the AT Derek lettering extensively:

BBCtv Science and Features recreated

The face used came up in conversation at The Mausoleum Club. The Mausoleum Club is a web forum for people who want to talk about proper television rather than other the kind that we get these days.

By a stroke of good fortune, BBC Graphic Designer Bob Richardson was present and he told me for the first time definitively the name of the font. It was called Washington. I then spent a couple of days plucking up courage to ask Bob if he would be kind enough to send me a scan of the font so that I could recreate a digital version.

Bob was very, very kind and also keen to see a version of the font in truetype form – I received a scan of Washington the next day. The scan he sent was taken from his copy of the BBC Graphic Design Print Room specimen sheets. The book contains all of the metal typefaces that were available to graphic designers (or ‘commercial artists’ as they were initially known) from the early 1950s until circa 1980.

Washington recreated by the BBC for a capgen

Bob told me that the BBC had actually recreated Washington in a format suitable for a caption generator for ‘The Lime Grove Story’ (a 1991 documentary to commemorate the closing of the BBC’s Lime Grove studios) but the BBC didn’t have a version of the font in truetype form.

So, now I had a scan I needed to recreate the font. The plan was, as usual, to trace each character or ‘glyph’ in Inkscape…

Tracing in Inkscape

…then import the glyphs I had traced into FontForge…

Glyph imported into FontForge

…and use FontForge to generate the final typeface.

The finished typeface

This is exactly the same way as I had recreated the Central Television corporate font, Anchor and Oxford. Only this time I had the best source material possible.

As I’ve talked about recreating fonts extensively in the past I’ll just talk about a couple of things that were either new or different in this case.

P and R superimposed

The first thing of interest was that the font was a real, live metal type and it wasn’t as ‘regular’ as I had come to expect from digital faces. The width of the vertical stroke in the ‘P’ would be quite different in width to the vertical stroke in the ‘R’ which would both differ in width of the vertical stroke in the ‘D’.

It was this kind of irregularity that really gave the font its charm and sold it as an old metal typeface. Therefore I was determined to keep that as much as possible and not to try and make the font too regular and clinical by ‘fixing’ all these quirks.

R coming to the point

The second thing I needed to know was when to ignore curves. Letters such as the capital R would have curves at the corners where you would expect them to come to a point. I did toy with the idea of leaving these curves in place but that looked dreadful at large sizes so that was one thing I did end up ‘fixing’.

There were a number of glyphs I had to create myself, as they didn’t exist when Washington was created or were not a part of the original face. For instance the Greek letter mu is a combination of the letters p, q and u:

P, Q, U make a MU, Cuthbert dribbled and guffed

I also added things like Euro and Rupee currency symbols, copyright and trademark symbols and so on.

One thing I did this time, which I should have done before, was get FontForge to create all the accented glyphs for me. In other words, instead of creating separate Inkscape files for each accented character and importing them into FontForge, I simply created each accent as a glyph and got FontForge to automatically create all the accented characters for me. This saved me a huge amount of time.

Once you’ve created these few characters…

It’s important for me to have a decent coverage of the Latin alphabet as I know first hand how frustrating Hungarians find it to have to use a tilde or diaeresis instead of their double acute. I also like to make sure that the Welsh language can be used with any typeface I create.

…you get all these free!

FontForge created the accented glyphs almost perfectly and out of a few hundred glyphs I only needed to adjust half a dozen by hand. I found this pretty amazing.

Buoyed with my success at automatic accented glyph creation I thought I’d try some automatic kerning. Kerning is the adjustment of the spaces between letters. For instance the distance between the letters ‘T’ and ‘o’ in ‘To’ is quite different to the distance between the letters ‘T’ and ‘h’ in ‘The’.

Good kerning makes all the difference to the appearance of a typeface. Here's the word ‘colour’ unkerned…

Colour with no kerning

…and here it is kerned.

Colour kerned

For all my other fonts I had sat down and kerned every possible letter combination by hand. The results are excellent but it also involves a large amount of wasted effort. The reason is that many letters (e.g. c, o and e) kern exactly the same as each other. FontForge not only allows you to put these letters into ‘classes’ to kern as a group, but it will also detect these ‘classes’ for you and attempt to kern them all into the bargain.

Kerning by classes – click to enlarge

I tried using this feature for the first time with Washington, and it worked pretty well for most letter combinations. However I do need to tweak this kerning by hand to ensure that all possible combinations of letters look good. Until this is done the font is only really useful for desktop publishing or vector art where you can alter the kerning of each letter combination by hand.

This task will take two or three days to do and it’s not something I want to do now, as it is really a job you need to come to fresh. So in about a month or so I’ll kern the font and release version 1.1 – I’ll post here when the hand kerned version is available.

So when the font is exported, how does it fair? Well, here's an example I put together which compares Washington to AT Derek:

A comparison - click to enlarge

As you can see, AT Derek may be more elegant but Washington is definitely more ‘BBC’!

The Washington Book typeface is released under the SIL Open Font licence.

All the software I used to create the typeface was free software, including the operating system – Fedora.

You can download the latest version of the Washington font from here. Windows owners will need 7-zip to uncompress the archive. The font is free – the only thing I ask is that if you find it useful please drop me a line or add a comment below as I’d love to hear from you.

Music for Pleasure

2011-05-05T08:23:00.001+02:00

This album is probably the greatest thing to come out of Switzerland since the Toblerone:

Playing Paul, Eating Black Milk

Replay Replayed

2011-04-23T17:55:00.015+02:00

Replay Expo time is fast approaching again, which is why Barbara Kelly and Lady Isobel Barnett are pictured below modelling an original piece of my artwork:

Sadly, Doris Speed wasn’t free.

Replay Expo is an Arcade, Video Game and Retro show that takes place every autumn at the Norcalympia Exhibition Centre in Blackpool. Last year’s event attracted 3,200 visitors over two days and the organizers are hoping to attract 5,000 this time. The show is timed to coincide with the last weekend of Blackpool Illuminations.

Last year I was involved in designing fliers, banners, advertisements and the website for the show and the organisers very kindly asked me if I would like to continue doing so this year.

r3play 2010

The first thing I needed to do was devise a “Replay” logo for this year’s event. The brief was “the same, but different”. The previous logo was originally designed by “Greyfox”, also known as the talented Irish graphic designer Darren Doyle. It was a beautiful logo and worked fantastically well so I wanted to keep as close to it as possible.

I had two main ideas. Firstly, I wanted make the logo a little more colourful, as the show will be a little more colourful this year. Secondly, I wanted to include a cartoony black outline around the lettering to increase the contrast from a distance and also to evoke the black outlines around cartoony video game characters.

In addition the logo had to be vector illustration, as I would need to export it at some very large sizes indeed. This meant I created it entirely in Inkscape.

This is what I came up with:

replay 2011 – click to enlarge

It was one of the only occasions I’ve ever got it right first time! You’ll notice I had to reverse the “E” because last year people insisted on calling the previous event “are three play” which rather upset the organizers!

B790 – I’m sure this face has a real name!

Next was the question of typography. Last year was easy – I was using lots and lots of lovely Microgramma. This year it was again “the same, but different”, so I settled on a Hermann Berthold art deco typeface called B790. This was similar enough to Microgramma that I could use it in the same sort of ways, whilst at the same time looking very different.

The one thing I was disappointed about this year was the design of the 2011 lettering. I spent day after day producing draft after draft:

My favourite – I spent hours on this!

Another massive fail

Obviously massive fails come in threes

However, in the end nothing I produced seem to grab the client – something that was entirely my fault. In the end, with half an hour or so to spare before stuff went needed to go off to the printers I gave up and produced something quick I’m really ashamed of.

At least the client liked it.

As you can see, the B790 ended up with a bit of a starring role as I used it for the word “EXPO”.

Producing the fliers and roll up banners for Replay Expo was rather interesting this year as the printers decided that only CMYK PDF files were acceptable. In previous years, they had accepted RGB TIFF files exported at 300dpi (dots per inch), which I could export from either The GIMP or Inkscape. But neither Inkscape nor The GIMP can currently produce CMYK PDF files. Therefore, after meaning to do so for nearly three years now, I finally had a good reason to grips with Scribus, a free software desktop publishing package.

The first thing I had to do was a lot of reading. The Scribus documentation is excellent and very thorough, so it was a pleasure to go through it all. Then I went through the tutorial. I had to do that when the children were at school as the first couple of hours featured a statue of a rather forgetful Indian lady who had absentmindedly neglected to put on her undergarments.

She’ll catch her death of cold…

Fortunately, I had colour management set up on my computer, so soft-proofing worked perfectly. This meant that whatever I saw on screen was very close to how my finished artwork would appear in print.

I produced my Replay logo artwork in Inkscape, and exported the logo as a 300dpi RGB PNG file for import into Scribus. Usually I could import my Inkscape files directly into Scribus, but in this instance I was using Inkscape layer effects (i.e. SVG image filters) that Scribus is currently unable to cope with.

Flier created in Scribus

I then created the text and frames directly in Scribus, and imported the photographs into them. It’s actually a very nice way of working as you are using each tool for what it does best.

Once finished, I could export my Scribus file as a CMYK PDF, send it off to be printed and hope for the best.

This was all completely new to me, and I was really nervous as to whether my exported PDF files would even be accepted by the printers, let alone print properly. What was worse was the fact that the Gadget Show Live event was two days away and there wasn’t time to do anything if my files were no good!

Anne Ladbury and Mary Morris

However, as you can see, they turned out quite well. Scribus is an excellent piece of software and I would recommend it to anyone.

Replay Expo takes place at the Norcalympia Exhibition Centre, Norbreck Castle, Blackpool on the 5/6 November 2011. Tickets for the event are available from http://replayexpo.com/tickets

Fedora 15 Beta, GNOME 3

2011-04-21T10:20:00.011+02:00

Recently, a rather nasty crash caused by the gftp FTP client locked me out of all my files and shut me out of my Desktop. The program is rather ropey and has done odd things to my computer before so I really shouldn’t have been using it.

Still, every cloud has a silver lining and since then I’ve moved to Filezilla as an FTP client (which is a lot better anyway) and become rather less blasé about making backups.

GNOME 3 Desktop - Click to enlarge

As I needed an OS reinstall I also decided to take the plunge and install Fedora 15 Beta. I’d been reading about GNOME 3 for years so I thought it was high time I tried it for myself.

Here are my thoughts so far:

Pros:

I was delighted to find my Trust 5300 graphics tablet works out of the box. No compiling and installing Wizardpen and playing around with settings. This is very important to me as I’m fond of using MyPaint to paint pictures when I'm listening to podcasts. It’s also very useful in conjuction with The GIMP.
I was disappointed at first to find that Colour Management was missing, but once added using Add/Remove Software it’s better than ever. Work has been done to make it easier to use and it has had some bug fixes too. Colour Management would be enough to justify my using GNOME3 on my production machine.
Firefox 4 is fantastic – I love being able to play HTML5 videos at long last without needing a Flash plug-in.
I was surprised that I couldn’t just press Delete in the Nautilus File Manager to remove files. You have to press Ctrl+Delete together. However, I like this better as it makes it much harder to delete things by accident.
It only took me about 30 seconds to work out how to use it.
It gets out the way most of the time and lets you get on with your work.

Cons:

The most serious problem is what happens when you switch off the computer. For some reason the Shut Down option is missing unless you hold down the Alt key. By default, you can only Suspend, rather than Shut Down your computer. This would be no problem at all if it were not for the fact that Suspend only works about one time out of four for me; Suspend is simply not stable enough to replace Shut Down.
You cannot alter how fonts are hinted on screen. This is very irritating as the default settings make text look, frankly, revolting.
The weather widget is missing – it showed the current weather, temperature and windspeed. I find that hugely irksome – I don't mind it not being on the desktop but you should be able to see it when you click on the time at the top of the screen.
The title bars on the windows are too tall for no good reason. The whole of the rest of the interface seems to be about conserving vertical space, yet this throws away everything gained by losing the bottom panel.
Some dialog boxes are missing close buttons.

The whole system feels very stable indeed and I’m using it on my production machine quite happily even though, really, I shouldn’t be!

It’s just not Flash…

2011-04-21T06:00:00.012+02:00

I’ve finally worked out I can put YouTube videos in my blog that can be viewed without having the Flash plug-in installed. Which is handy for me, as I don’t have the Flash plug-in installed. And presumably it’s also a boon for anyone using one of those ingenious new Apple etch-a-sketch things.

So, now I can watch stupid rubbish without using my daughters’ computer, here’s some that I (and Rory) made earlier…

Notable Use

2011-04-19T04:00:00.038+02:00

I was looking at the excellent Chris’s Acorns site the other day, when I found another archetypal use of Christine Lord’s Oxford typeface on a BBC Micro peripheral:

Judging by the LEDs, it also doubles as a light show

This is precisely the sort of application for the Oxford face I remember seeing all over the place as a child. Whatever would the UK electronics industry have done without it?

Gotta Dash

2011-04-18T04:00:00.039+02:00

One of the most interesting aspects of working on Repton: The Lost Realms was having my sleeve artwork and inserts proof-read by Michael S. Repton. Michael is a professional proof reader, a linguist and someone who really knows his stuff.

Michael S. Repton playing Galaforce
Photo Courtesy Joel Rowbottom

One of the things that Michael disliked about my copy was my use a minus sign to indicate a pause. I had to replace every single one with something called a spaced en-dash.

Of course, I’m not really to blame for this – computer keyboards are rather deficient in the punctuation department. As a rule, they don’t have a real apostrophe or proper opening and closing quotation marks. But whilst your keyboard doesn’t have these symbols, your computer almost certainly does. If you have a look at the Character Map application you can find them all.

Character Map on Fedora 14 - Click to enlarge

The problem is that using the Character Map application every time you wanted an apostrophe or quotation marks would be too slow on a large document. Fortunately there is another way of entering these punctuation marks in GNU/Linux. You hold down Ctrl and Shift, press the u key, type the four digit Unicode value for the symbol you want and press ENTER.

So, an en-dash is Ctrl+Shift+u 2013 ENTER. After a while, you find you remember the most common symbols. An apostrophe is u2019, quotation marks are u201c and u201d and so on.

Characters of Gnote

To help me remember the less common symbols I put a list on a pinned Gnote, which I can call up easily whenever I need it.

All The Hues That’s Fit To Print

2011-04-17T09:43:00.007+02:00

Whenever I’m using a complicated piece of software, I find it’s invariably the things that I ignore that turn out to be the most important.

The Blob

When a strange, grey blob-shape appeared between my scrollbars in Inkscape about 18 months ago I completely ignored it and carried on drawing and colouring in. Not only was it vitally important, but if I had only been curious enough to find out what it was sooner I would have discovered a whole new and fascinating world: colour management.

I’ve never had enough money to own a colour printer; I only have a monochrome laser printer which I use very sparingly as a toner cartridge is almost third of my wife’s monthly salary. So I’d never really thought about colour printing until I started designing covers for Retro Software. Dave Moore would sometimes ask me to change this colour or that colour as “it looked awful when printed out”, I’d grumble and change the colour and that would be as far as my interest in printed colour would go.

If I kept myself up to date a little more dilligently I would have realised that that little blob-shape would have allowed me to see what my designs would look like when printed right there in Inkscape.

Colour management seems like too much faff to bother with at first, but is actually pretty simple. When you’re designing on screen, you’re working with light. Light is “additive” – every time you mix colours together you get a lighter colour. This is usually illustrated using the famous “light spots” you may remember from school (or college):

Avez Vous Le Tempo?

So, for instance, cyan looks lighter than the green and blue you mix together to make it.

When you print you’re working with inks, which get darker as you mix them together. So, for instance, the colour blue is much darker than the cyan and magenta inks you mix together to make it.

The upshot of all this is that there are (quite a lot of!) colours you can show on your monitor that you simply can’t reproduce in print. Pure blues and pure greens that look vivid and exciting on screen look like faded socks and mouldy cheese when printed out.

The precise range of colours you can use on a printer depends on the type of printer you are using. A colour newspaper press can print a far narrower range of colours than the one used to produce a colour magazine.

Conversely, a printer can produce darker colours than you can reproduce on a screen. And each model of scanner, monitor and digital camera has its own quirks as to the range, or gamut, of colours they can deal with.

A horseshoe, apparently

Hence the blob – the blob-shaped icon was based upon the standard horse-shoe shaped graph used to illustrate colour spaces.

The solution to the problem of differing colour gamuts was the creation of a file format called an .icm file. Each .icm file contains an ICC profile which describes the colour gamut of a monitor, printer, camera or scanner. This means that provided you have an .icm file for your monitor and a .icm file for the printer you want to use, your graphics program should be able to use them to show you on screen what your output will look like when it’s printed.

Getting hold an .icm file for your monitor is a pain. Professionals have hardware calibration devices that they use in conjunction with a program like ArgyllCMS in order to calibrate their monitors. Windows users with Adobe software can use Adobe Gamma. The rest of us can make-do by using a tool called lprof and create a profile by eye. You may find you need to adjust the colour temperature of your monitor to 6500K before you calibrate your screen.

If you are using Fedora, Colour Management is very, very easy to set up in Inkscape. First, you have to get a program called lcms using the “Add/Remove Software” tool. Once you have installed it, you simply have to click the mouse a few times in an Inkscape dialog box and that’s really all there is to it.

Settings to see the effect of Colour Management

Here, I’ve just checked the “Simulate proofing on screen” and chosen a printer .icm in the “Device Profile” box. The display profile should be the profile of your monitor – I haven’t generated one yet so I'm using sRGB.

The Blob In Colour

The blob-shaped icon now springs to life. It is not only in glorious colour but it has also become a button; pressing it has interesting results. Here is my drawing without pressing the blob-shaped button:

Living Colour on screen…

And here is my drawing with it pressed in:

…but the blue and green won't look as good printed!

This is a huge help when designing, as I can now see what my RGB designs will look like when printed out in CMYK.

There is a lot more to the subject of colour management, even in Inkscape. You’ll have to do a bit of research on the web to get to know which .icm profiles to use and the best workflows for CMYK output. But hopefully I've encouraged you to at least have a play!

Woolly’s Birthday

2011-04-15T17:24:00.003+02:00

When Yak met Goat

2011-04-08T14:10:00.002+02:00

If you don’t know who the gentleman playing Repton: The Lost Realms is, then it’ll probably be impossible for me to explain how happy discovering this picture earlier this week made me feel.

Nancy Kominsky (1915 - 2011)

2011-03-22T11:16:00.005+01:00

Nancy Kominsky passed away on the 11th of March, 2011.

Through her HTV West series, Nancy didn’t just inspire and teach me. More importantly, she gave me the courage to not give a damn what anyone thought of my efforts and not give up. Provided that I was having fun and progressing, nothing else mattered.

And, thanks to the magic of DVD, she inspired my two daughters as well. Although they are only 8 and 9 years old both of them know about “light, medium and dark tones” and “where the light is coming from” – Nancy explained these fundamental ideas so clearly that even children could, and did, understand them.

You Know When You’ve Been Tango-ed

2011-03-22T09:49:00.007+01:00

My friend Samwise and I are both enthusiastic users of the GNU/Linux operating system and also enormous fans of the incredible range of retro computing emulators produced by the brilliant Tom Walker.

Tom (left) and Samwise (right)

Photo courtesy regregex

There’s seemingly nothing that Tom isn’t able write an emulator for. He’s written emulators for everything from the humble Acorn Electron to the StrongARM-ed Risc PC with Spectrums, Amstrads, Beebs, Archimedes and much else in between.

Elkulator, running on Fedora 14

So it wasn’t altogether surprising when, last month, Sam asked if I could create some icons for his desktop he could use with Tom’s emulators.

Superior's EGO:Repton4, running on RPCEmu

Sam is a KDE desktop power user, whereas I’ve always been a GNOME numpty. Fortunately for us starving scribblers and colourers in there is a project that aims to standardise all free software desktops and ensure we can create icons once that look good on all of them. The project is called the freedesktop project and the part concerning icons is called Tango.

There are numerous tutorials on the web that explain how to create Tango icons in both Inkscape and The GIMP.

The first icon I tried to create in Tango format was the three dimensional RISC OS era Acorn logo, to use with Arculator. Below, you can see the real Acorn logo on the left, and the “Tango”-ed version on the right.

More Tango-ed than Judith Chalmers

As you can see, the Tango version looks rather cartoonish – and the colours are rather muted and pastel. And the direction of the light source has been changed. This was all done deliberately and in order to follow the Tango guidelines.

Sam was happy with this icon and asked if I could create icons for all of the Acorn-related emulators. And that’s when sticking to the rules started to get a bit of a pain. For Tango icons, each icon should be a distinctive shape in order to help those with poor eyesight and each icon should also contain a metaphor as to the icon’s purpose.

However, for the emulators all that we really needed was a square icon with a logo that told you at a glance what computer you were using so the guidelines rather went out the window. The Tango colours were also very restrictive as far as what I could use so I just threw caution to the wind and did what I felt!

Here’s the Elkulator icon:

I really like the background grid, which was the trademark of the Acorn Electron.

Here’s the B-Em icon:

And here’s the RPCEm icon:

I also created some Archimedes artwork – here's the Archimedes logo I created as an SVG file in Inkscape:

Click to enlarge.

Here it is “Tango”-ed!

And here are the full set of icons I created for Sam:

Click to enlarge

In future, when I have more time, I’ll create proper Tango themed icons for all of these emulators. I spent about two minutes on each of the icons above and it shows! This will require me to actually draw the systems being emulated and make sure that I've got a different shaped outline for each one.

So I'll probably return to this topic when I've done some decent, real, Tango icons!

Jewel Chase In A Jewel Case

2011-03-20T11:59:00.004+01:00

Thanks to Dave Moore at Retro Software, I received a very exciting package in the post last week:

It seems so strange to go from a sketch on an envelope, to producing artwork in Inkscape to a finished product on my shelf with a 5.25" floppy inside.

If you want to get hold of your own copy of Repton: The Lost Realms, it is available here.

Back to Oxford

2011-03-19T13:04:00.001+01:00

If you've had a good look at my blog you'll know that, though the medium may vary, it's essentially all about me copying something that someone else has done. Badly.

This is all very well in as much as it serves to keep a useless eater off of the streets of Kiskunhalas. However sometimes, to my acute embarrassment, the original creator of something I've been butchering gets in touch with me.

This first happened to me over ten years ago when Terry Griffiths, the designer of the London Weekend Television "river" ident sent me a very nice e-mail about the rather dodgy Flash Files I had created based on his work. They are still on Andrew Wiseman's 625 Television Room site. I later ended up animating Terry's idents in 16:9 for London Weekend Television's last day.

Christine Lord, pictured in 1969

The most recent example was last week when Christine Lord, original designer of the Letraset Oxford typeface got in touch with me after reading this blog.

I was thrilled to hear from Christine for several reasons - first and foremost because she's a lovely person, who was kind enough to send me some lovely goodies with her e-mail.

My version of Oxford in FontForge

Then there's the fact that I've never been in touch with a type designer before, let alone someone who had designed such an iconic part of my childhood.

And finally my blog allowed Christine to get Profonts' Sportowy font renamed as OXFORD PF and to get herself a well deserved credit as the typeface's original designer.

Thanks to Christine I can fill in a little more of the background behind the Oxford typeface. The face was designed in 1969 when Christine was 21 as a special project to create a corporate identity for the new Oxford Polytechnic. The face was originally called Lord Lower Case Linked, but was later renamed Oxford when picked up by Face Photosetting. It was then made available as dry transfer lettering by Letraset.

Another use of Oxford

I've also come across another example of Oxford being used, this time on the excellent TV-Ark website. It was used for Sheffield Cablevision, a short lived but very popular Yorkshire cable station. It's worth taking a look at the link as the station featured a presenter with a truly splendid comb-over.

If you are daft enough to want to get my version of Oxford, which I called "Scene", it's available for download here. Windows users will need to download the excellent (and free) 7zip utility in order to unzip the tar.gz file.

My version of Oxford features an upper case but, mercifully, I don't think Christine has seen that yet!

Album Of The Month

2011-01-22T17:35:00.000+01:00

Merry Christmas To All My Reader

2010-12-24T07:20:00.000+01:00

Dedicated to Woolly Wolstenholme.

April 15th, 1947 - 13th December, 2010

Coloured Sugar

2010-11-18T04:00:00.066+01:00

Once I'd finished writing a range of BBC Micro Python-Fu image filters for The GIMP, the Amstrad CPC series seemed the obvious next computer to tackle.

The graphics capabilities of the CPC were very similar to those of the BBC Micro, but the CPCs benefitted greatly from having many more colours available. Everything you could ever want to know about the video capabilities of the Amstrad CPC range is explained here.

The graphics capabilities are so similar, in fact, that to create a graphics filter for Amstrad CPC in Mode 0 all I had to do was change the palette data in my BBC Micro Mode 5 filter. Instead of picking 4 colours from a range of 8 the filter simply needs to pick 16 colours from a range of 27.

So, here is a picture of Baron Sugar's beloved Hackney Empire (formerly the ATV Television Theatre):

ATV, Rediffusion and ABC all made programmes here

And here it is put through my Amstrad CPC Mode 0 image filter for The GIMP with no dithering:

Amstrad CPC, Mode 0, No Dither

Oh dear. Even the BBC Micro Mode 2 filter seemed to be able to do better:

BBC Micro, Mode 2, No Dither

Here's the Amstrad CPC Mode 0 filter with 2x2 threshold matrix:

Amstrad CPC, Mode 0, Ordered Dither 2x2 threshold matrix

The BBC Micro Mode 2 version with a 2x2 threshold matix seems much flatter and less detailed:

BBC Micro, Mode 2, Ordered Dither 2x2 threshold matrix

So what went wrong with no dithering? Well, the method I'm using to choose a palette is very crude - it picks the sixteen most used colours from the Amstrad CPC palette to go into the final image. If my method is applied an image with lots of dark areas and a few highlights the highlights will be completely missing as the light colours will not be used enough to feature in the final table of 16 colours. I obviously need to find a method that takes into account the range of luminance used on an image.

The situation gets even worse when dealing with the Amstrad CPC Mode 1. Amstrad CPC Mode 1 is very similar to the BBC Micro's Mode 1. But whereas Mode 1 on the BBC Micro can pick 4 colours from a selection of 8, Mode 1 on the Amstrad CPC can pick 4 colours from a selection of 27.

Here's a picture of Polly parrot:

Pining for the fjords

Here's the same picture put through the Amstrad CPC Mode 1 filter with no dithering:

Amstrad CPC, Mode 1, No Dither

Here's the same picture of a parrot put through the BBC Micro Mode 1 filter with no dithering.

BBC Micro, Mode 1, No Dither

Even Sierra3 error diffusion won't help the Amstrad CPC Mode 1 image:

Amstrad CPC, Mode 1, Sierra 3 Error Diffusion

Whereas the BBC Micro filter produces excellent results:

BBC Micro, Mode 1, Sierra 3 Error Diffusion

Needless to say, the Amstrad CPC filters should be producing better results than the BBC Micro filters!

So, I'm going off to find a better way to pick an Amstrad palette! In the meantime, if you want to play with the Amstrad CPC filters they can be downloaded from here. Microsoft Windows users can find out how to install and use the filters with The GIMP by following the very nice set of instructions with pictures I've found here.

A la Mode

2010-11-17T12:35:00.005+01:00

Time for another chapter in the continuing story of producing Python-Fu retro computing image filters for The GIMP from some original programs in sdlBasic by nitrofurano.

In my last post I talked about ordered dithering, and how it compared to the error diffusion technique I had implemented previously. After successfully implementing ordered dithering the natural next step was to incorporate the ordered dithering into my BBC Micro Mode 2 image filter so that all the image processing techniques were available in one filter.

Finished filter interface

Whilst doing this, I also made the Strength slider in my BBC Micro filter act upon Ordered Dithering as well as Error Diffusion. This allows for some quite interesting effects.

Here is John Liven's Somerset cottage picture. I've applied Ordered Dithering with a 2x2 threshold matrix set to 100% strength:

Mode 2, 2x2 Ordered Dither, 100% Strength

And here is the same picture with the same dithering applied at just 50% strength:

Mode 2, 2x2 Ordered Dither, 50% Strength

Once this was done the BBC Micro Mode 2 filter was finally finished off. I then turned my attention to writing a BBC Micro Mode 5 filter. Mode 5 is very similar to Mode 2, but you can only use 4 colours from a selection of 8.

This means the image filter needs an additional step in which the palette to use for the image is selected. The way I approached this was to scan the entire image pixel by pixel tallying which of the 8 possible BBC Micro colours each pixel was closest to. Then, I simply used the four most commonly found colours.

Incidentally, the way you work out how close one colour is to another is quite simple once it's explained to you: I found the answer here.

After a coding a bit of Python I loaded an image of some parrots into The GIMP:

Norwegian Blue is on the left

And tried out the filter with no dithering. It worked first time:

Mode 5, No Dithering

And when some Sierra3 error diffusion was added too, the results were incredibly good:

Mode 5, Sierra 3 Error Diffusion 100% Serpentine

I still can't get over the fact that there are just four colours (black, white, red and green) in this image.

With a Mode 5 filter under my belt it was very easy to produce a Mode 1 filter. Mode 1 is the same as Mode 5, but has square pixels:

Mode 1, Sierra 3 Error Diffusion 100% Serpentine

And a Mode 4 filter. Mode 4 is like Mode 1, but is restricted to just two colours:

Mode 4, Sierra 3 Error Diffusion 100% Serpentine

So, I have got a pretty nice suite of BBC Micro image filters, with only Mode 0 to add. As always, you can download them from here. Microsoft Windows users can find out how to install and use the filters with The GIMP by following the very nice set of instructions with pictures I've found here.

What A Ditherer

2010-11-15T12:13:00.010+01:00

I've spent a lot of time recently converting nitrofurano's sdlBasic retro computing picture converter programs into Python-Fu image filters for The GIMP. I've also been adding a few ideas of my own - particularly in the area of half-toning techniques.

After successfully getting Error Diffusion working, I decided to see if I could get Ordered Dithering working. Ordered Dithering is a technique akin to the half-toning you see on images in newspapers. From an image made up of many colours you can create an image made up of only a handful of colours stippled such a way as to give the illusion of many colours.

There are several excellent explanations of Ordered Dither on the web for the curious written by people who actually know what they are talking about - I would recommend this one and this one.

Ordered Dithering is much simpler than Error Diffusion (which is probably why it took me longer to get it working!). As it's a much simpler process it's lightning fast in comparison, even when coded in Python.

As a test, I took John Liven's picture of a Somerset cottage.

Photo: John Livens

Then I converted the image to the BBC Micro's MODE 2 (which has just eight colours) using an ordered dither with a 2 x 2 threshold matrix.

BBC MODE2, Ordered Dither, 2x2 matrix

As you can see above, it produces a very pleasing regular patterning on the colours - to allow you to compare, here is the same image with Floyd-Steinberg Error Diffusion:

BBC MODE2, Floyd-Steinberg Error Diffusion

On a small image such as this, larger grids don't really add much. Here is an ordered dither using a 4 x 4 threshold matrix:

BBC Micro MODE2, Ordered dither, 4x4 matrix

But, the proof of the pudding is in the eating. If you have The GIMP installed on your computer you might like to try the ordered dither filter for yourself - it's available from here.

BBC on the BBC

2010-11-12T14:42:00.010+01:00

Over the past few days I've been converting nitrofurano's image filters from stand-alone sdlBasic programs to Python-Fu image filters for The GIMP. But, so far, there has been a particularly noticeable absence - the BBC Micro.

Partly that was because the BBC Micro world has already been utterly spoilt in the image conversion department by Francis G. Loch's incredible BBC Micro Image Converter. It's a highly professional piece of software and does it all. I've posted about it many times here and the work I've done for Retro Software would have been utterly impossible without it.

BBC Micro Image Converter by Francis G. Loch

But partly it was because Francis' program had inspired me to try and find out more about the mind-boggling array of dither options he had included in his program. It boasted a host of exotic sounding names like "Floyd-Steinberg", "Sierra", "Jarvis, Judice and Ninke" and "Stucki".

Paulo had used a technique called Bayer ordered dither in his filters, which is similar to the traditional half-toning used in print. It's very powerful, very fast and gives you a lovely regular patterned effect on the images, which is sometimes just what you're after.

Naturally, Francis' BBC Micro Image Converter does this as well. But these exotic sounding names were the inventors of various flavours of another technique: error diffusion.

Error diffusion works by trying to compensate for the colour information lost by turning a pixel into a value from a restricted palette by sharing it out amongst the surrounding pixels.

After looking at the Wikipedia entry for Floyd-Steinberg, it looked like even I could understand how to program it and then after finding an excellent article here I realised that all the other filters did exactly the same thing. They just shared out the lost information (or quantisation error) to different pixels in different proportions.

And, after a couple of hours messing about in Python, I managed to get out a servicable MODE 2 image (click on the images to enlarge):

Floyd-Steinberg error diffusion, 100% strength

You can see just how effective error diffusion is when you compare the results to the same image processed with no error diffusion:

The same image with no error diffusion

Here's the original image for comparison:

I'm the one on the right

I excitedly added a range of different filters into my BBC Micro image filter:

Take your pick!

There was a problem though. Sierra3 was taking well over 70 seconds. This sluggishness was caused by the inefficient way in which I was checking that a pixel was within a certain range in Python.

Sierra3, 100% Strength - and very slow!

An error message I had been getting during development rather ironically proved to be the key to solving the speed problem. Instead of using time consuming range() functions to see if pixels were inside a particular range, I could use exception handling and check for an IndexError instead. This was very fast - it sped the filter up by a factor of at least four. Mind you, it still crawls along compared to Francis' version!

The next thing I needed to add to the filter was something called "Serpentine parsing". This means that instead of processing the image from left to right as it moves down, the computer processes the image backwards and forwards. This helps to stop all the error diffusion going in just one direction - smearing all the errors to the right.

Finally, pinching another one of Francis' excellent ideas, I added a strength control to the filter to allow you to control how strongly the error diffusion works.

Finished interface

Here is Test Card F with 50% Floyd-Steinberg error diffusion strength:

Floyd-Steinberg error diffusion, 50% strength

And here it is with 25% Floyd-Steinberg error diffusion strength:

Floyd-Steinberg error diffusion, 25% strength

So, a BBC Micro Mode 2 image filter for The GIMP, that can be downloaded from here. However there are numerous refinements that need to be added to it. But they will have to wait for another day.

Test Card F Copyright © 1967 BBC, ITA and BREMA.

If you see SID, tell him...

2010-11-11T04:00:00.046+01:00

I've converted nitrofurano's sdlBasic Commodore 64 Low Resolution mode picture converter into a Python-Fu image filter for The GIMP.

In Commodore 64 Low Resolution mode, each block of 4 x 8 2:1 aspect ratio pixels can contain four colours from a choice of 16. Only, it's a bit more complicated than that! Fortunately, this article explains how it is supposed to behave very nicely. Paulo's algorithm has to go through eight separate stages to create the finished image.

The main novelty for me in this filter was that in order to avoid having to use a three dimensional list (which would have entailed syntax to boggle the mind) I used a Python new-style class. That meant I could use a one dimensional list and let the class take care of getting and setting the right bit of it when required through method calls.

Here's an example image before:

Original scan

And after conversion in The GIMP using the filter:

Commodore 64 Low Res Filter

As usual this plug-in, along with ones for the ZX Spectrum, Apple II and MSX1 can be downloaded from here.

Appley Within

2010-11-10T04:00:00.054+01:00

As I had enjoyed converting nitrofurano's sdlBasic MSX and ZX Spectrum picture converters to The GIMP, I thought I'd tackle the Apple II colour picture filter next.

Mind you, saying that the Apple II had a colour mode is a bit like saying that Steve Wozniak was a professional ballroom dancer. Whilst technically correct, it really is wide of the mark.

Apple II colour is a strange world in which "red or yellow" becomes orange and "blue or cyan" becomes blue. Because of this Paulo's filter was rather more complicated than the ones I've tackled previously. In all, it took me about three days to understand what was going on and finally iron out all the bugs (mine, not Paulo's!).

Because of the complexity of the filter, I decided to implement some functions to emulate the ink(), dot(), point() and line() commands of sdlBasic. This made the Python much more readable (and eaiser to debug), even if it did mean I lost a bit of speed.

In order to make up some of the lost speed, I used tuples instead of lists for the look-up tables. I should have done this in my other filters too.

Once I finished the filter I dug out my usual cottage picture as a test:

Photo: John Livens

The resulting image had me crying into my coffee:

Soundtrack from the film More?

It looked like something out of "The Lost World of Friese-Greene"! Having picked out some bugs I got something a bit closer, but the white stripes were a real pain to get rid of:

It took ages to fix...

Finally, after I had remembered how to count to six, I got a successful image:

...but the result was worth it.

The filter runs in two modes, a halftone mode or a posterised mode. The posterise mode doesn't stipple the colours. Here is the posterised output:

Posterised, it's very striking

I added a little dialogue box to the filter to allow users to pick which mode they want:

The filter's complex user interface

My overall impression is that the Apple II produced orangey mush - a bit like the NTSC pictures put through the IBA's DICE standards convertor we used to see on British television in the 70s. But, I must admit, it does have a certain kind of charm. And, above all, Paulo did an incredible job in coming up with an Apple II filter - it's an ingenious bit of coding.

If you want to try it out for yourself, the filter is available to download from here. Bear in mind that the filter is pretty slow, so it's best to stick to small images unless you have a fast computer.

Who needs Jimmy Savile?

2010-11-09T05:41:00.007+01:00

The R3PLAY Arcade, Retro and Video Gaming Expo was held on the 6-7 November in Blackpool and, as I said a few days ago, it saw the official launch of Repton: The Lost Realms.

The visitors to the show had the poster I designed inflicted on them as they were queuing to get in:

Photo: Michael S. Repton

The Retro Software team were ready and waiting to sell millions of copies:

(Back L-R) Peter, Greg, Steve, Tom, Michael, Jonathan, (Front) Martin, Dave. Photo: Martin Barr.

Needless to say, the game completely sold out. And no wonder, the finished article looked gorgeous - in spite of the fact that I did all the artwork:

Kecske Bak, after Ellis Ives Sprowell

We were honoured that Repton took time out from running his HSE-free diamond mining conglomerate to attend in person:

Photo: Michael S. Repton

The Beeb performed masterfully:

Photo: Martin Barr

And so did its half brother by the milkman, the Acorn Electron:

The most impressive Acorn Electron Repton yet

Contributing to a real Repton release was a childhood ambition of mine - and one that, somehow, I've now managed to fulfil.

Paras Sidapara, Tom Walker, Michael S. Repton, Jonathan Parkin, Richard Barnard, Dave Moore, Peter Edwards, Andrew Weston, Richard Hanson, Matthew Atkinson, John Chesney and of course the durian munching genius polymath that is Tim Tyler all put a huge amount of work but most of all love into Repton: The Lost Realms and I think that really shows.

I'm really honoured I got to be a part of the team.

MSX Picture Filter for The GIMP

2010-11-08T04:00:00.029+01:00

Now that Paulo Silva's (nitrofurano) ZX Spectrum filter for The GIMP was working nicely, I thought I'd like to try converting one of his other sdlBasic picture filters into a Python GIMP plug-in.

I chose the MSX1 Screen 2 filter, as it looked quite similar to the ZX Spectrum filter. I'd never actually seen an MSX computer working (I saw some switched off in a shop once) so I didn't really know what to expect until I read up on Wikipedia.

Whereas the ZX Spectrum suffered from attribute clash on the character square level, MSX1 suffered from attribute clash on the character row level so I was expecting the resulting images to look like slightly better ZX Spectrum images. And so it turned out.

To compare, here is John Liven's photograph of a cottage:

Cottage - Photo: John Livens

And here it is processed by the ZX Spectrum filter:

Cottage - ZX Spectrum

And finally by the MSX1 filter:

Cottage - MSX1

Converting the filter was straightforward, and I managed to find and fix a small bug in the sdlBasic original whilst I was going along.

As always, the finished MSX1 filter can be downloaded from here.

Unweaving the Rainbow

2010-11-07T04:00:00.053+01:00

As I promised a couple of days ago, I've tweaked nitrofurano's ZX Spectrum filter for The GIMP so that you can now undo (and redo!) the effects of the filter properly.

Not a favourite album, but a nice cover

To get undo to work I needed to create a duplicate of the current layer to work on, and then merge that down into the original layer when the filter has finished its work.

From XOR to AOR

That way, The GIMP seemed to remember the original layer and could go back to it when you used undo.

So now, hopefully, it's all finished. The final version of the filter is available to download from here. People with Windows or Macs wanting to try the plug-in need to follow the instructions here. GNU/Linux users can just copy it into their ~/.gimp2.6/plug-ins folder and set the Execute permission.

Designing Repton's Lost Realms

2010-11-06T05:00:00.010+01:00

If you've been here before, you'll probably already know that this year is Repton's 25th anniversary. And, as part of the celebrations, Retro Software is releasing Repton: The Lost Realms for the BBC Micro and Acorn Electron.

I've already blogged about creating the cover artwork and the loading screen for the game. However today is the 6th November and Repton: The Lost Realms is being officially launched at R3PLAY in Blackpool. That means I can at last talk about creating the graphics for the game itself.

My cover artwork

I was first approached by Dave Moore about contributing to Repton: The Lost Realms in mid 2008. Peter Edwards had just recovered a load of my old Repton 3 and Repton Infinity screens from some of my 5.25" floppies and the graphics in them had impressed Peter and Dave enough for them to ask if I would be interested in creating some screens and graphics for Repton: The Lost Realms.

Like Repton 3 before it, Repton: The Lost Realms is a game that allows you to not only edit its levels, but also redefine its graphics. That means that it's possible to provide a selection of different screens and graphics for players to load into the game.

Lost Realms as I first received it

At this stage, the Repton: The Lost Realms came with only one set of screens. As you can see above, it used the Repton 3 graphics with a few additional graphics for the game's new elements designed by the game's original programmer Paras Sidapara.

As there were to be four sets of six screens included in the game, my first idea was to theme each set of graphics around the existing Repton releases. In other words, have a Repton 1 set...

Repton 1 Lost Realm

...a Repton 2 set...

Repton 2 Lost Realm

...a Repton 3 set...

Repton 3 Lost Realm

...and a new set for the final set of screens.

I quickly hacked about and transferred the graphics from these games into Repton: The Lost Realms. At this stage I was designing new characters in the Repton Infinity graphics editor (Film Strip) and then transferring them over to Repton: The Lost Realms by transferring blocks of data between files using the BBC BASIC command line.

Film Strip - An excellent graphics editor

The reason why I preferred Film Strip was that it was designed for use with a keyboard. I didn't have a real BBC Micro to use so I was using these programs via the excellent emulator BeebEm. In fact, as at that stage there wasn't a native GNU/Linux emulator for the BBC Micro at the time, I was using BeebEm via WINE.

The Repton 3 and Repton: The Lost Realms editors had adopted the then very fashionable WIMP paradigm. However, using a WIMP interface with a keyboard is very hard going and I found the AMX Mouse option tricky to get working in BeebEm. That meant I couldn't use these editors with my mouse.

Another problem I had with Repton: The Lost Realms' editor was the awful yellow and black colour scheme used for the editor's pointer. It was probably the worst colour scheme you could have picked if you want to design graphics precisely - the outline of the pointer gets lost against black, but most of the graphics have black backgrounds or outlines!

Repton: The Lost Realms' Editor

After I had designed Repton 1 and Repton 2 themed graphics it soon became obvious that this approach would not work. There were various new elements in Repton: The Lost Realms that were not present in previous Repton games. I wanted to redesign these in each set to match the style of previous Repton releases. However Dave wanted to keep the new game elements that Paras had designed looking the way Paras had designed them. However this would have looked out of place, particularly in Repton 1 which is quite abstract and geometrical in design.

Therefore, after talking it over with Dave and Paras we decided it would be best if I design four completely new sets of graphics for the game, bearing in mind the need to keep the original design of Paras' new game elements in each set. We would also only vary the game characters that varied in the sets of screens supplied with Repton 3: namely the walls, eggs, monsters and crowns.

I had a few ideas for the graphics having got used to playing the game. I didn't think that the inverted cage colour scheme for the anti-clockwise spirits worked at all. I needed to find a way to make these cages look a little less incongruous. I wanted to make the graphics look 1988-ish - so I used the style of later BBC games like Richochet and Star Port as inspiration. And I wanted to use stippled colours as much as possible to make the apparent colour palette seem more than the four colours that the game was limited to.

I designed the set of graphics for the final set of levels (PRESTO) first. My inspiration for these were the full-page adverts for Repton 2 and Repton 3 that Superior Software used to run in Acorn magazines at the time. In particular, I wanted to design a set with light mortar between distressed bricks. I'm very proud of this set and I think it's actually my favourite.

Presto - not for the faint hearted

I got a bit carried away, and I also redesigned Repton to look like he did in Superior's adverts - this was very quickly and firmly rejected, and rightly so!

My Redrawn Repton went down like a cup of cold sick

I had one set down, three more in front of me and even using FilmStrip on a BBC Micro emulator seemed like very hard going. I really wanted to use The GIMP to design the graphics and suddenly it dawned on me that I could.

I could design the graphics in The GIMP and then transfer them to the BBC Micro emulator using the BBC Micro Image Convertor by Francis G Loch. This is an application written in PureBasic that takes image files (bmp, jpg, etc.) and downconverts them into the native screen display formats of the BBC Micro.

The process has a few stages. First I design all the graphics as separate files in The GIMP:

Completed graphics designed in The GIMP

Then I use the GIMP to slice them up and put them in rows:

Sliced and Diced in The GIMP

And finally I convert the graphic into BBC Micro format using the BBC Micro Image Convertor:

And converted to BBC Micro format

So, I fired up The GIMP and the next set I designed was for the LARGO set. This is the default set that loads when the game or editor loads, and the levels in this set were the original six levels designed by Paras Sidapara back in 1988.

Largo - the Realm of the Exile

Because I knew Paras was a huge fan of the game Exile, I decided to base the design of the walls on the walls found in Exile. This set looked very nice and thanks to The GIMP I was able to design them very quickly.

Adagio - Exile crossed with Repton 2

The third set I designed was a set for the ADAGIO screens. This set was a kind of cross between the walls found in Exile and the walls found in Repton 2 (my favourite Repton release). It didn't work as well as I would have liked and I wish I'd done something a bit different.

Allegro - juicy, apparently...

The final set I designed was the ALLEGRO set. It was loosely based on the graphics for the game XOR, which my children were madly into playing at the time. This set has been described as looking "juicy", whatever that means! Dave Moore accused me of taking a little more care over these graphics than some of the others because I knew I was designing all six levels to go with them. How very dare he!

The work on the graphics Repton: The Lost Realms was very straightforward. I did very little rework once we decided on what we were doing and there were only two real debates about the game characters. The first concerned earth, the second concerned fungus.

As far as the earth is concerned, I wanted to experiment with some dense Ravenskull style earth, whereas Dave Moore preferred the very sparse earth used in the Toccata level set of Repton 3. Dave got his way on that one!

Now that's what I call fungus!

The fungus debate concerned my preference for fungus that looked like a toadstool rather than the amorphous mould that was presented in Repton 3. In the end, I redesigned the fungus to look slimy rather than mouldy but it's probably the graphic I am least happy with.

Now that's what I call fun, Gus!

We also had a discussion about the "freeze pill". This was a green pill that froze monsters temporarily. What with absorbalene pills and time pills I thought Repton's drug habit had gone far enough.

Freeze pills - just say no.

I wanted to replace it with a Citadel style snowflake. Everyone agreed, and that also involved making changes to the editor and game map graphics which I did by hacking the code about. But, although my snowflake was a good idea, I think the graphic I designed was horrible.

Snow flake - just say yuck.

Once I'd designed all four sets, I thought that that was that - only it wasn't. By this stage Tom Walker (someone for whom the word genius seems utterly inadequate) had joined the project, and had started work coding an Acorn Electron version.

The Acorn Electron is cruelly afflicted in many ways, but one of the worst is that it has no hardware scrolling. That is terrible news for a game like Repton which relies on scrolling. Acorn Electron scrolling has to be done in software, which eats up the memory available for the game - and its graphics. The graphics in Acorn Electron Repton: The Lost Realms are 12 x 24 instead of 16 x 32 for the BBC Micro version.

Skull (Acorn Electron)

This meant I had to create cut down versions of all of the games' graphics for the Acorn Electron version, and doing this took as long as it took to create the original graphics. In fact, I put in so much effort I actually prefer some of the Acorn Electron graphics.

Largo - All ready to transfer to Elkulator

Probably the most interesting thing about doing this was the lack of an Acorn Electron editor - or indeed an Acorn Electron version of the game itself! I had actually finished the graphics and put them in game files before Tom had finished coding the Acorn Electron version of the game.

It was quite some time after I had finished the graphics that I was actually able to play with the graphics in the game itself via Tom's excellent Acorn Electron emulator Elkulator.

Acorn Electron version

Keen eyed Repton fans will notice that Acorn Electron Repton: The Lost Realms reintroduces Tim Tyler's Repton sprite from Repton 2. I think this has much more personality than the one used in Repton 3.

I knew that there was a keen interest in the Repton: The Lost Realms from Acorn Electron enthusiasts so I put an enormous amount of effort in the graphics for the Electron version - I just hope they like them!

And finally - a word about the design of the crowns. I spent many years living in my wife's home-town of Mélykút, the birthplace and home of the legendary restorer Szvetnik Joachim. He was famous for supervising the return of the Holy Crown of Hungary from the USA in 1977. I went to his workshop in Mélykút to translate for some tourists from New York State, and enjoyed my visit so much I decided to make the crown in ALLEGRO look like the Holy Crown.

Allegro Crown (BBC Micro version)

The other crowns in Repton: The Lost Realms are also based upon real crowns - I wonder if you can work out which ones?

ZX Spectrum +3

2010-11-05T07:29:00.001+01:00

Two days ago I blogged about getting nitrofurano's Python ZX Spectrum image filter for The GIMP working, and yesterday I blogged about speeding it up. However, Paulo e-mailed me just after I'd posted and said that the filter wasn't working as it should.

I had assumed that the filter just wasn't supposed to work on small images - such as ones at the ZX Spectrum resolution of 256 x 192. So if we took a 256 x 192 image like this:

Original image at 256 x 192

The best we could hope for would be this:

Put through The GIMP version of filter

However, Paulo pointed out that his sdlBasic version of the filter would produce this:

Put through sdlBasic version of filter

But having looked at the Python code for The GIMP filter he couldn't work out what was wrong. I was intrigued, and decided to have a look too.

Paulo thought that the problem probably lay in one of the loops that were processing the image, but I thought that was unlikely, particularly as he'd checked them so thoroughly against his sdlBasic original. The loops just contained maths, and maths tends to be pretty similar in any language.

Sure enough, the problem lay not in the maths but in the idiosyncratic weirdness of Python. I blame Eric Idle, personally.

The first problem was the way in which Paulo had dimensioned the lists (elderly gentlemen like me call them arrays) he used to work on character blocks. He'd done this:

r0 = [[0] * 8] * 8
g0 = [[0] * 8] * 8
b0 = [[0] * 8] * 8

Which is perfectly sensible, but the problem is in Python almost everything is copied by reference rather than by value. Numbers are copied by value, so [0] * 8 does create a list containing eight different zeros.

However lists are copied by reference so [[0] * 8] * 8 creates a list containing eight references to the same list. That means that any change made to one row of this multidimensional list affects all the other rows too - effectively cutting the resolution of the filter down to the character block level. This caused the blockiness.

To solve it we needed to do this:

r0 = [[None] * 8 for i in range(8)]
g0 = [[None] * 8 for i in range(8)]
b0 = [[None] * 8 for i in range(8)]

What we are doing now is using a list comprehension to create a brand new list eight times, which is what we are after.

Another problem was that instead of referring to the nested lists using list[y][x] Paulo had used list[x][y]. So, for instance we had this:

b0[x2][y2] = str1[2]
g0[x2][y2] = str1[1]
r0[x2][y2] = str1[0]

When we should have had this:

b0[y2][x2] = str1[2]
g0[y2][x2] = str1[1]
r0[y2][x2] = str1[0]

It's very easy to do - in fact I've done it myself. Many times!

Regarding Python's weirdness, it more often works for you than against you and that's why I love the language. For instance, in Paulo's sdlBasic version of the filter he had to do this to swap two values:

if ikattr < paattr:
    tmpr = ikattr
    ikattr = paattr
    paattr = tmpr

Whereas in Python you can use the far more "Pythonic":

if ikattr < paattr:
 ikattr, paattr = paattr, ikattr

Anyway, now the filter was fixed and I could have some fun with some ZX Spectrum proportioned stupid rubbish. Here is Central News at 256 x 192:

It's 1982 again!

And here is a Tyne Tees/Channel 4 endcap - again at 256 x 192:

Unworthy of Half Man Half Biscuit

However, Paulo used it to produce something much grander:

by nitrofurano - Click to enlarge

This isn't the end of the story, unfortunately, as now I have to get the filter's Undo feature working - but tomorrow you'll be pleased to hear there will be something completely different.

The latest version of the ZX Spectrum image filter for The GIMP is available to download from here.

ZX Spectrum Filter Revisited

2010-11-04T17:10:00.006+01:00

Well, a day is a long time in Free Software. Since I posted yesterday about the ZX Spectrum filter for The GIMP, I've had a lovely exchange of e-mails with the original author nitrofurano, I've improved the filter further and I've found out why it was written.

Spectral Spectrum

First things first, improving the filter. I had become rather rusty at working on filters for The GIMP but eventually everything came flooding back to me.

The first thing that helps when writing a Python filter in The GIMP is to run The GIMP from the command line in a terminal window. That way you get to see all the error messages the plug-in produces and are not working "blind". You can also see the output of any print statements you add to help you debug.

The second thing I remembered was that you should use a symbolic link to the filter in The GIMP's plug-in folder, so you can work somewhere more convenient than a hidden folder that's several levels down.

Sugary Spectrum - click to enlarge

Once I'd got myself working sensibly I could have a look at improving the filter. The first thing I did was to speed the filter using this technique described in Akkana's blog. It cuts down on writing to the actual image, which is slow. Instead you copy the image to a byte array, work with that and then copy all the bytes back to the image when you have finished. Using Akkana's technique had the added bonus of allowing the filter to be adapted easily work with either RGB or RGBA images.

However, the resulting changes didn't seem to generate the desired increase in speed until I realised I had stupidly queried the image class' size and width repeatedly instead of storing the values in variables. Once I did that the filter literally flew.

Nitrofurano (Paulo Silva) has been lovely and very encouraging as I've been hacking his lovely code to bits. He's also as enthusiastic about free software as I am. I think it's fantastic that people who have never met before can work on each other's software, share ideas and get to know each other - the GPL really does work as advertised.

Sinclair TV - thanks to Nitrofurano

The reason the code was written originally was to be part of a very interesting project Paulo is working on to create "retro" vision web-cams. You can find out more about it here.

You can download the updated python-fu ZX Spectrum filter for The GIMP here.

Attribute Clash for The GIMP

2010-11-03T14:49:00.015+01:00

When I was browsing through The GIMP plug-in registry, I came across a very interesting sounding filter called "zx spectrum filter" by "nitrofurano" that promised it would imbue your images with all the glorious display limitations of the Sinclair ZX Spectrum.

As it was written in Python I thought I'd give it a go, but the plug-in refused to work. It took about an hour spuddling about to get the plug-in working. The main problem was incorrect indentation - Python is fussy about that. I also added some code to allow undoing and for the plug-in to appear in the Filters menu and then I could start playing!

Before

After

My fixed version of the plug-in can be downloaded from here, and adds the plug-in to Filters -> Artistic -> ZX Spectrum.

GNU/Linux users need to set the Execute permission for the file zxspectrum.py before the The GIMP will recognise it.

The plug-in is a very simple proof of concept and doesn't work particularly well on small (as in ZX Spectrum sized) images as it just averages out the values in character squares, but it certainly creates some interesting effects on large images. 1024 x 768 seems to be the optimum size.

Large images work best

The next step would be to speed it up using the array library and to stop it from falling over nastily if you have an alpha channel on your image - if you do, you'll have to remove it to get the filter to work.

Stairways to Starways

2010-10-27T14:27:00.004+02:00

For over ten years now, one of my favourite web-sites has been "The Stairway To Hell". This web-site has been an invaluable resource to anyone who ever had a BBC Microcomputer or Acorn Electron in their youth. As well as being a fascinating site in its own right, it was also bolstered by a lively and interesting forum.

At the end of March this year Dave Moore, the web-master, decided it was time for a change. His initial plan was to replace the site with a new one - BBCMicro.com - that would be less focused on gaming.

He asked if I could provide an image to close the site down, and thought something similar to the kind of screen you got when you completed one of the Repton games might be nice.

I completed Repton 2 in the GNU/Linux port of the BBC Microcomputer emulator B-Em, screen grabbed the final screen:

Once was enough Tim!

I loaded the BBC Micro version Repton 1 into the screen memory in B-Em so I could cut and paste from the Repton1/2 font:

Repton 1 loaded into the screen memory

Now I used the letters from the Repton 1 screen to edit the Repton 2 screen in The GIMP to say what Dave wanted:

Pristine Screen

However, this didn't really look "retro" enough. The look I was going for was BBC B on badly tuned domestic telly with some interference.

So I ran this image through my own simulated PAL filter which I wrote in Python for The GIMP. Then I used some VHS noise that I extracted from a old recording of ATV Today using Grain Extract and then added it to the image using Grain Merge. I also added a Lens Distortion in The GIMP and desaturated the colours slightly.

Click to enlarge

I was delighted to find out that some people thought the image was actually a real screenshot.

A few months after this picture went up, Dave shelved his plans for BBCMicro.com. His work with the CGEU with organising shows such as R3PLAY and Acorn World meant that he no longer had the time to devote to creating a new site.

However, this wasn't the end, as Peter Edwards stepped in to carry on the good work with a new site called stardot.org.uk. He asked me to amend my image accordingly:

Click to enlarge

Sadly I didn't do such a good job on this image as I was in a hurry - it's a bit dark. But the most important thing is that the on-line Acorn community is thriving and stardot.org.uk looks destined for great things.

Totally Bazaar

2010-10-23T18:14:00.003+02:00

Well, after promising myself I'd get around to doing this long, long ago I've finally put my house (or should that be home?) in order and submitted my Projects folder to the discipline of a version control system.

Nautilus, but nice

I create a huge amount of work on various projects in the course of a year - much of which I blog about here. And I often go back and revisit files numerous times. But to err is human and sometimes I mess things up or find that my new version wasn't the improvement I'd hoped. Therefore I tend to create large numbers of back-ups just in case.

Up until now I've been using an ad hoc system of either backup folders or appending version numbers to the end of file-names. However this is messy, wasteful on disc space and prone to error. That's where a version control system comes in.

Even though version control systems are usually seen as a collaboration tool, they are also a really good idea for personal projects.

I'd actually chosen the version control system I wanted to use a couple of years ago - it's the extremely elegant Bazaar (or BZR), a free software project started by Canonical. The Bazaar project not only encourages personal use of version control - they even provide instructions especially for personal users.

There were three big attractions of Bazaar for me. The first is that it has a single command - bzr. The second is that it puts everything in a single folder /.bzr. I don't need a database or a server or anything like that. And the third is that it takes five minutes to learn. I actually use it from the command line, but there are graphical front ends for it too.

As most of my work these days is either in Python or Inkscape - which are both based on text files - there was no excuse for not using a version control system earlier.

Anchor Revisitation

2010-10-18T07:51:00.003+02:00

A little while ago Gareth Randall dropped me a line to let me know he was going to use my Anchor typeface for one of his projects.

Gareth is an award winning promo maker, who I first got to know when was making trails and promotions for ITV. He was one of the masterminds behind the final London Weekend Television start-up routine.

I was delighted to discover that the project Gareth had in mind was a promotion for the Doctor Who Revisitation Box set. Being a bit of a fan of Terrance Dicks and Robert Holmes this was a huge honour. So, here is Sharaz Jek trying to get Peri to suck his finger. I like to think it was my rather foxy typeface that got him in the mood...

Tight wad won't pay for a colour licence

Lost In Translation

2010-10-07T05:00:00.130+02:00

I've blogged a few times about ClapTraps, the ingenious free software puzzle game written in PyGame and Python by testpilotmonkey. The last time I blogged about it, I mentioned I was planning to add i18n (internationalisation) and a bit of l10n (localisation) to the game.

Claptraps in British English

In terms of internationalisation, what I wanted to do was to make the game multi-lingual so that on my daughters' computer, where they use Hungarian rather than English, they would be able to play the game in Hungarian.

I had been under the mistaken impression that all I needed to do to prepare a Python script for i18n was to import the gettext library and then surround all translatable strings with the function _().

It turned out to be a little bit more complicated than that. The reason was that I wanted ClapTraps to stay self contained in a single folder rather than force the user to install it.

ClapTraps' self-contained folder structure

Normally when GNU/Linux programs are installed on a computer, the compiled translation scripts are copied to a central location for access by all users of the computer. On Fedora GNU/Linux, that location is /usr/share/locale. Python always expects the compiled translation files to be stored there. However, I wanted my translations to remain in the ClapTraps folder.

It would have taken me quite some time to work out what to do if Mark Mruss had not already solved all the problems for me in his excellent blog post on translating Python/PyGTK programs. There's a fantastic snippet of code there called "Translation stuff" that magically does it all!

The next step, now I had the Python script prepared, was to generate a POT (Portable Object Template) file. The POT file is the template file from which individual translations can be prepared.

The POT file for ClapTraps

It contains a header, then a list which shows the line a translatable string appears in, the id of the translatable string, and a space for the translation.

I found one problem when first creating my POT file was that it only had five strings in it! The reason was that testpilotmonkey had used single quotes for most of his strings but xgettext, the tool you use to create a POT file, only recognises double quotes.

From my POT file, I used the msginit tool to create two PO (Portable Object) files - one for en_GB (British English), the other for hu (Hungarian). Now came the really hard part - the Hungarian translation! I did this myself, but it took me three days until I was happy. The main problem was my difficulty with the imperative mood in Hungarian. Fortunately the excellent website HungarianReference.com helped enormously. My Hungarian is still a bit dodgy, but I like to think that adds to the charm.

Finished PO file with Hungarian translation

Now all I needed to do was compile my PO files in MO files and I could see if it worked. To test the game I used the LANG variable from the command language.

To force the game to run in Hungarian whilst running Fedora 13 in British English I typed LANG=hu python claptraps and....

Magyar and testpilotmonkey - a tricky combination!

Success! That was a lovely feeling. Now the next challenge was a bit of l10n. The problem I faced was that ClapTraps regularly asks the user to press Y for Yes or N for No. But in Hungarian that should be I for Igen or N for Nem. So I needed some way of changing the keys that you need to press to suit the current language.

This turned out to be quite easy - first I had to import the locale library. Next, I just needed to ask the locale class for the initial letters used for "yes" and "no" in a language like this:

# Make lists of "yes" and "no" keys for current language
locale.setlocale(locale.LC_ALL, '')
yes_keys=list(locale.nl_langinfo(locale.YESEXPR)[2:-3]);
no_keys=list(locale.nl_langinfo(locale.NOEXPR)[2:-3]);

The nl_langinfo function returns a regular expression string with the acceptable keys for Yes or No for the current locale. For English it would be:

^[yY].*

^[nN].*

For Hungarian it would be:

^[IiyY].*

^[nN].*

Note that Y is also acceptable for Hungarian. I used the Python slice operator to slice off the bits I didn't want and then bunged the result in a variable. So now, when I want the user to press yes or no I simply do this:

while(1):
    wait_event = pygame.event.wait()
    if wait_event.type == pygame.KEYDOWN:
        if pygame.key.name(wait_event.key) in yes_keys:
        return False
    elif pygame.key.name(wait_event.key) in no_keys:
        program_quit = False
        break 
    else:
        pass

And that solves it. Since I made these changes to ClapTraps my daughters have both had hours of fun out of the game. It's a tribute to the genius of testpilotmonkey - and Richard Stallman. For, without the GPL, I wouldn't have been free to make these changes which allowed my children to enjoy this fantastic piece of software.

Per ardua, ad astra

2010-10-06T11:58:00.001+02:00

Recently I wrote about the flyers I created for the R3PLAY Arcade, Retro and Video Gaming Expo that's going to be held in Blackpool on the 6th and 7th November 2010. Here's Doris Speed holding an example:

Some people are so easily pleased

At the same time as I put flyers together, I also prepared two half page magazine advertisements to appear in retroGAMER and gamesTM magazines.

This was a very exciting job for me, as I've always wanted some of my work to appear in a computer magazine, and retroGAMER was a magazine I used to buy regularly when I lived in the UK.

The fliers were produced as large uncompressed TIFF files. I exported large PNG files from the Inkscape source file and then converted them into TIFFs using The GIMP.

I was delighted this morning when Dave Moore, one of the organisers of R3PLAY, sent me a picture of the adverts appearing in the magazines themselves.

In retroGAMER...

Click to enlarge

...and in gamesTM.

Click to enlarge

The R3PLAY Arcade, Retro and Video Gaming Expo is going to be held in Norbreck Castle, Blackpool on the 6th and 7th of November 2010. You can order tickets from www.r3play.info, in-store at WHO, 30-32 Coronation Street, Blackpool or by phone on 01253 291188.

The Ultimate Seventies Cliché

2010-10-03T13:59:00.001+02:00

Well, I had to do this in Inkscape sooner or later, and this morning I had three quarters of an hour spare and I couldn't resist it any longer.

I only ever used to get Spangles in that netting Christmas stocking that Mars used to do. It always had a board game on the back with a hexagonal spinner thing you had to cut out and put a match through to use instead of a dice.

Click to Enlarge

I used to find the Old English Spangles absolutely disgusting as a child - trying to eat a whole packet was probably the closest I'll ever get to a bush-tucker trial - but I'm sure I'd love them now.

PNG to PNG Sequences

2010-10-03T06:33:00.001+02:00

When I'm putting videos together, one thing I often find handy is being able to turn a single PNG image into a PNG sequence. That means I can import the resulting sequence straight into Avidemux or VirtualDub and to add filters to it.

#!/bin/bash
#
# Convert png file into a png sequence for video use

for i in {1..150}; do
    j=$(printf "%04d" $i)
    cp "input.png" "pngs"$j".png"
done

The Bash script above does that - it takes a file called input.png, and creates copies of it to make a PNG sequence of 150 frames numbered from png0001.png to png0150.png.

Album of the Month

2010-10-01T13:25:00.001+02:00

Changing Times

2010-09-19T08:23:00.003+02:00

Well, as we prepare to put the clocks back, I thought I'd show you the clocks going forward. Today's Sunday Matinee is a slice of Granadaland from the 50s, 60s, 70s and 80s...

No Sleep Til Closedown

2010-09-15T17:57:00.015+02:00

My interest in all things Granada was piqued recently when I came across a copy of "Easy Go" by Nick Glennie-Smith. This was the breezy mid-80s start-up piece that was usually heralded by a very naff block graphic transition and ended up with Colin Weston talking over it cheerily in-vision to let us know how parky it was outside.

It's blue, it's CGI - it's just like Avatar!

I've always wanted to have the Granada block graphic transition available as a Flash file should I ever need it, so when I got some free time recently I decided to recreate it. For source material I had an old RealVideo file of a VHS recording of a Granada closedown which I downloaded from the web many years ago.

The Granada transition is based on a grid of 32 x 24 squares, meaning that each square was 24 pixels in size making up the full 768 x 576 PAL resolution. So the first thing I did in Flash 8 was change the grid from 18 pixels to 24 pixels. I then added guides every four grid squares to help positioning on screen.

Setting the Flash 8 grid

To help me create the animation, I needed to view the video file frame by frame in Avidemux. However Avidemux didn't like my rather antiquated RealVideo source file. Luckily I was able to convert the RealVideo file into an mpeg file using the command line video tool ffmpeg:

ffmpeg -i granada\ close\ 1985.rm -r 25 -target dvd -b 3000kb finalvid.mpg

After that I trimmed the resulting mpeg file in Avidemux so that it only contained the transition.

I didn't bother turning the video file into an FLV to import into Flash - just as well as it turned out. I had enough problems with memory as it was! As I run Macromedia Flash 8 using the WINE compatibility layer for GNU/Linux, Flash 8's performance tends to struggle with files over about a megabyte in size.

My approach was to use a symbol for my pixel, and build up each frame using multiple copies my pixel symbol.

A really stupid way to do it...

Although it worked fine at first it was a big mistake in retrospect as it meant I eventually created a large, unresponsive Flash file. This is because when you use Flash in WINE for large files you have to use Save And Compact... for each save to stop the file growing exponentially in size and eventually corrupting. Worse still, whilst it is saving Flash becomes completely unresponsive.

As I worked on the Granada transition each Save and Compact... took longer and longer and would often throw me out of Flash completely so I had to reload it again. Flash also became increasingly slow and unresponsive while I was working. It got so bad that in the end the majority of time was spent "Saving and Compacting" rather than animating.

By the time I'd finished it had taken me an hour to do one second of animation - absolutely ridiculous! My end result was 2.4MB Flash File that took about six minutes to save after each alteration but output a SWF animation that was about 6K in size.

In order to be useful obviously needed a file I could actually work with sensibly. After breaking apart all the square symbols I got a file that was a more manageable 237K - and that could be saved instantly. However the output .swf file went up in size several times to nearly 23K.

A more sensible approach

I kept my original Flash file so that at a later date I can create a 16:9 aspect ratio version of the Granada transition. But I think I'll wait until the performance of Flash 8 improves in WINE before I tackle that one!

The only other problem I had when creating the transition animation was the RealVideo file I had dropped the odd frame, so I had to create two frames from one at certain points.

Finished Transition in Flash Player

Once I had the Granada transition, I decided it would be a shame not to put it to some kind of use, so I decided to recreate a Granada closedown from the mid-80s. I had a recording of a Granada closedown in another ancient RealVideo file and luckily I only needed two extra items - the Granada computer generated station clock and the Granada computer generated ident caption.

I was lucky enough to have some excellent source material for the Granada station clock - the output of the actual clock generator itself courtesy of Greg Taylor. Having the clock output also allowed me to get the RGB values of the actual colours exported by the electronics used to generate the clock and caption. Looking at off-air recordings of the clock and caption in use, I reckon these were often tweaked a bit in the gallery to make them a more Granada-ish powdery blue.

The clock itself was an interesting job. A couple of years ago I would have drawn and animated the entire thing in Flash 8. However, I did a mix and match for this. I drew the bottom of the clock with the Granada Giro G and namestyle in Inkscape 0.47. Then I exported the result as an EPS, imported the EPS into Flash 8 and then drew and animated the clock face itself.

Clock base created in Inkscape 0.47...

I was quite pleased with this - it meant I could use the best tool for each bit of the job. Inkscape is far more suited to drawing logos and lettering, whereas Flash is far more suited to both drawing and animating things like clock faces.

... and finished off in Flash 8

The clock was a pretty quick job, polished off in under an hour from start to finish.

Inkscaped Granada CGI ident

The Granada electronic caption was another quick job, as I had a large, high quality scan of a genuine caption card from Matthew Gulliver's collection to work from. This caption dated from the same era as the closedown and the proportions of both the logo and lettering were identical.

Once I had all the bits and pieces I stuck them together in Flash 8 and exported the resulting sequence as a PNG sequence. I turned the PNG sequence into an uncompressed AVI file using VirtualDub. Then I imported to AVI file into Avidemux to add audio and export the result as an H.264 video/MP3 audio MP4 file.

I uploaded the finished result to my YouTube channel, and here it is:

Probably The Ugliest Test Card In The World

2010-09-12T09:34:00.001+02:00

When I drew my recreation of the IBA electronic test-card ETP-1 in Macromedia Flash, I only captioned it with the large IBA caption. As I only needed the card to recreate an HTV start-up sequence, I never bothered adding the two best known captions that appeared on the card - for Channel Four and S4C.

IBA ETP1 recreated in Macromedia Flash 8

This always annoyed me, so whilst I was listening to a podcast this morning I finally decided to finish it off. I used Inkscape to draw the lettering - I'll export it as an EPS file for import into Macromedia Flash at a later date.

Beautiful calligraphic script

If you enlarge the image below, you will see that letter is designed on a 10 x 10 pixel grid, with 2 pixel leading between each letter.

Snap to Grid and Clone Object are your friends

Now all I need to is some KPM tracks by Keith Mansfield and I'm back in the early 80s again.

Distractions...

2010-09-07T11:11:00.001+02:00

My children have been nagging me to add internationalisation (i18n) to testpilotmonkey's brilliant game ClapTraps.

Well, the road to good intentions - I got distracted and ended up designing a level.

Not bad for a first attempt

It was supposed to be very cerebral and contain Repton style apple and grass puzzles but ended up as something to rival Giant Clam in Repton 1. Now, better get back to adding some Magyar to ClapTraps before my daughters get back from school today or they won't be amused!

Showing Off

2010-09-05T11:17:00.014+02:00

Well, I've had Prof. Steve Furber giving lectures in front of my artwork, now I've got the legendary Sophie Wilson playing with robot arms next to it.

Sophie's choice

The event was the Vintage Computer Fesitval, which was held on the 19-20th June at The National Museum of Computing in Bletchley Park.

Nice banner, shame about the carpet.

The artwork, a long banner, was produced for R3PLAY - an computer exhibition which is going to be held on the 6-7 November in Blackpool. I've spent a lot of time on various bits and pieces for this event this year.

R3PLAY vectorised - click to enlarge

The extremely striking R3PLAY logo was originally designed as a raster image by Darren Doyle - better known as "Greyfox". I just about managed, using Inkscape, to reproduce this image in vector format so it could be blown up to enormous sizes for use on banners and posters.

Outlined - click to enlarge

The hardest part of vectorising the logo was reproducing the faint images of flags that are superimposed on the lettering - I had to trace these by hand and it was a long and quite fiddly job - particularly because the effect of the flags is quite subtle.

Flags of all nations - click to enlarge

I also had a problem getting the Inkscape filters to superimpose "raster" lines on top of the lettering. I ended up having to superimpose filtered stripes on top of each other several times.

Stripes - just squashed ellipses

The raster lines themselves are squashed ellipses in a layer with the "Screen" blend mode enabled so that they make the layers underneath them lighter.

Five layers of outline with glow filter stacked

The final challenge was getting the red glow around the letters correct. Again, this involved layering several filtered copies of the lettering on top of each other, and it was quite a struggle to get it just right. However, the glows scale unpredictably, which means reworking them every time I resize the logo.

Underneath the logo were vector images I created in Inkscape by tracing photographs I managed to find using Google images. Tracing vector computers is a very straightforward job, and quite a pleasant one provided you have some music to listen to. The only hard part is matching fonts, and even that is easy if you have a Letraset catalogue from the seventies!

Not all the vectors I produced were used. For instance, here is my Acorn Electron:

The thinking man's ZX Spectrum

One trick I used when doing this sort of thing is to make good use of the Inkscape Perspective plug-in to map square on views onto a parallelogram.

The pixel artwork at the bottom of the banner was produced by the world renowned pixel artist Gary Lucken (aka Army of Trolls).

A Gary Lucken masterpiece...

In order to produce magazine advertisements from this artwork I did have to extend it slightly horizontally in The GIMP - I did it by copying elements form Gary's design - I even manage to incorporate the BBC Computer Literacy Project's owl.

...ruined by me. Sorry.

Once I had created this expanded version of the artwork I set about creating the artwork for the adverts that appeared in retroGAMER* and gamesTM magazine. This was quite nerve wracking - to be honest I haven't been so nervous since I was first did graphics to be broadcast on television.

After much experimentation I decided on the 50s font Microgramma to be the "corporate font" for R3PLAY. I like the font, it looks both retro and modern and it was also the Commodore font from the early 80s.

Finished Flyer - lots of Microgramma

I also produced an A5 version for fliers - Dave Moore is one of the masterminds behind the R3PLAY event, and shamelessly uses the fliers for promoting the show at every opportunity.

So my flier was stuck to Daleks....

Stupid tin boxes...

And brandished by attractive young ladies...

Edward Bernays has nothing on Dave M

Another early job was creating the tickets for the event. Again, another Inkscape job for a huge print run which I always find nerve wracking. I recreated both the Macmillan logo and the National Museum of Computing logo as vector images as I didn't have vector copies.

Tickets, please...

The tickets looked rather striking in the end, but Dave Moore told me had to bin the whole of the first print run of tickets and have them reprinted elsewhere in order to do them justice.

The final graphics for the adverts, fliers and tickets were exported as enormous TIFF files. However for things like the roll-up banners I had to produce PDF files. I found the best way to do this from Inkscape was to Print To PDF, rather than export to PDF from Inkscape. The latter method produces absoltuely terrible results, where as printing to PDF produces results which are flawless.

R3PLAY is organised by the non-profit organisation the Computing and Gaming Events Union (CGEU), and I was also responsible for tarting up their logo. The original was again designed by Darren Doyle. I placed it in a roundel, made the Pac-Man image a vector shape and added some depth to him and finally added some lettering in Inkscape:

CGEU logo tarted up

One of my main jobs for the R3PLAY event was producing its website. In order to "save time" we decided to use Joomla and base the design of the website on an existing Joomla template from a commercial supplier who shall remain nameless.

r3play.info

This was a very frustrating experience as there were numerous bugs and several unfinished bits and pieces in the template we purchased and I ended up having to get rapidly expert in PHP and CSS in order to get the thing working as required. There were also no useful Photoshop templates for the artwork, so I ended up having to recreate all the source files for the graphics in The GIMP from scratch.

Obviously this was all good practice for me but not what you want when you are working against a deadline for a very exacting customer!

One of my favourite jobs on the website was producing the animated Pac-Man gif that is displayed about the advert on the home page.

Snapper is nothing like Pac-Man, honest.

To do this I took several screenshots from version 1 of Acornsoft Snapper in Tom Walker's excellent BBC Micro emulator B-Em, traced the sprites and animated them in Macromedia Flash 8 and then exported the result from Flash as an animated GIF.

I produced a forum Post footer too

R3PLAY looks like being an absolutely fantastic show, and well worth a visit if you can make it. Besides which, by attending you will be helping to raise money for two very worthy causes - Macmillan Cancer Support and The National Museum of Computing.

It has three strands - Consoles, Coin-Op games (including Pin-Ball) and Computers. The latter includes a strong retro contingent of the well known names such as BBC Micros, Electrons, Archimedes as well as the more obscure things such as Commodore 64s, Amigas, STs and ZX Spectrums.

Take You To My Leaders

2010-08-23T09:46:00.001+02:00

Well, it had to happen sooner or later. My first documentary - my entry for the Golden Spigot of Hinton St. George:

It's poorly made, factually dubious, and won't tell you anything worth knowing - just like the real ones on the telly!

Mogrifying

2010-08-14T08:09:00.000+02:00

When I'm using video as a source material for a recreation, I often use Avidemux. Avidemux will either export .bmp files or .jpg files.

Exporting from Avidemux - limited options

I like to export .bmp files from Avidemux as they are lossless. However, they are also very large and I usually want to convert them to .png files to save space. To do this using a graphics package would be boring, time consuming and prone to error.

Luckily I'm able to use a handy little free software utility called ImageMagick from the GNU/Linux command line. It has a command called mogrify to do this sort of job.

To convert all the bmp files in a directory to png files I simply use:

mogrify -format png *.bmp

And then to remove the original bmp files I can use:

rm *.bmp

And the finished result:

Mogrified!

This has saved me literally hours of work over the past few months.

ClapTraps v1.1

2010-08-04T09:40:00.006+02:00

You might remember that in April I blogged about the computer game ClapTraps, which was written by my friend testpilotmonkey. ClapTraps is a fiendishly addictive puzzle game written in Python using the PyGame SDL library.

ClapTraps v1.1 - reworked title screen

Back in May I also blogged about my Inkscape reworking of the graphics for the game.

ClapTraps v1.1 - reworked graphics

Since then testpilotmonkey has released a new, expanded version of the game - ClapTraps v1.1. It includes my reworked graphics and a number of new features.

For instance, you can now redefine the control keys. This is very useful if you, like me, have a Hungarian keyboard!

Even better, people who can code in Python can easily change the behaviour the game objects, just as you can in Repton Infinity. To demonstrate this, ClapTraps comes with a XOR-style came called Arrows which has the potential to be very interesting indeed.

Arrows - a real head scratcher

Despite my best efforts to recommend the game to everyone I know, ClapTraps has been largely ignored, even by fans of Repton. I think this is inexplicable and a crying shame. It's an absolutely fantastic puzzle game and has given me and my daughters a lot of fun. It's free as in beer and free as in freedom so there is no reason not to download it and have a go - and let testpilotmonkey know what you think too!

It is available to download for Windows, GNU/Linux and OS X here.

NB for GNU/Linux users: I found I couldn't run the ClapTraps code by double clicking on the main ClapTraps.py icon from Nautilus, the GNOME file browsing program. After much experimentation I found the problem was simply that ClapTraps.py was corrupted in some way. If you copy and paste its contents into a new file it will work correctly. The copy and pasted file will be 2K shorter than the original, but work perfectly.

(Yet) another version of Letraset Oxford

2010-07-29T10:03:00.010+02:00

Whilst browsing dafont.com the other day, I noticed that (yet) another version of the classic Letraset Oxford typeface has been created, and this time it's another free (as in freedom) version.

The font is named Oxford-CP and was created by Diogene. It's licensed under the GPL with the font exception rather than the SIL OFL which I used to license my version.

The non-free version of Oxford, called Sportowy, which boasts some beautiful glyphs for things like @, is available here.

My version, which I called "Scene" in honour of the BBCtv schools programme that used the face for its logo, also features capital letters and Central European accenting and is available to download from here.

BBC Micro game Pipeline used Oxford

Ironically, after the huge amount of effort I put into creating it (see here, here and here), I still haven't actually done anything with my Scene font - but hopefully I'll get around to doing something with it soon.

Let's Go Nationwide

2010-07-17T07:21:00.006+02:00

Recently I've been playing about recreating various SMPTE and custom made film leaders in Flash 8 and Inkscape. One of the most interesting for me, and one that reminds me of Blue Peter for some reason, is the BBC's own film leader. Here it is:

While working on film leaders, I've settled upon a hybrid Flash/Inkscape workflow in which I create the individual frames in Inkscape as Inkscape SVG files.

SMPTE Society Leader frames created as SVG files

I then export them all as EPS (Encapsulated PostScript) files so they can be imported into Macromedia Flash 8. You could export all the files from Inkscape by hand, but to save time I use a little Bash shell script instead:

#!/bin/bash
#
# Export all SVG files in a directory as EPS files

for i in *.svg; do
    inkscape $i --export-eps `basename $i .svg`".eps"

done

Then I import the EPS files into Flash and I'm ready to start putting the animation together.

Election 1970 - in Colour!

2010-06-25T14:41:00.001+02:00

After seeing this, look what somebody very kind sent to me:

Click to enlarge

Diamonds are for 1 minute 58 seconds

2010-06-24T18:49:00.003+02:00

I've always had a fascination for the BBC schools diamond. In case you are not familiar with it, the BBC schools diamond was a mechanical model devised by Murray Andrew for use in the last two minutes of intervals before BBC programmes for schools and colleges.

I am ancient enough not only to remember it, but to have watched it as nature intended at primary school every week before a programme. I was always mesmerised by it, but my unimpressed teachers used to complain that it wasn't as easy to understand as ITV's schools clock.

The diamond mechanism itself is fascinating and it was very satisfying to work out how it worked.

The diamond animation as outlines in Flash

The four striped version of the diamond was originally only a static caption card, intended for use in place of the mechanical model in intervals less than two minutes in length.

I always wanted to see it being animated. Hence another lame mock that I produced, as always, in Macromedia Flash 8.

As I'm exclusively using GNU/Linux these days I exported the diamond from Macromedia Flash 8 as a PNG sequence. I imported that into the free software video tool Avidemux, added the music and exported the resulting sequence into an MP4 container with MPEG4-AVC video encoded using the x264 video codec and MP3 audio encoded using the LAME MP3 audio codec.

I find the overall effect is rather akin to seeing one of those 4x4 or 5x5 Rubik's cubes for the first time.

Anchor Cliff Michelmore

2010-06-24T15:05:00.007+02:00

Regular readers of this blog will no doubt have been bored witless by my endless posts about the creation of a TrueType font based on the output produced by the BBC analogue character generation system Anchor.

Although I was very happy with the end result, I was aware that when compared to one famous example - the BBC's coverage of the General Election of 1970 - it didn't look quite right.

Here is an example image taken from this video - apologies in advance, as the quality is appalling:

Anchor used in anger, 1970

The characters looked fatter - squarer - than they did on my version. I was curious to know why.

Whilst browsing the internet for something else entirely I happened to come across a BBC .pdf file from January 1973 that explained what was going on:

"The addition of the lower-case facility has involved a change in the format of the display from 14 rows of 25 characters to 12 rows of 32 characters. This has been necessary to accommodate the descenders of such characters as 'y' and 'g' whilst preserving the appearance of the character set." BBC Engineering Design Information - 10168(1).JAN73.ECG.

So, here is how Anchor would look before January 1973:

Anchor, pre January 1973

And here is how it would look after January 1973:

Anchor, post Jan 73

And here is a gratuitous picture of Cliff Michelmore as, personally, I think you can't have too much Cliff Michelmore on your blog:

Click to enlarge

So, imagine you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from pre-1973. In that case use Anchor at 41pt, stretched horizontally by 128% with 85% line spacing. And you mustn't use any lower case!

If you are doing something with Anchor.ttf on a 720 x 576 image that is supposed to be from post-1973 then simply use it at 41pt with 100% line spacing.