noCreativity.com » World 360

Little planets and recurring spirals

Ronny — Mon, 29 Aug 2011 11:27:44 +0000

Let’s start this week by being in awe. Check out this reel by Frank Beltrán. It’s all about taking existing photography concepts and techniques, and applying them in video. The result is amazing. I’m pretty intrigued by how the recurring infinite spirals are done! It looks amazing! (here’s a little behind-the-scenes). I myself have been playing with the ‘little planet’ effect quite a lot (for example here), but Frank’s demoreel makes it clear that he completely mastered those techniques. And that’s what demoreels are for: Showing what you’re made off and you, sir Frank Beltrán, seem to be made of solid awesomeness.

World360 update, now with PNG bug!

Ronny — Sat, 14 Feb 2009 21:17:01 +0000

Yesterday I decided to get back to my so called ‘World360′ experiment. I wanted to speed up the pre-rendering engine. I managed to do that, with some amazing results: Up to 3 times faster overall. Peaks of 800% speed gain!

You can view the previous version here.
The latest version can be viewed here.

I’m very happy with that, but there’s one little problem. I started to notice a very ugly black border around redrawn PNG transparency (which happens when the animation is pre-renderd).

Result without redrawing bitmap (aka: real time rendering)

Result when redrawing the bitmap (aka pre-rendering)

I have no clue what is going on… I have been looking into this issue all day, to no avail… If anyone knows what is going on, feel free to enlighten me.

The PNG file is fine, it’s not corrupt or badly exported, since it works just fine in different versions of the render engine. I do however wonder if redrawing a bitmap over and over again doesn’t create some kind of noise.

If you feel like giving it a shot you can download the .as file here, or get the complete Flash project (.fla + .as + assets) here. (The code is quite messy… Just so you know )
If anyone can point me into the right direction, your help would be much appreciated (and you shall be remembered forever)!

To illustrate the difference I uploaded 2 more versions.
Check out the previous version here (longer render time, but no PNG problem).
See the latest version here (using the faster implementation, generating very ugly black borders).

Edit: You can download the sources for V9 and V10 here to see the difference of the result.

Bitmapdata == 201% coolness: World 360

Ronny — Mon, 13 Oct 2008 22:23:22 +0000

Sommigen die mij op Twitter volgen weten zonder twijfel wat ik bedoel als ik het over ‘world 360′ heb. Degenen die dat niet weten: Welkom in een trip door mijn absoluut geschifte brein.
De term World 360 heb ik in feite gewoon bedacht/gekozen omdat we van een 360 graden panorama foto een ‘wereldbol’ maken.

Op MultiMania 2008 heb ik Group 94 gezien, en hebben ze enkele van hun projecten en trukjes blootgelegd. Een behind the scenes van het waarschijnlijk meest gerenomeerde webdesign- en multimedia bedrijf van België (volgens mijn bescheiden mening). Ze lieten onder andere de Nokia – Non Stop Living site zien; een site waar ik al langer van wist. Ik was altijd compleet onder de indruk van de effecten en transitions die deze site te bieden heeft.

Lange tijd heb ik me afgevraagd hoe alles in zijn werk gaat. Op een dag wou ik het weten en begon ik m’n hoofd te breken in Flash en Actionscript 3. Op MultiMania wist Julian (Group 94 member) te vertellen dat de ‘intro animatie’ on-the-fly opgebouwd werd (aan de hand van ActionScript). Ik vond dat best wel een gewaagde zaak, aangezien het toch veiliger was geweest als men die intro had gerenderd, en dan als video had gebruikt in het project.
Maar voor mij maakte dat opeens allemaal niet meer uit: Ik wou het ook voor elkaar krijgen.

Ik heb hiervoor verschillende keren moeten herbeginnen. Maar stap voor stap kwam ik dichterbij wat ik wou bereiken. Ik dacht eerst dat het grootste probleem het ‘in stukken knippen’ ging zijn. Maar dat bleek niet waar te zijn. Integendeel: Dat was zelfs erg makkelijk. Het werd pas moeilijk als ik de individuele onderdelen wou gaan animeren. 360 bitmaps bijna simultaan tweenen is niet bepaald processor vriendelijk, zo bleek.

Eens ik daar geraakt was, was ik al vrij tevreden: het uiteindelijke effect was er al. Nu alleen nog wat machinevriendelijker maken. Maar daar was het probleem. Ik bedacht mij of er geen mogelijkheid was om on-the-fly een sequentie aan beelden te maken. Al vlug gaf ik het idee op, en ben ik nooit aan de code begonnen. In mijn hoofd zag ik namelijk het RAM geheugen door het dak gaan.

Enkele weken later las ik op Keith Peters’ blog dat Julian van Group 94 het effectief op die manier had aangepakt. Ik moest het dus ook proberen op die manier… En wat bleek: Het werkte! (DUHH!)
Ik kreeg het voor elkaar om de animatie te pre-renderen en daarna te laten weergeven. Het resultaat was één smooth-as-fuck animatie. Enige probleem: het RAM geheugen leidde er (zoals ik had voorspeld) echt onder. 900-950MB voor de 380 frames van de animatie.

Ik heb er lang op gezocht, maar de sleutel tot succes bleek gewoon een wat kleinere bitmap te zijn. Door de afmetingen van de bitmaps deels aan te passen slaagde ik erin om 600MB af te knippen. Het resultaat gebruikte 250-300MB, een veel redelijker getal.

Ik ben al erg fier op het gehaalde resultaat. Hieronder kun je de verschillende fases van mijn vooruitgang zien. Ik was van plan om de bron hiervan vrij te geven, maar ik wil het nog even voor mezelf houden om zelf nog wat meer zaken uit te pluizen.

Basic versie: Twee.
Real time animation versie: Zeven.
Full blown prerendering (kan je browser crashen indien tekort aan geheugen): Acht.
Optimized prerendering: Negen.

De volgende stap is nu om te zien hoe Julian en zijn collega’s deze ronde wereld laten ‘openplooien’ tot rechte wereld… Lijkt me allemaal nog net iets gecompliceerder te worden nu…

PS: als iemand een leukere panorama afbeelding te bieden heeft: aarzel niet om suggesties te posten. Ik ben de huidige zowat beu gezien