Showing Off

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.

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.

ATV on the BBC

I have a YouTube channel called “stupidrubbish” where I put bits and pieces of video I’ve created as and when I get the chance.

The channel’s name “stupidrubbish” comes from the rather unaffectionate term my wife uses to refer to television presentation. Her usual question would be “Are you working or are you doing stupid rubbish?”. The answer would often be “Both.” In Hungarian, the term translates to “hülye szemét” and sounds even ruder than it does in English.

Absolute bobbins, and I freely admit it

Amazingly, although it contains all sorts of bits and pieces I’ve poured my heart and soul into getting as accurate as possible, the most popular video on the channel is something I very nearly didn’t upload at all, and did nearly 25 years ago. It was my first attempt to recreate some presentation on a computer and it was not done in Flash, or even on a PC. It was done on a BBC Master 128 computer in 1986, written in BBC BASIC and was the ATV colour zoom logo.

I hadn’t seen an ATV logo in years in 1986, and wondered whether I would ever see one again. You can see from the animation that I couldn’t really remember what the logo looked like, or even what happened in the animation, but I suppose it all adds to the charm. I planned the lightspots and the logo out on graph paper using a pencil and pair of compasses.

To draw the logo I used the Acorn Graphics Extension ROM (GXR) arcs (the GXR extensions were included in the Master by default), a GXR custom fill pattern and screen memory bank switching in order to animate the thing. I also used GCOL1 for mixing the colours using a bitwise AND in the lightspots and palette switching to allow me to animate on bits of the logo without having to wait to draw them.

A number of commenters expressed interest in the code, so here it is:

1REM The “ATV” logo
2REM by
3REM Dave Jeffery
10MODE2
20VDU23;8202;0||
30HIMEM=&3000
40*FX112,2
50*FX113,2
60PROCnext_setup
70HIMEM=&3000
80*FX112,1
90*FX113,1
100PROCcircles
110HIMEM=&3000
120*FX112,2
125*FX19
130*FX113,2
140PROCnext
150PROCletters
160END
170DEFPROCnext_setup
180CLS
190VDU23,2,&2A2A;&2A2A;&2A2A;&2A2A;
200MOVE600,500
210MOVE950,700
220PLOT173,250,700
230MOVE600,900
240MOVE250,700
250PLOT173,950,700
260GCOL0,0:MOVE600,700:PLOT157,600,892
270GCOL1,1
280MOVE600,300
290MOVE950,500
300PLOT173,250,500
310MOVE600,700
320MOVE250,500
330PLOT173,950,500
340GCOL3,1
350MOVE600,500
360PLOT157,788,500
370GCOL0,134:GCOL0,7
380PLOT133,600,500
390GCOL16,0
400GCOL0,129
410PLOT133,900,50
420PLOT133,600,688
430:
440c=1
450GCOL0,128
460FORbox=250 TO 958 STEP 8
470GCOL2,c
480MOVEbox,288:DRAWbox,900
490c=c+1:IFc=7 c=1
500NEXT
510GCOL3,15:MOVE600,700:PLOT157,600,888
520:
530ENDPROC
540DEFPROCnext
550VDU19,15,7||
551FORF=0TO75:NEXT
560VDU19,0,4||
570FORF=1 TO 6:VDU19,F,4;0;19,F+8,7;0;
580NEXT F
590FORF=1 TO 6:VDU19,F,3;0;19,F+8,3;0;: FORW=0TO100:NEXT
600NEXT
610VDU19,15,4||
620ENDPROC
630:
640DEFPROCcircles
650VDU19,0,7;0;19,8,0||
660COLOUR8
670Key=GET
680GCOL0,1
690FORloop=600 TO 792 STEP 8
700MOVE600,700:PLOT157,loop,700
710NEXT
720GCOL1,2
730FORloop=500 TO 692 STEP 8
740MOVE500,500:PLOT157,loop,500
750NEXT
760GCOL1,4
770FORloop=500 TO 692 STEP 8
780MOVE700,500:PLOT157,700,loop
790NEXT
800PRINTTAB(5,26);”IN COLOUR”
810FORwait=0 TO 1000:NEXT
820ENDPROC
830:
840DEFPROCletters
850GCOL0,128:GCOL0,3
860MOVE500,708:MOVE500+50,708+150
870PLOT85,500+75,708
880PLOT85,500+125,708+150
890MOVE500+100,708+150: MOVE500+150,708: PLOT85,500+150,708+150: PLOT85,700,708
900MOVE550,708+50:PLOT101,675,708+25
910FORwait=0 TO 1500:NEXT
920MOVE500,652:PLOT101,700,628
930MOVE575,628:PLOT101,625,528
940FORwait=0 TO 1500:NEXT
950MOVE500,328+150:MOVE500+50,328
960PLOT85,500+75,328+150
970PLOT85,500+125,328
980MOVE500+100,328: MOVE500+150,328+150: PLOT85,500+150,328: PLOT85,700,328+150
990REPEATUNTILFALSE
1000ENDPROC

If you want to run the code, why not pop along to BBCMicro.com, where you can get hold of a BBC Emulator to try this out for yourself.

If you run the code in an emulator (or on a real BBC Master 128) you’ll notice I took a few liberties with the timings when I was editing the video together to upload to YouTube!

Hopefully I’ve got a bit better at recreating the ATV logo since then. A more recent attempt, in Macromedia Flash 8, is here:

Repton’s Silver Jubilee

I’ve just turned 38, which means I’ve been a keen Repton fan for 24 years. It seems incredible, but next year is Repton’s Silver Jubilee.

If you don’t know what I’m talking about, if you look through the Blog Archive you’ll see I’ve talked about the computer game Repton several times: both the cover art and graphics I’ve done recently for Retro Software and also some of the screens and graphics I designed on my BBC Micro back in the 80s.

This time of year – Christmas and my birthday – always makes me think of Repton. Waiting for Christmas 1986 was almost unbearable as it was then I was going to get a copy of the latest Repton release, Repton 3. I didn’t have a disc drive at the time, so my copy of Repton 3 would be on cassette tape for the BBC Micro.

The excitement was because, for the first time ever, I was going to be able to design my own levels and graphics for the game and I couldn’t wait. I only had a couple of C15 cassette tapes to store my levels at first, and I as I designed levels and graphics I’d save over my previous work again and again. And sometimes a quirk of the cassette recorder volume or tone control meant that the file wouldn’t save properly. I dread to think of the number of levels and character designs I lost.

However, one of the very first levels I designed that Christmas I was so pleased with it just seemed to hang around and hang around and I still have it to this day. The password for the level is “TIMOTHY” – named after my pet goat at the time and it was always screen G (for Goat).

Screen G – TIMOTHY

I actually could only complete this level with great difficulty for many years – I used to be happy if only I died twice when completing it.

Eventually, using information I’d gleaned in a Hac-Man article in The Micro User I culled all the easy levels I’d created on various tapes and 5.25″ floppies into one set – Set1.

Set1 also featured a customised set of graphics. I was very disappointed with the graphics in Repton 3. This was because they didn’t look like the abandoned diamond mine on the cover art. They were all clean and clinical and didn’t have much character. So I sat in front of Repton 2 with coloured pencils and recorded every sprite faithfully on graph paper.

My original drawings from 1986

Then I entered all the character designs into the Repton 3 editor – a process that took a very long time and was rather difficult on a fuzzy Microvitec CUB CRT monitor.

The graphics entered into Repton 3

Recently I’ve been thoroughly enjoying the Repton level play throughs posted onto YouTube by SentinelProxima, ReptonGeek and TestPilotMonkey. SentinelProxima is the YouTube channel name of Michael S. Repton, undoubtedly the world’s best Repton player.

I was curious to see how Michael would tackle Screen G, as I take an age to complete the level even now. Michael very kindly produced a long playthrough of all the screens.

The first four levels are completed here:

And the second four levels are completed here:

It was incredible to watch Michael complete my levels – all far more elegantly and with greater efficiency than I could ever manage. As I’ve said before, the effect of watching someone so good play Repton is as compulsive as watching a 147 break in snooker. It really was a pleasure to watch, and it was a truly fantastic birthday present.

Lovingly prepared new versions of Repton 1, Repton 2, Repton 3 and Repton Spectacular are available to buy for the Microsoft Windows operating system from Superior Interactive. And, for those lucky enough to use the GNU/Linux operating system, you’ll be pleased to hear all three games work reasonably well with WINE.

You can download my levels for Repton 3 for the PC version of Repton 3 from here.

Show Business

You may remember I blogged about bits and bobs I did for the Acorn World Show, which was held on the 13th September 2009 in Huddersfield. You also probably know I’ve also done a lot of work this year for one of the main exhibitors, Retro Software.

The Centre For Computing History, the museum that’s preserving some of my work for posterity, made video recordings of some of the speakers at the Acorn World show and one of the speakers happened to be one of the geniuses behind the BBC Microcomputer and the Acorn Risc Machine or ARM chip, Professor Steve Furber CBE.

Professor Steve Furber and my artwork. It doesn’t get much better!

They’ve posted Professor Furber’s talk online, and I’m delighted to say that you can see him wandering about in front of my posters for pretty much the whole video. I’m sure he was only standing in front of them so they wouldn’t make the audience vomit, but it still made me incredibly happy.

The Retro Software stand at the event was so successful that Dave Moore of Retro Software was asked by the organisers of the RISC OS London show if he would exhibit it there too.  Dave sent me a picture of the Retro Software stand at the show, complete with three posters two adverts and a banner I’d designed for him. It looks incredible and, again, it made me feel very happy.

Click to enlarge.

Before the RISC OS London show, Dave was offered a free advert in the new .pdf format RISC OS magazine “Drag And Drop“. Dave asked me to modify one of the adverts I’d designed for him.

One of the modifications he asked me to make was to replace the “See us at the Acorn World” flash with a “See us at the RISC OS London Show” flash. To do this, I needed to make a vector copy of the small bitmap RISC OS London Show logo Dave supplied me in Inkscape. I copied the logo quite faithfully, but I couldn’t resist changing the Gill Sans for the rather more fitting Johnston’s Underground.

Johnston’s Underground

You can see the advert in the sample copy of “Drag And Drop” that’s available here.

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.

Repton: The Lost Realms loading screen

After I created the artwork for “Repton: The Lost Realms“, Dave Moore of Retro Software asked me if I would create a loading screen for the BBC Micro and Acorn Electron versions of the game. Initially the brief was quite loose – he thought we needed a Mode 5 screen for the cassette versions and a Mode 1 screen for the disc versions.

My cover artwork for Repton: The Lost Realms

On a BBC Micro or Electron, Mode 1 and Mode 5 are both four colour screen modes. The difference is that in Mode 1 the resolution is 320 x 256, whereas in Mode 5 the resolution is 160 x 256. However, both images are the same size because in Mode 5 the pixels are twice as wide as they are high. Due to its lower resolution, Mode 5 uses half the memory of Mode 1 so will load far more quickly for those using cassette recorders.

My first thought was to create the Mode 1 screen, and to use the excellent BBC Micro Image Converter software 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. To aid you in doing this it offers an almost bewildering array of image processing options specifically tailored for getting modern images into BBC Micro format. It can  also takes BBC Micro screen dumps and convert them to modern image formats.

BBC Micro Image Converter copes with anything

I use Ubuntu Linux, which means I have to run the Windows binary of the BBC Image Converter under WINE. I’ve found the operation of the program under WINE to be problematic if you don’t export import and output images from and to the WINE “C:Program Files” folder. It also seems happier with being fed bmp files than pngs under WINE.

Inspired by Michael “Mic” Hutchinson’s excellent loading screen for the disc version of Repton Inifinity, I decided to use the same Red, Black, White Green palette. I was very pleased by my early results – particularly the way the brown came out on the safe. However I hadn’t left any room for branding and so on.

My first try in BBC Image Converter

So I decided to create a version that had an area at the bottom that could be removed in the same way as the version on Repton Infinity disc for loading messages etc.

My rejected disc loading screen

I showed Dave this version and he had a number of reservations – the main one being that the loading screen in Mode 1 didn’t really grab him at all. He wanted something more colourful for the disc version, and he suggested trying Mode 2. Mode 2 is identical to Mode 5, apart from the fact you can use eight colours.

The first thing I did was to create a screen in Inkscape that was 320 x 256 pixels that was set out exactly as I wanted to my loading screen to look. I would use this to feed into the BBC Micro Image Converter.

The image I made to feed into the BBC Micro Image Converter

When I imported it, the results were excellent. In fact, the results were too good. Although obviously I needed to retouch here and there to tidy up the writing and the balloon strings I was overwhelmed by the feeling that really I should be producing something that was done by hand on a pixel editor – not put through some ingenious image processing we could only dream of in 1987.

All it needs now is for me to make it a bit rubbish

Therefore I fired up “The GIMP” and tried to add a sort of “hand designed” feel a pixel at a time. I was quite aware that what I was doing wasn’t as good as what the BBC Image Converter could produce, but the idea was to get a “retro” feel.

Final image after I gave it a “hand made” feel in The GIMP

I showed Dave Moore and he was happy with the Mode 2 screen, so the next job was to produce the cassette loading screen in Mode 5.

When it came to creating a Mode 5 screen, I decided to convert the eight colour Mode 2 screen to a four colour Mode 5 screen by hand, instead of running through the BBC Image Convertor again. This was because I wanted to keep the two loading screens as close as possible to each other in appearance.

I reduced the colour depth by hand in The GIMP

Dave was happy, so that was my first two loading screens for Retro Software done and dusted.

Repton: The Lost Realms is under development by Retro Software. Repton name used by permission of Superior Interactive.

The BBC Image Converter is currently released under a non-free licence but it’s free as in beer to use for commercial or non commercial uses. You can look at a number of the PureBasic routines Francis wrote for it here.

Acorn World Show

I’ve just noticed Joel Rowbottom has published a picture of a Master 128 running my Acorn World teletext screen at the Acorn World show.

 

As you can see, I added (and animated) the BBC Microcomputer owl logo, and the Archimedes logo to the bottom of the screen. Here’s the finished screen:

I wrote a BBC BASIC program to make the owl blink

I’m really glad the screen got used in the end.

Mountain Panic Poster

Mountain Panic is a new arcade adventure for the BBC Micro based on At the Mountains of Madness, a novella by H.P. Lovecraft. It’s being programmed by Dave Footitt for Retro Software, and it’s shaping up to be really quite something.

And it’s not only the game that’s stunning. The cover artwork by Roger Coe and Chris Hogg is as well. So stunning in fact that Dave Moore of Retro Software naturally wanted to produce an A2 poster of it to use at the Byte Back retro gaming show that took place at Stoke-on-Trent in March.

 
Roger Coe and Chris Hogg’s superb artwork for Mountain Panic

However the artwork presented Dave with a number of difficulties. It was a 1053 x 744 png file, which was too low a resolution for an A2 poster. Although the painting actually scaled well, the lettering didn’t work at all scaled up to A2 – and it was burnt into the image. So he asked me if there was anything I could do.

After I had a look at the image, I decided the only thing to do would be to create the Mountain Panic lettering as an .svg, which would allow its use at any size, and paint out the lettering on the original artwork in The GIMP.

The Mountain Panic lettering was easy to produce in Inkscape; basically it was a simple hand tracing job.

Lettering in vector format in Inkscape

Then I turned to the painting – it took me a couple of hours to paint out the Mountain Panic lettering in The GIMP. The hardest part was painting out the letter C that went over the mountain. Dave also asked me to extend the image downwards to the extent of the A2 page as well.

Lettering all painted out in The GIMP

You can download a demo of Mountain Panic that will work on a BBC Micro emulator (or a real BBC Micro!) from the Retro Software website.

The finished poster