Javascript Mandelbrot plotter - part 2

I've made a few tweaks to my javascript mandelbrot drawing code, so there's a new version uploaded here. You can now select three different colours and a palette will be interpolated made up from in-between colours.

So, here's an example that I came up with using the new version:

There's a couple more simple options in this version, like a choice of fractal sizes and a reset button. It would be handy to have an 'undo' option for those times when you've made a slip of the mouse...

So, don't be surprised if there are more changes to come.

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!

MODE_W - a minimal desktop in javascript

I decided that since I've been writing my new H2D2 programming language, it would be good to have some kind of web-based environment to run some H2D2 programs in. So I started writing something in javascript to try and do that. I started calling it MODE (Minimal Operation Desktop Environment) but then I decided to add 'W' for web as well, so I'm naming it mode_w for the moment.

The main idea was for it to be minimalistic - so it's a character based system only. I always remember thinking that the work Microsoft did with MinWin was cool, so that's one of my influences. I always remember that Windows flag logo animated from ASCII characters...

Since I wanted to be able to run several things at the same time, I built a primitive window based environment - but one that works with keyboard control only, and in a browser.

Already I've got something which can move, resize, open and close windows. Everything is simply rendered into a <pre> tag with a monospace font, so theres no mucking about with <div> blocks or anything, just an array of strings that represent the screen - one string for each line on the screen.

Each 'window' draws its own content (which scrolls when it runs out of space) and this means that I can do different things in different windows. So each window becomes a kind of widget, in a text-only kind of way.

I have also allowed character input into each window which can post back a command to a webservice, and this means you can have a command processor running as a web service somewhere else. Of course, different windows could point to different command processors, so a variety of tasks can be done from the one environment.

Here's a screenshot of how it looks so far:

So before I get H2D2 running in mode_w I'm building a few experimental widgets, like the google search widget, just to see how well it works and to iron out any issues. The google search widget allows you to type in a search term and see the top matching URLs.

And maybe I'll build an expression parsing widget which could also be used as a calculator. But after that I will try and get it to host some H2D2 programs, since that is why I made it in the first place...