Don Havey

I had a crotchety old man as a 2nd-year studio instructor. He was very adamant about the usage of the word space. He tried to tell us that space cannot be created (sometimes architects say that they “create spaces”), but all I learned was that it was very difficult to learn anything from crotchety old men.

It’s a matter of semantics, if you ask me. Creating space, defining space… whatever. Today, I am concentrating on fillling space. There should be no controversy there. Even while he was yelling about space, my professor was certainly occupying some.

I’ve been thinking of trying a space-filling algorithm for some time now. They’re quite simple, and quite useful. Jared Tarbell made a nice one a few years ago: Emotion Fractal. In the world of data analysis, they are commonly referred to as Treemaps.

Here’s what it will look like: The final result (click to activate, then press the spacebar to add boxes)

And here’s the source code: Space-filling classes

Let’s get started…

Read more…

Alright I’m back. Still got a couple of other projects going on that are sucking me away from the tutorials, but I figured that I should get at least one tutorial up this week to let everyone know that I’m still alive. As I mentioned, I’m going to dive into the topics of video capture and computer vision in Processing.

Today I’ll present three variations on a theme (it’s like This American Life!). Today’s theme: Mapping video on to irregular polygons. Or, as I like to put it, cutting out pieces of video as if you’re using scissors and paper.

Since these applets will all require a webcam, I’m not going to post them inline on the page. I’ll scatter some images about the page and point you towards the required classes (they’re after the jump today).

You’ll have to paste the thing into Processing to see live results. Note that you may need to configure the line that finds your webcam, although this should work for most situations:
//initialize camera
String[] cams = Capture.list();
println(cams);
//you may need to change which camera in the list it chooses below
cam2 = new Capture(this,w/2,h/2,cams[0],fr);

What you’ll learn

• Filling a polygon with an image instead of a color.
• Drawing polygons and removing them with a right-click.
• Using an image’s pixels[] array.
• A few other tips and tricks to working with video capture in Processing… like using two video streams simultaneously.

Ready?

Read more…

It seems that everyone who has ever programmed in Java has, at some point, created a variation on John Conway’s Game of Life. Well I wouldn’t want to break with tradition. Here’s mine.

This is just a code dump, but the applet is so simple that it doesn’t really require a tutorial anyway. I’ll paste the code directly into the post below, but if you must download a zip file, you can click here.

Here’s the demo: With motion blur / Without motion blur
(Press spacebar to pause, toggle cells by clicking them with your mouse, then press spacebar again to animate.)

My take on it

Like I’ve mentioned before, the motion blur trick is a little tired. But the idea I had with this applet was to use the automaton to generate some interesting 8-bit-esque texture maps. Since we’re wrapping the cells around the edges of the applet, a screen capture of any frame can be tiled seamlessly. The example above was made from a 40 cell x 40 cell square, reduced to be a 40px x 40px tile, which was in turn defined as a pattern in Photoshop and used to fill the image.

Although the example above is made from a tiny tile, I think it looks pretty nice. Interesting wallpaper, if only conceptually. Certainly not meant to be used for realistic bump mapping or anything.

Want the code?

Read more…

Sunday is looking a little overcast, a little gloomy, and a lot like a good day to tackle a complicated tutorial: Voronoi diagrams.

I’m sure you’ve seen them before. Given a set of points, a Voronoi diagram defines a series of cells surrounding each point. Each cell contains all points that are closer to its defining point than to any other point in the set. Subsequently, the “borders” of the cells are equidistant between the defining points of adjacent cells. I’ll give you a diagram later.

I haven’t used my Voronoi class in an exciting applet yet, but it has plenty of uses… mostly functional, some aesthetic. Golan Levin did a series of portraits using Voronoi diagrams. More commonly, they’re used in mapping applications.

But first, the moment you’ve all been waiting for: The final result

And how we get there: Voronoi classes

More introduction

Say you have a map of your city, and on it you have located a set of points representing every fast food restaurant. Creating a Voronoi diagram from these points would enable you (on your walk through the city) to know which restaurant you’re closest to at any given time. Of course, an application that simple could be solved more efficiently via other methods, but let’s raise the stakes a bit. What if you want to know the percentage of your walk that will be closest to one particular McDonalds. Suddenly, without a Voronoi diagram, this is tricky. With a Voronoi diagram, however, it’s a simple matter of intersecting the line that represents your walk with the cell that surrounds that particular restaurant.

Voronoi diagrams can also be used to make maps, not just analyze them. Say you have a set of points that represent air quality sample locations. To quickly generalize the sample points into a local map… bam! Voronoi diagram!

There are other more abstract information processing uses for the diagrams as well, but I’m not going to get into them here.

A few more notes

• The most efficient way to create a Voronoi diagram is via Fortune’s sweepline method, which reminds me of how police departments use lines of people to do a walking search of an open area. We’re not going to use that method here. The math is less intuitive.
• The dual graph of the Voronoi diagram for a set of points is called a Delaunay triangulation. It’s a pretty great way of generating a mesh from a set of points, because it allows for an efficient non-uniform distribution of detail.
• All Voronoi cells are convex hulls, assuming that the boundary we are working within is a convex hull. This will be important.

Still alive?

Read more…

Here’s another brief tutorial. This one relates to object collisions and velocity transfers. Basically, we’re making simulated billiard balls: objects that bounce off each other and the sides of the applet. Not too much else to introduce, so I’ll just get started…

What it looks like

Here are the files: Collider classes

And here’s the final result: I’m a super collider

Click on the applet to rejuvenate each Collider’s y-velocity and prepare for another round of bouncy goodness. If you find the motion blur distracting, you can always look at this blur-free example.

What you’ll learn

Some of the math you’ll have to decipher yourself, but in general, I’ll touch on each of the following:

• Preventing circular shapes from overlapping.
• Constraining points within an area.
• Transferring velocities upon object collision.
• And I’ll show you how to do that cheesy motion blur trick… if you don’t already know.

Ready?

Read more…

This isn’t a formal tutorial… just a source code dump. I made this randomized, springy IK grass in Flash for Curiobot a while ago, but decided that it was too CPU-intensive to risk combining with all of the DOM-scripting on the site. As such, I didn’t bother optimizing it much, so that’s up to you.

The files: IK grass classes

The final result: Springy IK grass

Click on the stage and then move your mouse left and right to simulate a breeze through the grass.

The variables contained in the .fla are pretty well labeled… you shouldn’t have any trouble playing around with them. I’m afraid the thing was built in Flash MX 2004… so it’s AS2.0, not AS3.0. But it wouldn’t be hard to convert… it’s already OOPed. I think I’ll put it into Processing soon. Should run much better.

Enjoy!