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 projects
There are many experiments and projects like THREAD JS to discover other here.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- CODING⯌ART AT RENDER CODING⯌ART at Render 2017 was part of my series of talks + live coding aiming to inspire new web developer artists.
- DRAGON PUNCH An itsy bitsy Dragon curve renderer in 121 bytes.
- THREAD The "10 print" maze generator in 15 bytes of x86 assembler.
- SHEET An Excel-like spreadsheet with arbitrary expressions and persistence using localStorage golfed under 256 bytes with aem1k, subzey, xem, rlauck, odensc, mmastrac, and corruptio
- ASAHIKAWA Flyby the city of Asahikawa in 64 bytes.
- URYA A sweet text mode 64kb intro on PC, written in PASCAL and showed at the WIRED'96 demoparty where it ranked 4th.
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.