Friday, April 30, 2010

Set Piece

A few months back Roddy Buxton asked if I could do him a favour. His son had a school project about "the 70s", and one of the things they were doing was making a 70s style news programme. As Roddy is from ATV land, that had to mean ATV Today. But in order to make the video authentic, Roddy wondered if I could recreate a section of the ATV Today set to key in behind his son on the video.

Reg Harcourt - ATV Today

I knew exactly the set he had in mind. It was the lovely beige one with an abstract geometrical design. If ever a set designer managed to capture the essence of the seventies current affairs in one set, this was this one. I managed to get a couple of pictures from Jase Robertson's site sub-TV.

At the time, I had mislaid my serial number for Swift 3D version 5, so I couldn't do this in 3D - which would have been the logical way to tackle this job. So, I fired up my trusty copy of Inkscape, and tried my best to muddle through using that.

All I did was take the best screen grab I had to hand (which, sadly, weren't as large or as clear as I would have liked) and trace one square section of the design.

Tracing the set in Inkscape with Margaret Hounsell

I then used gradient fills to create the 3D effect. I've found watching "Paint Along With Nancy" a great help with colouring in vector designs. I use Nancy Kominsky's technique of using three tones (light, medium and dark) and using purple for low-lights and lemon yellow and white for highlights if necessary. Nancy knows her stuff - it works!

Output from Inkscape

After exporting the resulting SVG file as a PNG I used the GNU Image Manipulation programme (otherwise known as The GIMP) to finish the job off. I adjusted the colours to match the image, blurred the image slightly so it would be slightly out of focus, added a tiny bit of HSV noise and then a very slight lens distortion completed the job.

After GIMP-ing, the end result

I've included the images I created at full size in this post, just in case you want to have a go at being Reg Harcourt or Derek Hobson and report on strikes at British Leyland in the comfort of your own home. Just click on them to enlarge.

Sunday, April 25, 2010

Lolly Sticks

Another day, another video of a rather lame mock uploaded to YouTube. We're back to 4:3 again, and a short video a did to teach myself how to use Adobe Premiere Elements:


Before I bought Premiere Elements in early 2008 I'd never done any video editing before, so it was all very new to me. I did huge a number of videos to experiment and work out a good workflow to transfer my material from Flash or Fireworks to video. I recorded my work over and over again onto the same DVD-RW and then scuttled downstairs to the television to see how the results looked on a CRT television rather than an LCD monitor. As you can see from this video, I hadn't yet worked out things like interlacing or how to age transparencies properly.

Although the first BBC 1 globe symbol I remember from my childhood was the black and cyan version with the italic "COLOUR" lettering, the first BBC 2 symbol I remember was the striped cylindrical 2. I saw this countless times waiting for Play School on weekday mornings or Play Away - the strange oasis that appeared between boring black and white films - on Saturdays. BBC 1 and ITV were showing wall to wall sport at the time due to their regulatory obligation to provide programming for the hard of thinking. Channel Four didn't even exist. Play School mornings were usually accompanied by a cup of Mellow Birds made with milk. Despite being Julie Steven's favourite beverage, it never seemed to dissolve properly back then, so you'd get little brown bits on the top...

When the computer generated ==2== symbol replaced the cylinder on BBC 2, I never really took to it. The cylinder's animation was far more interesting, so I often wondered what would have happened if the stripey cylindrical 2 had been kept but updated. The end result, my "lolly sticks" symbol was created in Swift 3D. The animation does a very similar thing to the cylinder - the coloured stripes rotate in opposite directions - but to make it more interesting the camera does a 270 degree trip around the stripes as they do so.

Swift 3D - click to enlarge

One interesting thing about the lolly sticks symbol is that I created it at 400 x 300 in Swift 3D. As I was exporting it in vector format as a .swf it didn't matter what size it was so long as the aspect ratio was 4:3. Vector 3D is something that Swift 3D really excels at, although it's very good at raster 3D as well. After more experimentation I'd later scrub this approach in favour of working at 720 x 576 and correcting in advance in Swift 3D itself for non-square PAL pixels.


Thin hairline 2 in Flash

To get the striped 2 into Swift 3D in the first place, I drew it in Macromedia Flash 8. I drew it as a series of hairlines, and then turned the hairlines into thick rounded strokes.

 Exactly the same graphic, stroked in Inkscape

After doing this, I turned the strokes into fills, and exported the resulting graphic as an Adobe Illustrator file for importing into Swift 3D.

GNAT Flash - Click to Enlarge

The clock is my Macromedia Flash 8 version of BBC Engineer Richard Russell's computer originated GNAT (Generator, Network Analogue Time) clocks. The GNATs were used by BBC 1 and BBC 2 throughout the 1980s. There was even a rather nice yellow and blue Open University version for a few years. You can download a screensaver created using the final version of the GNAT software from Richard's site. Richard has also written an article that discusses the history of the GNAT.

Teacher's discipline problem #5435 - POW!!!!!!!!

The schools dots is again another one of my Flash 8 concoctions. This is the second version, where I finally got the font right! This, along with the clock, is the sort of animation that's very easy to do in Actionscript, but a real pain to produce a version you can export to use in video projects.

Henry Woolf was even better with Charlie than with Pinter

The slide was based on a BBC1 version I did around ten years ago now for the sadly soon to be defunct BBC Cult website. I simply traced a screen capture in Flash that the BBC supplied to me from the opening titles of the programme "Words and Pictures".

My treatment of the slide was very unsatisfactory - both in terms of the fading and blurring I used and the very bad banding that appears on the image. It looks very fake indeed, and one day I must get round to writing a post about how I would have gone about doing that job properly.

Just a note about the font - when I'm doing 70s stuff that requires Helvetica I tend to use URW++ Nimbus Sans these days. I'll explain why in a post about Thames Television some other time.

The music is from one of my favourite programmes - 4Square - and was composed by Ian McKim. The music was designed as a tension bed underneath a computer generated (Acorn Archimedes) maze game and made for a very exciting minute of television.

Anyway, technically a rather unaccomplished little video of another lame mock. But it brings back lot of memories and I enjoy watching it from time to time.

Saturday, April 24, 2010

From Claptrap to Claptraps

Normally I use this blog to drone on about my own claptrap. However, today I'd like to use it to have a look at a friend's.

Level 1 - It's all uphill from here...

To be more precise, a computer puzzle game called Claptraps, written by "testpilotmonkey". It's one of the most joyfully bonkers and imaginative games I've ever played - the sort of thing Oliver Postgate would have come up with if he'd have been given a book about scripting languages.

The game itself was written in the language Python with the help of the wonderful PyGame SDL library.  If you've ever want to write a computer game for GNU/Linux, Windows, or Mac OS this combination is the place to start and indeed Claptraps will work beautifully on all three of these platforms and doubtless several more besides.

I think this game is really rather special for lots of reasons:
  • it is released under the Free Software Foundation's General Public Licence or GPL. That in itself is a marvellous and selfless thing to do, particularly when you consider how much hard work has gone into the game.
  • the quality of the music testpilotmonkey has composed to include in the game - I really enjoy listening to it.
  • the graphics, which have a wonderful cut-out animation feel
  • and, most of all, the standard of the puzzles. The game design is incredibly clever and the puzzles are fiendish but solvable with thought. That makes it one of the most rewarding games I've ever played.
I could talk about the game at length here, but why not download it yourself from testpilotmonkey's blog?

The game has come on in leaps and bounds since this video was made of an early demo version, but it's worth a look:


The gameplay is loosely inspired by the games in the Repton Infinity suite with dashes of Bonecruncher and XOR. However it has a personality all of its own, something which you don't get in modern games written by huge teams.

I'm hoping to do some work of my own on Claptraps if I get the chance over the coming weeks - in true GPL spirit I've been studying and modifying bits and bobs already which I hope to start sharing soon. The code is very, very clearly written and I'm looking forward to having a proper dabble with it enormously.

NB: As the game is still a work in progress, GNU/Linux users may find they need to append two lines to ClapTraps.py:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

Also, don't forget to right click on the Claptraps.py in the file browser, and go to PropertiesPermissions and check the Execute check box to Allow Executing File as Program. You'll also need to make sure you have the pygame package installed on your computer - but if you've installed GNU/Linux in the first place I'm sure you can manage this.

Windows users can just click on the .exe. I know nothing at all about Apples apart from the fact that Granny Smiths are my favourite and my mother's bramley crumble with custard is delicious.

Friday, April 23, 2010

Happy St George's Day

As I'm English, I thought I'd celebrate today with a video of my choice - my daughter speaking very good English even though she hasn't been there since she was eighteen months old:


But I suspect people reading this blog will be more interested in the first part of the video.

I've been playing with doing more work in widescreen in the past couple of years. The reason is simply that watching pillar boxed stuff annoys me. I always used to hate those letterboxed films they showed on BBC2 for film buffs with magnifying glasses when I was a kid. So as 4:3 televisions are becoming harder and harder to find and I have a 16:9 monitor I've been animating everything in 16:9 for the past couple of years - perversely I've got DVD's full of 16:9 presentation I've done in Flash from the 50s, 60s and 70s.

Flashy house building - Click to Enlarge

I animated the Playschool house animation from scratch in Macromedia Flash 8 and the BBC 1 South West globe in Swift 3D v5.0 - both at 720 x 576 for use as anamorphic 16:9 in Adobe Premiere Elements. The video was filmised in VirtualDub using the MSU Old Cinema plug in. I hope to have an example Flash animation of some kind filmised using OpenShot on GNU/Linux (I'll probably be on Fedora 13 by then) to compare this against soon - the options for filmising your work on this look very promising indeed.

The Whole Wide World in Swift 3D version 5

The BBC1 South West globe was animated at 50 frames per second, and I used that to create an interlaced 50 fields per second file in VirtualDub. The colour was keyed on in Adobe Premiere Elements. The announcement is actually Peter Macann (former Tomorrow's World presenter) and was from BBC1 South in Southampton.

The BBC1 caption was traced in Macromedia Flash 8 from a scan of the original BBC1 globe caption from BBC Graphic Designer Bob Richardson.

The Playschool music (the definitive Paul Reade version) has a voice over from the magical Brian Cant and the day is given to us by Australia's finest singer, Don Spencer.

Friday, April 02, 2010

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: