Blog Archives

The making of Confetti


I’m impressed, really impressed…

About my JS1K entry? Ah no… not at all! That’s not what I mean. I’m just impressed that someone managed to spell JS1K with it, let alone take a screenshot afterwards! (Maybe they have a very slow computer. Sorry if that’s true).

I’m so glad because I needed a thumbnail, so I just put some random lines, but I never managed to make it pretty. Well I’m really glad someone at JS1K replaced my thumbnail. It looks quite pretty.

I thought I’d write a post-mortem, for the only reason that there’s a place to put a link to it on my entry, so might as well.

What is JS1K?

To first give a bit of context, JS1K is a contest where you make a JavaScript demo in less than 1024k, without using external resources. That’s quite a challenge, you can’t do much with it, but it’s fun to try! You also have a chance to win $50 in the contest (but I try not to think about it because I find that almost irrelevant for me, given how good the other demos are…)

My first idea, that didn’t make it in

So this began a week ago, as I was browsing other entries, I realized a lot of people managed to use emoticons to add nice graphics to their entries. I thought I’d outsmart them, (and cheat a little), because I will allow people to upload their own image into the entry!

I was just getting started with the basic, then I decided to check on the size of my entry, just to make sure it was less than 1024 bytes, according to the rules. The whole thing was taking 10k, and even minified it was 7k. At that point, I gave up on the Jam and just used what I had to make an entry for Jupiter Hadley’s Birthday jam. That one was quite a success if I say so myself.

Started over, the night before

Round 2 occurred the night before the deadline of JS1K. I had been working on the other jam, and sort of forgot about JS1K, when I suddenly… got spammed with received an email from JS1K about some more JS1K demos. Damn they looked good… I’m pretty sure I could never win the contest, but I still thought it’d be nice to come up with something. I had a few hours I could spare, so perhaps do something along the lines of cellular automata, like Game of Life, or Rock Paper Scissor. For some reason, I had been watching a lot of those videos around that time. This made me want to create my own cellular automata. I told myself I shouldn’t copy someone else’s formula though, I should try to come up with my own.

Struggling with making random code do something cool

Well the basic of Cellular Automata is to make a cell interact somehow with all its neighbors. My first iterations did nothing, I didn’t even understand why I couldn’t change the canvas color to black, until I realized that pixels are not just RGB, but RGBA. With A=0, the canvas is transparent and thus looks all white!

Then I was struggling with getting my canvas to transform continuously. The fact that I was dealing with 3 different colors made it difficult to come up with something simple. Anything I came up with just made the canvas turn gray, then static with a bunch of colored pixels getting stuck between the cracks. It was interesting in the sense that I didn’t know why it was doing that, but it was so boring to look at. Yet I keep staring at it trying to figure out if it was still transforming or if it just got stuck. It’s exactly like watching paint dry!

Ok, so I thought that having to deal with all neighbors made it too complex and not flexible.I could just make one pixel interact with a random neighbor instead. In fact, interacting with all neighbors it’s kinda the same, except repeated 8 times. I eventually changed to make it reach 2 cells away to make it more dynamic.

Eventually, I came up with a function that did something interesting:

function M(data, a, b) {
    if(data[b]>data[a]) {
        data[a] = data[b];
        data[b] >>=1;

I’m going to try to explain it despite having no idea how I came up with it. Basically, it’s ordering all the higher value cells (more colorful cells) to attack the less colorful cell. If the neighbor is less colorful, move there, and leave a trace behind by dividing yourself by two.

So that looked like it could be interesting, and the result is Confetti!

Why does it move up?
Why is there black stuff falling down?
And where does the shading come from?
No idea, but this will do. Hey, when I don’t know what it does, it’s magic!

Next, I just thought it’d be interesting to make it interact with the mouse, so I just draw thick white lines as you move the mouse through, and voilĂ !

Trimming the fat

Almost there, but the problem is that it’s still larger than 1024k, even minimified… minified… uglified….. Ok I dont’ know how to say it.

Anyway, no problem. I just refactor all the variables to 1 or 2 letters. canvas is now cA, moveTo is now mT, attack is just M, just because… At the end, it was unreadable and around 0.9k. I had room for more, but I was really done.

My brain said: Let’s just get over with it!

Looking back

I looked further at other entries… Oh my… those looked so beautiful and impressive. 3D Tunnels, flying simulator, hypno-toad simulator, actual games … I really shouldn’t expect much from my puny entry, but still nothing to be shameful about.

I wonder if others came up with their entries the same way I came up with mine, with no plan, just half haphazardly by moving code around. I’d be damned….