loading

Archive for December, 2007

Douglas Edric Stanley

registerDraw()

If you look inside the Processing code, you’ll find a helpful little service that isn’t mentioned in the documentation: registerDraw(java.lang.Object o) & unregisterDraw(java.lang.Object o).

These two functions are particularly helpful if you’re working with multiple objects. For example, imagine you had a class for a bunch of circles dancing around the screen; i.e. something like this (Yes, I know, this code is lame; just bear with me.):

////////////////

class Circle {

  float x, y;

  Circle() {
    x = random(width);
    y = random(height);
  }

  void draw() {
    x = ((x + random(-1,1)) + width) % width;
    y = ((y + random(-1,1)) + height) % height;
    ellipse(x,y,11,11);
  }  

}

////////////////

You can then make twenty of these circles in your setup() as so :

////////////////

Circle[] circles = new Circle[20];

void setup() {
  size(256,256);
  for(int i=0; i<circles.length; ++i) circles[i] = new Circle();
}

////////////////

Now all you have to do is to call each and every one of those 20 circles in your draw() function through a for() loop :

////////////////

void draw() {
  background(255);
  for(int i=0; i<circles.length; ++i) circles[i].draw();
}

////////////////

But there has to be a cleaner way, right? You already wrote void draw() inside of your class, why not just let Processing do all the work of calling each object’s draw() for you?

Here is a complete re-write of the above program, which makes it all a bit cleaner:

////////////////

Circle[] circles = new Circle[20];

void setup() {
  size(256,256);
  for(int i=0; i<circles.length; ++i) circles[i] = new Circle();
}

void draw() {

}

public class Circle {

  float x, y;

  Circle() {
    x = random(width);
    y = random(height);
    registerDraw(this);
  }

  void draw() {
    x = ((x + random(-1,1)) + width) % width;
    y = ((y + random(-1,1)) + height) % height;
    ellipse(x,y,11,11);
  }  

}

////////////////

abstractmachine registerDraw Processing example

Note how I have left the void draw() { } function completely empty. This is to show that the objects are all drawing themselves automatically. Why draw() at all, then? Well, you have to be careful here, because draw() is a required function, otherwise the Processing core will not animate your circles. There are other ways around this, but I usually leave the draw() in there, because it allows you to add a background(255), for example, to clear out the Sketch before drawing into it.

Also note, that the classes have to be declared public. I’ll explain more on this in my upcoming courses on objects and good practices. But for a short answer as to why the public keyword: your Sketch (called an applet) has ownership of all the objects declared inside of it. These are all private, i.e. only your own Sketch can call its own functions. In order for Java to automatically call all of your draw() functions within the objects, you have to declare them accessible (public) to the Processing core which does not have ownership of those objects. If all that sounds complicated (and even worse, I might have gotten some of that wrong — comments are welcome!), just forget it.

One eventually complicated part is determining in which order you will have the various objects drawn. This is very easy to control. You just registerDraw() in the order you want them to be drawn. Easy, non? And if you want to change their order? That’s easy too: just call unregisterDraw(); and re-register it. unregisterDraw() requires the address to the object, so you probably write something like this: unregisterDraw( circles[0] ); which would unregister the first circle. Again, if you don’t understand what I’m talking about, you probably should just ignore all this.

I suppose the most complicated part for beginners is the idea of this. I don’t really have the time to go into « this » right now. But again, for a quick explanation… this is a pointer to the object that contains the draw() routine you want auto-executed. Whenever you read this, the computer instead reads something else entirely: a specific memory address. Why? For simplicity (from the computer’s perspective at least) and control. Each object reads the same code from the class Circle, but each object has its own memory space containing its own variables for that code, as well as instructions on what it is supposed to do with those variables (defined by your class). You control these different objects by talking to them wherever they reside in your computer’s memory. The word « this » points to the address of that unique object. This address is what you need to give to registerDraw() and unregisterDraw() in order for the computer to know what to register or unregister.

Although I should point out that I have performed no speed tests on this method, I suspect it is nearly identical to calling each object yourself inside of your own draw() function. Looking in the Processing core would probably give me the answer, but I’m too lazy: hey, it’s the holidays. So why do I say it’s cleaner? Well, I like to use Processing’s tabs to hide away as much of the code complexity as I can in the far depths of the various classes. I’ve even started making classes inside of classes (ex: recent Wiimote class made during the Geneva workshop), so I don’t really want to be bothered with all that complexity once I’ve gotten it right. Processing is all about making code as simple as possible, non ?

Peter Kirn

Holiday Cheeriness: A Crazy Interactive Shirt Display

Cheer, indeed. We know how badly many of you want to get out from behind your laptop and out into a venue once in a while. Here’s a solution: wear your display. And it helps if that display has the insane interactive capabilities that this one does. Marco Tempest of newmagic.com writes CDMo:

A little X-Mas greeting for all of you! Showing of my Photonic T-Shirt. Wearable visuals. Haha…

I’m still working out whether that “haha” is an evil scientist “I’ll take over the world with this” laugh, a laugh at the rest of us that don’t have one of these t-shirts, or a jolly laugh of holiday delight. I’m betting some combination of the three. Just watch:


© Peter Kirn for Create Digital Motion, 2007. |
Permalink |
No comment

Add to del.icio.us

Want more on these topics ? Browse the archive of posts filed under News.

todo.to.it

ARTIFICIAL.DUMMIES

ARTIFICIAL.DUMMIES from todo.to.it on Vimeo.

A.I. enhanced graffiti
C.Stem 2007 Festival opening installation by TODO
http://www.todo.to.it

Cast: todo.to.it

mb09

Built with processing 03

Built with processing 03 from mb09 on Vimeo.

i like curves
webcam version is available for slit-camera pattern
reference:
http://www.onionlab.com/processing/YSLJTitles.html
http://www.vimeo.com/443646
source:
http://www.mb09.com/processing/pattern.zip
http://www.mb09.com/processing/pattern_cam.zip

Cast: mb09

Dragan Nikolic

Processing

Processing from Dragan Nikolic on Vimeo.

A little Processing script, originally output as Quicktime movie. Original = 36MB (lossless, “animation” type), 600 x 600 px.

Let’s see how this looks once it’s been uploaded to Vimeo and converted to FLV/Flash.

Cast: Dragan Nikolic

alvartube

Experiments with video & and sound under Processing

“Electric silhouette” initial demos. Built with Processing (processing.org) using BlobDetection (www.v3ga.net) and proMidi (www.texone.org/promidi/) libraries. This program has been used to complement a live performance by NoForkDroise noise group (www.myspace.com/droise)

Author: alvartube
Keywords: interactive visuals image processing
Added: December 26, 2007

Andy Polaine

20000 Particles

20000 Particles from Andy Polaine on Vimeo.

In this render I decided to see what might happen with 20,000 particles instead. The initial explosion is at the top right and then you see them start to gather into sort of ‘ropes’ of particles. Right near the end you see two breakaway groups, one like a sun flare out of the top of the main rope and the other coming in from the top of the screen.

Cast: Andy Polaine

Andy Polaine

5,000 Particles

5,000 Particles from Andy Polaine on Vimeo.

This was really just testing rendering out from the particle engine with lots of particles (5,000). I quite like how it looks though.

Cast: Andy Polaine

Andy Polaine

Blue Swarm

Blue Swarm from Andy Polaine on Vimeo.

This version has the particle target moving faster, so actually the particles themselves move slower because they don’t get a chance to be attracted into the orbit of the target quick enough. It produces a kind of pulsing swarm-like effect.

Cast: Andy Polaine

Mikkel

Happy Holidays - new (COS) stuff coming up

With the festive season upon us I hope everyone is taking some time off to cook up great ideas for the coming year - I sure am enjoying the time off but also anxious to get going with 2008.

Below is an early screenshot from an upcoming in-store projection for fashion brand COS - I finished this JUST in time for the holidays - nothing like a deadline at the end of the year.

cos_winter_sale_pre-screenshot.jpg

Stores across Europe will soon (when the sale starts) show these graphics. I’ve built it all in good’ol Processing. I’ve tried to really trim t down to super simple (ok, I added some glow in the end, so shoot me), everything is simple shapes, black and white, fills and outlines. I’ll post more documentation once the projections are up and running. For now, here’s a quick photo of the planning drawings from my sketchbook.

winter_sale_coming.jpg

Happy holidays to everyone.

Nice to be Liked

Somehow the folks at Edge magazine have named Headcase Internet Game of the Month.

That’s nice eh?

Observe the page breaking large image of the article:

Peter Kirn

Happy Visualist Season: Say it with Processing!

timetoplay.jpg

As good will spreads through the season, people are getting expressive with more than just paper. Toxi, aka Karsten Schmidt, sends along this Processing-based interactive 3d card: simple but elegant and definitely something different to find in your mailbox.

Postspectacular Xmas

You may need to “trust” the applet for 3D-in-browser, sadly (usually only the first time you run a Java app - but no worries, no actual security risk here). Still, it’s not hard to imagine a day soon where we pop little interactive greetings to each other’s mobiles. Well, not hard for me to imagine, anyway; maybe it’s the glow of this new Blackberry. But thanks to Karsten for all the skill and inspiration he’s offered over this year.

That’s actually not the only interactive card I got. Bubblyfish aka Haeyoung Kim sent an 8-bit holiday card out on her site. Next: a home-built card with homebrew, custom-programmed sound chip and LED array.

Hope everyone’s having lovely holidays. You have just under one week to build your own ball drop.


© Peter Kirn for Create Digital Motion, 2007. |
Permalink |
No comment

Add to del.icio.us

Want more on these topics ? Browse the archive of posts filed under News.

flight404

Advanced Beauty

Matt Pyke, of Universal Everything, and his brother Simon are teaming up with visual designers around the world to create a DVD project called Advanced Beauty. The project brief is simple enough. Take a piece of original audio created by Simon and make a motion graphics piece for the audio. It must start with a blank white frame and end with a blank white frame, but everything in the middle can be whatever you desire.

Matt Pyke has released a trailer recently which can be viewed at the Advanced Beauty site. My piece isnt represented in the trailer. Reason? Well, I havent finished it yet. Sadly I ran into a weird bug with JSyn and Sonia in Processing where JSyn poops out after about 13.5 hours of rendering. The JSyn people are aware of the bug and have been for a long while. The fix for this bug is nearing completion but not soon enough for me to take advantage of it. Other options, like preprocessing the audio or adding break points, would have worked fine but I was feeling lazy and didn’t want to bother with finding new ways to do something I was already happy with.

My original piece was going to take about 30 hours to render. This obviously wouldn’t work so I had to do some rethinking and recoding and the end result brought the render time down to about 5 to 6 hours, and cut some 50 GBs off the final video size. Hurray! Here are some stills from the near-final piece. With the big hurdles out of the way, I expect to have my final piece to Matt and Simon sometime in the next week.

The audio from Simon is a little over 4.5 mintues long. Since 4.5 minutes of direct audio analysis might get too muddy or boring, I asked Simon to provide me with separated tracks which he happily did. Using Processing (surprise surprise), I analyzed 7 different tracks in 1/25th of a second blips and used that data to influence the visuals which are based on the Magnetosphere engine. There are up to 200 gravity orbs and up to 10000 charged particles. Each particle can leave a ribbon trail up to 75 segments long. Additionally, each particle can leave behind up to 3 spark particles per frame and each gravity can leave behind up to a dozen nebula images per frame.

flight404

Magnetic Ink, pt. 3

I spent a couple weeks at the beginning of December working on the Magnetic Ink pieces. I played around with more elaborate source graphics taken from NASA images of nebulae. I originally tried using smoke as the source graphics but was dissatisfied by the lack of contrast within the images. Nebula images work well because they contain a lot of subtlety but still maintain a general look of fluid or smoke.

I played a bit more with refining the look of the ribbons. They are so incredibly hard to control sometimes. The current code allows for particles to pass back and forth between the large gravity orbs. Occasionally a particle ends up in a loop where it will bounce from one gravity to another every frame. This happens mostly because I am not using Verlet Integration or the much feared 4th order Runge_Kutta to calculate my particle movement. I stick with the much simpler Euler method but it can cause problems. The effect on the ribbon is that it forms a sawtooth pattern which takes away from the smooth organic look I am trying to achieve. However, these problems are small enough that I am willing to overlook them. Learning the Verlet or RK4 is quite the mental chore. I am putting it off for now.

A few of the newer pieces allow the ribbons to reflect the history of the audio being analyzed. Not sure if I like it more or less than the more hair-like ribbons, but I do like being able to see a bit more into the process. The pixel gap between the quads is a whole other story. Not sure how to get rid of those yet.