JavaScript Haikus: My Adventures in Tiny Coding

Hi, everyone. Welcome to JavaScript HiCues. A talk all about my adventures in writing super tiny JavaScript programs.

First, a little about myself. My name's Frank Forrest. I have a bachelor's in computer science and I have over 20 years working in the video game industry all across the United States, some games that maybe you've played right now, I'm focused on indie game dev and creating generative art. Here are some of the games I made all with JavaScript. And I also do generative art, which, again, is made with JavaScript.

But today we're going to be focused on these super tiny tweet sized programs. I made over a thousand of them. And I want to share my secrets with you today. Let's talk about tiny code. So what is tiny code? Shakespeare said, Brevity is the soul of wit. And that's kind of what tiny code is. But for code instead of the language, there's a lot of different ways to describe tiny code. You can call it size coding, code golf, or just minifying. But ultimately, the goal is to create cool art, music or other types of effects. And create it with very small, minimal amount of code while you're having fun.

Now this all started with the demo scene in the early 80s. Maybe you've heard of it. It's kind of a computer arts subculture where people make demos that are composed of graphics and music. And they often run on older computers. They can be anywhere from 64 kilobytes down to even below 256 bytes. But those are using bytecode, so they're starting to slowly embrace languages like Javascript. Code golf is kind of the heart of tiny coding and it's about using programming tricks to save space. So for example, you'll squish your code down by removing whitespace, making variables single letters. Not using ifs and just not using functions and kind of fighting for every single byte you could possibly get to squeeze everything down. Javascript is great for this kind of thing because you can use a live editor. It's a web based tool where you can type in code and see it happen and execute right way in real time. It's got instantaneous feedback and it's a very visual way of programming.

So I really love using a live editor for this kind of thing. You can even capture gifs and images with it and has some tools to help debug and save and load your code to make it easy to iterate with. There's a couple different ways you can share tiny code.

You can submit it to a demo party. Are there also websites that you can share your code on such as Shader Toy or Twitter.net, which we're going to be talking about today? What is Twitter? Twitter.net is a place where you can share 140-character JavaScript demos. It was created in 2016 and currently has over 20,000 tweets. The website itself is open source. And we're working on a new beta version that has some advanced features that I'll also be showing today.

So the basics of Twitter is when you start a new tweet, you'll be presented with this default bit of code that draws nine lines on the screen, it has them moving back and forth. Here's the code for that. It also will automatically set up a canvas and a loop for you so that the animation is really easy to get working. There are a couple of functions that are set up automatically for sine cosine tangent and to get an RGBA color. So for example, if you want to minify the default twitter program, you start out with the one on the left then you start making optimizations and minifications by removing the comments and squishing it down. Then you can make it even smaller by making some concessions, which change the output a tiny bit, but not in a very noticeable way. Like for example, changing the gap between those rectangles from 100 to 99. That saves a whole byte of space, and saving those bytes really adds up.

Twitter can also be run standalone. So if you wanted to make, say, an HTML file that is able to execute a tweet, it would look something like this. The tweet code is just that little bit in the center there. Everything else is setting up the Twitter interface in a canvas. Just a really minimal amount of code necessary to run one of these. It's pretty much banal JavaScript. We've done all kinds of fun remixes of the default tweet. Here are some of my favorite community remixes. I've also done a couple myself, all using the same kind of concept and exploring what we can do with just those nine vertical lines.

Something you might want to be aware of when using Twitter is that Twitter uses 140 characters, and each one of those characters can hold multiple bytes. We found a way to store two bytes in each one of these Unicode characters, and with the decoder also included, we're able to fit up to 194 bytes in a single tweet. You can imagine the way that works is you have these astral Unicode characters where they hold four bytes, but two of the bytes can be whatever you want. So the way that uncompression works is it calls escape on the Unicode character, removes the unnecessary stuff, then unescapes it and evaluates what's leftover. And it's really allowed us to push the limit of what's possible in a tweet.

You can use a similar technique to pack image data. And I've experimented with that a little bit to create the Mona Duitza, a Mona Lisa fit in a tweet, and even a self-portrait and all kinds of, um, old school graphics, bitmap art. It's pretty fun to experiment with tiny graphics.

Most of what we'll be doing is using the 2d canvas API to draw geometric shapes, text and emojis. We can set the color in alpha and use features like shadow and shadow blur to do special effects. It's even possible to draw one pixel at a time to create super high definition raster graphics. So for example, the kind of functions we'll use are like fill rect, arc, setting fill style, drawing lines, that type of thing, and nearly everything is done using these very small set of functions.

There are other options also you can use for graphics such as HTML, CSS has some neat things you can do, and even making SVGs , and I managed to plot one of my tweets that uses an SVG. It was kind of a fun experiment. Random numbers are really key to this whole kind of art creation, and there is a math random, of course, which you can use to get random numbers between zero and one. But sometimes you need something like a seated random number, and you can accomplish that with like, doing sine of a value squared is a simple way to get a type of random result. And there's all different types of things you can do to get random-ish numbers, like using the mod operator, and you can even create a kind of fractal noise, Perlin noise type of effect with this, too. There are so many different types of algorithms that are possible in this space. It's kind of incredible. Really anything is possible. And that's what I'm going to be showing you today.

You can even make tiny games that fit in this space. I've experimented with that a bit, and I've made quite a variety of games, though getting input does take a bit of space. You can use like an onclick event. It's your smallest option to get mouse input. Maybe something like onkeydown to get keyboard input. Or it's possible to even get gamepad input within a pretty small space to create these super tiny games and interactive experiences. So for example, if you wanted to make Flappy Bird, fit in 244 bytes of pure HTML, it would look something like this. Basically you're going to create a canvas and then the rest of it is all JavaScript, getting your canvas context, setting up an interval, and a little bit of logic for the physics part of stuff, and the only input is using an onclick event. Then to draw stuff, there's a FillRect and a FillText part of it, and the rest of it is just the little bit of logic necessary to run the game. You can do tiny sound in that bit of space as well, though it's really hard to fit because the code to play the sound ends up taking up so much of the space there's not much left to determine what to actually play. Still, we've done a lot of that. On Twitter, there's a BiteBeat Music as possible. I've released entire album of BiteBeat Music on Twitter, and you can even use speech synthesis to create voices which have the ability to tweak pitch and volume too. So there's opportunities there.

Let's talk about some of the Tweets that inspired me. Check out this incredible underwater Tweet by Pavel. I just love this one. It's so simple and kind of shows you the power of Twitter. Nearly everything you see here will be a for loop and then a fill style and a fill rect is kind of like how a lot of these Tweets work. Here's a raycasting demo. That's pretty incredible. Blew me away when I first saw it. I love this quarantine door one by Yanni. He's got a nice little optimization here to store fill rect into F and then use that to call fill rect multiple times a common technique you see on Twitter. This flying paper airplane one is really great. It's done in a little bit of different way where you have a function that does align to I love this city traffic simulator by Tom Exor. It's just mind-blowing how he managed to create this. The sea and the thing that I love the most is the little tiny cars that drive around the city and appear to interact with each other. Yantan did this smoky 3D structure. In this case, it's using the shadow effects to create a kind of a cloudy smoky 3D blur.

So let's take a look at some of my tiny code examples and I can walk you through how they actually work. Here's the very first tweet that I did way back in 2019. Not my best work, but at the time it was and I've come a long way though. In fact, I've made over a thousand of them in the past four years. Here are some of the best ones I've done.

I've covered a wide range of subjects. Space is one of my favorites. So for example, to create a black hole type of effect, you can do that by iterating and setting a color and drawing these fill recs. In this case, it's starting from the bottom, iterating up and spiraling out and that color starts red and goes towards the white, and there's a special test for the very first rec to be drawn to draw that black in the background. You can do fractal rendering in this space very well. It lends itself greatly to tiny code. For example, a tiny mandelbrot rendering would look something like this. It's using the technique of rendering out one pixel at a time to do a super high-definition render.

Cellular automata is a very powerful effect. Here are a couple of the ones I've done. A lot of different results you can get such as a water or fire type of effects are more of a mathematical type of result. Here's a Sierpinski triangle that's drawn using a 1D cellular automata effect. It's storing the cells into an array and going through and updating all those cells based on the rule which is rule 90 in this case, but ultimately matters is the bits of that rule that are used to determine the next state of each cell. I've done so many different experiments with tiny little cities and buildings. I love that kind of thing. For example, this city sunset you can do by again, looping and setting the color, drawing fill racks. In this case it draws the background during the very first frame a little bit different than the buildings and each building is drawn by a grid of squares which alternate between black and colored for the windows and they kind of are shuffled and drawn from the top to the bottom to create a kind of cityscape type of effect. I really love how this one turned out. One of the more recent things we've been able to do in Twitter is ray casting to really push the limit of what is possible. I've even done a super high definition raycasting system in Twitter, like this tweet here that draws a city and has shadows and just textures as well, using that code on the right there. I've done all different types of tree scapes, like this tree lake scene. And with some help in the community, we managed to squeeze it down from 194 characters down to only 119 bytes. So, it's pretty interesting the way this one works and how it kind of generates a random number, for example. Definitely worth digging into. Drawing from the left to the right for the trees, the very first frame is where it draws the stars or the kind of reflection and vertical or horizontal lines.

Asemic writing is where you have a writing that looks like it's realistic and mean something, but it's actually just fake. I mess around with that a lot in Twitter. I think it's kind of a fun subject.

So for example, if you want to make a super tiny writing system, I was able to squeeze it down to the core essentials here, kind of like deciding when you're going to have breaks in the writing is the very first line, and then starting and stopping that line using a fill begin path. And for the rest of it, we're just going to draw this scribbly type line, which is moving from the left to the right and top to the bottom, and kind of circling around with different coefficients.

I've even managed to fit super tiny people that are running and jumping and fighting and stuff like that. So a little tiny person you can fit in this space by thinking of them as like drawing four lines. For the four limbs, you're starting at the top of the head, drawing down, and each one of those lines is a series of points. So you have a head, shoulder, elbow, hand, and then very similar thing for the other arm is just kind of offset and the legs are a little bit longer, but ultimately using the same code.

I'll just blast through a couple more tweets just to give you a sense of the kind of stuff I've created. I've done optical illusions and even one optical illusion of the year for the dual axis rotation illusion, which I originally posted on Twitter. I've done so many different types of landscapes. They're a really fun thing to play around with. Chaotic systems can have really interesting results. I love how they're just like unpredictable. Physics simulations can fit really well in a tweet like particles or water bouncing things, or even kind of pseudo physics. I've done all different types of trees, everything from palm trees, bamboo, 3D stuff. Often I'm inspired by mathematical concepts for tweets to make geometric designs. I've done a lot of tunnels and 3D effects. I've done a whole series of words that are kind of like animated to show off that word. It's kind of a weird idea, but it was really fun to try to fit these in the tweet. There are so many more that I've done and other people have done. It's really worth checking out what is there on Twitter. It's just amazing what we've managed to do and continue to keep pushing out new ideas all the time.

Maybe you've watched this whole presentation and are thinking, why write TinyCode? Well, I could tell you, it's fun and relaxing. It's one of my favorite things to do. It will also really help you improve your coding skills. You'll be able to practice prototyping ideas and get much faster at just making things happen. And there's also a community that you can be a part of and even be challenged by competitions like the demo scene. Today, I have a challenge for you, which is to join the TinyCode movement by creating your own art in 140 characters and share it on social media with hashtag TinyCode.

What is the future of TinyCode? We're constantly discovering these cool new techniques to make new things possible and browser support is getting better too, which means it's going to look the same across different browsers and mobile devices. Of course, the JavaScript language is constantly evolving, which means that as new features get added we can maybe have more opportunities to fit things into that space. And computers are getting faster too, so we can do higher resolution output and more complex simulations using the same amount of code. And one of the newest things that's been happening is AI-assisted programming, which can help explain how this TinyCode works and maybe even write it. That's all I have to share with you today. I hope my talk inspires you to write your own TinyCode. As DaVinci said, simplicity is the ultimate sophistication. Thank you so much for watching my talk.