This is the story of Leviathan Sun, a poor and helpless 4k intro for the modern day browser, that uses the HTML5 canvas and audio api's with javascript to create a generative audiovisual experience.
The quest started when noticing i had a ticket but no entries for the Payback demoparty which was occuring in just a few weeks in Helsinki, Finland.
I had a few leftover javascript effects that never got used and decided to try something out, either a 64k or a 4k. Slapping the "framework" together was quite simple, just a few copy pastes from older similar projects.
The first bump on the road was getting some sound. The alternatives were to try and get a musician to do a .ahx, it kinda worked out ok when we used it on Parsley State, but it's hard to find people willing to track in ahx in 2013. A close alternative was to convince the musician to do a .mod, but only replayer for mods on javascript is buggy, so you might be shooting yourself in the foot by trying to use it. Ofcourse there already are some softsynths ported to javascript like js-sonant and sorollet. And then there was also the possibility of trying out GLSL audio, which seemed like an interesting concept, but i was running out of time and the prospect of having to learn the ropes by myself wasn't very appealing at this point. I ended up trying some algorythms of bytesize music code and after discarding most of them i finally figured out a couple of nice drone loops and some subtle glitch percussion texture.
The idea was to make the intro generative, that means that it takes a seed value and the content is slightly different depending on that seed. I had already implemented a similar concept regarding haikus for my Recycle Bin Laden web art project. So it felt obvious to connect both projects under the same roof.
The original idea for the generative aspect of the audio was to have several channels of different loops, which would be randomly selected to be included or not, and all of them have generative ADSR, that means that out of 4 channels, there was a possibility that only 2 of them could be played, and one of them have a quick fade in and long fade out while the other have not. Additionally the speechsynth would read out the current seed value, marking the tempo of the audio. After a few tests and debug sessions it became obvious on aesthetic principles that the tracks weren't really fitting together very nicely and that the ADSR trickery was mostly not working out at all. So i picked the best drone loop, turned it into a slow buildup, tuned the percussion elements to work abit better together and added some generative parameters to the sound (such as the tone of the drone, the probability of the speech synth being played at all, etc)
The visuals were 2 similar effects overlaid on top of each other. Both of them simple implementations of psychedelic centric circle effects references. Added some generative parametrization to some of the variables used, some occasional extra elements like the circles, the glitching bars and the possibility of a strobe effect.
Following Murphy's law to the book the version that was randomly selected to play on the big screen at the partyplace was of a horribly high pitched drone with an extremely abusive strobe and no speechsynth at all, which managed to alienate anyone from wanting to watch it till the end, forcing the orgas to censor it and causing everyone to completely miss out the build up hypnotizing concept of the piece. In retrospect, it quite successfully maintained the long track record of minimalartifact releases failing miserably to get displayed as intended on a big screen at party events.
After party comments seem to be mostly positive. Which is quite nice.
One last issue worth mentioning in this report is the heavy RAM required to load the audio buffer. Even 2 gigs sometimes aren't enough and manages to freeze the browser. Generated audio is a lot of data, but it shouldn't choke a browser to death. It only goes to show how beta the realtime usage of audio and graphics on browsers still is, hope to see some improvements on this department, not sure who to poke on the browsers teams to get this investigated and added to the dev roadmap but sure would be nice to be able to use improved audio api's.
Showing posts with label 4k. Show all posts
Showing posts with label 4k. Show all posts
Monday, 4 February 2013
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).
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.
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 pouet.net 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.
Links
online
sourcecode @ github
pouet.net
This report was originally posted at The Herring and xDA.
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.
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 pouet.net 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.
Links
online
sourcecode @ github
pouet.net
This report was originally posted at The Herring and xDA.
Subscribe to:
Posts (Atom)