Don Havey

Well isn’t today just the most amazing day of self-motivation ever. This is project #3 that I’ve uploaded. It must be this new Vimeo account… I’m addicted to sharing video now. Here’s the video clip: Voronoi plateau from Don Havey on Vimeo.

This quick sketch used my Voronoi diagram class to create a landscape of plateau-like structures derived from an image. The image is “chiseled” into a Voronoi diagram, then extruded according to each cell’s brightness. The diagramming process is interesting, the result is… meh. It makes high-intensity images a little more intense… but that’s about it.

On a related note, I discovered that when overlaying a number of iterations of Voronoi-diagrammed images in Photoshop with an exclusion filter, the results approach the original image in terms of resolution. Here’s an example:

Notice that the red image is washed out a bit, but is much more resolved than the others… interesting.

Anyways, here’s the source code (get your own images this time) and a demo. Click to give the applet focus, then use the arrow keys to navigate once the diagram is finished. Enjoy.

So Glenn Marshall’s metamorphosis video has been getting some rave reviews lately. The video consists of a 2d recursive vine-like growth, lots of butterflies, and some nice finishing effects. It is very pretty.

Unfortunately, Glenn’s been a little - hmm - reluctant to share his code. That’s a pity, because, well, Processing is open source, and it’s helpful to the development community when the results generated with Processing are fed back into the system, allowing beginners to grab some pre-built examples, and veterans to compare notes and techniques. In Glenn’s defense, this seems to be his livelihood, and I imagine he’s hesitant to go open source with us because he’d like to ensure that he gets his just rewards.

Well of course you know where I’m going with this. What better challenge than to reverse engineer such a lovely animation. Glenn is a self-proclaimed beginner in Processing (although you certainly wouldn’t guess it from the results). I am a (now) self-proclaimed non-beginner-non-veteran in Processing, so to add to the fun of reverse engineering this thing, I’m going to up the ante and say that the final result must:

1. Run in real time. Let’s say a minimum of 15 fps on my good desktop. (Glenn notes that it took 4 hours to render the HD version.)
2. Not look like Glenn’s creation. I don’t want to infringe on anyone, so no lookalikes, but the result must have the same basic elements: a meandering camera, a recursive vine-like growth sequence (not unlike my Lettertree tutorial), some layering, maybe a particle system or two, and some interesting background noise. No butterflies… I’m not a big fan.
3. Be OOPed on top of my existing base classes.
4. 6 hours total work time on this.

Today I’m posting my first dabble. The source code is structured similarly to the rest of my tutorials. I was able to quickly get the springy camera and “stalk” of the vine working, which by the way is not unlike Yellowtail, minus the user input and cool motion.

I’ll get into depth and code at a later date. For now, here are some bullet points:

• The stalk is essentially just a springy Polyline, eternally chasing a random Point, which moves every time the stalk comes within a certain distance (see the variables at the top of the Vine class). The Polyline is limited to a configurable number of sub-Segments… thus the disappearance of its tail.
• The trickiest bit to this first attempt was simply to make the stalk’s “tails” to look nice, and do that cute little growth thing. The variables relating to that are of the “th” variety in the Vine class.
• Notice that there’s no recursion yet, but that will just be a matter of adding children to the Vine class.
• The camera movement is super basic: a very-low-dampening spring with a very slow chase rate… giving it that “oh my god, I can’t believe I have to keep chasing this point, I’m so tired” feeling.
• Remember that since most of my core classes rely on 3d coordinates, I’m limited to rendering in OpenGL or P3D… which means that the smoothing won’t be quite as slick as in the original.

Here’s the source code. And finally… the results!

Enjoy. Feedback welcome. Stay tuned for part two. Oh an I wasn’t lying the other day about a good Particle tutorial coming up… I’ve got it written up, but am working on a few examples to accompany it.

Humans love maps. They love the mapping of any type of information, not strictly geographical. Maps are bursting with information. They transcend the boundaries of language. Maps are good.

I’m going to make a map today. Well, a globe. It’s going to be a very basic extension of our icosahedron-based sphere. We’ll translate a bunch of latitude/longitude pairs into three-dimensional coordinates to visually define the countries, then we’ll add a single marker on the globe that represents the user’s location, based on his or her IP address.

What it looks like

Here’s our completed Earth class: The final result

And here are the classes you’ll need: Earth classes

What you’ll learn

• Translating latitude/longitude pairs to Points
• Mapping an IP address to a physical location via Geobytes and PHP

Sounds like fun, right?

Read more…

A couple of years ago I was walking home from work and thinking about how writing to a blog is often a one-way process. Like talking to a wall. The most important part of the process, for most bloggers, is the creation of an entry: the release of words. The importance of readability decreases quickly after an entry has been written. Frequently it is an introspective process, like writing to a diary or talking to yourself.

I thought, I would like to create objects from blog entries. Objects that would contain the words in the entry and grow as more words are added, but remain illegible, thereby deemphasizing the creation of a document.

To make a long story short: I decided that a tree would be an appropriate object: it grows in a recognizable fashion and can expand nearly indefinitely. The lettertree concept was born.

This tutorial will explain how I approached the lettertree problem. It relies on our existing Tree class. We’ll create paths from the root of the tree to each “bud” and randomly select one of these paths to carry a letter. We’ll also increase the thickness of the tree branches as the thing grows.

Here’s what it looks like: The final result

Here’s what you need: Lettertree classes

Note that like many of the applets I post, I’ve switched the rendering method from OpenGL to P3D for the in-browser sample. The OpenGL results will look way better and (typically) run faster within the Processing environment, but the latest version of the Java plugin is so immensely bloated that P3D seems to render faster in a browser.

Ready to begin?

Read more…

This quick tutorial will show a more reasonable alternative to the electronsphere, which addressed the problem of distributing points evenly on a sphere. We’ll be creating a geodesic sphere (like at the Epcot center) using a subdivided icosahedron. It’s a relatively simple script and inexpensive in terms of CPU usage. Much more efficient than the electronsphere approach, though not quite as interesting.

Here’s where we’re headed: The final result

And here are the classes you’ll need: Icosahedron classes

About the geodesic sphere

The geodesic dome and sphere are often credited to Buckminster Fuller, although it is generally acknowledged that he did not invent the shape or concept, but rather investigated and expanded upon them. Read more in the Wikipedia article on geodesic spheres.

There is no one standard way to create a geodesic, but in general, the process is as follows:

1. Create a Platonic solid. We’ll be using the icosahedron.
2. Subdivide the faces of the Platonic solid to the desired level of resolution.
3. Project the points of each subdivided face to the surface of a sphere.

Additionally, the term buckyball is used to describe the truncated counterpart to the geodesic sphere. Buckyballs are found frequently in molecular science… and also in soccer. We’ll take a look at how to convert one to the other.

Why create a geodesic sphere?

If you need to create a sphere in Processing just for decoration or whatnot, by all means, use the sphere() command. You do not need this level of complexity.

But let’s say that you need a sphere that can transform itself into a different shape, or warp itself according to some input variable, or behave like a blob… then you’ll probably want to use a geodesic. As I mentioned, its one of the most straightforward ways to create an array of points on a sphere.

Of course, you could also use this script in more physical applications: the coordinates it defines could be used to construct a real-life geodesic structure. You’d probably want to drop the points into Rhino and unfold the thing first.

What you’ll learn

I’ll touch upon the following issues in this tutorial:

• Subdividing a face to an arbitrary level of resolution.
• Constraining points to a sphere.
• Finding the centroid of a face.
• And of course, more about geodesics.

Still sound interesting?

Read more…

Today’s tutorial is going to be shorter and sweeter than the last.

The problem we’ll address is how to structure a tree-like object in a way that’s similar to a real-life tree. It must contain a set of user-defined variables that affect the “species” of tree, but still allow some random variation within the tree’s growth.

I created something similar to this a couple years ago, but have reworked it to be simpler and more efficient. We’ll be using this Tree object in the “Lettertree” tutorial to come…

Here’s the finished product: Recursive tree

And here are the classes: Recursive tree classes

Let’s take a look at what we’ll be learning:

• Transforming points in three dimensions
• Randomizing variables
• How to structure a recursive object

And now why would we want to learn it…

The use for a recursive tree

The most obvious reason to write a tree generating script is… to generate trees. It would be fairly simple to export the coordinates of this tree into any 3D modeling software. Texture mapping and such would be tricky, because as you’ll see, this script uses segments as branches, not three-dimensional shapes. But nevertheless, it would be a nice addition to your next architectural project: some non-generic, bare trees in the landscape.

Of course, branching structures are used in more than just trees. Let me know if you think of other uses. Maybe something like… plotting three-dimensional decision making graphs? Where the sum of a user’s choices is represented by a single point within a cloud of possible outcomes? That could be a nice way of comparing the results of a survey in three dimensions.

And now, let the games begin…

Read more…