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

Category / Subpixel

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

Processing sample: Esfera_mod_by_spxl_5

Esfera_mod_by_spxl_5
based on Esfera.pde by David Pena

Source code:
Esfera_mod_by_spxl_5.pde
Hair.pde
Oscillator.pde

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

Processing sample: Conway_mod_by_spxl

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!

-spxl

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

Processing sample: RadialGradient_mod_by_spxl

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)

-spxl

Processing 1.0 26 November, 2008 at 9:48 am

Processing sample: Esfera_mod_by_spxl_4

Esfera_mod_by_spxl_4
based on Esfera.pde by David Pena

Source code:
Esfera_mod_by_spxl_4.pde
Hair.pde
Oscillator.pde

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.

-spxl

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

Processing sample: Esfera_mod_by_spxl_3

Esfera_mod_by_spxl_3
based on Esfera.pde by David Pena

Source code:
Esfera_mod_by_spxl_3.pde
Hair.pde
Oscillator.pde

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!

-spxl

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

Esfera_mod_by_spxl_2
based on Esfera.pde by David Pena

Source code:
Esfera_mod_by_spxl_2.pde
Hair.pde
Oscillator.pde

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,

-spxl

The Dark Ages 31 October, 2008 at 5:23 pm

For Thursday October 30, 2008.

The Dark Ages

It seems that I’ve been accursed with darkness the past few days. First the bulb in my lamp went, then this evening my ceiling light. Grr. Off to the shops for some groceries (and light bulbs) I go. I arrive home to find a flatmate cooking in the kitchen. A minute or two later..

*blink*

Power outage.

Not paid the bills?.. Wait, it’s not just us. Okay then. Good thing I’m planning to head over to Brick Lane just now for the vjlondon.org meetup. Hopefully the power will be reconnected by the time I get back. One can hear a lot of shouting and cursing in the local neighborhood. And cars blasting their horns. I’m sure that helped loads.

I put away shopping, pack my laptop, and head off. Walking down the road I note that this power outage is quite extensive. Even as I go further down Brick Lane, no lights. It’s not until Quaker Street that there seems to be any consistent power.

Coming out of the darkness and into the light

Listening to music on the way to Cafe 1001, the refrain from one track, “It’s just another excuse!”, seemed entirely appropriate for the situation. Come on London, what else can you throw at me? Darkness? Pah!

Emerging from the blackout zone and into happy lights and fun land, when I arrived at Cafe 1001 I found Dr.Mo and some others setting up, and a documentary film crew. And people practicing Capoeira. nebulus (nebulus design on Facebook, nebulus design videos on vimeo) had his custom hardware controller and had brought two projectors, added to a third and a Triple Head To Go made for a superwide 4:1 display across the back of the club. Nice! His realtime generative 3D visuals looked pretty amazing too.

I was asked to be interivewed by the film crew, which was for a University Video Project, and which is itself to be art of a 30 minute TV show. Not sure if I’ll be on TV. I’ll let you know if I am (or will be).

After the interview I asked to connect my laptop briefly to the triple-head in order to detect the screen size, and Mo suggested to set up properly instead of just testing it. After a small amount of confusion (thinking I should see more than one external display) I was beaming out on five heads (if you include my head and the laptop screen, though these latter two didn’t display the visuals output).

Of course none of my source material is in a 4:1 aspect ratio, so I had to look for footage that wouldn’t look too odd when stretched, and was also able to trim the top and bottom of some other clips on the fly for an acceptable result.

Actually, it was better than acceptable. It was starting to look pretty rad, if you don’t mind me reviving an old schoolyard term. I was well pleased with what I was seeing, and that, really is the point of doing this sort of thing in the first place.

I also liked seeing the custom visuals nebulus was pumping out. He had one laptop closed with another sitting on top of it, subsequently repeatedly overheating the lower machine, which was a shame. He managed to get things running on a single machine, though not quite as smoothly (and with, apparently, less complex visualisations).

Overall I had a pretty good night. When I arrived home the lights were back on (and flatmates were home).

Thanks to Dr.Mo for organising the meetup, nebulus and Silent Eclipse for the projectors, Deepvisual and whoever else supplied equipment.

A mini review from Deepvisual on the vjlondon forums:

Source: Next VJ meeting – Thursday – 30th of October – Café 1001

more fun…

very few of the regulars turned up???
instead we had a surprise visit from the lovely Joanne (Silent Eclipse) and an interplanetary freak-out from Nigel (nebulus) with his astonishing planetarium visualiser software.. George ( sub pixel) then took over the triple head for a while and put Neon through its paces.
the Student film crew were out in force, I found out I had started visuals before they were all born…
and we even had a walk-in VJ who had heard in the street that there were VJs in the venue this thurs and came along.

See a video of me playing on the triple-head below.

-spxl


subpixel visuals: live at Cafe 1001 – vjlondon meetup, Thursday 30 October 2008 from subpixel on Vimeo.

New term: “sponge drive” or “spongedrive”, meaning brain 29 October, 2008 at 7:22 pm

Wednesday 2008-10-29 16:50 GMT/UTC (approximate time, to within a few minutes)

I’m laying claim to the coining of the term “sponge drive”, meaning brain, refering to memory, cf. “hard drive” for computer memory. Possibly soon to become a single word, “spongedrive”.

Origin

Noting that I’m running out of space on my laptop’s drives (both internal and external), I wanted to set my Facebook status to something to relate this predicament.

“[I] can’t remember much more… Hard drives nearing full. Sponge drive doesn’t work so well for digital assets.”

Of course the first thought was “soft drive”, but the “sponge drive” thought appeared almost immediately after. Must have been a brainwave! The Mind! gig is on again tonight, and I’ve spent a lot of time working on the website, new visuals, etc. Seems it’s starting to affect me… in a positive way! :o)

Plug: Mind! Reggae Dubstep – MINDLONDON.COM

-spxl.

MIND REGGAE DUBSTEP

Earl Gateshead [Trojan Sound System] and Unity Selekta [Italy] play a range from old classic roots and reggae to the latest dubstep releases. Visuals by subpixel.

Free every Wednesday, 10pm-2am at The Dogstar
389 Coldharbour Lane Brixton SW9 8LQ

MINDLONDON.COM

See inside my Mind! 24 October, 2008 at 12:36 pm

Video link: Mind! Reggae Dubstep | 22 Oct 08 by spxl

I created this video from clips and photos I took at Mind! Reggae Dubstep on Wednesday night (22/Oct/2008) at The Dogstar in Brixton.

I wasn’t counting on the mindlondon.com branding across the top being made so blurry in the YouTube version, and the titles could certainly do with some improvement. I might try making a nicer overlay next time. I figured I’d already spent enough time pfaffing about, and it was time to release something!.. The render, re-encode, upload cycle takes quite a bit of patience.

-G.

Mind expanding news 16 October, 2008 at 10:16 pm

My fortnightly visuals gig is now twice as often: Mind! at The Dogstar every Wednesday night. It’s starting to sound like a lot like work…

And yes, I shall continue with the mind puns. I hope you don’t, er, get bothered so much by it. ;o)

I went to Denmark last week to celebrate the double birthday I share with one of my best mates. It’s a somewhat disheartening thought that I’d not seen him for a year, but while I was there I managed to forget about all the time (and troubles) in between and it felt like I’d never left, and the previous birthday was only a week or so ago. Time is a funny thing, or at least our perception of if can be. It’s all in the mind! More tangible, and certainly tastier, were the nice dinners I had – Chinese in a restaurant on Thursday, fried pork (a Danish specialty) at a friend’s house on Friday, turkey at another friend’s on Saturday – not only because of the food, but because they were occasions with friends.

-G.