Possibly the smallest Mandelbrot tracer ever in JavaScript: 101 bytes
Experience always wins the day
Recent discoveries in the codegolf group allowed me to revisit the good old Mandelbrot tracer and squeeze it in 101 bytes
<svg onload=for(n=99;n-=1/64;write(n%3?k:-7))for(r=i=0,k=20;--k/r;i=t)t=2*r*i+1-n/49,r=r*r-i*i+1-n%3>
Check this 101 mandelbrot tracer for yourself. Like the smallest versions before, this one works best in a Webkit or Blink based browser. Making it work in Firefox and Edge takes 3 more bytes.
<svg onload='for(n=99;n-=1/64;write(n%3?k:" "))for(r=i=0,k=20;--k/r;i=t)t=2*r*i+1-n/49,r=r*r-i*i+1-n%3'>
Then came Xen who saved another 2 bytes by offseting the initial values of the complex number:
<svg onload='for(n=99;n-=r=i=1/64;write(n%3?k:" "))for(k=20;--k/r;i=t)t=2*r*i+1-n/49,r=r*r-i*i+1-n%3'>
The genesys
Back in 2008, I got this hitch that a Mandelbrot tracer was possible in 128b. There had been countless Mandelbrot and Julia fractals in 256b but the 128b mark seemed within reach. My first attempts clocked at 137b and 133b. Jacob 'cupboy' Seidelin then kicked the ball down to 122bytes, at which point this whole thing turned into a friendly competition that lead us to more dirty tricks and down to 112bytes.
<body onload=for(n=84;n-=1/32;document.write(n%3?k:''))for(r=i=0,k=21;--k/r;i=t)t=2*r*i+1-n/42,r=r*r-i*i+1-n%3>
You can see most of the iterations:
- 137b
- 122b by 'cupboy'
- 117b
- 115b
- 114b by 'cupboy'
- 113b by 'cupboy', with a trimmed BODY element
- 112b
- 111b with a trimmed BODY element
Trimming the BODY element is really rough on the various browser engines. To this day, only Firefox accepts this. The 112b version on the other hand works in Opera and Firefox. The 115b version also works in Webkit browsers.
Other recent projects
There are many experiments and projects like MANDELBROT TRACER to discover other here.
- FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
- VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
- BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
- WOLFENSTEINY An homage to Wolfenstein 3D in 251 bytes of HTML5 on October 15th, 2013
- MATRAKA DEMOJS 2012's winner 1k intro with 3D graphics and music, written in JavaScript and packaged into a self extracting PNG image. See and hear for yourself! Remember, everything you're about to see and hear fits in 1024 bytes. Watch out, the music is quite loud on June 30th, 2012
- MICRO NOVA Quite possibly the smallest WebGL demo effect. Micro Nova clocks under 512bytes and shows supernova-like blasting colors. on May 30th, 2012
- PNEBULA Almost the first 256b intro using Canvas ever :p on September 30th, 2008
- DEFENDER OF THE FAVICON The brilliant arcade game Defender now playable inside the favicon of your browser! The idea was to push the concept of generated favicons far and beyond and pack a thrilling retro shooter in 16×16 pixels. on July 15th, 2008
Let's talk
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.