Check out my
new book!
HTML5 Games book
Mandelbrot in less than 128 bytes of DHTML Mandelbrot setA 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.


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
⇓ 10 comments Mathieu 'p01' Henri

Thanks for the kick!

David 'HZR' Hasater pointed 2 optimizations, which lead to alas we lost IE in the process.

September 20, 2008 at 5:46 PM

Issue appears to be document.write being broken in onload handlers --

September 20, 2008 at 7:13 PM
Sergii Voloshyn

Works in Safari/Chrome:
<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())

September 21, 2008 at 2:11 AM
James Urquhart

Yikes. Crazy stuff! 0_0

September 21, 2008 at 2:41 AM
Jacob Seidelin

Got it down to 114 bytes by losing Opera and the ending ">" in the body tag.

@Sergii: Nice, thanks. I figured something like that was needed, but it was just so many bytes just to make Webkit happy.

September 21, 2008 at 3:06 AM
Mathieu 'p01' Henri

Take the children away, this is getting real dirty :D

September 21, 2008 at 3:15 AM
Jacob Seidelin

Ha, no kidding :)

113 bytes by changing the output to a less defined boundary.

September 21, 2008 at 3:38 AM
Mathieu 'p01' Henri

I didn't change the look before as the characters 6,7 and 7,8 gave a much cleaner/sharper output.

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

September 21, 2008 at 4:13 AM
Jacob Seidelin

Nicely done! There can't be much more to squeeze out of that document.write now :)

I actually started out with the non-sharp look but decided to "buy" the nicer contours for an extra byte.

September 21, 2008 at 4:31 AM

شركة تنظيف منازل بالرياض
تنظيف منازل بالرياض
شركة تنظيف خزانات بالرياض
شركة غسيل خزانات بالرياض
شركة تنظيف فلل بالرياض
شركة نظافة فلل بالرياض
شركة تنظيف شقق بالرياض
تنظيف فلل بالرياض
شركة تنظيف واجهات حجر بالرياض
شركة غسيل واجهات حجر بالرياض
شركة عزل خزانات بالرياض
شركة تسليك مجارى بالرياض

August 8, 2014 at 10:44 AM
Post a Comment