Protozoa by Almagest | BLAME ============================= URL.........: http://almagest.modmancer.com/protozoa/ Group.......: Almagest (http://almagest.modmancer.com) Music.......: BLAME (http://www.blame-industrial.com) Rls.Date....: 15-May-2011 Platform....: JS/HTML5 Genre.......: Trackmo (Browser demo) Filename....: protozoa.js Requirements ================ This demo requires a HTML5 capable browser such as Chrome, Firefox 4 or IE9. I would suggest you to watch it in Chrome or Firefox4+ for best performance. Firefox 3 has a terribly slow HTML5 performance, so please don't ruin the experience :). It has been tested on 2ghz dual core machines, and maintained a stable frame rate of 25 frames per second. If you experience slower framerates, i.e. choppy animations, freeze frames, etc., check your browser version (see above). Credits ================ Music.........: BLAME (http://www.blame-industrial.com) Code..........: Akiko / AGT Closing.words.: Blue Imp / AGT Story ================ It's been a while since the day we made the last intro. In the course of last 15 years our demo group discreetly dissolved, our lovely amigas all either sold, expired, or left to wither in the darkness of our basements. Coders became programmers, graphicians became artists, musicians.. well either slacked or founded bands! And yet today here we are, some of us, most of us, reviving the good old days, in another, different way, riding new platforms, but basically still doing the same things we did before - code, play, assemble, enjoy. It's less than a month since BLAME (Akiko's band) released their second CD, 'Convergent Fields' (http://www.blame-industrial.com - grab it for free), and we are already proud to present our first demo (well, technically, it's a trackmo, but lets not be too picky), called Protozoa, for the same titled song. Enjoy it! Keywords: nuclear, radioactive, blame, cellular, automata, half time. Members ================ Akiko (coder / musician) Ancient (coder) Blue Imp (multifunc) Imperium (musician) Future ================ One could expect some additional make up work, better sync with sound, and maybe a resolution agnostic version of the demo. Port to some other platform, even standalone? Yes, maybe. Would be nice. Source code ================ All sourcecode is open and unobfuscated, you can use it freely if you want, but it would be nice if you credited me :). Akiko. * * * Devlog ================ Author: Akiko (Boris Posavec, coder / Almagest) Making of Protozoa JS Trackmo. Started: 12-Mar-2011 20-Mar-2011 =========== Trying out another fast blur hack. It's not based on filter kernels, but a simple (and also inaccurate) multi-blender. The idea is simple: given a size of the uniform grid (3x3, 5x5, 9x9 etc), it calculates alpha_value = 1.0 / size*size, and then blits size*size times the sprite with the alpha_val, properly offsetin each blit, so that the image remains centrally aligned. This is faster than gaussian blur or any other kernel blur, because it can be done in realtime, without too much impact on overall performance. Of course, depends on the sprite size you want to blit. If this appears to be too slow in the end, I might have to precalc the blurred images, and then blend from one to another, should give approximately the same effect. Another note to self: context.putImageData ignores alpha blending. For this reason you need to render imagedata to canvas, and then call context.drawImage(). Both are native functions, should run fast. Prepared cellular field class, that manages cells. Added simple camera centered 3d projection. Added gentle fov sine morph, creates a nice discrete, under-water, effect. Added field rotation around the camera. Decided to use scale and opacity change instead of blurring the particles. For now at least. Added z-sort, sorting particles back to front for correct alpha blending. 21-Mar-2011 =========== Added basic cellular evolution: cells grow up, and after a while explode splitting in two. For better visual impression, i let them twitch a bit before exploding, and the two pieces go in opposite directions, with random velocity, and constant friction. 22-Mar-2011 =========== Optimized my vector and matrix library. In js I would strongly encourage everyone to use good old c-like functions for high frequency, or performance critical operations, and avoid 'classes and oop'. I rewrote my mat4 and vec3 to be simple value containers, and turned all the methods to standalone functions. Finetuned initial camera movement and rotation. New idea: after the initial evolution, all the balls should start collapsing to 0,0,0 merging into a giant 'sun'. With each implosion, the sun grows bigger, and finally it explodes, emitting back all the balls into the empty space. 23-Mar-2011 =========== Working on gravity - after the cells finish their evolution cycle, gravity towards zero starts imploding them. a) First experiment - not really a gravity fn, but: acceleration = 1 / distance_sq * GRAVITY_CONSTANT. This made very interesting effects, not what I wanted in the first place, but the scene was rather explosive and dynamic, no gentle curves, and friction, but super-accelerating bullets. b) Second experiment - gravity tensor. Looks nice. 24-Mar-2011 =========== Trying to figure out how to get coroutines working in js. They are supported via iterators, as of v1.7. But so far no luck, iterators (yield stuff) only works in firefox, since ff is the only one *really* supporting js 1.7. Ok, gace up on this iterator stuff. It's widely unsupported. Coded my own, simple, imperative stack: this.g_list = [[0, "SUN_MASS = 0;", 1], [15, "SUN_MASS = 1.0;", 1], [20, "SUN_MASS = 0;", 1], [25, "cf.explode(300);", 1] ]; first param is time code (in second) when to trigger the action. second one is js code to eval. third is wheter to call this every frame during the period of this action's life ( = 0), or just once ( = 1). 25-Mar-2011 =========== Sick of chasing bitmap fonts around the net. I decided to code my own ttf -> png routine, with equal spacing between the characters. Did it in php, it's really down to 20 lines of code, thanks to GD library! I never loved php, I just spent too much time working with it, so I adopted it for scripting simple hacks, it's easy to go with, if you don't care about performance (well, who gives a dang, it's good for offline processing, few minutes, or seconds more, doesn't change a thing, most of the time). When i wrap up the code, i will post it to dev.modmancer.com for download. 29-Mar-2011 =========== Came up today with a new idea - packing cells into hexagonal close pack structure, maybe not in 3d, but only in 2d, and then discarding parts of it to make it look like a cellular colony. This might prolong protozoa dev for a few more days, but I desperetly want to try this out. First step is to create a 2d square grid and then populate part of it, starting from a center, and growing iregularly. Ok, 1st version done. It's nice, but still needs too much work.. some other time maybe, I will use it for some effects later. Next step: load the png bitmap font, and start making the interesting typewriter. The idea is simple: display word, but then start rotating vocals, one vocal in each word, not all vocals, randomizing the letter displayed, with some pause/delay, and after a while park it correctly. Idea #2 - fade in words. And let them disolve by scrolling each letter upwards, with random time delays. While doing that, let them gently fade out. Maybe even combine idea #1 and idea #2 into a single typewriter. 31-Mar-2011 =========== Finished the state driven font writer (codename zoa_writer :P). Looks nice, fades in, holds, rotates letters, fades out. Will add the letter disolving moments later. Added random select vocal from word, and rotate it for some time, then park to original. 1-Apr-2011 ========== Interesting link: http://www.complexification.net/gallery/ . No work today, just researching. 2-Apr-2011 ========== Sitting on the plane to Frankfurt, reading about sound capabilities of html5. Demise. If people would support Mozilla's SoundManager API, that would be great, but for now we are stuck with simple audio tags and/or flash players. Ok, added Audio() to the demo. Will hold water for this production. 3-Apr-2011 ========== Revisiting friction of the particles. Need something more robust. I did a quick performance test on firefox vs chrome... firefox 3.6 is so much slower when it comes to blitting (both solid and transparent) on both win32/64 and linux! This could be a show stopper for the demo for people who don't have chrome. Need to test it on iexplore9. Ok, managed to speed things up by simply reducing the number of sprites... Seems it doesn't care if it is transparent It's amazing how much differences simple tags introduce. It's amazing how browser developers environment agnostic are. For example: take mp3 and play it back in chrome, via: var snd = new Audio("test.mp3"); var snd.play(); And then do the same thing in ffox. Chrome will playback mp3 with no trouble at all, but FFox will not. If you convert the same sound to .ogg, ffox will fulfill its duty. Stupid, isn't it? Rewrote my imperative state machine - it's now time line event playback machine :> Support unlimited concurrent events, plus each event manages it's own playback duration. Supports callback fn's as well, instead of eval'ed code. 4-Apr-2011 ========== Finetuning protozoa today! Got the right speed for the background tissue parallax layers. Added damped springs for camera rotation transitions. The ie9 was not working yesterday because I forgot the proper header: ... Now it's ok, as much as the demo is concerned, it runs with stable 25 fps, but now the problem is sound.. while .mp3 was not loaded by ffox, .ogg is not loaded by ie. I need to detect which of the two browsers I am dealing with, and then load .ogg or .mp3 respectively. Boy this sucks. Checked FFox 4 - guys did a great job optimising javascript! It runs now at a more or less stable rate of 25 fps. Added screen distortion effect - pops in occasionally. Added browser detect script (http://www.quirksmode.org/js/detect.html) to correctly choose mp3/ogg depending on the browser. 5-Apr-2011 ========== I optimized the visible area, remove any drawing outside the visible window area. I like cinemascope's, they always add up a bit to the overall elegance :) 14-Apr-2011 ========== Finetuning demo flow. Cell splitting is now controlled by cell_field via split flag. 15-Apr-2011 ========== Added procedural cam shaker, and distorter. Added gravity beat boxer for last half of the demo. Tried to sync up with music, but that seems almost undoable, at least if you want to do it precisely. Todo idea for the last part of the demo: * render screen on the left part of the canvas, with half width. * on the right part, scroll text. good old demo finale from the '90s :) Later the same day! I presented the demo to my crew, we watched it on a beamer, looked very nice. Though I think I will change the resolution to 800x400, need more elegance :) 16-Apr-2011 ========== Ok, today I finally finetuned beatbox galaxy effect, and camera shaker. I also added the fastest you can get pixmap inverter. This will occasionally popup during cam shakes and zoomins. To make demo flow tuning easier, i added fn to ffwd demo to a specific moment in time. It's impossible to tune lets say second 220+ when you have to watch each time the whole demo 220 seconds long prior to seeing an error in the flow. Added vertical scroller for the closing words. Optimized to render only visible characters. 22-Apr-2011 ========== Today Blue imp wrote closing words for protozoa trackmo.. couldn't wait to put them in. ended up breathless. The change in atmosphere is such that it made me think of protozoa remix (1.1) which would feature the lyrics as subtitles during the whole song. Some interesting links gathered in the process of making the demo: * misc: http://video.google.com/videoplay?docid=-5831980170006199093#docid=3228679099067764075 * nice collection of webgl stuff: http://alteredqualia.com/ * canvas resizing, but preserving the last content: http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element