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…

So the Art All Around competition is due tonight. For those of you who are unfamiliar with it, the premise is this: Create a plan to paint a large number of oil tanks located on the waterfront in (our fair city) Portland, ME. Some of the tanks will only have their tops painted, some will have their sides and their tops painted. The site is visible by land, sea, and air… but really only from a moving vehicle. The tanks are located adjacent to a major highway, and owned by the Sprague Energy Corporation; it is not public land.

Angel and I are submitting two proposals (since the depth of the proposals is very limited by the competition guidelines). Here they are:

** UPDATE: Chris sent me his excellent entry with permission to post it. Check it out below. **

Circles

The enormous silhouettes of local citizens walk in tireless circles around the tanks, while others bask in the sunshine on the tops.

Distortion

A texture of fluid lines challenges the shape of the cylinders, complementing the fact that they are experienced primarily while the viewer is in motion. Algorithmically generated via Processing.

Complements of Chris Nannig

Chris did this study in super-warped color adjacencies. I think it’s great.

Enjoy. Let me know what you think…

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…

I’ve been hella busy lately, but do not fear…

Coming soon:

• Computer vision. Get your webcams ready. Birds landing on your shoulders, drawing with video, all that good stuff.
• More fun with typography. Manipulating text with… video? Or with space filling algorithms? Or making text that runs away when you try to read it? Something like this? I haven’t decided yet.
• Some real uses for the applets I’ve already discussed.

Stay tuned!

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…