Topic: Playing with js

Just wanted to create something small and interesting with javascript. Got inspired by the "3D Starfield in 256b" thread. Of course mine is sluggishly slow and 3kb but I haven't done anything with js before so maybe I can get away with it this time.

js mandlebrot

You can click on the picture to move it and zoom in using the links on the side.

Not bad for a first JS prod. Regarding the other thread I think you mean Mandelbrot Rotozoom in 256b.

Just a few quick suggestions:

• a decToHex() function can be shortened to: function d2h( i ){ return ('0'+i.toString(16)).slice(-2); }
  
  
• Actually you don't need to call DecToHex in your main loop. Notice that it is always called with a value in the range [ 0 ; 30 ] (x5). Simply precompute an array with the 30-31 entries you need and voilà. you just replaced
  code:

  ---

  if ( i == m ) { c = '00'; }
  
      else { c = decToHex(i ¤ 5);}
  
      
  
      if (c.toString().length < 2) {c='0'+c;}

  ---

  by

  code:

  ---

  var c = lut[i];

  ---

  
  
  

• using CSS will get rid of all the redundant style declarations in the A tags, so that you only have to set the left and top for each of them. You can even go further by floating them, or simply use a small letter-spacing and line-height / margin
  
  
• using document.write() for each "pixel" is quite intensive. Maybe you should only document.write() in the Y loop.
  
  
• Also document.write() is kinda oldschool, but for such a program it does the job. So would the equally evil ( in normal conditions ) innerHTML.

(Edited by poi on 10-01-2007 13:52)

thanks for the tips
here's the newer version

Maybe I'm not doing the concatenation right but using the document.write only once per y loop didn't seem to result in a noticable performance gain.

(Edited by Arthurio on 10-01-2007 16:08)

Well, it's not exactly a surprise on a page with 10.000 elements Sorry, not much you can do here, except working on a bitmap level using something like Canvas or BMP image generation ( see Image generation using javascript / and a hint for shingebis ).

yeah that's (bmp generation) what I thought I'd do next ... just because it sounds really cool ^^

Notice that you can push the idea of the color lut further. By storing the whole '" style=color:#'+FOO+'>*</a>' substring instead of a single HEX.

Also there's no need to repeat the document in the href of the A tags. ?whatever=something points to the current document.