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.
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- THEY COME AT DUSK 👺 A survival horror game for JS1k 2018, where you run away from dead miners as you hear your heart beat. Turn around using the arrow keys until all you hear is beeeeeeeep.
- DRAGON PUNCH An itsy bitsy Dragon curve renderer in 121 bytes.
- THREAD JS Breaking the 64 bytes fronteer with the famous "10 print" maze generator.
- MINAMI DISTRICT DEMOJS 2013's winner 1k intro. With MINAMI DISTRICT I wanted to do something fresh. Something never seen in normal demos before: A city with a twister skyscraper.
- EQUALIZER A little intro for the famous Equalizer BBS made in 4kb for MSDOS
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.