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

Category / Processing

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,


Go with the flow at 8:09 am

A lone voice in the emptiness of web-space called out to me, asking about how I posted a Processing sketch to my blog. Gabriel’s comment:


first off, love the sketch. I am looking for a dead simple way to post my sketches on a blog. For the image above, are you doing a screengrab and then cleaning it up? Is there a ‘tool’ out there for grabbing one without the tedium of either adding code to the sketch itself or having to go into photoshop and crop out all the unwanted stuff?

what’s your workflow?

I can’t take the credit for the coolness of the sketch – it was written by David Pena and came as part of the download from – I only tinkered with it a bit.

In any case, I don’t know exactly what I did, and I know that I rearranged the files on my webserver some time after the original post, but here’s the general idea (with a note that I’m running under Windows XP):

Export from Processing

Get the sketch up and running in the Processing Development Environment. Cool (thanks Davin Pena and the people who built Processing, the Open GL engine, et al). I think the sketch needs to be saved before doing an export, so do that if you haven’t already, and do an export [File > Export (Ctrl+E)]. This creates a folder called “applet” in the same location as the saved sketch (where the .pde file is). In this folder are all the files that are needed to run (or might be needed, such as the system-dependent JOGL files for various operating systems), and which you somehow need to get on to your webserver later.

Grab a screenshot

In my case, I used IrfanView to take a screenshot whilst the sketch was running. IrfanView, if you don’t already know it, is a small, fast and free (to use, for non-commercial purposes; not open source) image viewing application for Windows. it has a bunch of basic editing features built in, like screen/window capture, which I use quite often, so am familiar with the shortcuts and how it is set up.

Not necessary to understand, but since the question asked about things being easy… Note that once you’ve done the following a couple of times, it becomes easy enough and fast enough for most purposes.

  1. Open IrfanView. For me, this means three keystrokes (Windows Key, i, i) because I have an “Image” program folder in my main “Start menu” and “Irfanview” is the only entry starting with “i” in that folder. It might take 5-10 seconds on my machine the first time, but note that this is a 4-years old install of Windows XP on a laptop running  (still “working”, amazingly enough, despite several chances to die horribly installing service packs and possibly hundreds of applications going in and out besides!). Still, better than waiting for Photoshop for a small job.
  2. Start screen capture [Options > Capture/Screenshot… (C)]. I use the “Foreground window – Client area” option with hotkey (Alt+Z), showing the captured image in the main window… these options will be obvious when you’re running IrfanView.
  3. Give focus to the running sketch, hit the hotkey (Alt+Z in my case)… easy.
  4. Cleanup (optional): I wanted to give more prominence to the ball, so a crop was in order. Create a selection – you can left-click-drag a rectangle, or, as I wanted a certain size, I used [Edit > Create a custom crop selection… (Shift+C)]. There are plenty of options; I wanted 4:3 aspect, and entered 450 for the width, which automatically set 337 for the height. You can also specify the top-left corner of the selection, however I usually leave this as (0,0) and after the selection is made use right-click-drag to position the crop selection. Once you’re happy with the selection, [Edit > Crop selection (Ctrl+Y)] performs the crop.
  5. Save the image: [Edit > Save as… (S)] (note that, unusually, (Ctrl+S) is for Save and (S) on it’s own is Save as, however since this image is from the clipboard and not a file it doesn’t make any difference). There are many image formats you can save out to (I think you need to install the IrfanView plugins to get some of them; I recommend the plugins for the JPEG lossless rotate if nothing else). I’ve decided to use the same base filename as the sketch and put it in the “applet” directory with all the other files needed to run the sketch. (This probably isn’t what I did in the first instance, but could be in future!)

Get it online

For me, this meant using FTP to upload all the files in the “applet” directory to my web host. My original plan involved creating a “processing” subdirectory from my web root, with a separate “applet” directory for each sketch, renamed from “applet” to the name of the applet.

eg. web_root/processing/Esfera_mod_by_spxl

I created a new blog entry (I’m using self-hosted WordPress) and inserted an image (specifying the full URL for the image src), hyperlinked to the “applet” directory (using the full URL).

This worked just fine.

It bothered me that the library files were so big – not because of the space required, since I have some 500 gigabytes available…), but because of how long it takes me to upload even a few megabytes. Yes, I am impatient; around 20k/sec is not a speed I am happy with, but I digress. I also had the intention of, at some time in the near future, to upload a bunch of sketches, and realised the burden of downloading the libraries every time isn’t something anyone needs. It might be possible, but I couldn’t figure out how to get a sketch running that referenced libraries in another folder.

What’s the answer? Put everything in the same folder, of course!

(2009-01-06 edit: the everything-in-one-folder solution wasn’t working out so well, so I have rearranged my Processing content into separate folders for each sketch. The following notes are therefore no longer accurate, nor recommended!)

So the file structure was as follows:
Esfera_mod_by_spxl.html – sketch’s web page
Esfera_mod_by_spxl.jar – applet archive – Java source
Esfera_mod_by_spxl.pde – Processing source
Esfera_mod_by_spxl.png – screenshot image
..and all the other required files…

The hyperlinked screenshot HTML looked (almost) like this:

<a title=" processing applet | Esfera_mod_by_spxl"
<img src=""
     alt="Processing sample: Esfera mod by spxl" /></a>

Of course, a linked image caption costs extra. ;o) Something else I did was create a symbolic link named “index.html” which I’ve pointed to “Esfera_mod_by_spxl.html” so that anyone navigating to for a poke around didn’t get a directory listing. I could have just renamed (or copied) the Esfera_mod_by_spxl.html file, but that would be too easy…

And for your edification, the result, with the updated Processing code, executible, Java file and screenshot. I’m uploading the new files now. Okay, maybe not now, but soon. (This reminds me of a scene from Spaceballs…).

Processing sample: Esfera_mod_by_spxl

based on Esfera.pde by David Pena

Source code: Esfera_mod_by_spxl.pde

Something I didn’t note earlier, is that I put in a mousePressed() callback to start/pause the animation when the mouse is clicked. I’ve put in some new comments about that, modified the code slightly to be clearer for people new to programming, and added/updated various other comments.

I probably wouldn’t recommend embedding the applet itself into your blog posts, since several posts on one page means several applets, and if anyone else’s system is like mine and takes aaaages for the Java runtime to load for the first time, people are going to leave your blog possibly before even seeing any of your content… probably not what you’re hoping for!

I’m sure putting everything in the same directory will come to bite me on the arse when I want to start using a data directory, but that could be solved by the sketches having their own named subdirectories I suppose.

(2009-01-06 note: my arse was bitten when Processing 1.0 was released as the OpenGL libraries changed!)

Perhaps I should stop concerning myself with such things until I actually publish another sketch… That’s right, I put one sketch online and stopped right there!

I have half a mind to create a WordPress plugin to handle some of the details nicely. The other half of my mind is saying, “What do you know about creating WordPress plugins?!” :o)

And now to test the multiple-sketches-in-one-directory theory… Stay tuned!


Site upgrades, photo galleries and more 17 August, 2008 at 8:33 pm

There should be an image gallery just above this: some still captures of the visuals I mix. There should also be a couple of random images in the sidebar.

Over the past few days I’ve been tidying up the contents of my webserver. The other day I noticed that the gallery was broken, and it took a little while to sort out whatever the problem was. Changed some directory permissions and server settings, and upgraded to the latest version of the software. I’ve deleted some unused CMS’s and their databases, made some database backups, and upgraded WordPress. I’ve had a play with some WordPress settings, like running a second blog off the same content folder (containing plugins and themes, etc), changing themes, using Widgets, and installing some new plugins, most notably a gallery plugin – something I really needed to get sorted to be able to post photos in some sort of nice manner. I managed to wreck the second blog for a while, and delved into some PHP programming to see what was going wrong. It sorted itself out in the end.

I’ve also revised some tags and categories for existing posts in this blog: the Subpixel category should now take you to all posts that are about me, gig’s I’ve performed at (subcategory Subpixel’s Gigs), or that have creations (subcategory Creations) to show such as photos, graphics, videos, and software (eg Flash, Processing).

There is something wrong with the Flash plugin I’m testing out (pb-embedFlash), which I was rather hoping to use to embed videos and Flash animations. I might try working on a filter to embed (or at least link to) Processin sketches… but one thing at a time – first I need to create some more Processing examples! I’ve come up with a simple solutions for what to do with multiple hosted sketches (applets) to get around the problem I mentioned earlier of there being a heavy download for the OpenGL libraries: just have everything in one directory, with the index.html file from the generated applet folder renamed to have the sketch name. So simple it might just work.


Music Is Math 15 August, 2008 at 9:36 pm

Music Is Math from glennmarshall on Vimeo.

This is a beautiful example of the use of Processing. Not by me, unfortunately, but I hope to be able to make animations like this soon! Nice track by Boards of Canada too. A great result from a nice inspiration.