For this unexpected project I tried a slightly different workflow.
Instead this time, I built a prototype of the idea, refined it until the visuals were interesting enough, ran the code through a RegPack, optimized for the packer and kept iterating on the project, always keeping a close eye on the packed size.
The resulting code is verbose and I'm not sure if this approach is more size efficient but the whole experience was smoother.
Also I save and test the code constantly. In a work environment I would use Git, but this brings too much friction to my "demo coding" workflow. It's a shame because I often wish I had more tracks of the progress. This time, I regularly pushed the code to a private gist. This also made it simple to share the progress with others using bl.ocks.org.
The gist is now public. You can check all the revisions of the JS1k invitation.
To see individual revisions in actions, open the list of revisions on Github, view the gist at a given revision and replace the
bl.ocks.org in the address field of your browser. I wish there was an easier way to do this. Although this might be an interesting pet project.
This workflow was smooth but I met two gotchas.
- SublimeText barfs some of the control characters used by the packer. Of course this breaks the code. So I had to use a Hex editor, again, to copy paste the packed code into the shim. I've got to look into this.
- RegPack does check the black list of variables when it preprocesses the code to do the hashing of the Canvas methods. It produced hashing code overwrite the variable holding the canvas context. Doh!
Together this two gotchas cost a day. Luckily there was hardly any time pressure for this release.
Trying to be a good citizen, I fixed the global variable overwriting issue in RegPack. As expected this was simple to fix. Glad this will benefit other developers.
When searching for images related to JS1k 2015, Emily Dove Gross's beautiful wedding stationeries stood out. The visuals are whismical and fitting. Not to mention I really wish Emily did our stationeries. Check out her artwork!
To render the train tracks and forest, it seemed obvious to treat the elements as particles and use a circular buffer to store their distance from the track. To make things easier and more compact, the
x coordinate modulo 3 determines whether to draw the tracks, or a particle above/below the tracks. There are 3 kinds of particles: grass, trees & texts.
Also, since the file size was not a big problem this time, I could use the verbose
requestAnimationFrame to be more mobile friendly, and add a nice intro with a custom cut-out typography. The first versions of the intro used the system font. This was very compact but gave zero control about the exact position, size and shape of the glyphs so I went on to craft a nice path spelling JS1k.
Here is the original, and commented, source code.
For now my 4 years old daughter likes the little train and forest once the JS1k logo has moved out of the way, but she wondered why she couldn't hear the train. I would appreciate any help to explain why daddy didn't manage to make a proper 'choo-choo' train in 1kb.
Also you can find the JS1k 2015 invitation at Pouet.net. Suggestions and comments are welcome. But above all, go and make an entry for JS1k.
Other recent projects
There are many experiments and projects like JS1K 2015 INVITATION to discover other here.
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking or performance opportunity.