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

Category / OpenGL

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:

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,


Processing sample: Esfera mod by spxl 12 August, 2008 at 8:04 pm

Processing sample: Esfera mod by spxl
Esfera_mod_by_spxl, based on Esfera by David Pena. (source code) goes 3D… realtime 3D, that is! released a new version of Processing over the weekend. I’ve downloaded a copy, fired it up, and had a play with one of the OpenGL samples that comes with it. I’m not a Processing guru just yet, so just made some minor changes, tried to tidy up some redundant code, and added some comments (as to what I think is going on!). I noticed it took a little while to upload the applet, and see that the applet folder has about 1.75MB of contents… The vast majority of this is OpenGL libraries for Java, so I might in future see what I can do about linking to a central repository for these instead of having a copy for each Processing sketch.

Note that this applet should be using native OpenGL for Windows, Mac, or Linux, so even though there are 1200 “hairs” in the animation, it should run fairly smoothly if you have a 3D graphics card. It runs well on my laptop (PC with an ATI Mobility Radeon 9700, a good three or so years old).

This entry is mainly a test for posting sketches online. It would be nice to have some way to embed a sketch into the blog with a placeholder image that is replaced by the sketch when clicked on… maybe I can find someone who has done this already to save too much hassle in figuring out how to do it!