Don Havey

Curiobot is in the middle of a structural makeover and this morning I decided that the code needed a little condensing. Most popular Javascript applications simplify function and variable names to just a few letters, and some CSS-heavy pages use a similar unique identifier to cut down on bandwidth. This technique also obfuscates your code, if you’re worried about people stealing it and using it for their own (evil) intentions.

In a big old “Web 2.0″ (*gag*) application, condensing your code can reduce your page load times by a serious percentage. I think it’s especially important if you’re offering content for mobile users, where every kilobyte counts. Replacing 300 occurrences of 12-character variable names with 2-character names can save you 10*300 bytes = 3kb per download. That’s probably 5%, maybe 10% of your total script/CSS/HTML weight… so it adds up on high-traffic applications. Of course, as most web developers are quick to point out, I pity the poor bastard who has to try to understand and/or modify a function called “zx()”. Ever taken a look at Google’s scripts? Totally incomprehensible for that reason.

Technically, you could name up to 676 (26×26) functions, variables, or classes using a two-letter pair, but the problem you run into is that when your content is not perfectly isolated from your page’s structure, you can’t simply search-and-replace the page to find every occurrence of the classname “ea” without running into it in a sentence somewhere (”I went to the beach” or “Welcome to my neat-o website”).

For the minimum amount of content-structure collisions, I want to favor the two-letter combinations that are used least frequently in my content. So I wrote a quick Processing app to examine any given text and return an ordered set of letter pairs, sorted according to their frequency. Here are the results for a few sample texts:

• The first two chapters of War and Peace
• The front page of Boing Boing (including html)
• The first five chapters of The Little Prince (English version)

The pairs that are not in bold were not found at all in the sample text (use them for function/class/variable name replacements). Those that were found are displayed by frequency.

Here’s the code. Try inputting text that corresponds to your particular usage for better results.

So the next time you’re thinking of renaming “load_excellent_content()” to “le()”… don’t. Try “vq()”.

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…