Category Archives: PHP

Fractal Flames

I just completed my latest experiment 🙂 It is a revamped Web version of Orion Sky Lawlor’s “GPU-Accelerated Rendering of Unbounded Nonlinear Iterated Function System Fixed Points” (see here).
For good measure I have added a bit of music interaction 🙂 I suggest you have a look at the live demo here (Chrome recommended). A Youtube recording can be found here.

The music I selected above is by Dexter Britain and licensed under a Creative Commons license. (see

Programming background information:

  • Starting from Dr. Lawlors opengl/C++/Windows program the main step was to get rid of any opengl legacy fixed pipeline rendering and replace it with a programmable pipeline WEBGL equivalent. Then some WEBGL limitations still had to be dealt with, e.g. adding missing WEBGL shader functions, replacement of unsupported for-loops in shaders or unsupported texture modes, etc. Luckily this process proved easier than expected. The resulting WEBGL/JavaScipt program works quite fluidly in Chome (on my GXT460). Firefox’s WEBGL implementation also works for the most part – but it occasionally it crashes for no good reason and it is rather slow in compiling the shaders.
  • Some surprise obstacles came with the attempt to implement the music playback and hook it up WebAudio’s AnalizerNode infrastructure: The first attempt to use some XMLHttpRequest based loading with AudioContext.decodeAudioData() processing proved a total failure, because Firefox’s implementation (versions 31 -33) just fails to decode the (supposedly “invalid”) mp3 data. Also it became obvious that the upfront decoding of the complete mp3 file (in Chrome) adds an unacceptable delay to the music startup. Interestingly playback of the same mp3 file works flawlessly in Chrome as well as in Firefox when using the HTMLAudioElement. So that’s what I am using now. Unfortunately that API is not implemented consistently in the different browsers and particularily the event handling in Firefox leaves a lot to be desired. But even Chrome fails to properly “loop” a song but instead goes into some corrupt state at the end of some (especially longer) songs. Once again browser specific tinkering is called for…
  • The page uses multiple AnaylzerNodes with low-/band- and high-pass filters to detect certain music patterns that are then reflected in the graphics. Unfortunately Firefox again proved a difficult customer: Connecting FilterNodes to the HTMLAudioElement here sporadically leads to corrupted music playback. Also the Firefox FilterNodes produce completely different results than the Chrome ones.

more of the same in blue..

Having the building blocks of my SID player available (see earlier posts), it really was no brainer to take up the suggestion of a colleague to take his Rockbox version of a MOD player and also turn it into a Flash version (it took about half an hour).

To try out at least something new, I decided to tap the WebService of a popular chiptune page and learn how that is done with PHP. Also I am using AJAX to integrate the resulting data.

As I had already done in my SID version I am using a PHP/cURL based proxy script to work around the Flash security restrictions and load the music files indirectly from the respective domain.

The result can be seen here.

Joomla, jQuery, et al.

This next little experiment led me into the world of Joomla 2.59 (an open source CMS system). Since PHP and MySQL are among the few things that my web hoster is comfortable with, there wasn’t much of a choice really. Still I jumped at the opportunity to get some hands-on PHP5 experience.

TinyRSidMainAs expected a simple Joomla site was quickly setup with pre-existing building blocks like user management, commenting functionality and a simple release system to share my source code. Also it came as no surprise that the ‘point & click’ based Joomla software development approach got hairy once I needed my own custom functionalities. With hairy I mean the energy that is wasted to find the different places (e.g. via plugins, modules and component config or site templates) that need patching to rectify the “incorrect turns” that the “framework” is otherwise taking (or to just add missing hooks).
ImageTo make the music player from my previous experiment a bit easier to use I decided to put it into its own floating window and integrate it with some HTML based playlist functionality. After some failed attempts to get my floating window re-positioning code to consistently work in different web browsers (using “plain HTML”), I ended up using jQuery which solved the respective problems just fine. jQuery then also proved useful for the CSS based highlight/expand/collapse functionalities that I added and later it was the base for implementing a dynatree.js based file browser with “load on demand” and “drag & drop” functionality.
The final result (here) turned out quite as I wanted.

Still I was somewhat surprised about the “immaturities” that sometimes manifested in the above tools. With that I mean that eventhough I used these tools superficially at best I already ran into a couple of bugs which previously had gone undetected – which does not speak for thourough testing. However it was a pleasure to then witness the speediness with which these bugs got fixed once they were reported (I hope they also created a new testcase.. ). Community driven software development at its best 🙂