Stairways to Starways

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.

But what’s it for?

When I posted about my VHS and PAL plug-ins for The GIMP, I forgot to say why I originally wrote them. As I was using the VHS plug-in last night, I thought it might be interesting to explain what I was using it for.

I often find myself taking captions found on old multi-generation VHS tapes, and trying to recreate them in Inkscape (or, in the old days, in Macromedia Flash).

The trouble is that VHS changes can change the way captions appear. In particular, it changes the way the text on captions appears. This makes it very hard to match the typefaces used on captions with ones I have in TrueType, Postcript or OpenType format.

Take this caption, for example (click on it to make it bigger).

Could you help someone coping with franchise loss?

When I saw it, I knew immediately that the “PUBLIC SERVICE ANNOUNCEMENT” text was in Compacta Bold. However, when you create the caption in Inkscape it simply doesn’t look right (click on it to make it bigger).

Together we can beat pipe smoking.

As you can see, the text looks so much thicker it’s almost as if I’ve used the wrong font weight. But I know that the text is not Compacta Medium – that would be far too thin. And I also know there were no other weights of Compacta available to Scraggie and his friends in the Mecanorma or Letraset dry transfer lettering catalogues in the 1970s. So what’s going on?

If I load the Inkscape caption into The GIMP and put it through my VHS filter, which reproduces the mangling that VHS inflicts on television pictures, you get something that looks like this.

Dinage isn’t the problem it was.

The weight of the font in the caption above looks more like the original – and I’ve clearly used the right typeface all along.

The Southern Television logo is used courtesy of Nic Ayling.

It may be rubbish, but at least it’s British rubbish…

My one stop shop for all your stupid rubbish download needs is now open here.

So now, for the first time everyone can:

And all in the comfort of your own home. How can you resist? I just hope Google’s servers are load balanced…

Filter tips (no Alistair)

I was bored of repeatedly applying my PAL and VHS effects to images by hand. It was a several stage process and rather fiddly: I desperately wanted to automate it. I knew it was possible to extend The GIMP by writing your own features in Python, so I decided to have a go and see how I got on.

The documentation for writing plug-ins in Python for The GIMP was pretty well hidden, but eventually I found it here. It was well written, very easy to follow, but it looked very old. For safety’s sake I felt I needed to have a hunt around and see if there were any more recent examples of filters for the GIMP in Python I could find just in case anything had changed. The tutorial seemed to have been written for The GIMP 1.5 but on my computer I’m currently using The GIMP 2.6.

Although I did try Google, the best example of Python filters for the latest version of Python were installed with The GIMP itself and sitting in:

/usr/lib/gimp/2.0/plug-ins

Sure enough, the filters in there that shipped with The GIMP 2.6 had a much better way of preserving The GIMP’s state before and after the filter is applied and help undo to work and also contained the gettext function that ensures your filter can be translated into other languages. There is also a slightly changed way of specifying which menu the plug-ins show up in in The GIMP.

Writing the plug-in itself was very easy indeed. No stretching, no unpleasant bending and the gedit text editor that comes with the GNOME desktop on Ubuntu GNU/Linux was all the equipment I needed.

Writing filter in gedit

I found using the Browse… button on the Python-Fu console in The GIMP was extremely handy. It brings up a Procedure Browser which I used for finding the functions I wanted to call and their syntax. It also showed me the constants I could use, which greatly reduced the number of “magic numbers” in my code.

Procedure Browser from Python-Fu console

The basic idea is that anything you can do in The GIMP with a mouse has a matching pdb (procedure database) function, so it’s really easy to write a macro-style filters – you just find the right function using Browse.. from the Python-Fu console and string them together. But as that because Python is a ridiculously easy language, it’s possible to do so much more than that. One thing I didn’t expect is that pdb functions sometimes have extra parameters that you can’t normally access using The GIMP itself.

The second part of your filter is a call to a function called “register” in which you specify the interface for your filter, its description and where you want it to appear in the application.

A filter’s interface is specified in its register function

The main problem I had was not writing the filters themselves but getting them to show up in The GIMP’s menu of filters. Firstly I needed to work out where to put the filters – with Ubuntu Linux the best place is in your home directory under .gimp-2.6/plug-ins.

But putting it in the right place wasn’t enough – there were two other issues. First, if you don’t set your Python scripts to “Allow executing file as program” they won’t show up in The GIMP. No warning, no nothing – if you forget to do that you just won’t see them.

Don’t forget to allow your filter to execute as a program

Secondly, you have to prefix your filter name with “python-fu-“, or again it will silently refuse to show up.

Once I did get the filter to appear and, better than that, it worked, it was an amazing feeling of achievement. It’s tremendously satisfying to customise a program to do some special things that you want it to do.

Success at last – click to enlarge

I’ve released both filters under the GPL v3, and they’re available to download from here.

Tapeheads Revisited

I was happily applying my “fake” VHS or fake PAL effects to a range of pictures thinking how clever I’d been when something started to bother me.

Most images looked fine, but some looked completely wrong. For instance, the “Colour Production” text on Yorkshire Television production captions looked awful. I needed to find out what was wrong.

It shouldn’t actually look this bad…

I went back to Alan Pemberton’s website and after reading this page again I realised what was wrong. A PAL colour picture is composed of a high definition black and white image (which contains the luminance or Y) and a low definition colour image (or chrominance). The luminance image and chrominance images are added together to make a colour image.

However, with the colour turned down, the luminance image looks like a normal black and white picture – complete with all the detail viewers in black and white would expect. Whereas my technique for faking PAL or VHS was chucking away far too much detail, and if I turned down the colour I would certainly not see an acceptable black and white image.

In particular, I was binning far to much information for red and blue, which was the reason that things like the blueish red “Colour Production” on the Yorkshire Television caption looked far to low resolution.

I could quite easily create a PAL luminance image, like this:

A PAL luminance image

And I tried to create a chrominance image, like this one:

PAL chrominance image, but you’ll have to imagine the negative colours…

However, when I tried to combine them, something was wrong.

Lightspots can be too light

The answer was that for my chrominance image to work, the PNG format would need to hold negative colour values. The chrominance image is what’s called a difference image and therefore contains negative as well as positive values. Alan Pemberton explains why this is much better than I could on his site.

So, I couldn’t be completely accurate in the way I created PAL images, but I thought I could do a better job than I had been. So I fired up The GIMP and came up with this.

I load my source image and create two layers. I call the bottom one Luminance, the other Chrominance. I make the Chrominance layer’s blend mode Addition.

For my Luminance layer I adjust the Red channel output level to 76, the Green channel output level to 150 and the Blue channel output level to 29.

Setting the Red channel level to 76

For the chrominance layer I adjust the Red channel output level to 179, the Green channel output level to 105 and the Blue channel output level to 226.

You may notice that each pair of numbers adds up to 255. The Luminance (Y) layer values were worked out using:

Y = 0.299R + 0.587G + 0.114B with R = G = B = 255

Then depending on what I am doing (PAL VHS or just PAL), I scale the Luminance and Chrominance layers horizontally and then scale them back to full size. For a nice PAL effect I found that scaling the Luminance layer by two thirds width and then back again and the Chrominance layer to a third width and back again gave a good effect.

For VHS I found scaling the Luminance layer by 32% and the Chrominance layer by 16% looked OK.

As a comparison, here’s a Yorkshire television caption done using the revised technique.

How We Used To Live – with lossy old VHS tapes

The next job is to turn my method into plug-in filters for The GIMP. Time to dig out my Python book!

Filthy tapes and dirty pictures

Recently I’ve been trying to work out how to recreate the PAL/VHS look in The GIMP. One article I read said that the colour (or chrominance, as they put it) signal on VHS recordings was very noisy. You can clearly see this on screen grabs taken from real VHS tapes.

The blotches here are due to genuine VHS/PAL chrominance noise

I tried to simulate this by adding RGB or HSV noise to the red, green and blue images I was creating. The results looked totally wrong. The trouble was that the noise was too even, with all the little blobs of noise being the same size. Click on the image below to enlarge it.

My unsuccessful attempt to simulate it using HSV noise

What I needed was some more realistic VHS noise, in which the blobs of noise were different sizes. Chrominance noise is rather like film grain in this respect, so after Googling “film grain gimp” I came up trumps with a very good article by Eric Kidd about film grain in The GIMP documentation which gave me the solution.

So, here is how I made my nice clean chrominance channels dirty:

  • I opened a real screen grab taken from a PAL VHS tape in The GIMP.
  • I duplicated the image onto a new layer so I had two layers in the same file containing the same image.
  • I blurred it the upper layer with Gaussian Blur until there was no noise visible.
  • I set the blend mode of the blurred layer to Grain Extract.
  • I flattened the image.

What you should end up with is an image that looks like this (click on it to enlarge it):

The grey areas are pure PAL/VHS chrominance noise

The grey areas contain the noise – which is what we are after. The next thing you need to do is choose a portion of the noise that looks best, and make it into a new image. After that you should make you noise image into a seemless tile the Make Seamless Map filter. This allows you to fill large areas with noise.

Here is the sample of real VHS noise I ended up with – it doesn’t look like much, but it works a treat!

This small PNG image was all I found that I needed

Now we can use the noise image to help us make a fake “PAL VHS” image. You apply it when you have scaled your red, green and blue images down to their “small” size – that’s before you restore them to 720 x 576 and composite them together.

First, I copied my noise image in The GIMP so it was on the clipboard. Then I used a Fill with the “Pattern Fill” fill type with “Clipboard” as the fill source. I also set the affected area to “Whole Selection” and the mode to “Grain Merge”. The bottom of your toolbox panel should look like this:

Here’s the recipe for those playing along at home

So all I am doing is blending my real VHS chrominance noise image over each of my colour channel images. Here’s my scaled green channel just after I applied the real chrominance noise.

The noise causes the slight blotchiness of the background

Here is an example of a finished “fake VHS” image with the real chrominance noise added (click to enlarge):

Very happy with the way this turned out

And here’s the Granada International example from earlier, but this time with real chrominance noise applied as a comparison (click to enlarge):

I think we just missed something dull and northern

That wraps it up for PAL and VHS – sorry I went on about it so much!

VHS Scale sizes

This is the list of scale sizes I use for scaling images to make “PAL VHS” screens in The GIMP:

            Broadcast    VHS (46.25% worse)
Y   0.299R  215 x 576        100 x 240
    0.587G  423 x 576        195 x 240
    0.114B   82 x 576         38 x 240

I tend to use non-square pixel 720 x 576 images as source material, or 788 x 576 source material that I scale back to 720 x 576.

Incidentally, the type of scaling you use is important. I nearly gave up on creating VHS style images at first because I was using Cubic interpolation when scaling in The GIMP. It gives very disappointing, blocky results (click to enlarge):

Cubic scaling gives a very pixellated look

However I soon worked out that, thanks to a bit of help from a clever Hungarian chap called Lanczos Kornél, I could use Sinc (Lanczos 3) interpolation when scaling.

Lánc, Lánc, eszterlánc…

That makes all the difference to the end results. Here is the same image created with Sinc Lanczos scaling:

Hungary restores Derek Batey’s honour

The sad thing is I probably spent more time on Border Television’s graphics than Border Television ever did when I was writing this post…

PAL VHS

After having a look at what PAL looked like on images that were broadcast to your television or arrived from a home computer, I wanted to have a look and see if I could simulate how a PAL VHS image would be mangled.

From what I could gather, a PAL VHS picture was 576 lines but it only stored a maximum horizontal resolution of around 333 pixels. On the back of an envelope I worked out that meant that the image stored on a VHS tape had about 46.25% of the horizontal resolution of a broadcast PAL image.

Therefore, suppose the original image was this Telefusion Yorkshire one (click to see it at full size):

Before: the original 720 x 576 pixel image

Then it would be stored as this much red information (click to see at full size):

Red – 100 x 576 pixels

This much green information (click to see at full size):

Green 195 x 576 pixels

and this much (or, rather, little) blue information (click to see at full size):

Blue 38 x 240 pixels

And when combined you’d get an image like this:

After: Simulated PAL VHS image

Incidentally, PAL images have non-square pixels. So in order to see the “before” and “after” images on this page in the correct aspect ratio I have scaled them horizontally from 720 pixels up to 788 pixels.

PAL with telly

After re-reading Alan Pemberton’s article on PAL, I realised I’d been a right numpty in my post about recreating the effect of PAL on images.

I re-read the following:

Y = 0.299R + 0.587G + 0.114B

A light bulb went on, and I realised I’d been completely wrong in the way I was scaling my Red, Green and Blue images before combining them. This also meant that the Gaussian Blur step was not needed.

What I needed to do to with the colour channel images I made from my initial 720 x 576 images was to horizontally scale them in The GIMP by following amounts:

  • Red to 720 x 0.299 = 215 pixels
  • Green to 720 x 0.587 = 423 pixels
  • Blue to 720 x 0.114 = 82 pixels

Here’s the logo I created for my friend Greg Taylor’s company before:

Before image. Can you spot Emily Moore?

And here it is after using this revised method:

Now with PAL – click to enlarge the images

I’m sure I’ll come back to this again, but I’m finding it interesting.

Simulated PAL

One of the many mysteries of having a home computer as a teenager was why the picture looked so much better on colour monitor than it did on a domestic television. And indeed, why the image on a domestic television looked sharper if you turned down the colour.

Later on, I discovered it was due the PAL system that the BBC Micro used to send pictures to the television. PAL ingeniously chucks away loads of colour information in order to keep the bandwidth of analogue colour television pictures down to a level that made broadcasting them practical.

After reading an excellent article on the subject by Alan Pemberton, I thought I’d have a go and see if I could simulate what PAL does to an image in The GIMP.

As a starting image, I used a CEEFAX page I’d made in Teditor (by Jim Notman, The Micro User, Volume 2 Issue 6) on the BBC Micro emulator BeebEm. Obviously teletext looked nothing like as good as this on a domestic television.

My starting image – click to enlarge. It never looked this good on a telly!

To begin with I added a Gaussian Blur to the image. I broke the link between the horizontal and vertical blur radii so that I blurred more horizonally (2.2) than vertically (1.2). It’s worth playing with this.

This button breaks the link between the radii

The next thing I needed to work out was how to split the image up into three different images – one containing red, one containing blue and one containing green. I discovered the Levels dialog box in The GIMP would do this for me.

To make the Red channel I created a duplicate of my original image with Ctrl+D. Then I brought up the Levels dialog box and then:

  1. selected blue channel from the Channel combo box
  2. dragged black pointer below the input levels graph to far right
  3. selected green channel from the Channel combo box
  4. dragged black pointer below the input levels graph to far right

The Red channel

To make the Blue channel I created a duplicate of my original image with Ctrl+D. I brought up the Levels dialog box and:

  1. selected red channel from the Channel combo box
  2. dragged black pointer below the input levels graph to far right
  3. selected green channel from the Channel combo box
  4. dragged black pointer below the input levels graph to far right
The Blue Channel. Sounds a bit rude…

Finally, I made the green channel from my original image. To do this I:

  1. selected green channel from the Channel combo box
  2. dragged black pointer below the input levels graph to far right
  3. selected blue channel from the Channel combo box
  4. dragged black pointer below the input levels graph to far right

That meant I had three images – one which was the red channel, one which was the blue channel and one which was the green channel.

The green channel was finished – I didn’t need to touch this as the PAL system relies on a high resolution green image and adds a low resolution red and blue image to this.

The finished Green channel. It will not be scaled like Red and Blue.

However, to both the red and blue channels I needed to lower the horizontal resolution quite drastically. Therefore I scaled both images to be 197 x 576. Then scaled them both back to 788 x 576 – their original size – again.

The Red channel after being scaled

Next I copied both the red and blue images into the green image as new layers. I used the Addition blend mode in the Layers, Channels, Paths dialog box to blend the images together.

Here is the low resolution red image added to the high resolution green image.

Red and Green images on separate layers blended using “Addition”

Here are the low resolution red and blue images added to the high resolution green image.

The end result – click to enlarge.

Well, it’s not perfect, but it was nearly what I was after and I was over the moon.

With a bit of playing around with the way you scale the channels it’s possible to get a fairly realistic PAL effect. The image below has various filters added to it, and I think it looks like an almost passable knock off of an off-screen photo.

Click to enlarge. Needs a bit more work, I think.

What I want to do next is to turn this into a filter in Python to automate the process and allow it to be fined tuned.