Topic: Playing with js (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=29574" title="Pages that link to Topic: Playing with js (Page 1 of 1)" rel="nofollow" >Topic: Playing with js <span class="small">(Page 1 of 1)</span>\

 
Arthurio
Paranoid (IV) Inmate

From: the dungeons, corridor 13, cell 3736
Insane since: Jul 2003

IP logged posted posted 10-01-2007 13:14 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-01-2007 13:49 Edit Quote

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)

Arthurio
Paranoid (IV) Inmate

From: the dungeons, corridor 13, cell 3736
Insane since: Jul 2003

IP logged posted posted 10-01-2007 15:57 Edit Quote

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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-01-2007 16:33 Edit Quote

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 ).

Arthurio
Paranoid (IV) Inmate

From: the dungeons, corridor 13, cell 3736
Insane since: Jul 2003

IP logged posted posted 10-01-2007 17:15 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-01-2007 18:11 Edit Quote



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.



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu