Saturday, 26 January 2013

Making of: Cyboman 5

Dealing with advanced technology from the future can quickly become complicated, with this in mind the planet of leather moomins intergalactic conspiracy empire, whose sole Portuguese member happens to have co-founded the xDA medialab hackerspace, has emmited this special report about the making of their latest hit single 4k: Cyboman 5 (link).

Step 1) chose your compo wisely

If you are not aware where to find running compos you should consult the internet and for example follow for a listing of recent events on the so called demoscene, several competitions will be provided for you.

For Cyboman 5, the Stream Tiny Intro Compo was selected as target. Once your target is obtained you can have strategic advantages by consulting results from editions of the event and procuring information on what other groups are planning to develop. If you do a careful analysis you may be able to obtain several bonus points and achievement unlocks.

Step 2) select your weapon of mass destruction

To ensure world domination you need to have a weapon. several mixes and dance tracks have been put together in the past, but none can outrun or equal the power of megablast. you should refrain from selecting a weapon of mass destruction you are not very familiar with. this might cause you to waste time dealing with language and operational logistics rather then focusing on the actual extermination of all resistance.

In the case of Cyboman 5 our weapon of mass destruction was javascript canvas. Most players seem to prefer the abuse of shaders under WebGL, or facilitate their byte crunching work with native toolchain compilers. Our objective with Cyboman 5 was to push javascript native capabilities (no WebGL wanking), this ensures higher machine and browser compatibility at the expense of some mindcandy tricks. Finding a creative escape to non sensical limitations is also part of the planet of leather moomins survival ethos.

Step 3) effects

Having a wide range of effects available at hand is always essential for a successful world domination attempt. The typical TPOLM world domination consists of tunnels. I wanted to escape that cliché and focused on doing basic 2D canvas experiments for later complexification.

I developed a total of 10 different effects before even considering a concept or finding a music for the entry. Simple experiments including shape animations, rotozoom, Generative color complementors, repeating text to be used as texture, motion blur, plasma filters, alpha transparency tests, etc.

Step 4) music

Music is one of the key elements of a successful world domination. Good connecting music makes or breaks an entry. Since i was aiming at the tiny intro competition, the most simple way to have music would be to code some.

Luckily for me several experiments with tiny audio code have been done and publically documented. Most of them based on the work of Viznut and a certain thread. Online javascript players provided a platform for testing ideas and some sourcecode ready for crunching.

Additionally to the tiny music player a speech synthizer was also used, mostly copy pasted from work of p01.

Step 5) concept

One trick ponies are usually boring. And most tiny intros are usually one trick ponies. Real world domination comes from using your restrictions to break this cliché and do something else.

So after a few audio experiments a concept was developed. Something overly energetic, ahead of it's time, with a technologically advanced mentality. Counterpointing the technologically advanced we have as comic relief the unavoidable fact that it is running on a mundane platform and based on simple 2d graphic effects abusing overlays in an over-complexified manner to produce a more murky, raw and industrial visual approach to connect with the sound.

Cyboman is a series of DOS intros from the 90s, done by different groups at different times, all of which claiming to be technologically advanced, some taking it more seriously then others. A newschool joke sequel to this concept felt appropriate, and so the entry was named Cyboman 5 and introduced as not being titled Cyboman 6.

Step 6) crunching

Crunching your code is the most important part of developing a tiny intro. Some golfing skills are required but not strictly mandatory. For this intro the original source code was 11k long. A few simple size optimizations made, plenty of room to optimize further. A minified version was then packed with UglifyJS to make the code 8k big. Still with plenty of room for further optimization, UglifyJS is good and fast compared to other minifiers out there but still leaves lot of room for manual optimization.

At this point you could pack your intro further, either manually or with actual packers that eval the packed string to self-execute your packed code. But recently there has been some work by Daekan, p01 and Gasman on a PNG self-executable which i wanted to give a try. So i gave Gasman's pnginator a go and managed to have it down to 4k without requiring much further manual optimization.

Step 7) presentation and aftermath

Last step on our journey for world domination was to deliver the entry and make sure it got played properly. The submission system as Stream 2012 wasn't actually working, so i resorted to mailing a link to the organizers and confirming they had received my entry before the compo started.

Entry was played halfway in the compo, music volume too low, mild clapping at the end. Was abit disapointed that people didn't seem to really get into it at all. A few other entries played after mine and got a better public response, so world domination became a dimmer possibility. Personal feedback from other attenders was positive, ranging from borderline indiference to best of compo.

sourcecode @ github

This report was originally posted at The Herring and xDA.

No comments:

Post a Comment