Gallions Reach

It’s been a good while since my last serious demoscene production, and it could have been even longer if I’d gone ahead with my plan to sit out this year’s Assembly competitions and take a break for once. But then along came Opera to sponsor the browser demo compo and assign it an “Open Web Standards” (read: anything but Flash) angle. How could a Javascript afficionado like me resist? And so, after a long coding slog, I give you: Gallions Reach.


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.

15 Responses to “Gallions Reach”

  1. Eq says:

    Bah. In Opera 9.00, even with the no-sound version, I get a bunch of exception alerts and nothing happens (except a few white circle-bobs appearing unmoving on the screen). I wonder whether it did poorly in the voting because of the apparent need for some elaborate configuration. Animating things in Flash doesn’t impress me at all.

  2. icabod says:

    I spotted this in the Assembly results. It’s nice, tho’ failed to work in Firefox for me. I guess this is a problem when doing clever stuff in browsers. I actually had to load up IE to see the demo (I’ve not upgraded my Opera install for a little while and only use it to test my own designs).

    Nice work tho’.

    Didn’t get a mention on raww.org. Sorry.

  3. Eq: As I said in the comments on Pouet, replace the line 113 of paint.js by: try{ctx.drawImage(img, x – size/2, y – size/2, size, size)}catch(e){}

    I’ve not searched why the x, y, size are some times NaN, and I think I’ll leave that to Matthew :p

    Anyway, beside the dutch colors scheme and a few sorting issues I quite enjoyed Gallions Reach, especially the gouraud shading.

  4. matt says:

    p01: Just what I was about to suggest :-) Annoyingly, I haven’t seen that bug on any of the four computers I tried on, but I’ll have a further dig around.

    Eq: The demo got shown OK on the big screen, so any bugs wouldn’t have affected the voting, luckily for me…

    Icabod: You got it working on IE – WTF? The entire demo (with the exception of the greetings text) is based around the <canvas> tag, which IE doesn’t support at all. Or does it? I’m starting to wonder now.
    No mention on raww.org? Bah, to think I greeted you and everything… ;-) (nah, fair enough, it does have nothing to do with the Spectrum after all)

    Point taken about the Dutch colour scheme… I thought it did a good job of showing off the shading, but I’ll steer clear of it next time. How the hell do you do polygon sorting anyway? From a search on the web, the consensus seems to be “don’t bother – use a Z-buffer instead”, which isn’t really an option here.

  5. Matt: I usually sort my polygons based on their furthest vertex. And NO, IE does not support Canvas. However Emil A Eklund has done a canvas wrapper for IE using VML [1]

    [1] http://me.eae.net/archive/2005/12/29/canvas-in-ie/

  6. icabod says:

    Hmm. Maybe it was Opera I tried it in, then. I know that it wouldn’t work for me in Firefox, and worked in the next browser I tried, which is usually IE.

    And the non-mention on raww.org was exactly as it wasn’t ZX-oriented… I considered mentioning it coz it was you, but figured people who would be interested would spot it on your blog or pouet anyway.

    In fact I didn’t mention Assembly at all as I didn’t spot any ZX releases – unless I missed some.

  7. icabod says:

    To be fair, I did try it late at night, so I was tired. It prolly didn’t work on any browser and I halucinated the whole thing.

  8. Eq says:

    p01, thanks – I got it to work.
    Did you drop the Shingebis nick, Gasman?

  9. matt says:

    ica: Yep, no Speccy releases this time. Bit of a bad year for the oldschool compos as a whole, really.

    Eq: Yeah, that was briefly explained in the end scrolly of Redbug… basically I came to the conclusion that it was impossible for anyone to remember, or pronounce. And it made it really annoying to introduce myself at parties: “Hi, I’m Equinox.” “Hi, I’m – er, well it depends actually.”

  10. [...] The content of the show and tell itself was high too, Sian showed the cool news ticker she had seen on the NME site Sally demonstrated Remember the milk, the to-do list application we both use (its really neat), JP found this ultimately cool flickr image search based on a colour wheel that I cant remember the URL for, Matthew stole the show though with his JavaScript demo, using nothing but native browser rendering techniques, so cool! [...]

  11. F6 says:

    I can’t run it! Typing LOAD “” and nothing… ;)
    Btw. I really can’t run it (Opera 9.01, AMD 1300MHz) :(

    And hey, there’s a mistake. The only DAMN good CPU is the Z80!!!!!!!

  12. F6 says:

    Got it working at last! In Firefox. Yep it’s slow. I like the Stonehenge vectors. Gas, do this on Speccy, it could look great!

  13. [...] At this weekend’s BarCamp London, I announced a new Javascript library which takes the 3D engine from my Gallions Reach demo and promises to place it in the hands of industrious web developers, hackers and masher-uppers everywhere. The presentation seemed to go down well, so it’s only right that I should get this first release out, as promised. Strictly raw materials right now (and still no real documentation), so be prepared to fill in the gaps… [...]

  14. [...] The plan was to create something approaching a lo-fi YouTube-stylee home movie of scenes from a summer day – but with all visuals generated in real time, of course, as per the usual demoscene custom – drawing on the already-lo-fi graphics of the Spectrum, some crafty image processing, and some fine photos taken by Natalie (whose Flickr stream I previously plundered for Gallions Reach). And now, in a post-modern self-referential ironic twist (or something), you can watch it as a YouTube video. [...]

  15. [...] code is safe from this cherry-picking exercise of doom – the 3D routines are a mishmash of Gallions Reach / Canvastastic (for the lighting model) and Antisocial (for the full scene / movable camera handling). Finally, [...]

Leave a Reply