Category / Actionscript3

Bending basic volumes. July 21, 2011 at 1:30 pm

As this years Flash on the beach is coming closer, it´s about time to finalize my latest stuff and experiments for my upcoming session (… ‘and hell yeah!’, I got lots of yet unpublished things & demos to show this time). In doing so there´s lot of snippets and try-outs that I just used as tests to get certain results or insights and that didn´t make it any further.

Including following little snippet which I just developed to test possible maximum speed of combining Flash10 + Pixel Bender to use for raymarching a set of basic volumes like: a torus, cubes, spheres and cylinders (all of whom formulas to create ´em can be found here). Keep in mind that prementioned combination (Flash10/Pixel Bender) is not pretty well known for it´s supersonic speed ´cause of not having GPU acceleration, so I was quite sceptic of what I could probably tease out there.

But, surprise surprise!!! …gettig it all up and running by having >55FPS on average was a big ‘aha moment’ that I didn´t expect AT ALL! This was even better then I ever expected - so I took this little test as a basis for developing a demo which will first be shown at forthcoming FOTB (…interested? Better get your ticket before last ‘Early Birds’ are out of stock).

Need an appetiser? Bon appétit… (loading the audio first of all  may take a little while)

Bending basic volumes
Launch
(origin size)

Launch (fullscreen)
 
Well, like a said before - this is probably my last post before FOTB because I´ll now take my time to finalize the demos and experiments for my talk - so, see you there!

Blobsphere. May 15, 2011 at 4:26 pm

…or the like, that´s what you get if you create patterns on a sphere, zoom into and point the camera at it! Bygone times I was a bit too quiet  at this place, but finally I found some time to again start with working out new ideas and snippets.

This… plus I´m working on a new demo right now for my next talk at upcoming ‘Flash on the beach - conference‘ this September, which I´m already super-excitedly looking forward to!

Well, as I mentioned already, ‘Blobsphere‘ is an odd self-given titel for a little pattern-experiment thats projected onto a sphere. We have a lightsource and bump as parameters to modify and play with. Unfortunately this whole piece wouldn´t run by programming it in Flash only, but thanks to Pixel Bender, and a nifty little trick for optimizing the bump-mapping,  we now can run that ‘baby’ on a resolution of 800×600 pixels. Yummy! ;)

Stop talking, Frank? Ok, here you go:

Blobsphere
Launch

So, until September, still lots of things and ideas to work on for me and my FOTB session, but tickets are already on sale and John once again managed to arrange a great line-up of speakers, so go and get yours as long as prices are low! See you at least in Brighton…
 

Ray marching the distance. March 22, 2011 at 10:46 am

Being right back from FITC Amsterdam and with an eye toward my upcoming talk at the FFK Cologne 2011 conference, I finally found some time the last days to get my teeth into ‘ray marching’ (ray tracing done in discrete steps) once again. It was about time to explore and modify some new or different distance field formulas.

Based on my first ‘Raymarching article‘ I now intended to experiment with various distance field formulas and see what beauty may come to light by applying them. ‘Distance fields’, never heared? Ok, put simply, distance fields provide minimum distances to any surface in a scene from any point. As a result out of this, you can use distance fields as a look up for your rays position and step at the minimum of the returned distance in its direction before a new look up is required. The key thereby lies in defining a distance field cause it offers you the freedom to shape an entire implicit volume or surface out of it. Cool?

Gee, damn cool! Just have a look at Bluflame´s ‘Lunaquatic‘ or Youth Uprising´s 4k ‘Muon Baryon‘. But what´s the catch? Let´s face it. Because when it comes to calculate distance fields, there is the need of using lots of mathematic functions like sin() and cos(), so doing this with Flash might not be your best idea ever. But to say it in advance, I went for a pure AS3 attempt as well, of which more later…

There´s another solution that´s not far to seek by using WebGL GLSL shaders (like i did here). So this time I tried diverse formulas for my distance field and added some more values to the process. For instance, by simply clicking on the generated output image, you can now square the entire field or switch back to the normal view as you like.

square my distance
Launch
(You need a modern WebGL enabled browser like Google Chrome 9+ or Firefox 4+)

And like I hinted before, I was up for coding an AS3 only based raymarcher as well. In the final analysis I must admit that this version is nothing more just like a proof of concept, as it is commonly known that too much of Math.sin() and Math.cos() or Math.sqrt() means FlashPlayer.sucks()! So it´s only logical that you can´t go for any too advanced distance field calculations at all, but still it´s fun, so here we go…

AS3 only raymarching a simple distance field
Launch

Lastly… ‘Phew,’ I can hardly wait to show you some very nice Pixel Bender, Alchemy and Molehill stuff I prepared for my upcoming FFK Cologne 2011 talk, and in the meantime, feel free to download the sources and march into the distance as you like!

All right, see you at FFK Cologne in a few weeks or maybe before that at upcoming Geekybynature conference in New York next week? Anyway, enjoy!
 

Vortex. January 22, 2011 at 2:47 pm

This year´s gonna be awesome! I personally got invited to give talks at upcoming FITC Amsterdam and FFK 2011 Cologne conferences so far (hurry, you may still get the super early bird tickets for both conferences), as well as going to travel to New York together with a decent lineup of friends of mine (like David, Nicolas and Dominic) and visit the promising Geekybynature conference there. Best thing in view of my forthcoming talks is, that I´ll have an utterly new presentation, jam-packed with unreleased new experiments and snippets I´m already burning to show you.

Reverse of the medal is, that working on new stuff and preparing my new talk means not to have that much spare time to release snippets alongside. Until by now…

vortex pixelshader
Launch

The little vortex pixelshader listed above is a Pixel Bender shader implementation of  Mic´s famous Monjori 1k demo-release. Watch out! Yet another effect referring to the demoscene is crossing your path, and of course feel free to snag the full sources here. So let´s heat up for this year and dive into the vortex.
 

TubePilot. December 3, 2010 at 1:18 pm

Procedurally generated tubes and tunnels are one of the classic effects known from the Demoscene. It´s like every brilliant demo simply deserves a cam-flight through an infinite tunnel or the like. For example, ‘You should‘ from Haujobb (a demo group) uses a very elegant flight through a tunnel composed of cubes, or better still, ‘Sult‘ by Loonies (guess what…also a demo group) , which puts forward some very stunning tunnel creations!

So even when it comes to Flash10 and its actual non-hardware accelerated status there are tons of techniques to begin the tunneling. But lets start a bit more basic and use an oldschool technique to build a very retro styled tunnel. The trick in the example up next is to precalculate all distances and angles that we need and store that informations in 2 Lookup tables first, so that we get rid of expensive function calls like ‘Math.sqrt’ or ‘Math.sin’ which are quite expensive when it comes to performance. If we follow that simple rule we easily can setup and handle a very large (800×600) oldschool tunnel:

oldschool tunnel
Launch

All right. Perhaps I shouldn´t leave it like that because this approach is way too ancient for sure! And inspired by all those great demos I got an idea for a little 3D camflight too - working title: ‘Tube Pilot’. The underlying idea was to dive into the inside of an 3D cylinder which is textured with a highly glossy/metallic surface. Well, creating texture-materials and behaviours that imitate specular surface conditions like reflections, glossiness, vignettes and light falloffs isn´t that easy to manage with Flash only because you need to calculate lots of pixels at the same time. So I decided to write some Pixel Bender based shaders which are able to process those necessary pixel manipulations a lot more faster compared to a pure Actionscript solution. Took me longer as I expected to write all those little filters, but by now I feel quite comfortable with the results (you can launch the specular texture creation as extract if you feel like).

Finally the fun part: Finding some interesting settings to rotate, zoom and move the camera on its way through the tube. And hell yeah… the actual state of affairs looks like this:

TubePilot
Launch

p.s.: The last six month I spend lots of my time digging deep into some Molehills to prepare demos and stuff for my new upcoming talk called ‘Realtime (hard)‘ - which I´m gonna give for the first time at upcoming FITC Amsterdam next year. For that reason I´d like to invite you all to come and visit upcoming Flash Platform Come Together in Cologne (11.12.2010, SAE Institute). It´s a COSTLESS meeting! There I´ll do my actual talk ‘Triangle Affairs’ for the last time and, for good measure, show a little sneak preview (a.k.a a demo) of what my latest Molehill generated stuff looks like and what you probably can expect from me next year…

Oops, did I mention that the all smart David Lenaerts (derschmale.com) will give a talk there too?

Better be there!

Voronois and moles. October 29, 2010 at 12:03 pm

This year has been an exciting time so far, personally and from a Flash developers point of view. And looking forward to the upcoming year 2011, I dare to say the good news are - there´s no end in sight!

voronoi

Personally I managed to travel a lot, gave talks on several conferences (like Flash on the beach, FFK or FITC),  and met a lot of great people out there. Simply fantastic! But from a more Flash developers point of view this year was and still is absolutely thrilling. Lucky me I have the fortune to be in the Adobe Molehill Prerelease program, which made my past months and will make my upcoming months pretty exciting . It´s like being in the land of milk and honey where GPU acceleration and Flash is no foreign word any longer! But how does that new toy look like? There a quite a few demos out there since this weeks AdobeMax, all together brilliant Molehill proof of concepts (like ‘Zombie Tycoon‘ f.e.). But as far as I´m concered and of course it´s all a matter of taste (…and I like demoscene kinda stuff first) let me just show you the one that made my week so far:

Considering all that amazing works that are recently been released I can hardly wait to show you some stuff I´ve been working on for the past four months. Thankfully it won´t be long till ‘Adobe User Group Xl - event‘ (less then 3 weeks of counting sheeps) where I´ve the chance to give a talk and intending to release my little ‘Mole contribution’ (a.k.a another demo) there…

Besides the mole, playing around with the given FlashPlayer still is worthwhile and challenging in equal measure. Last week i got some interesting request which made me revisiting my Voronoi experiments once more. Well, i won´t let the cat out of the bag right now because possibly something real amazing might happen to and with my Voronoi approaches, meanwhile let me just show you an updated version of my Voronoi implementation which is able to generate and handle real big-ass regions (like 800×579 pixel f.e.).

voronoi
Launch

Lucky me and thanks again Rebekka granted me to use some of her brilliant photos (you really should visit her website for more) to showcase my recent Voronoi works.

Truly amazing times!

FOTB got Metaballs. September 6, 2010 at 10:33 am

Last week was tremendous, because all of a sudden I got invited to speak at upcoming ‘Flash on the beach’ conference in three weeks, a.k.a somehow got marilynized overnight! Well, time to channelize this 150% pure adrenaline rush I´m running on since then and prepare my session called ‘Triangle affairs‘. It´ll cover a lot of experiments dealing with isosurfaces, 2D- and 3D mesh deformations (of course I´ll show some sort of Metaballs), as well as image processing via triangulation. All together techniques to generate and use 2D-/3D liquid masses, fluid or gooey behaviours real time at runtime. Additionally expect some Arduino Board driven Flash live experiments…

MetaFace
Launch

Btw., feel free to post me your MetaFace-Webcam (third texture option on the bottom right within the snippet) snapshots via this mailadress.

So far so very excited! See you in Brighton…

Edit: Simon just mailed me his MetaFace - get an eyeful of this!

Twister. August 29, 2010 at 1:47 pm

Not to be confused with those rotating entities storm chasers are looking for - we are now going for some little oldschool 2D twist deformations and 3D twisty tubes as known from the Demoscene.

It all started a few weeks ago when I took notice of this excellent Javascript based Twister Joachim Viide did for the JS1K contest. Nice one! And well, I had programmed several ‘Twisty´s’ by myself so I instantly head off with my excited interest and dig out some twisted stuff from the past. Ok, to scale down the expectation in general I´ve to say, my results aren´t even coming close to ‘twister masterpieces‘ like shown in TBC´s ‘Receptor‘- or FRequency´s ‘Ergon‘-demo. Otherwise, that still isn´t any sort of reason for not digging into that topic and go for own results! ;)

Therefore, let´s warm up with some little finger exercise and start twisting 2D based bitmapData. Looping through all xy-positions within the image scan-line´wise allows us to make a time-displacement illusion over the x- and y-axes like ‘vector slime‘. A few enhancements here and there leads us to some veritable deformed results like this small snippet here.

Noisy Twisty
Launch

Btw., the procedural wavy LUT-pattern I generated just for the use of colorizing my twister - I somehow like watching at it as standalone solution too…

wavy LUT-pattern
Launch

Generating 2D based twisters is great fun anyway but as to me that´s just half the battle - playing around in 3D gets the kick out of it! With that saif I worked a lot of my past evenings programming some sort of ‘Twisty forest’ - as David named it like that when I showed it to him first.Basically it´s just a cam-flight through a gathering of lots of twisters, spinning-, twisting- and bending around in a foggy environment. Want to give it a try and dive into ‘Twisty forest’? Here you go:

Twisty Forest
Launch

Lastly let me recommend a few more twisters and twisty-like stuff to you that really is suitable to serve as an inspiration:

Enjoy! And maybe see you at FOTB in Brighton soon?

The Brussels BBQ. August 8, 2010 at 3:32 pm

Last year we organized a little meeting in Cologne with a bunch of Audiotool´ers, David (www.derschmale.com) and Sakri (http://www.sakri.net). It turned out being a very enjoyable, funny and relaxed evening which of course should be continued.

So this year Sakri invited us all to have BBQ at his place in Brussels and it turned out that the headcount of attendees had increased towards our last gathering in Cologne (which of course is cool!). Beyond the usual suspects (like David, Alan and of course Sakri), to name but a few Nicolas (http://en.nicoptere.net/), Dominik (http://devboy.org/) and Kris (http://neuroproductions.be/) headed off to join the party.

And once more this eve with all its conversations, watching demos like the one  http://ow.ly/2mxHZ  that David had build up with Simo (http://www.simppa.fi/blog/), and simply meeting all those nice people (I think ~16 ppl altogether) turned out again being very very smart, enjoyable and funny!

Need more photos like this? Here you go…

See you soon! Maybe next time in September at FOTB in Brighton… I really hope to! ;)

Ray tracing a Menger sponge. July 19, 2010 at 11:38 am

Menger sponge, wtf? - you might say, so let us primary and short clarify what is meant here. In mathematics, a Menger sponge is a fractal curve and it was first described by Karl Menger while exploring the concept of topological dimension. It is a universal curve, in that it has topological dimension one,  and in any other compact metric space of topological dimension 1 is homeomorphic to some subset of it (Reference: Wikipedia).

Hmmm… fine, and where do we go from here? There are tons of code conversions out there showing Menger sponge´s in all kind of variations, but one of my favourite realizations called ‘Spongy‘ from TBC (a demo group) was released in 2009 during ‘Function 2009‘. What´s done here is  that they are ray tracing a Menger sponge from the inside.

‘WOOOT’ - didn´t I just wrote about ‘Raytracer‘ and ray tracing lastly? ;) Btw., never seen demos done by TBC? You really should take a look at TBC demos like ‘untraceable’ or ‘tracie‘ for your inspiration.

Actually, having no hardware acceleration in Flash ray tracing IFS Fractals isn´t a good idea at all. But after I came across this little snippet called ‘JSpongy‘ (by p01) which is an HTML5 adaption of TBC´s Spongy my interest awoke. The task: Let´s bring it to Alchemy and this is where I came up with at the end of the day: And - how shall I put it? Ray tracing a Menger sponge (scaled by factor 2) ~21fps isn´t such a bad thing, right? (thanks to Alchemy)

Ray tracing a Menger sponge
Launch

And referring to all those great ideas from the Demoscene it´s only fair to maintain their course - in other words, if they wouldn´t release the resources of all their great coding tricks and hacks we would not be where we are today! So feel free to catch the sources and make the best of it.

Additionally three more brilliant articles about ray tracing I forgot to mention last time:

Your turn!