Archive for the ‘Javascript’ Category

JSSpeccy (tiny bugfix)

Thursday, May 10th, 2012

A long-overdue maintenance update to JSSpeccy to apply a bugfix independently found by Antonio Villena and Andrew without-a-surname: IM 2 interrupt handlers were broken because I had an 0xfff where there should have been an 0xffff. Thanks both!

As ever, see the subversion repo for source. (Incidentally, JSSpeccy v2 was in the works a while back – will dust that off again at some point…)

jasmid – MIDI synthesis with Javascript and HTML5 audio

Friday, November 19th, 2010

The executive summary: At last weekend’s Barcamp London 8, I presented a talk entitled “Realtime audio generation for the web (because there’s not enough MIDI on webpages these days”. In it, I went over the current options for generating audio within the browser, and presented my latest hack in that direction, jasmid: a Javascript app that can read standard MIDI files, render them to wave audio (with, at present, some very simple waveforms) and play them directly from the browser, completely independently of your OS’s MIDI support.

Read on for the complete notes/transcript of the talk (in hopefully more coherent form than the talk itself – next time I promise to spend less time on the flashy demo and more time figuring out exactly what I’m going to say…)

Fake Plastic Cubes

Monday, September 13th, 2010

It was internally nagging me all summer that I ought to release something at Sundown, but apart from some brief excitement around a brainwave I had involving three iPhones, Javascript and some cardboard (which sadly didn’t work out in practice), it didn’t really amount to much. Then Evoke happened, and inspired me to decide that, in the words of Haujobb’s invitation, I should make a demo.

Or, to be precise, a Javascript 64K intro. Unfortunately, there was only one week to Sundown by that point, and in a classic case of demoscene project management fail, I spent most of that week building an audio framework, leaving about 24 hours to write the actual demo. The end result is 9K of rather-flaky-performing code, hastily improvised plinky ambient music, and dreadful coder art (except to the extent that I’ve ripped it off from Fairlight demos).

Still, even if the execution this time didn’t work out, I think it’s been a worthwhile exercise in bringing pieces together. Jacob Seidelin’s PNG compression hack (where JS code is stored in a PNG image to take advantage of the compression, then unpacked on a canvas using getImageData) has created a bit of a buzz in the JS development world, but this is the first time it’s been used in an actual demoscene production (which is surprising, given how the demoscene is the spiritual home of size-coding hacks). Ben Firshman’s JSNES has been dynamically generating audio for some time now, ardently chasing the moving target that is Mozilla’s Audio Data API (with a trusty Flash snippet as a fallback), and Mathieu ‘p01′ Henri was experimenting with softsynths long before then. Not even my own 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, node.js makes a cameo appearance, because having an actual web server on hand makes development go a lot smoother.

Put them all together and you have the ingredients for a delicious 64K Intro cake. This time it came out a bit half-baked, but I’m passing on the recipe in the hope that someone else can make it work:

JSModPlayer – a Javascript .MOD player

Sunday, May 23rd, 2010

The epic Pacman 30th anniversary Google Doodle, along with Ben Firshman’s dynamicaudio.js library for dynamically generating audio, collectively persuaded me that I haven’t done any mad Javascript hacking for far too long. My response to this state of affairs is JSModPlayer, a player for .MOD music files (the mainstay of Amiga and PC sample-based music circa 1990).

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.)

JSSpeccy v20091121

Saturday, November 21st, 2009

Yesterday’s Full Frontal javascript conference turned out to be the ideal setting to compare notes with Ben Firshman of JSNES fame on the finer points of implementing emulators in Javascript – so this new release of JSSpeccy is the natural consequence of that. I’ve put in an optimisation which might possibly be a speed boost on Chrome (only writing bytes to ImageData when absolutely absolutely necessary), and the much-needed ability to load your own snapshot files, using the little-known getAsBinary method on file upload objects. (Unfortunately Firefox 3.5 is the only browser which supports it right now, but it looks like it may be in the process of getting the official W3C blessing right now.) And since I was on a roll, on the train back I implemented tape loading traps and the ability to load .TAP files (again, only on Firefox 3.5). Wahey!

JSSpeccy v20090929 (Don’t-Mess-With-Geeks Edition)

Tuesday, September 29th, 2009

I wasn’t really planning on developing JSSpeccy further, because I didn’t consider it a serious project with a future. However, it turns out that someone else did. Enough to rip it off wholesale and pass it off as their own work on the iPhone app store for £1.29 a pop, no less. Yes, thanks to the detective work of Phil Kendall we now know that ZXGamer, the much heralded Spectrum emulator for the iPhone, was nothing more than JSSpeccy with a fancy title screen tacked on. (Which of course is a blatant violation of the GPL, and being pure Javascript, would explain why it ran at less than the speed of a real Spectrum on a 600 MHz device, and why it was overwhelmingly rated at one out of five stars. Epic fail.) It’s been pulled from the app store now – so while ZXGamer is gradually disappearing from the internet, it’s time to redress the balance a bit.

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.

JSSpeccy: A ZX Spectrum emulator in Javascript

Sunday, October 19th, 2008

I’m really typecasting myself here. If there were an international “Person most likely to write a Spectrum emulator in Javascript” award, I’d have taken it for the last five years running. So here it is – probably the most stereotypical project I’ll ever come up with.

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.


Thursday, October 9th, 2008

This is it then… my big comeback to the Javascript demo scene after a two year absence, and also the moment when my demo coding muse returned from a long holiday, I guess. Ladies and gentlemen, I give you… Antisocial, a biting satire on social networking phenomena.

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.


Comet Chaos

Monday, July 7th, 2008

Thanks to Oleg for reminding me at OpenTech that I still hadn’t written this up yet…

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.



Friday, July 6th, 2007

So I wanted to enter the ZX81 Graphic Competition 2007. But I didn’t particularly want to type out block graphics character by character into a Basic program on an emulated ZX81 keyboard. So I wrote a ZX81 art package. In Javascript.

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…