| SPXL.TVblog | contactgallery | videoflash | processingmyspace | facebook

Category / Interactive

Support Illuminart at VIVID by Cindi Drennan 29 May, 2012 at 7:26 pm

Support Illuminart at VIVID by Cindi Drennan

spxlAudioToMidi 29 June, 2010 at 3:38 pm

Processing sample: spxlAudioToMidi


View sketch page for source code, Windows, Mac and Linux executables.

A small application made with Processing to produce MIDI control messages from a live audio feed. Auto-levelling frequency band meters are used to obtain “peak” output values across the entire audio spectrum analysed (whereas it is usual to have strong bass response with weaker treble response), and easing is applied to make the levels less erratic. 10 separate monitor outputs are supplied, where each monitor is attached to one of the frequency band meters and that meter’s output is scaled to the particular output range for the monitor, allowing for a reduced final output range as well as inverted ranges. Controls are provided to select the MIDI output device and the MIDI channel to use, as well as for selecting which monitors are connected to which meters and the monitor output ranges.


spxlSpikyBall v1.0 25 February, 2009 at 2:36 am

Processing sample: spxlSpikyBall_1_0


Source code:

I think I might find myself delving into (more) non-standardard OpenGL calls within Processing in the near future. This is an example using a small library (SuperPoint) that allows you to build an array of points (that don’t move relative to each other) once and draw them many times. This allows you to do all your setup calculations just once, and allows you to plot multiple copies of the set of points as well. Here I’ve chosen to plot the same set of points at slightly differing scales and rotations (for the base geometry) and differing “point sizes” to give the spikes the appearance of little soft-pointy cones. I built in some wandering movement that is enabled by default,  so this sketch is pleasing enough to watch without having to fiddle with it. Of course fiddling is more fun.. turn on the auto [c]entre mode and click the mouse somewhere (or press an arrow key) on (or off) the beat to some music, for example. Hit [s] to change the spin or [j]ump to a random position. Okay, so they’re not advanced spline-based keyframe activated audio-reactive magic – that’s to be added (by you or me?) later!


Esfera mod by spxl 6 6 January, 2009 at 11:16 am

Processing sample: Esfera_mod_by_spxl_6

based on Esfera.pde by David Pena

Source code:

On Thursday 18 December there was another meeting at Cafe 1001, and again there was a triple-head setup with three projectors onto the back wall of the main room. Nice!

I’d decided that this time I’d work on this Processing sketch to have some 4:1 content for the massive screen. Up until this point, the tentacled object in space had been stationary and not especially interesting-looking. On Thursday morning I started tweaking the program with a view to actually being able to VJ with it, adding a bunch of new features like being able to move it around, make it bigger (“zoom”) or smaller, and more easily change some of the parameters. The tentacle shape changed a bit, as well as the appearance with some new oscillators to change the red, green and blue of the colour, and some mystery 1’s and 0’s on the surfaces. I’m no expert on lighting yet, but at least I managed to do something about it being so dark (as appears in Esfera mod by spxl 5).

I was perhaps a little too engrossed in what I was doing, and at some point realised I was already running late for the gathering!.. and rushed off to Brick Lane with my still warm code. The setup at Cafe 1001 was improved on last time, with a large table for laptops, etc bhind a raised bench with the projectors on it.

The tentacled space thingo was quite well received by the crew, though at that stage it was a bit of a beast to deal with effectively. Having pointer and keyboard inputs, I plugged in my Wacom and handed it to Rob to move it around while tapping at some controls myself on the keyboard. Even at 1920×480 it seemed to run pretty fast (and so it damnwell should!), and with the ultra-widescreen had a nice spacious and spacey feel about it.

I also tried running the radial gradient array sketch at that resolution, but, being a 2D pixel-based affair, my machine just wasn’t fast enough (or rather the program is too intensive) to get above a crawl instead of scintillating flashing colours.

Nevertheless, both sketches have been updated since then, and the Game of Life sketch created, and I’m starting to get a bit mental with trying to put nice comments and such on everything as well as make improvements and add new features. I think the commenting is taking as much time as anything else!.. and of course generally tidying things up, rearranging files on the webserver, updating all the past blog entries with Processing sketches to have a consistent look, and so on. I think I should really investigate creating a plugin or filter or something for WordPress – maybe a little database to keep track of the sketches and format them all nicely. I’m already running in to versioning issues, and changing the structure of the files is bad news for old blog posts!

Yesterday I did some work on creating a better timewarp effect – rather than change the speed of all of the oscillators, instead manipulate the “number of milliseconds” that have passed (this value is used in calculations by the oscillators) and also modify things like how far the object moves or rotates for the frame. Since the program was using simple easing logic, I’ve fudged it by multiplying the easing factor by the square of the (less then 1.0) timewarp factor, or leaving it alone if the timewarp factor is 1 or more (making the movement “faster than the mouse”, as it were,  seemed like a bad idea).

You see the brighter patch of red on the top-right of the sphere in the screenshot? That’s caused by five point lights just near the sphere arranged around the funnel of text. unfortunately the Java applet doesn’t seem to play on my machine (nor does version 5 of this sketch), and I think the lights (or use of lighting generally) is what causes it to fail. Then again, I don’t actually know, so this is only a guess! If you have the PDE installed you should be able to recreate the sketch from the source files.


Esfera mod by spxl 5 at 10:11 am

Processing sample: Esfera_mod_by_spxl_5

based on Esfera.pde by David Pena

Source code:

Conway’s Game of Life 31 December, 2008 at 6:58 pm

Processing sample: Conway_mod_by_spxl

based on Conway.pde by Mike Davis

Source code: Conway_mod_by_spxl.pde

Another sketch derived from one of the examples that comes with Processing, this time a simulation of John Conway’s “Game of Life”, which I once coded in AMOS Basic (on my Amiga500) and even wrote a version in 68k assembly language… that version ran pretty fast as it operated directly on the memory used for the display! When I say fast, though, you have to remember the Amiga’s Motorola 68000 processor was clocked at less than 8MHz! The program also took control of the processor – no multitasking, no mouse nor keyboard input, nothing… it just ran (I think I had to reboot to end). I recall that to count a cell’s neighbours I used some bit-shifting and a lookup table for extra trickiness (and hopefully speed, though I didn’t code a different version to speed-compare against).

My contribution for the Processing version: optimisations improving execution speed by around 30%, and pretty colours – instead of white on black, the “live” colour is a bright saturated colour that cycles through all the hues; the “death” colour is the same hue, only not quite saturated and not as bright (note that the cell is coloured based on when it was born / when it died, so the display gives a coloured timeline for both live and dead cells).

If you really want to see fast, try Golly which lets you run insanely large worlds and unbelievably fast. If you’ve ever seen diagrams on the “theory” of building complex computer parts with millions of cells, this program actually runs them!

Well, that’s about all from me for this year. Happy New Year!


Radial Gradient Array 28 November, 2008 at 6:08 pm

Processing sample: RadialGradient_mod_by_spxl

based on RadialGradient.pde by Ira Greenberg

Source code: RadialGradient_mod_by_spxl.pde

Here’s another Processing sketch I’ve been fiddling about with for more time than is probably reasonable… this one is just 2D, and, once again, based on one of the basic examples provided with the Processing Development Environment. The original program painted some nice circles with gradient fills. Just once. No animation or anything tricky. Looking under the hood I was curious about a comment that didn’t seem to reflect the behaviour of the code:

// hack to ensure there are no holes in gradient
// needs to be increased, as radius increases
float gapFiller = 8.0;

The gapFiller wasn’t changed anywhere, and the implication of this value is that 8 points are plotted per degree rotation around the circumference of each circle, regardless of the radius (note that one solid disc in the final image is generated by plotting successive rings of increasing radius). Anyhow, since the circumference is linearly proportional to the radius, I figured that replacing this constant with some other constant divided by the radius (of the current ring) would be a good idea. I ran the program a bunch of times trying to find the smallest such constant that seemed to produce “gapless” discs up to a reasonable size. I also played with the idea of interpolating the radius step (eg step by 0.5 pixels instead of 1 pixel per ring) with a reduced angle interpolation – by this method the number of plots can be reduced, but finding an optimum pair of values seemed like a pretty hit-and-miss affair and was never going to be as sensible as a properly optimised circle drawing algorithm anyway. Having int-based parameters to specify exact pixel locations seems “close enough” for this sketch, and reduces a fair amount of confusion!

I quickly became tired of having to wait for the entire scene to be rendered before getting to see any of it, so decided to replace the array-filling loops with a draw() method that produced only a single disc on each invocation, and effectively moved the loop outside that by using some global variables to keep track of where we’re up to. I also switched over to using radians directly instead of needlessly converting between degrees and radians all the time, and of course did away with the duplication of the angle calculation (in the original program, j and angle are almost the same, differing only in when they are incremented, and should effectively cover the same circle’s-worth of angles) and moved the colour calculation out of the angle loop, since the colour is the same for a given radius. I’ve also replaced the manual colour calculations with the colorLerp() function provided by Processing. Yay for easy. It does make me wonder, though, on what basis the examples provided are included. This example has quite a few problems!

I also decided it would be nice to space the discs out a bit, and then started becoming heavily involved with working out how to space the discs evenly, especially so that the gap between the discs was the same as the gap between the discs and the edge(s). From there I moved on to asking, what if I want the gap to be proportional to the size of the disc? What size should the discs be, and where should they be centred? Than further still, what should that proportion be if I want the area covered by the circles to be some proportion of the total area? (For this case I’m talking about the average coverage of a single square “unit”, where one unit can be formed as a square whose corners are the centres of four adjacent circles. That is, I decided the visual average over the majority of the space was important, not at the edges where I simply want uniform spacing, especially since, if the rectangle to be filled is not square, the spacing to the edges in the shorter dimension will mostly not be uniform with the rest of the spacing – instead the arrangement is simply centred, keeping the circle-to-circle spacing uniform). Eyes glazed over yet? ;o)

I’ve kept on with the theme of making the sketches interactive to some degree as well, so have inclded keyboard controls for various parameters. After much playing around, eventually getting away from annoying calculations for those obscure ratios and moving towards “what makes this fun and interesting to look at?” the sketch is now in it’s present almost VJ-able form… well, in a winamp visualisation kind of way, only I haven’t sussed out audio reactivity yet – guess what my next plans are? :o)


Processing 1.0 26 November, 2008 at 9:48 am

Processing sample: Esfera_mod_by_spxl_4

based on Esfera.pde by David Pena

Source code:

Just when I thought I was clever having multiple Processing sketches live in the same folder (to share libraries), along comes Processing 1.0. I’d only just downloaded a newer version, like, yesterday… Okay, I’ll get the official 1.0 release then. Since it’s official and all. :o)

First thing I encountered was Processing 1.0 does not work with the JDK I already had installed. Hmm. Okay, I’ll grab the latest JDK from Sun then, since you’ve already opened a browser window for me. Next problem – can’t unpack the installer, ‘coz my drive is low on free space. Bother. What to do? I know!.. spend a few hours wathing old slideshow videos that are hogging gigs of space, and maybe delete some of the duplicates and otherwise unwanted renders. Aside from the tedium of drive space maintenance, this was quite a pleasant chore, since those videos hold / stir up plenty of memories of fun times back in Sydney (mostly) with friends and out on the town. (Which reminds me, what am I doing here in London again?…)

So, after much messing about to finally get the new version up and running, I’ve had another play with (read: massive hack at) the Esfera example, drastically modifying how the Oscillator class works by making it time based (instead of frame based). It seems that some of the changes I’d made the day before hadn’t saved or something, as I recall having to “re-change” some changes I’d made. Need to keep a better eye on what is actually being “saved” in Processing, I think… it’s too easy to assume that what you’ve just compiled and executed (and works just as you planned) is what is saved in the .pde files, but this isn’t the case!

Everything now revolves around, essentially, millis() – the number of milliseconds elapsed since the applet started. I grab this information at the top of the draw() function and calculate how many milliseconds have elapsed since the previous draw. I’ve put a fudge into the code that pauses and unpauses the applet (on mouse click) to effectively remove the time elapsed whilst paused, so the animation stops and starts cleanly instead of jumping to a non-connecting state. This technique may come in useful one day for something…

I’ve also added some (not so) exciting interactivity to allow adjustment of each of the (now 7) oscillators, including pausing, setting the period (by value or by increment/decrement), reversing the direction, changing the wave shape (sine, triangle, sawtooth, square). The 8 pieces of text (“Hello”) radiating as petals have been replaced by details of each of the oscillators. Pressing any of the bottom row of letters in the QWERTY layout (z, x, c, v, b, n, m) directly selects one of the oscillators. Alternately, use the LEFT or RIGHT arrow keys to go to the previous/next in the list (with wraparound). Details for the currently selected oscillator are displayed at the top left of the applet, and the corresponding petal is hilighted yellow. It looks a bit like some not-so-futuristic, but also not so helpful, flashy interface for something important, and might just pull off being more serious if it didn’t bounce around so much. ;o)

I put some more effort into fixing some previously sketchy comments, and this is partly helped by having a better idea of what is going on in tke sketch, certainly with regards to some of the graphics calls. I’ve also massively over-engineered the Oscillator class in the hopes of reusing it in future, and perhaps even being useful to someone else.

Anyhow, upon exporting the sketch from Processing I have discovered that the library files are different. Are a 986kB jogl.jar file and a 1,131kB jogl.jar file compatible? Unlikely! There are also a bunch of extra gluegen-rt files that I’d not seen before (nor have any current knowledge as to what they’re for). It’s getting pretty messy in there! So I’ve decided each applet shall have its own place in the directory tree. A further consequence that I’d not run into before is that, even though the main .pde file has a different name (I’ve named each version separately), the “inner class” files (the other .pde files) have the same name, and since I’ve completely changed the interface they can’t happily coexist. Keeping things separate perhaps doesn’t seem like such a bad idea after all. Maybe later I’ll work out how to share the larger libraries. I can, if I get around to it, link them on the webserver to save uploading if I need to, but the download bandwidth is still an irritation.


Esfera mod by spxl 3 17 November, 2008 at 1:05 pm

Processing sample: Esfera_mod_by_spxl_3

based on Esfera.pde by David Pena

Source code:

I decided to have a bit more of a play with Processing. Some of the changes in v3:

  1. Hair.pde and Osciallator.pde created with just the Hair and Oscillator classes in them. I also removed references from the Hair class to the global variables used as parameters for the random values; there are now constructors that take parameters, and the random values are now calculated in the main program.
  2. There are now some keyboard controls:
    • [up] and [down] arrow keys increase/decrease the oscillation speed of the base level of the hairs (the outer sphere);
    • [z] pause/unpause inner sphere oscillation;
    • [x] pause/unpause outer sphere oscillation;
    • [c] pause/unpause hair count oscillation.
  3. Some 3D text added – Hello! :o)
  4. Snaking tentacles (made out fo a series of boxes). There are three new oscialltors to control the tentacles, two different rotations, and  one for the scale factor for each successive box on a tentacle. Certainly nothing new in the computer graphics world, but a first sample from me.

It certainly seems that the OpenGL rendering is far from perfect. For instance, it seems sometimes that the text is transparent (eg bottom left “Hello” in the screenshot), and other times not (eg the right “ello” in the screenshot where you can just see a box around the “o”).  Maybe a bit hard to spot in this screenshot, but pretty obvious when the program is running. I have no idea at this point what causes this (and other strange display artefacts), nor how to address it. I don’t know if it is an OpenGL thing, or something to do with the way my graphics card renders it.

What I do know is that when I replaced the box() calls for the tentacles with sphere() calls, it slowed down rather dramatically and looked a bit naff to boot. I think I miht have to drop the fantasy of seeing something coming out like a nice raytraced scene!


Esfera’s marching two by two! Hurrah! Hurrah! 9 November, 2008 at 12:41 pm

So then, since the las post I’ve had a play with Processing. I decided to put some oscillators in to shake things up a bit… I created a few global variable names something like SPHERE_RADIUS_VARIATION_AMPLITUDE_PROPORTION, but found them beastly to work with (long lines ahoy!), and that was with only one oscillator, so then decided to have a crack at creating a new class for an oscillator.

Exciting stuff, to be sure. Well, it was at least mildly exciting to get it working soon enough with only the existing code as a guide and a vague stab in the dark as to how to call a constructor from within a constructor…

I also decided to colour the black sphere something… other than black, so you could better see the oscillations, and also where the edge(s) are. The inner sphere pulsates, as does the “outer sphere” of hairs. When you move the mouse, the inner sphere, or ‘heart’, beats faster and faster… but slows down if you don’t move the mouse. Moving the mouse also causes the outer hair sphere to expand as though being flung out by the speed of the mouse movement. The number of the hairs which are rendered cycles up and down too, from sparse to dense and back again.. and again… and again! Nothing too exciting, but overall it is somewhat more engaging than the original sketch.

The code is starting to get ratty again though… plenty of magic numbers in there without explanations. The Oscillator class helps quite nicely though. Yay for that! :o)

Processing sample: Esfera_mod_by_spxl_2

based on Esfera.pde by David Pena

Source code:

The sketch is was thrown into the same directory as the “original” sketch with the hoping that the close-to-one-megabyte OpenGL library (jogl.jar) would be loaded just once by a user’s browser for separate visits to the two different sketches.

If not, well, I guess there’s no helping some things.

Meanwhile, it’s pleasing to note that the “workflow” I outlined in the last post worked pretty well for getting the new sketch online and into the blog. I did cheat a bit by copy’n’pasting the HTML for the linking from the blog, then doing a search’n’replace of “_spxl” with “_spxl_2″, and didn’t feel any need to otherwise change the descriptive attributes of tags. It won’t always be so easy,