pixel blog

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

Posted in: Interactive, Processing Sketch, Subpixel's Creations by subpixel / Tags: Amiga500, Game of Life

2 Comments

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

Posted in: Colour, Graphics, Interactive, Processing Sketch, Subpixel's Creations by subpixel /
1 Comment

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

Posted in: Interactive, OpenGL, Processing Sketch, Subpixel's Creations by subpixel / Tags: 3D text, osciallator, tentacles

No Comments

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

Posted in: Interactive, OpenGL, Processing Sketch, Subpixel's Creations by subpixel / Tags: 3D text, osciallator, tentacles

No Comments

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)

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

Posted in: 3D Graphics, Interactive, OpenGL, Processing Sketch, Subpixel's Creations by subpixel / Tags: magic numbers

No Comments

The MIND! London (MINDlondon.com) website is now open for business! I registered the domain yesterday evening, and a reasonably productive creative flurry last night has given rise to the new site. Hurrah!

There are some screenshots of visuals for (and at) Mind! gigs, and I’ve also posted a video of some new Mind! title graphics I’ve been working on.

Since the night is called ‘Mind!’, the entries might be called ‘thoughts’ (Initial Thoughts – the first post). In case you were wondering, yes, this is a test of the cross-referencing features of the blogs. :o)

-G.

Posted in: Subpixel's Creations, VJ / Visuals, Web Development by subpixel / Tags: Mind!

No Comments

Mind! is on again tonight. Yes, it has been two weeks already. Where does time go? :o)

-G.

MIND visuals by subpixel

MIND! :: Roots :: Reggae :: Dancehall :: Drum & Bass :: Dubstep :: Breakbeat

Music by:

• Earl Gateshead (Trojan Sound System)
• Unity Selekta

Visuals by subpixel

Wed 01 October, 10 til 2

The Dogstar. 389 Coldharbour Lane, Brixton SW9 8LQ

Directions: Exiting Brixton tube station, turn left. Turn left at Coldharbour Lane (KFC is on the corner). The Dogstar is a couple of minutes walk away on the right hand side of the road. Easy! :o)

Posted in: Mind!, Subpixel's Creations, The Dogstar, VJ / Visuals by subpixel / Tags: breakbeat, dancehall, drum & bass, dubstep, Earl Gateshead, Mind!, reggae, roots, Trojan Sound System, Unity Selekta

No Comments

From the Endless Distractions department…

A short animation created, initially, in Mozilla Thunderbird. I promise, it’s true! I was typing an email and wanted to put a devil smiley, but didn’t like the way the first one I typed looked. What’s the “usual” smiley for the devil? Websearch, distraction, see something stupid about a Ninja turtle on a skateboard on the Canonical Smiley List that looks a little like so:

:)->()<]:

“Rubbish!” I thought, but decided I liked the skateboard and decided to make my own skater. I think Thunderbird is set up to use Times New Roman, but displayed below in the same manner as the Ninja turtle for comparison.

1:o)k|:

Hmm, not so bad. Here’s a screenshot of what I was looking at. Mind you, I actually picked up my laptop and rotated it to look at it a few times, but I’ve rotated the image below for you to save your neck and/or your equipment!

And on the end, there he is, for your entertainment, performing a kick flip (in super-slow-mo, so you can catch the action). Enjoy!

-G.

Posted in: Animation, Subpixel's Creations by subpixel / Tags: ASCII art, GIF animation, skate

No Comments

[Show slideshow]

1234...101112►

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.

-G.

Posted in: Flash and Actionscipt, Graphics, Interactive, PHP, Processing, Site Maintenance, Subpixel's Creations, Video, VJ / Visuals, Web Development by subpixel / Tags: plugins, widgets, WordPress

No Comments

Esfera_mod_by_spxl, based on Esfera by David Pena. (source code)

subpixels.com goes 3D… realtime 3D, that is!

Processing.org 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!

-G.

Posted in: 3D Animation, Interactive, OpenGL, Processing, Processing Sketch, Subpixel's Creations by subpixel /
2 Comments