Breaking the 64 bytes fronteer with the famous "10 print" maze generator.
Sixty four bytes
<p onmousemove=b.innerHTML+='╱╲'[event.screenX%3] id=b>Hi
That's it. Now go, wiggle your mouse and make your way!
10 print program from the Commodore 64 Basic manual came back under the spotlight in a brilliant book 10 print by Nick Montfort et al. I remember seeing this one-line program back when I was going to my local computer club in the 80's.
The first insanely small implementation of the
10 print program I saw was Thread by Nick Montfort in 22 bytes in June 2010. Later came a few other implementations which culminated with a 12 bytes record in Thread over in December 2012.
10 PRINT CHR$(205.5+RND(1)); : GOTO 10
The original Commodore 64 BASIC program consists in an infinite loop that randomly prints out the character 205 or 206, i.e. the slash or back-slash characters, which as they fill the screen form some intricate pattern akin to a maze or a weaving thread.
How to do this in DHTML
Unlike on a fixed hardware where you have a strict baseline, fonts, layout of the memory, ... Web developers have little control over the system or even fonts installed on the system of the end users.
However we can count on UNICODE, and especially three characters
U+200B: the two full width diagonals, and the zero width space.
If we only used the full width diagonals, the browser wouldn't know where to break the line. Inserting a zero width space here and there allows the browser to break the lines without any visual impact if the space is inserted in the middle of the viewport.
Analog random number generator
Math.random()*3|0 New Date%3
The first one is too long and the second one is too predictable and doesn't cope well with burst calls.
The next best thing was to use an analog random number by letting the user do some of the job by wiggling the mouse around and picking the x coordinate of the mouse module 3.
Ideally I would use the
html element, so as to catch the mousemove event anywhere on the viewport. Unfortunately the 64 bytes size limit is merciless. I had to use a
p which means you have to wiggle the mouse inside the bouding box of the element.
I'm glad I finally managed to beat this challenge and hope you appreciate this little feat and that this will inspire others to persevere and push the limits.
As usual with my demoscene productions, you can find Thread.js on Pouet.net.
Other recent experiments
There are many experiments and projects like THREAD JS to discover other here.
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking or performance opportunity.