True… by now: Lastly I took some time and uncoupled a snippet with a little audio-reactive shader sequence from my second tune visualization I´m currently working on, to test it separately. Best practice to test several options and possibilities and most perfect to use it as blog-post and sign of life here!

Well, by knowing my work you probably won´t wonder that it´s all about raymarching and deforming/displacing implicit volumes and surfaces again. Btw., want to dig deeper into this  dark matter? Inigo Quilez released a brilliant article with all the basic info´s you need to get started. But for now - lets take some WebGL and  get this little audio-reactive thingy going…

Achtung!!! May take a bit to load the sound first…

Launch Side note: Best viewed in Chrome, Firefox will do as well but takes ages to validate the shader…

What else, what else… hmmm… hell yeah - just got invited to once again speak at FITC Amsterdam 2012, be sure I´ll come there with a new session topic (called: Highly Illogical) bringing along all the new FP11 & WebGL stuff I´m working on right now. ‘Early Birdies‘ are already on sale, so be quick and see you there…
 

Once you got this running lets leave this bone dry parts and switch over to the more exciting visual fun parts - meaning let´s do some with our just received audio informations and write some audio driven stuff in WebGL. As for instance following little thingy I programmed last night and called it cause of lacking a better word ‘Strange Lattice‘.

Launch (your browser needs to support WebGL!)

I know - I know, some of you still refuse to update your system having an up to date browser that supports proper and sexy WebGL like Chrome or Firefox. All right, uploaded a video of this experiment to my vimeo account as well.

That´s it - enjoy!

!!! Edit: Updated shader for the use with Chrome Canary, but should as well execute on Chrome 12 + 13, Firefox & Safari 5.1

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)

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!

No need to say that Perlin Noise is heavily used for programming visual effects as well, for instance in IQ´s brilliant Leizex demo, or for generating procedural landscapes like in Elevated, a demo made by RGBA & TBC. So, gimme gimme… the logical next step for me was to implement some noise for my WebGL stuff and add it to my raymarchers. However, my evil plan was to use this noise for generating smoke-like behaviours and what should I say - I think it worked pretty good… (by strictly implementing Las´s sources & instructions from the ‘Raymarching Beginners‘ Thread which I recommended you reading a dozen times the last blogposts).

Now, by the time I´d it all working the last days I decided to write another little audio synced demo for it. Corresponding to my decision Andre Michelle just released ‘Tief Blau‘ (liked it from the start), a piece of music he created with Audiotool. Well, and after having a little chat in the small hours the setup was clear: ‘Tief Blau‘ will be used as main tune for my next demo. From where I stand now I only can say: Madness!!! What the hell has possessed me? What originally intended to be a small little tech-demo, now escalated to be a full 6 minutes demo - meaning long nights of working short of sleep.

Honestly, I must have been totally crazy, not to say nuts(!), to base a demo on Andre´s 6 minutes long track. Know what that mean? You need tons of effects. So my only solution during the past nights to cope with this task was: make, make, make…

Status quo now - The good thing: A long list of fragment shader effects featuring the music over the entire term, the bad thing: Reaching web brower´s time-limits initializing it! ;) The Solution: decouple a sneak preview of it with some effects & save the best until last… meaning - I´ll release a fully effects packed 6 minutes longplay raymarching version based on Adobe´s Molehill Flash Player in my session at Flash on the beach this year (interested? Better be there…)

Enough talk & ‘Achtung!!!‘, it´s like I said - the whole demo needs some time getting initialized by the browser! On average ~18 secs running on Google Chrome, compared to ~1.30 secs with Firefox (holy cow! How come @Firefox ? …) So Google Chrome is my weapon of choice for running/viewing this!

But for now - let´s make some noise for the next 6 minutes…

Launch (Have patience whilst initializing - best viewed in Google Chrome!)

And here´s a video of the whole demo for those of you not running a modern web browser yet (for whatever reason… ;) ).

Up next: relaxing a bit…

Edit: Las - hope to have put this right…
 

Anyway, to make a long story short, I´m back on track now, working on several new stuff, so what´s the news? A few weeks ago Stefan Wagner took some of my WebGL raymarching examples and synced ´em to audio. Visually a pure blast, I liked it a lot (still do!), and decided to dig deeper into that topic. The idea: Let´s create more complex raymarched forms that react on synced audio, constantly changing surface and colour. So consequent the task was: Finding interesting, sublime and pleasing looking distance field formulas to compute this forms. And well, exploring distance field formulas and find unique forms is not as easy as you might think, but that is what I intended to do in the first place.

However, like I said, started, lost focus, totally got distracted, now back on track and finally got 1st results, which I like to share with you in a tick. ‘Implicit Reactions‘ is a first early release of a demo I´m now working on for upcoming Flash on the beach in September. But at this moment in time, and coming right back from a meeting in London, I´m totally stoked to say that this demo might come even more into general use as I ever expected. Curious? I´m sorry to say that this was the only rumour I´m allowed to spread on that news. I guess you all have to come to Flash on the beach and I´ll tell and show you more about it within my session.

For now - Implicit Reactions, early release studies…

Launch (opens in Fullscreen, takes a bit to preload audio, enjoy!)

To make this more worthwhile for all of you not having an up to date browser that supports proper and sexy WebGL I uploaded two videos on my vimeo account. The 1st one is a recording of ‘Implicit Reactions‘ and goes here, the 2nd video shows my ‘Adaptive Waves‘ Flash/Alchemy port from Karsten Schmidt´s incredible great Processing origin (got lots of mails to show that again after last FOTB 2010).

Lastly, all in all - enjoy!

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:

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…
 

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.

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…

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!
 

But at first, ‘ray marching’, what is this all about? Well, using the ‘ray marching + distance fields’ technique is like the newest hot potato finding its way from the Demoscene to our beloved Flash for example. If you want to get started and get an idea of the concept behind all that, I recommend reading following article first (and maybe the concept behind distance fields called sphere tracing from John C. Hart). Beyond that, there are tons of threads and articles out there dealing with that topic, but the ‘Raymarching Beginners‘ as well as the ‘Raymarching Toolbox‘ threads are fantastic pouet.net sources to get started with.

Enough talk: Let us first enjoy how beautiful this technique looks in action, for example in FRequency´s 4k intro ‘potatro‘ or in ‘cdak‘ a 4k intro by Quite and Orange. And as I said, ray marching looks good in Flash too, like in this Raymarcher using Pixelbender from Ralph Hauwert. So being charged with all that inspiration, here are my little contributions in this field (yet again using Mr. Doob´s handy WebGL sandbox):

Launch

Launch

Launch

Feel free to grab the sourcecodes (which´s located within the HTML templates) and modify at your pleasure. Still interested? More to come in my upcoming FITC Amsterdam and FFK Cologne 2011 talks. See you!
 

In case you want immidiately start programming your own Fragment- and Vertex-shaders too, Mr. Doob has written a very handy sandbox with the basic WebGL initialisation code. Most helpful if you don´t want to waste time on that and just concentrate on coding your shaders. So here are my results to date…
 

Launch
 

And…

Launch

The lesson is clear: Using WebGL/GLSL is pure fun and I think it´s definitely worth playing around with it, but as I expect clients to be overcautious making use of this new possibilities, there´s way enough space for Flash projects in the future.

Edit: There´s a fullscreen version of the ‘Lattice’ - feel free to start it at your own risk! Warning!!! It may shut down your system.

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…

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.