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

Category / 3D Graphics

spxlChaser2D3D 28 December, 2009 at 3:48 am

Processing sample: spxlChaser2D3D


View sketch page for source code.

A mouse follower… with another dimension.

Exercise creating a class for the chasing objects, exercising PVector methods for the motion calculations.


spxlConeWheel 12 March, 2009 at 2:29 am

Processing sample: spxlConeWheel


View sketch page for source code.

I’ve been thinking about adding pointy bits to some 3D models, instead of making everything from boxes and/or spheres. Maybe still a bit boxy (eg a square pyramid), but maybe also some nice cones. I saw a while back that one of the geometry-creating modes was a triangle fan, which looked perfect for making cones and pyramids.

Clearly, having just one cone is n’t enough, so I made a spiky ring whcih went through various changes (with varying animations) until I arrived at this. I quite like it when the “cones” drop down to having only 2 sides,  so they are then just flat. Maybe a bit boring if just a triangle, but the arrangement of base-to-base cones here instead leaves a rather pleasant kite shape, reminding me of a blade, perhaps. When there are heaps of them – more than would at first seem sensible, a nice rippling/fluttering effect occurs. Overall it reminds me of an assignment I had in a class on colour to make a colour wheel – the name ConeWheel being a reference to that.

I’m surprised at how fast this runs in the P3D mode (faster than OpenGl in this case?), even with a seemingly large number of “cones”. It is more bright and cheery in P3D mode at any rate, and was chosen to allow posting to


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!


SpaceBoxes v1.2 21 January, 2009 at 7:19 am

Processing sample: SpaceBoxes_by_spxl_1_2


View sketch page for source code.

Splitting this sketch into separate files proved a little troublesome. At some point the compiler told me that there was a duplicate of something (a static final int), when I’m certain there was only one of it… Remove the “offending” lines and the next thing is then flagged as a duplicate. I couldn’t figure out what the problem was, so tried cut’n’pasting the files back into a single file again. Seems to be okay (well, there were other problems, like a null pointer exception, but it didn’t fail on the compilation at least!). Closing the sketch (I’m not sure if exiting Processing altogether) and opening it again laster made the problem mysteriously disappear… A gremlin in the system somewhere no doubt.

Well… I managed to pull the monolith into smaller many-liths, and added a bunch of new features. I think I spent most of the time staring at the screen and twiddling the knobs to see how it looked and worked. There was some great music playing on some net radio station found in an iTunes playlist – maybe getting a bit carried away with that, but a good sign for playing out later.

I now have a system (of sorts) where I can add a new “effect” and have it fired by the random effect button… I made a couple of samples and they don’t necessarily look that nice. One of them started as something basic, led to another step and another step, until it was helicoptor blades spinning above the central box. Looks kind of okay at first, but when you have a lot of objects on screen (especially if there are a lot of ‘coptors!), it just looks bad. Too vicious. Too much fast movement. Well, the framework is there, now time to do something more interesting with it.

There is another (major?) part to be started yet, and that is the beat synchronisation stuff. I haven’t written/drawn anything about it, and should probably do that before putting finger to button to code it. I might have a look inside the MIDI library for ideas on how to build a sequencer, and also have a look at the Mother library for combining multiple Processing sketches using OSC (Open Sound Control).

That reminds me, I wrote a sketch last week or something that allowed me to control Neon V2 via MIDI. I used an X-Y rectangular region to send two signals to one of my custom pixel shader effects, and by that was able to control the positioning of a graphic effect on-screen using my Wacom tablet. Neat! Well, there was one problem, and that was that the reaction time was somewhat delayed. I don’t know if my PC is up to the task of running a Processing sketch whilst generating visuals with Neon. Maybe if I reduce the screen updates from Processing the load will be lighter, but it seems at the moment that it isn’t really viable. Setting up the MIDI listening in Neon is especially problematic, since when you select MIDI control it latches on to any and all MIDI messages coming in on a certain channel (not sure if that is the correct terminology), so if there are two signals you have to chance it to get lucky that it picked the right one at that split second.

In case you’re wondering, the screenshot for SpaceBoxes v1.2 above isn’t doctored, but it does include a nice graphic from another adventure in the background! Instead of just the partly coloured (and colour-inverted) colour wheel image, there are now a small group to choose from (well, cycle through by pressing SHIFT-B).

I’ve been trying to work out how to make transparent images, and have now seen an answer but am yet to try it – PImage.mask() – which allows you to apply a greyscale mask as an alpha channel on another image. It kind of sucks that ARGB PNGs don’t work just like you think they should

Meanwhile, the out-of-disk-space problem is getting to be a real hassle now. I can’t even open my image editor to create some test images! I have some blank DVDs here, so might find some “space” with their help. I don’t tend to trust optical media much. It is slow, and appears to be unreliable. Maybe I’m letting the debacle with the unfinalisable DVD video I made at Christmas for a gig at Matter (but since I couldn’t finalise the disc, it couldn’t be played) poison my attitude towards it. One thing I do know is that the burner in my laptop is slooowwwwww…


SpaceBoxes by spxl 18 January, 2009 at 7:59 pm

Processing sample: SpaceBoxes_by_spxl_1_0


Source code:

Another Processing sketch, this time with some boxes flying out of the screen at you… a little like an asteroid field, only super boxy. I’ve included a 2D image in the background as well, and it all swirls around almost dizzyingly… I don’t know if there is a better way to just have the 2D image as a backing layer with the 3D drawn over the top. I had to move the “camera” and objects so they weren’t hidden by the 2D image plane.

Well, despite any problems, it is my first submission on, which has a lot of cool sketches posted by others.

It shall also go into my box of tricks for an upcoming gig: Immersion at The Flea-Pit on Columbia Road in February.

Edit: versioning has bitten me again… I wanted to update the program on, had it working nicely, then went too far! Started on more extensive changes that will take a bit more time and thought, and could possibly break everything. Perhaps I should fork every time I have it in a working state, or at the very least when I publish online.


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:

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!