The <i>real</i> version of this, which is actually 1021 bytes, is here: <a href="http://www.p01.org/MONOSPACE/monospace.htm" rel="nofollow">http://www.p01.org/MONOSPACE/monospace.htm</a>. It uses the very clever trick of compressing the JavaScript code as the pixels of a PNG image (which uses Deflate internally), then including the page itself in an <img> tag and decompressing the JS code from the resulting pixels.<p><i>Unfortunately</i>, the developer made a bit of a mistake when uploading this file: it appears to have been uploaded in <i>ASCII</i> mode rather than <i>binary</i> mode, meaning that all the 0x0d (CR) bytes in the file have gone missing (an artifact of the standard "CRLF -> LF" translation performed in text mode uploads). Therefore, it doesn't work: all you get to see is a screenful of binary junk. (Author, if you're seeing this - it's hopefully an easy fix!)<p>I've uploaded the correct version (obtained from <a href="http://www.p01.org/MONOSPACE/monospace.zip" rel="nofollow">http://www.p01.org/MONOSPACE/monospace.zip</a>) here: <a href="https://robertxiao.ca/misc/monospace.htm" rel="nofollow">https://robertxiao.ca/misc/monospace.htm</a>. This works out-of-the-box on Firefox (modulo being really slow, thanks to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1190398" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=1190398</a>), but fails on newer Chrome because of click-to-play audio. You'll have to "allow" my site under chrome://settings/content/sound, then refresh.<p>But! Once you've jumped through those hoops, you can appreciate the real ingenuity that manages to pack this demo into a cool 1021 bytes (the compatible version that most of you would have seen is much larger, at 2338 bytes).
Because the rest of the commentors in this thread seem to not be reading the article, there's a performance issue in Firefox due to the following unresolved bug: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1190398" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=1190398</a>
It was hard to get to a working demo and here it is: <a href="http://www.p01.org/MONOSPACE/monospace-compatible.htm" rel="nofollow">http://www.p01.org/MONOSPACE/monospace-compatible.htm</a>
This won the Assembly 2020 1kb demo competition. There are some truly mind-blowing entries, including the 2nd place entry which features multiple types of spaceships and a stargate, with audio.<p><a href="https://www.pouet.net/party.php?which=7&when=2020" rel="nofollow">https://www.pouet.net/party.php?which=7&when=2020</a>
For people not able (or willing) to run the demo themselves, it can also be seen on YouTube in a 3 minute clip [0]. It keeps amazing me how much people can accomplish with less than a KB of code.<p>[0] <a href="https://www.youtube.com/watch?v=2HN139WkcCY" rel="nofollow">https://www.youtube.com/watch?v=2HN139WkcCY</a>
This is similar (but much much better) to a demo I was making for JS1K a bunch of years back: <a href="http://mrspeaker.github.io/js1k16/" rel="nofollow">http://mrspeaker.github.io/js1k16/</a><p>My "big idea" was to use the speech synthesis API (I still liked how I used it)... but I thought it was funny, because it felt like cheating to say "1K" when it relied on so many megabytes of APIs!
Amazing! Very impressive how you got all the details in. I'd be interested in hearing what the development process is like.<p>Do you work directly in the minified code, or do you create the demo in normal code first then look for ways to minimize it?
I, for one, liked the "firefox version" of the demo. No way to close, mute or go back. And after a minute someone starts talking to you. Pretty cool.
Here are other visual JS Demos created by p01 and others using just 140 characters of code (or less!): <a href="https://www.dwitter.net/top/year" rel="nofollow">https://www.dwitter.net/top/year</a><p>Dwitter is a collection of amazing short JavaScript codes that can be explored, remixed and voted "awesome". It works like a living portfolio of short code/graphic creations where one can learn by exploring other people's code.
To everyone running it in Firefox:
"Unfortunately, Mozilla still hasn't fixed the performance bug 1190398 around ShadowBlur, filled for BLCK4777 5 years ago.<p>Therefore you need to use a Chromium or Webkit browser to enjoy MONOSPACE live."
I value p01's contribution to the world of optimized code using JavaScript. He is doing this for many years now, and he still keeps pushing the boundaries with creative optimization techniques.
This is so cool!
It's amusing to me that I saw this about 5 minutes after I received a pop up notice from Adobe advising me to uninstall Flash as it'll be EoL'd in a few months.<p>I appreciate they're entirely different beasts, but the Monospace demo here definitely IS creative.
Don't try this [1] in Firefox, from the article:<p>> Unfortunately, Mozilla still hasn't fixed the performance bug 1190398 around ShadowBlur, filled for BLCK4777 5 years ago<p>> Therefore you need to use a Chromium or Webkit browser to enjoy MONOSPACE live<p>[1] <a href="http://www.p01.org/MONOSPACE/monospace-compatible.htm" rel="nofollow">http://www.p01.org/MONOSPACE/monospace-compatible.htm</a>
oh wow, I thought the video was an artistic edit of the program. it was frustrating me because just wanted to see the program, not a filtered, edited trailer. then I realized that's the program. this is really mindblowing, the creator is definitely some kind of genius
It is amazing how much one can achieve with so little code. I would dare to say that such demos are a kind of...indie art?<p>Can you give us some pointers, which APIs and algorithms did you use to generate the demo? I bet it will be an interesting lesson on math and web
People love to bash developers who put up "Chrome recommended" banners, dismissing them as lazy, but when making games and such there are real issues that are impossible to circumvent. This bug is a prime example of that.
I was so happy <i>not</i> to see another cheap dismissal here.<p>Too often you have to read how a sizecoded demo uses a ton of system libraries or whatever, completely dismissing the technical achievement.
Very impressive. Under 1kb. Astonishing.<p>I love that people keep pushing against the boundaries of what is possible to do. It's important work, and so fun!
here's the rest of them : <a href="https://archive.assembly.org/2020/online-1k-intro" rel="nofollow">https://archive.assembly.org/2020/online-1k-intro</a>
1021 bytes of JS, and 6 million lines of browser code.<p>FTFY<p>These modern demos, using OpenGL and now the whole web browser that are mimicking the rules and sentiment of old 8-bit machines demos, or even later DOS demos, are not the same thing.<p>Oh, this demo has text being spoken ... how was it done ... <i>checks source code</i> ... SpeechSynthesisUtterance . Yeah right, 1021 bytes. :)
I'm getting the same issues as all of the other Firefox users. Guess I'll never watch it, because I have a hard policy of never, ever installing Chrome malware on my personal computer.<p>Maybe the title should be changed to "Chrome demo"?
Who decided to use extremely annoying sounds as the audio track for the first video on the page [1]?<p>I turned it off immediately after hearing its audio.<p>If you want folks to watch a video, allow me to suggest making it as pleasant an experience as possible, at least in terms of the audio.<p>Terrible marketing = marketing that makes your customers/prospects/audience suffer<p>[1] <a href="https://www.youtube.com/watch?v=2HN139WkcCY&feature=emb_logo" rel="nofollow">https://www.youtube.com/watch?v=2HN139WkcCY&feature=emb_logo</a>
The video was lost on me whereas the demo made me think how cool it was.<p>I expected the video to explain what it was but alas no. The video is just the demo running. The demo was brilliant, but, the video of the demo, although practically the same had me wondering quite negative thoughts. I wasn't thinking 'how do they do that', I was thinking 'this is a bit pretentious'. It is amazing the difference context makes.