So far it only implements a subset of the possible sample effects, and it demands a very fast Javascript engine – luckily all the new breed of browsers are pretty competitive at that now. Even so, unless your CPU is an absolute behemoth, it’ll probably struggle to keep up – the audio output is fixed at 44100Hz, and that’s rather a lot of numbers for Javascript to crunch, especially when the MOD file gets up to 16 or more channels. Which, amusingly enough, is exactly the situation we had back when we were using Gravis Ultrasounds on 386es. Hurrah for progress!

Update 2010-06-08: Oops. In the process of testing how Safari 5 shapes up, I discovered a rather silly oversight: the audio buffering routine was set up to never use more than 10% of CPU. Now that I’ve fixed it, it turns out that Chrome and Safari (at least) have no trouble at all playing Jugi’s Dope theme in its 28-channel glory. (However, taking the brakes off the buffering does mean that we can’t reliably pause the audio any more. A small price to pay, I think you’ll agree.)

• Play online
• Download JSSpeccy v20091121 (680Kb)
• JSSpeccy subversion repository

A new version of JSSpeccy is out. It doesn’t run at full speed on an iPhone either (although it positively speeds along on recent versions of Safari on real computers), but it does boast the following changes:

• GPL v3 licenced, with prominent notices to make it clear that playing silly buggers like the above will not be tolerated (even if they do include source…)
• A bit of speed optimisation (about 15% faster maybe)
• A pimped-up user interface with shiny icons
• And most relevantly, entirely controllable via iPhone / iPod Touch touchscreen. In principle. (If you’re expecting an immersive gaming experience, you’ll be disappointed.)

So there you go – probably the best Spectrum emulator for the iPhone ever. And it’s free.

• Play online
• Download, inc source (674Kb)
• JSSpeccy Subversion repository

• Readme file
• Run JSSpeccy online (includes 10 classic games!)
• Download JSSpeccy (644Kb)
• JSSpeccy Subversion repository

Writing this wasn’t actually such a big deal – the Z80 core was ported from the one in Fuse, with the Perl-and-C-preprocessor-munging trickery still intact, and Javascript is syntactically close enough to C that that wasn’t a mammoth task. (I got 90% of it done on the train journey back from International Vodka Party alongside recording silly songs about tube stations.) The one fiddly bit was working around the places where the Fuse code used low-level C constructs to its advantage: using unions to chop and change between individual registers and 16-bit register pairs, and relying on limited-size C data types (often in pretty subtle ways) to truncate 8-bit and 16-bit values at the right time, whereas Javascript only has integers. (Actually, the really time-consuming bit was debugging it all… luckily, Fuse has a rather excellent test suite too.)

The rest is just creative abuse of the <canvas> element, as usual… it’ll take advantage of the putImageData interface to do the pixel pushing if available (on my machine Firefox has it, Safari doesn’t) and fall back on drawing 1×1 pixel rectangles otherwise. This time I’ve thrown in Google’s ExplorerCanvas as a nod to those poor unfortunates still stuck with Internet Explorer. Incidentally, I’d be curious to know how it rates on Google Chrome (I don’t have an XP/Vista box to test on) – if the hype is true (and it implements the putImageData interface like all good up-to-date browsers should) then I’d expect it to comfortably reach 100% Spectrum speed on modest hardware.

Visit the Antisocial microsite…

With my characteristic lack of organisation, I found myself with two weeks to go to the Sundown party, having promised a demo release, and with nothing specific in the pipeline. So, I decided to take a chance and run with an idea that had been sitting on top of my “demos to write when I have more free time than I do right now” pile for the best part of a year. I had it all planned out in my head, right down to the soundtrack: a mysterious track from an unlabelled CD I picked up at a ZX Spectrum Orchestra gig in 2005 (which turned out to be Round, from their Clive Live^3 EP). A quick bit of permission-getting later, and I was at the point of no return.

I knew it would be an ambitious job, and a bit of a leap artistically and technically from my usual stuff. I pencilled in a rough project plan in my diary. I drew up storyboards. I read up on the maths that was too nasty to contemplate on previous projects. And shockingly enough, I actually enjoyed all of the above.

As it happens, browser technology (as far as the <canvas> element goes at least) has not moved on one jot in the last two years, so I was able to dust off the Canvastastic codebase and found it still pleasantly usable and not too affected by code rot. I gave it a slightly more OpenGL-ish API (within the limitations of my “someone at the pub described it to me once” knowledge of OpenGL) and patched up the more glaring omissions (like Z-plane clipping, so that you can have polygons going behind the camera. Proper frustum clipping would have been a better idea, so that I didn’t end up with it trying to plot 20000×40000 pixel triangles and sending Windows into a stroboscopic flashing fit and having to hack up a fix after the party. Macs are fine with it…).

The demo code was only half the job though; to handle the camera paths and synchronisation and the million other details where hard-coding wouldn’t cut it this time, I joined the big league of the demoscene by building a demo tool (still all in Javascript) that probably only I can understand. (It’s included in the final release, so have a play. I dare you.) As I didn’t have any meaningful experience in 3dMAX, or Flash, or Werkkzeug, or Quartz Composer, or any of the other things I really ought to have been using as reference points, it was a grand exercise in Making It Up As I Went Along. I’d almost forgotten how much fun it is to code that way, but naturally a fair few bad decisions came out of that as well. Firstly, it turns out that organising things around a timeline interface doesn’t really fit all that well; it means that every object and event is treated as independent of everything else, so things get a bit clunky when they have to share resources (such as lots of camera shots of the same scene). Looks like you can’t beat the good old boxes-and-arrows-all-over-the-place approach.

Secondly, and what probably comes as no surprise to anyone but me – Javascript is a bit horrible for building demo tools in. The demo itself, no problem – but for the user interface widgets I found myself constantly wishing for nice, sensible class-based inheritance. Yep, I know the language boffins will say that prototype-based OOP is more powerful, but I guess I’ve just had my mind addled by programming in the real world. I know of a few attempts to graft class-like behaviour onto Javascript, and that should probably be at the heart of any attempted rewrite of this. Alternatively, there’s a growing-but-not-quite-there-yet buzz around alternative scripting languages in the browser (just like there’s a buzz in the opposite direction for server-side Javascript), so perhaps it wouldn’t be out of the question to have a browser demo tool written in Ruby or Python. Or have the browser environment embedded in a ruby/python desktop app – at which point, why stop at browser demos? Could it be designed as a more general tool, where the browser is just one of many platforms that can be swapped in? It’s tempting. Onward and upward!

This started out as an experiment in Comet techniques (which allow you to actively push data out from web servers without the client having to initiate the request) which quickly ballooned in ambitiousness – I didn’t set out to write Just Another Chat Application after all. The end result is a realtime multiplayer Javascript conversion of the Spectrum wargame Chaos… or a reasonable chunk of it, at least.

Play Comet Chaos now

If you’re interested in the workings behind it, check out this video from my Oxford Geek Nights presentation to hear about how Comet is like a small child on a car journey, find out how close web developers can get to world domination, and watch a live demonstration going pear-shaped.

Other resources:

• Presentation slides
• Shooting Star, the Rails Comet library
• Shooting Star walkthrough
• Comet Chaos Subversion repository

But if you’d rather just dive in and have a play, that’s fine too… For those of you unfamiliar with Chaos, it’s a turn-based game for 2-8 players, each one playing a wizard who has to try and kill of all opponents by casting spells. Most of these come in the form of creatures which you can move across the board to attack opposing creatures and wizards. As ever, World Of Spectrum has the full instructions.

Be aware that the current release is rather incomplete and experimental: the repertoire of spells is limited to creatures, ‘disbelieve’ and lightning bolts, the combat system is virtually non-existent (everything has a 50% chance of killing everything else), killing wizards isn’t tested, and the finer points of game mechanics (flying/mountable/undead creatures, ranged combat, law vs chaos) are unimplemented. But don’t let that put you off…

An equally important omission – and possibly the major reason why it’s attracted minimal user testing and feedback right now – is that there’s no way to invite other players, other than marking your game as ‘public’ so that it appears on the homepage. (Non-public games still have guessable URLs, though.) To join up with other players you’ll need to organise things on other channels, such as IRC. Ideally it needs proper user signups, invitations, notifications and friend lists…

Gosh. I wonder if this could be one of those “social network” things all the cool kids are talking about? And that various wise people at conferences say you should never implement yourself, but piggyback on an established one instead? I suppose that means it’s time for me to swallow my pride and investigate the Facebook and/or OpenSocial APIs soon then.

It does make sense – Javascript is one of the few languages you can write graphical applications in that’s truly cross-platform – as in ‘doesn’t require Windows users to install a massive runtime and a bundle of libraries’. Well, in this case we do require them to install Firefox, but come on, who’s going to object to that?

It’s dead easy to use (painting in three shades of grey is hardly rocket science after all) and it exports directly to ZX81 .P format courtesy of a neat Basic snippet from Russell Marks. So if you’re feeling artistic, give it a go – you don’t even need to download it. (But if you do, you get the additional perk of being able to supply an overlay image to trace around.)

Update (2008-07-12): Now features a handy clickable palette, as requested by Yerzmyey – so that people with less than three buttons on their mouse can use it. You’d think that a Mac user like me would have thought of that, really…

• ZXpaintyONE – online version
• ZXpaintyONE – download (ZIP, 8Kb)

Download: Canvastastic beta_1 (20K, .tar.gz)

If you’re anything like me, you’ll probably be turning your nose up at having to download the thing just to see what the fuss is about, so I’m happy to oblige with some online demos…

• Boxes (demonstrates lighting and camera movement)
• Robot (demonstrates transforms and animation)
• and finally, the library source itself, for those wanting a spot of light bedtime reading.

• Canvastastic beta 0
• Tales From The Third Dimension – slides from the talk (PDF, 220K)
• Additional (pre-<canvas>) examples were taken from my 2004 demo Mooncheese

You shouldn’t have to wait too long for proper documentation, especially in view of the valiant effort Simon has already made. That Willison is a crafty one, as anyone who witnessed him pretending not to be a werewolf will testify. I borrowed his laptop for my talk, and within half an hour of getting it back he’d trawled through the code I’d left on it and more or less written up the complete API documentation – and promptly set about drawing diagrams to explain 3D coordinate transformations. Zero-day w4r3z, anyone?

(technorati fodder: barcamp, barcamplondon, barcamplondon06)

• Gallions Reach on Pouet
• Info file (inc. system requirements)
• Download Gallions Reach (ZIP, 3.0 Mb)

The demo came 4th, so no compo win hat-trick unfortunately; the Flash faction had raised their game this time, although I did receive Opera’s prize for best web-standards-based demo. In all, it wasn’t quite as polished as I’d have liked – I spent too much time fixing basic 3D bugs that I would rather have spent improving the design – but still I reckon it’s my most ‘mature’ production yet in several important respects. It’s the first time I’ve written a full 3D engine with controllable object and camera positioning, which in turn forced me to think about the composition of scenes in a much more artistic way; the soundtrack is my first ever piece of “real” music, as opposed to chiptunes and MIDI; and it’s also one of the rare occasions I’ve actively sought assistance from outside to make up for my numerous gaps in talent… in this case, my colleague and Flickr devotee NatBat, whose wonderful photos enhanced the stylishness of the final demo by several orders of magnitude.

Some random pieces of trivia:

• Gallions Reach is a station on the Docklands Light Railway with nothing at all notable about it besides its vaguely poetic name. It also has nothing whatsoever to do with the content of this demo, but if Fairlight can randomly name one of their intros after a Cuban an Argentinian revolutionary then I can do the same.
• The gouraud shading is done by drawing triangles with strategically placed gradient fills. The maths required to do this is surprisingly horrible.
• PERSPECTIVE_ALTERING_MINDF***_RATIO is possibly the best variable name I’ve ever used. (And since someone’s bound to ask: no, stars aren’t valid characters in Javascript variable names)
• The music was made with no trackers or sequencing tools at all. In particular, the flute section started out as a three minute keyboard improvisation, from which I repeatedly selected and edited out the 10-second clip I thought was the crappest, until I got it down to 30-40 seconds.
• The final shot of the flowers is a dirty great cheat.