THREAD JS

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!

New territory

As futile as it may be, I have been trying to break the 64 bytes fronteer of creative Javascript productions for a few years now.

The famous 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.

The original

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.

Unicode baby

However we can count on UNICODE, and especially three characters U+2571, U+2572 and 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

I needed to randomly display one of the three UNICODE characters mentionned above. There are a couple of ways to get a (pseudo) random number between 0 and 2 in Javascript

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.

event.screenX%3

p element

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.

Closing words.

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. 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
• THREAD The "10 print" maze generator in 15 bytes of x86 assembler. on December 19th, 2013
• 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 on November 27th, 2013
• HYPERSONIC MANDELBULB A hasty invalid JS1k entry using webGL+Audio. Possibly the first one. on March 6th, 2013
• TV NOISE Fall 2011, another meme struck Pouet.net. TV NOISE. Over the course of a few weeks, every single platform went psssh. There you go open web platform: TV noise in 128 bytes. on November 13th, 2011
• DRAWING LINES IN JAVASCRIPT An efficient method to draw and animate many lines in JavaScript, without Canvas or any similar graphic API. on November 3rd, 2001

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.