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.
- 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.
- BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks.
- 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
- MINICRAFT Tribute to MINECRAFT, voxel flyby in 252 bytes of HTML5
- 256B.HTM The first edition of the 256B.HTM contest allowed 5 entries per author. Mine ranked 1st, 10th, 19th and 29th out of 63.
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.