It’s time to get the bum mad rush go yes no!
Archive for the ‘Demos’ Category
There were 4 categories at DemoJS: 1k, 10k, demo and wild. 1k is mostly for 1 trick ponies and it’s typical playground for webgl experiments, not what i was looking for. Demo would require a dedicated graphician to work with, so i also set it aside. Wild would have been great for something similar to “Under a Seering Sky”, but i was running out of time to make two prods. 10k seemed more appropriate to aim for. So now that i knew the target, what i was missing was a good tune with small size. Fellow TPOLM’er Kaneel was recruited for the job. Our aim was to do a haterztro, sending joyful fuckings to all the folks that enjoy talking shit about us whatever it is we do. Inspiration from the epic B.o.B. track Haterz Everywhere popularized by machine drum on lazy sunday radios of old.
Research and development
Focusing on the 10k category i did some research on available sound apis and concluded we had 4 options to chose from for our plan to world domination to have appropriate sound:
1) bytecode music. Has the advantage of taking much less size, ideal for 1k and 4k. Has the disadvantage of always sounding like crap made my coders fooling around.
4) jsmodplayer. Has the advantage of the musician being able to use a trackers interface to compose the track and the replayer been around longer then the other options so more likely to be something stable. Has the disadvantage of easily getting too big in size if the musician is careless with selecting his samples and patterns.
1 week before the event we started having some test tunes we were both happy with. We did a couple of interactions of syncing effects and reworking the track a bit. Unconsciously we morphed the original haterztro into something more TPOLM like.
We tried to follow a few basic TPOLM guidelines:
1) being informative
2) featuring tunnels
3) greeting TPOLM
4) being short and to the point
Information on Parsley was added. Unfortunately we had to cancel the second point of compliance with TPOLM technology guidelines. Even though we actually had a tunnel effect working, it was running in much too low framerate to be worth releasing. Greetings featured TPOLM. We focused on the theme keeping it short and not boring.
So the guidelines were more or less followed, further consultancy with our vintage superhero Antti “fthr” Jadertpolm confirmed the authenticity of our alignment. We spent some more iterations polishing colors and lyrics.
At some point in time i was spending a bored evening and checked flight prices through ryanair to Paris, it was quite cheap to go from Porto, which i would be visiting at the time, so i booked the tickets on impulse. From that point on i really had to finish something decent to present at the event despite starting to run out of time.
Then, suddenly, just a few days before the event, i heard of a planned air traffic controlers strike being announced for the dates of the event. Confirmed the clash at the Ryanair website, they only mentioned to stay tuned for more information. Unsure if the flights were still flying i carried on polishing the intro with the help and consultancy from kaneel and fthr.
Then, just as suddenly, Portugal lost the semi-finals match of the euro to Spain.
Then, even more suddenly, the air traffic controllers strike was canceled and all flights were announced to be back on schedule. Hooray! The plan to become hopsters in Paris was reinstated once more. I informed the family, swapped meet up information, set my alarm clock and packed my computer bag to go to Paris the next day.
At this point the intro still had some small things needing polish and we were deciding between an easter egg secret part or adding some vector graphics to fill up the remaining space of the intro. We had 500 bytes left to fill up with something.
I met up with Kaneel on Friday afternoon after a long travel without food and we babysitted his daughter for a while, then went shopping for beer and took her for a walk in the park before another party visitor and the babysitter showed up. The afternoon was going by quite fast, the beers also, and we hadn’t even made it to the partyplace yet. But it was now just a couple of metro stops away! We exited the metro at Bastille and found our way to ISART, the partyplace.
Upon arrival we immediately met some other foreigners and instead of working we continued our hopster beer adventure through the night. After too many beers we finally decided we should probably try to get the intro finished instead of just getting drunk.
We only needed to fix some syncs in the greetings and add the coat of arms graphics, should be easy to do. Right?
Getting a place to setup was easy, everyone was watching a screening of Moleman 2 while we wrestled with the WiFi… It was supposed to exist but it didn’t. We needed internet to convert the SVG into canvas code, so we bothered the organizers. After a few hours and a few more beers the internet was working again and a converted version of the SVG was now in place. The intro had just bumped from 9k to 12k. Let the optimizing begin!
Kaneel was playing demo VJ with the big screen while i tried out a few optimization tricks. First manually removing the weird animation junk code from the svg conversion. Then removing some decimals from the bezier curve data. Then removing all decimals from the bezier curve data. Then removing some of the bezier curves themselfs. Just had to make sure the quality was still acceptable.
At some point Kaneel had to leave for home and i took the wonderful opportunity to get some food. Returning to the partyplace most of the people had already gone to sleep. Our intro was still at 11k so I carried on optimizing some more. Next step was removing functionality from the AHX replayer that wasn’t beeing used by the track and hacking some functions to generate data instead of using the lookup tables. Still too big.
Compress me beautiful
Re-watched p01’s talk on creative coding and size optimization to remember a few tricks. Replacing all Math.floor calls with 0|, dirty trigonometry, function hashing, etc. Function hashing called for some more wrestling with closure compiler to get the intro working again.
After a long night of trying several updates and reverts i was still 500 bytes too big. Trying out JsExe instead of PNGinator would give some better results but still always 40 or 80 bytes too big from the 10240 limit.
I started comparing the code directly with the closure compiler version. I noticed that some optimizations i would do would size down the closure compiled version significantly but have little impact on the final .PNG size. This can be explained by common compression entropy, the compression takes heavy advantage of repeating elements, so the more and longer repeats you have the better it’s ratio of compression. When you replace the long repeats for smaller versions you are doing work the compressor would do, and probably doing it in a less optimized way, so you end up losing compression ratio, making your optimizations worthless.
Ofcourse i could just cut the graphics out of the intro and go to sleep, but that would be cheating! I took a couple of breaks to refresh myself and went back at it. But i was still at a dead end, trying some new desperate hacks and the best result i could still get out fo JSexe was 10260. I decided to bug Gasman, asking for his opinion if i should keep trying to optimize the closure compiler to the max hoping that eventually the final size would start also decreasing or try to rearrange data in hopes it would pack better. Gasman took a look at my code and paused at the AHX track loader. I been loading the track by including a base64 encoded version of the track and decoding it on load. Gasman had the idea to replace the base64 with an url encoder. The string would no doubt be longer but the PNG compression should compress it better, also we would be able to replace the 2 functions related to the base64 utf8 decoding with an eval().
Gasman went off to write a binhexjs.rb while i forked the sourcecode and aimed for some heavier closure optimization. Half an hour later we merged both our efforts and the final size was now around the 9700 bytes. Success!
Idling with style
Entry finished and submitted! Now all that was left was one whole day of doing a bucketload of nothing.
Saturday morning was completely uneventful.
Saturday afternoon had some interesting talks, most of them in French sadly enough for us poor foreign visitors. Went outside for some beers with old scener friend Flod who was briefly visiting the partyplace. Bastille was of the centers of the Parisian gay parade happening that day, so everything was packed with colorful people and rainbow mayhem. We eventually found a bar and after a couple of beers headed back to DemoJS.
The rest of the afternoon was spent socializing with other foreigners and making some new friends. Mostly drinking beer, explaining the scene to a new musician and waiting for the compos to start. DJ Pie was playing a set but we somehow managed to miss it.
The organizers came outside to warn us the compos were about to begin. “Everybody in, everybody in, the show is about to begin.”
First up were the 1k. Plenty of entries, most of them without music but still mildly interesting. The last to be shown was Matraka, a joint work of p01 and 4mat, blowing all the competition into second league.
Next the 10k, featuring only 3 entries. The first was Reborn by tmp & Adinpsz, a simple terrain generator with some 2d trees, nothing fancy but people seemed to like it. Second up was a co-op by Rift and DSS titled mwwnwormer, a dark side of the moon raytracer with some music using jssonant. The graphics looked pretty good and it quickly became clear they would win the compo. Last up was our entry, Parsley State by TPOLM, there were a couple of bugs showing, but people didn’t seem to notice and veemently applauded when it ended. I was pretty confident we would get second place at this point.
Still left to show was the wild compo, only 4 entries, one of them didn’t really work due to an unexpected update on chrome. The best one was clearly the Turbo Out Run clone game, even if it didn’t have sound.
Last but not least was the demo compo. Not many entries, only 5. A couple of compo fillers and fast made prods. The most polished entry seemed to be BIGintro by The Matadors who oddly to me ended up placed 3rd in the final results. The democompo winner being Burnt by Games From Mars, which was nice but clearly rushed for the compo.
After a quick online voting session final results were presented with a little closing ceremony. We were granted the last place and asked to come on stage. 🙁 I thanked the audience with an important message from the moomin: “Remember to use more parsley when you cook!”
The remaining night was dedicated to uploading the entry online, decompressing and getting some sleep. Next day was travelling back home day. Spent some airport time getting started on this making of report and figuring all the things i had left to do when i arrived home.
Was happy to notice people on pouet seemed to be thumbing up Parsley State. Nice not to get hated on a new release for a change. Even though we still got last place in the compo.
Dealing with advanced technology from the future can quickly become complicated, with this in mind the planet of leather moomins intergalactic conspiracy empire has emmited this special making of report of their latest hit single Cyboman 5.
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 demoparty.net 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.
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.
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.
Final version of the Assembly 2010 demo by Satori & Lackluster is out. The demo speaks for itself, and the track on this one is truly amazing. It’s the Anodyne: 707 (Lackluster foiled_again Remix) from the Anodyne remix ep out on Psychonavigation Records, with remixes from Autechre & The Black Dog, among others… but Esa pwnd that record.
Rez is now making awesome productions and releasing them under the prestigious Razor1911 label. The newest is this one from the Revision party… Going deep into the essence of Rezness! Music by Dubmood.
Found from the tpolm.org picture archives: here’s a picture Lassi drew, showing how the bass sound in the module works, for visually synchronizing the tunnel in the TPOLM demo “The day the earth was born”.
Haven’t you ever woke up with a deep yearn to watch all your favorite tpolm demo classics playing in a cube? I know i have. Well, now you can:
welcome to tpolm in YouCube.
This list contains many classics and some rarities like this bC! demo with an awesome acid tune from 1999 :
Made for the ZX Spectrum in collaboration with our Russian friends, this demo won the Alternative Party 2007. It is conceptually about the death of people close to you and the channels of energy that flow in the universe.
Made for Buenzli 2007, this demo was prepared in a couple of days at a secret bunker in Koln owned by our 5711 friends and explores the revolutionary overhead projector extra sensorial platform for artistic intervention.
Released at Mainparty 2006, this is an invitation for the Lazy Sunday Radio, done for Playstation2 by Knos.