Topic: Playing with js (Page 1 of 1)

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.