Mandelbrot in less than 128 bytes of DHTML
A while ago, Mathieu "p01" Henri rendered the initial Mandelbrot set in 137 bytes of JavaScript and HTML, getting it down to 133 bytes with a few tweaks but still a few bytes short of his 128 byte goal. Since fractals are groovy, I decided to make my own, trying to get it below that magic number.
The smallest HTML overhead I could think of was to just have a single <body> tag with an onload event doing everything. Unfortunately this doesn't seem to work in Safari and Chrome, but FF, IE and Opera are all happy. Other than that, it's just a lot of tweaking and dirty tricks do shave off every possible byte.
I first managed to get it down to 122 bytes.
Check it out here
Didn't take long for Mathieu to respond, though, and he shaved off a few more bytes down to just 117 bytes. Very cool! See his version here.
And if anyone finds a way to make it even smaller, please leave a comment.
Updates:
1: With the help of David 'HZR' Hasater, Mathieu's is now down to 115 bytes, losing IE support along the way.
2: Final version so far only works in Firefox and is only 114 bytes
3: Ok, one more. A slightly different look (less defined boundary) and another byte sent off: 113 bytes
A while ago, Mathieu "p01" Henri rendered the initial Mandelbrot set in 137 bytes of JavaScript and HTML, getting it down to 133 bytes with a few tweaks but still a few bytes short of his 128 byte goal. Since fractals are groovy, I decided to make my own, trying to get it below that magic number.
The smallest HTML overhead I could think of was to just have a single <body> tag with an onload event doing everything. Unfortunately this doesn't seem to work in Safari and Chrome, but FF, IE and Opera are all happy. Other than that, it's just a lot of tweaking and dirty tricks do shave off every possible byte.
I first managed to get it down to 122 bytes.
Check it out here
Didn't take long for Mathieu to respond, though, and he shaved off a few more bytes down to just 117 bytes. Very cool! See his version here.
And if anyone finds a way to make it even smaller, please leave a comment.
Updates:
1: With the help of David 'HZR' Hasater, Mathieu's is now down to 115 bytes, losing IE support along the way.
2: Final version so far only works in Firefox and is only 114 bytes
3: Ok, one more. A slightly different look (less defined boundary) and another byte sent off: 113 bytes
Thanks for the kick!
September 20, 2008 at 5:46 PM AnonymousDavid 'HZR' Hasater pointed 2 optimizations, which lead to http://is.gd/2TQB alas we lost IE in the process.
Works in Safari/Chrome:
September 21, 2008 at 2:11 AM Anonymous<body onload="for(k=96;k-=1/32;document.write(k%3?!i+7:' '))for(x=p=1-k%3,i=51,y=q=1-k/i;--i/y;x=t+p)t=x*x-y*y,y=q+y*x*2;document.close();">
(added document.close())
Yikes. Crazy stuff! 0_0
September 21, 2008 at 2:41 AM Jacob SeidelinGot it down to 114 bytes by losing Opera and the ending ">" in the body tag.
September 21, 2008 at 3:06 AM Anonymous@Sergii: Nice, thanks. I figured something like that was needed, but it was just so many bytes just to make Webkit happy.
Take the children away, this is getting real dirty :D
September 21, 2008 at 3:15 AM Jacob SeidelinHa, no kidding :)
September 21, 2008 at 3:38 AM Anonymous113 bytes by changing the output to a less defined boundary.
I didn't change the look before as the characters 6,7 and 7,8 gave a much cleaner/sharper output.
September 21, 2008 at 4:13 AM Jacob SeidelinNice find with the > alas the cost is pretty high. Makes me wonder how such things are parsed in HTML5.
Anyhow, changing the look a bit, I got to 112b, meaning 111b in FireFox when trimming the BODY tag.
Nicely done! There can't be much more to squeeze out of that document.write now :)
September 21, 2008 at 4:31 AMI actually started out with the non-sharp look but decided to "buy" the nicer contours for an extra byte.