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!

Starting to write code in H2D2

So... my latest attempt at writing a programming language, which I'm currently caling H2D2 is taking shape. I can build loops, assign numeric variables and evaluate expressions. It is still only a subset of the syntax from my original DALIS language, but I am able to write some simple programs now. You know what's coming don't you...? Here's a little something that I've been working on, do you know what it is yet?

e=1.1
d=0
h=0
loop
  b=-2
  loop
    n=0
    r=0
    h=127
    loop
      r=r*r-n*n+b
      n=2*d*n+e
      d=r
      h=h-1
    repeat if ((r*r)+(n*n)<4) & h>32
    print h
    b=b+0.04
  repeat if b<1
  print 13
  e=e-0.1
repeat if e>-1.2

Yup, it's the famous ASCII mandelbrot. You'll also notice that I've switched to lower case for the keywords this time round. I got tired of feeling like I'm shouting when writing code. This version also uses '&' to mean 'logical and', instead of the actual word 'and'. This is the syntax tree that's created when I parse that code:

Well that's progress. It's not bad considering my C is still rusty, but it's coming back to me. I haven't timed anything yet, but it certainly feels faster, on my laptop this program draws the mandelbrot set in about one second I reckon. Of course, I can keep the syntax tree as a kind of compiled bytecode, meaning that the program can be run without the need for the parser, which would make it faster still.

Raspberry Pi low-res fractal in C

Of course, it wouldn't be me unless I tried drawing a mandelbrot on the Raspberry Pi. Here is the traditional ASCII character version, but with some low-res colours.

Raspberry Pi Mandelbrot in C

I have to admit that the colour idea was inspired by somebody called Paulo Lellis, who had read some of my previous posts and adapted my code to include colour codes. It was very kind of Paulo to show me what he had done. I've simply tweaked it some more.

Anyway, if you'd like to try it, here is the source code:

#include <stdio.h>

/*
   Compile like this:
   gcc mandel.c

   Then run the code, like this
   /.a.out
*/

main()
{
   float b,e,r,n,d;
   int h;
	
   for(e=1.1; e>-1.2; e-=.1)
   {
      for(b=-2; b<1; b+=.04)
      {
         // see: http://en.wikipedia.org/wiki/ANSI_escape_code#graphics
         printf("\033[1;4%dm%c\033[0m",(h%8),32);
				
         n=0;
         h=127;
         for(r=0; r*r+n*n<4 && --h>32; d=r)
         {
            r = r*r-n*n+b;
            n = 2*d*n+e;
         }
      }
      printf("\r\n");
   }
}

Well, I had to try the C compiler on the Raspberry Pi at some point.

Dr Retro, I presume?

OK, so you're probably getting bored of mandelbrots by now. Sorry. But there have been more improvements to DALIS, mainly in the area of string handling; namely there is some. I can now assign string variables and do string comparisons and concatenations. This means that I can output some pretty html with colour and everything :-) Just take a look that this bad boy:

DALIS can do colour

How very retro. But it is like DALIS has jumped from the world of the ASCII character terminals of the 70s to the microcomputers of the 80s. OK, in case you're interested I'm mapping a 9 bit colour palette to the equivalent html colour values. But I'll try not to post any more mandelbrot images for a while, honest.

Fractals on the real thing

My RT-11 boot disk with DECUS C worked a treat on the real machine.  It took 16 seconds for it to draw the mandelbrot set in ASCII art on the actual uPDP-11/53.  Here is a picture of the real thing in action:

ASCII fractal on a real PDP-11

I would say that's a result.  My next project is to use memory-mapped I/O in C to communicate over the second serial line.  This may allow me to hook the PDP to my serial-to-wifi board.

PDP-11 Fractals in ASCII Art

Now that I have a C compiler for the PDP-11, I decided to do something interesting with it.  Drawing a fractal seemed to fit the bill, so I did a google search to see if anybody had managed to render the Mandelbrot Set in ASCII Art.  I found this Java code.  So I decided that I should port it to K&R C and see if it runs on the PDP-11.  This is the result:

Mandelbrot in ASCII

Very not bad!  And if you're interested, the K&R version came out like this:

#include <stdio.h>

/* CC
      mandel.c/A
   link mandel.obj,c:suport.obj,c:clib.obj
*/

main()
{
  float b,e,r,n,d;
  int h,c;
  for(e=1.1; e>-1.2; e-=.1)
  {
    for(b=-2; b<1; b+=.04)
    {
      if ((++c % 76)==0) printf("\r\n");
      else printf("%c",h);
      n=0;
      h=127;
      for(r=0; r*r+n*n<4 && --h>32; d=r)
      {
        r = r*r-n*n+b;
        n = 2*d*n+e;
      }
    }
  }
}

So far this has only been done in SIMH, but when I have made a physical 5.25" boot disk I will try it on the real machine.  I'm interested to know how fast (or slow) it is...