Old school output on the web

Whilst messing about with my own programming language, I've been getting it to display output in the browser, which all looks very retro because it's text only.

So I decided that it would be nice to prettify things a little bit, without going to very much trouble. It would also be nice to be able to do things like clear the screen, or move the cursor around. But I didn't want to invent my own protocol, I thought that it would be much better to just use an existing thing.

For that reason, I thought it might be handy just to use ANSI escape sequences. Whilst that would still look all very retro (use of these codes goes way back to the 1970s), it would bring some new capabilities to the table, like colour and very simple graphics. It should even allow very basic animations. Of course, this isn't what I have designed H2D2 for; but it's a nice way to test the language.

What I have ended up with is a JavaScript library which renders ANSI escape sequences onto a webpage. I was able to get a very good head start by using the existing code in escapes.js.

But with my version, it doesn't matter where the output comes from, the code just deals with drawing it onto the page. It means that the library can deal with any text containing ANSI escape codes. It even allows more than one 'console' to appear on the same webpage. I have also included support for extended colour codes, meaning that RGB values can be used. It's possible to turn scrolling on or off, and you can keep appending more text when you like.

Anyway, it worked a treat when I plugged it back into my H2D2 demo. Here's some hurriedly hacked together example output:

As you can see, all I have done is taken my existing sphere drawing program and gotten it to output ANSI escape codes rather than plain text characters. When I get some time, I'll probably put the JavaScript library on GitHub.

Javascript Mandelbrot Plotter

Since I seem to like my Mandelbrot drawing test program so much, I thought that I should create an easy way to experiment with different parameters, then I can stop drawing the same old thing all the time... Plus it would be nice to see the Mandelbrot set in all it's graphical glory for a change.

But I've also been wanting an excuse to play around with some more html5 canvas stuff, so I decided that this was a good opportunity.

So I set myself these goals:

  1. draw the fractal in a reasonable amount of time (try not to make it too slow in other words)
  2. observe the fractal whilst in progress, so you don't have to stare at a blank page until the whole thing has rendered
  3. be able to select a region of the fractal (with a mouse click) and redraw it (zoomed in) showing the new parameters

That was the minimum functionality I was aiming for. I decided that if I could do that in javascript then it's something I could share with other Mandelbrot addicts, sorry, enthusiasts - and also use it myself of course. Perhaps I'll find some good new coordinates for future renderings in ASCII art.

I've also used it as an excuse to mess around with things like Twitter Bootstrap, which is a handy way to start a project from scratch.

I even tried to get it to work on older versions of IE which don't support HTML5, but whilst I found that I could use things like ExCanvas to bring canvas support to older versions of IE, the performance was poor when running my fractal code. So I gave up on that idea, it was locking up older versions of IE.

The other thing that I included in the code was a javascript colour palette generator, where you pass in two colours (as RGB values) and then linear interpolation is used to create a range of colours in between. Quite a nifty way to make the end result look a bit nicer.

The final code was then washed through the google closure javascript compiler for good measure.

So I got to play with a few different toys along the way... which was fun and I learned some new things.

So I'm reasonably happy with the result. It even works on iOS, (although it did lock up once on my iPhone) I'd probably have to tinker with a few things to optimise it for proper mobile use (but I doubt that I'll bother). Even on my older iPhone 3GS the speed is acceptable. Mental note: I should try it on the Raspberry Pi and see how fast (or slow) it is, or if it works at all...

So here is some example output created whilst I have been playing:


And you can try it for yourself here.

Happy fractaling. Enjoy!