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

Category / Interactive

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.

-G.

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)

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.

Sweet, sweet eye candy 11 August, 2008 at 2:37 am

From the What’s Cooking? department…

I’ve been to a couple of VJ events this week: the vjlondon.org meetup on Wednesday at T-Bar, and Immersion (a live experimental electronic music + visuals gig) on Thursday in The Flea Pit. I’ll mention that it’s great now living in Shoreditch, as both these venues are only a short walk away from my flat! :o)

Back to the story… it has occurred to me on more than one occasion that I will probably want (need?) to get into 3D at some point, and at these two events I saw some nice interactive 3D animation by pixelpusher (Evan Raskob), an earlier version of which can be seen in the video from the previous post (London VJ Meeting, Wed 9 July at T-Bar). I’m talking about the kinetic squiggles (which are input as gestures via his digital tablet) which zoom around. Evan had been working on this simple idea since last meetup, upgrading it from 2D only to 2D and 3D (combined), allowing multiple gestures to be loaded up as a set before “launching” (these are my own terms, I don’t know what Evan calls them!). I’ll have to clear some space on my Laptop (or get hold of another external drive – the one I brought with me from Sydney is out of reach at a friend’s house while they are at the Boom! festival in Portugal!) to upload the video I took at the event, and until then all I can say is that it looked quite amazing. That particular visual is produced in Processing from processing.org. I haven’t had much of a play with it just yet, but it looks promising! From the home page:

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is an alternative to proprietary software tools in the same domain.

I’ve also had a word in my ear from Dr Mo about XNA the last couple of times we’ve met. I’d had the idea that I might use DirectX to build my own visuals engine at some point, and Mo’s feedback is that XNA is nice to work with, especially as the coding is done in C#.

I found myself installing the XNA Game Studio last night and discovered there is a free 3D modeling package: Truespace 7(.6) from Caligari. Upon further investigation I see that Caligari (or at least this product) is now owned by Microsoft, hence the plug from XNA. I remember the name “Caligari 4D”, and think it may have even been one of the packages available back in the day of the Amiga.

In any case, this eventually ends up in looking at videos of 3D animations, and this excellent example appears in Vimeo Staff’s Choice Picks:


Interstellar Sugar – Suryummy from Suryummy on Vimeo.

It reminds me of stuff done by the demoscene crew Farbrausch. If you like Suryummy’s video, you should check out the stuff that Farbrausch pump out in real-time!

Of course this video was created with software other than TrueSpace. Suryummy lists in a comment: maya, adobe*3, particular, live, reactor, absynth.

There is talk on the London Electronic Music Meetup (EMM) group about an Ableton Live DJ Workshop on a Saturday some time soon. I saw Live being used at Funckarma’s Dubstoned ep launch in London, but it wasn’t a “live” set, it was a DJ set, using Live. I want to know more… about using Live generally, but also because I know it has some sort of capability for triggering visuals. I have a project to work on with a DJ here in London, Unity Selekta, to produce visuals for his gigs, and I think I’m going to need some sort of sequencer. Live may be that sequencer.

-G.

Springback 21 May, 2008 at 7:01 am

If you don’t do technical, you probably want to tune out right about now. Follow the link to play with things on springs, and press space to randomise the configuration. *boing!*

Flash Link: springpixel_02.swf

I spent some time over the weekend reacquainting myself with the spring simulation Flash project I displayed in an earlier post. I wanted to try out a new effect from the next part of the book, but ended up getting heavily bogged down in trying to work out how to make an object (a class) have it’s presentation (a MovieClip) as a member, rather than have the class itself inherit from the MovieClip class. Up to this point, all of the little balls and boxes were instantated at design time in the Flash editor, which is clearly not The Way Things Should Be, and was seriously limiting my options for creating arbitrary (randomised) configurations.

Other soon started to pop up, such as how to access configuration information for the simulation, such as the acceleration due to gravity and the friction constant. The original design allowed my spring items (things on the end of springs) and springs to ‘globally’ access that information by virtue of them being static class members, but I decided that the SpringSimulation objects should be allowed to vary these values between instances… not that I really expect to be running multiple separate simulations, but it could be interesting for “side by side” type comparisons.

One of the main reasons I wanted to see if I could get this to work without having to inherit from MovieClip is the question: how do you instantiate an object of a MovieClip subclass? MovieClip objects come to life by using the attachMovie() method, not by calling a constructor. Hang on a minute… hold the phones, Batman! Maybe the answer is to just override the attachMovie() method in the subclass! D’oh! I will have to try that later! For now, on with my solution, which was to create a new, simple subclass of MovieClip, with the single added member, handle (of type Object), which can be used to refer back to the main object for which the MovieClip derivative is the “display” of. I needed that because when I started wanting to do things like add an onClick() handler to drag items around, the handler had no way of otherwise referring back to the object it needed to update – big problem!

Here are some snips of code (note: numerous details not related to the issues discussed, such as the physics calculations, are left out):

class SpringItem
{
    public var dragging:Boolean;
    public var sim:SpringSimulation; // Parent simulation
    public var mc:SpxlMovieClip; // Visual depiction of item

    public function init(simulation:SpringSimulation, movie:SpxlMovieClip, ...)
    {
        sim = simulation;
        mc = movie;
        dragging = false;
        mc.onPress = doDrag;
        mc.onRelease = mc.onReleaseOutside = doDrop;
        mc.handle = this;
    }

    public function doDrag():Void
    {
        //NOTE: "this" is the movieclip instance, not the SpringItem object.
        var mc:SpxlMovieClip = SpxlMovieClip(this);
        mc.startDrag();
        var si:SpringItem = SpringItem(mc.handle);
        si.dragging = true;
        si.vx = 0;
        si.vy = 0;
    }

    public function doDrop():Void
    {
        //NOTE: "this" is the movieclip instance, not the SpringItem object.
        var mc:SpxlMovieClip = SpxlMovieClip(this);
        mc.stopDrag();
        var si:SpringItem = SpringItem(mc.handle);
        si.dragging = false;
        si.vx = si.sim.vxm; // The SpringSimulation object has vxm and vym members
        si.vy = si.sim.vym; // ..that are updated with "mouse velocity" for each frame
    }
}

It seems like a lot of hassle, but it works. There is probably a better way! The SpringItems don’t update themselves, the SpringSimulation object is in control – it processes all the springs in one pass (adding per-component accelerations to each involved SpringObject’s vx and vy values), then updates the positions of the items in a second pass, ‘all at once’, as it were.

The MovieClips (eg the red balls) need a reference to the parent SrpingItem object, and each SpringItem needs a reference to the SpringSimulation object for various constants, and the SpringSimulation object actively manages the SpringItems. Curiously, the Spring class has no dependency on the SpringSimulation object: for it’s calculations it needs only the the two ends (SpringItem objects, which do contain references to the SpringSimulation, but these are not used or required), the relaxed spring length and the spring constant. I guess that means I could have two separate “simulation” environments running with a spring connecting across both of them… Synchronisation will likely be an issue, but I’m sure it always is when you are affecting objects in parallel universes! ;o)

Anyhow, the new version likely behaves similarly (if not identically) to the original, so it might seem that a major refit of the plumbing was a waste… only now I can generate objects on springs from code (yay!) and easily create randomised arrangements and “chains” (springs made out of lots of little springs) which have some pretty cool play-with factors, though I think the nature of the simulation means things are far from smooth, and changing some settings (like making the masses quite small) really makes the simulation wig out with unacceptable crazy highspeed superwobbles (yeah, that’s the scientific term!). I didn’t quite get around to implementing the next effect/idea from the book, but maybe that, too, will be easier now that some things have been fixed up.

In any case, space resets, only now with a completely new set of spring connections instead of only varying the strengths, weights, item locations, etc, up and down arrow keys increase and decrease the gravitational effect, and z sets “zero-G”. :o)

Enjoy!

New version: springpixel_02.swf

Original: springpixel_01.swf

-G.

The spring is sprung 17 April, 2008 at 7:21 am

More Flash fun, this time with balls on springs chained together. The example code in the book I’m reading suggested using trigonometric functions to calculate the ‘spring target’, but I thought I could do it with similar triangles.

Physics-ish based flash animationImagine two items (A and B) connected by a spring of a certain relaxed length (not stretched or compressed). It will help to think of item B as a fixed point and item A as the ‘free’ end of the spring. The item A will tend towards a point that is the relaxed length from B, in a straight line between A and B; it will be drawn towards B if pulled far away, and pushed away from B if it is too close. I’m assuming, of course, a massless spring and a whole bunch of other things – this is only a simple approximation of the very complex real world!

Here is the code:

var dx:Number = itemA._x - itemB._x;
var dy:Number = itemA._y - itemB._y;

if (dx || dy)
{
  var d:Number = Math.sqrt(dx*dx + dy*dy);
  var r:Number = springLength / d;

  var targetX:Number = itemB._x + r * dx;
  var targetY:Number = itemB._y + r * dy;

  // ... other fun bits about the same
}

A diagram would probably help! :o)

Basically I’m using the fact that we have similar right-triangles, and am using a ratio of the relaxed length of the spring to the length of the hypotenuse instead of using atan2() to find an angle then sin() and cos() to extrapolate a position. I don’t have any sort of performance metrics on it (hey, Flash is generally pretty slow for anything), but I’m supposing it could help a bit.

The hardest parts of this little project have been trying to figure out how to get Flash to actually do something… or at least tell me why it isn’t doing something, and moving code into some custom classes proved quite painful. The result is quite nice, though, and I’ll build on the techniques developed here in later projects.

I noticed an increase in size with almost exactly the same functionality when I started moving code in to classes, which I was a little surprised by given that the classes allowed me to reduce code repetition. I’m supposing that using classes (accessing object methods, etc) impinges on performance, but even with only a few balls on springs things were starting to get ‘messy’. The new code breaks things down a lot better and will hopefully allow for integrating new ideas as I make my way to the next chapter…

The Flash movie is roughly five and a half kilobytes. You can grab the boxy handles, and ‘throw’ the balls around. Use the UP, DOWN, 0 (zero) and Z keys to change the gravitational constant used (a little anti-gravity can be fun!), and hit SPACE to assign random masses and positions to the balls, as well as random spring lengths and stiffnesses to the springs. You can’t change the connections just yet – maybe next time!

Flash link: springpixel_01.swf

-G.

Space invasion 8 April, 2008 at 4:08 am

More like <em>Asteroids</em> than <em>Space Invaders</em>I’ve been reading a couple of books on Actionscript (Flash) programming, but not managing to get much hands-on time. Here is a tiny sample of a ‘spaceship’ simulation. Many spaceships, even. Try pressing the up, left and right arrow keys! :o)

Link: spaceship.swf

NB: You might need to click on the animation before the keypresses register.

-G.