balloon experiment

Written images is an upcoming book comprised of artists creating a series of code generated images. The content of each printed book is a random selection of those images, making each book unique. One of the available ways to submit work was to use processing as a medium. I’ve had some minor success manipulating coordinates in 3d space with my previous flash projects so I assumed it would be easy to do it again in processing.

My idea was to create a randomly generated balloon animals, looking specifically at how the joints are connected from segment to segment. Each segment  has a specific length and a specific rotation which would be nested into the next segment until the dog shape emerges. It seemed simple and straightforward enough until I started rotating each balloon segment in 3d space. I assumed all rotations would be easy to create using only the base x,y,z axis rotations but boy was I wrong. Once I started nesting the segments it became harder and harder to predict where the rotations would end up. There was no easy way to solve this and the deadline was fast approaching so I had to shelf the project until I solve the rotation issue.

Without getting into the details, because frankly I still don’t completely understand them. There are a few ways to do rotations in 3d space. There’s Euler angles, matrix transformations, axis angle rotations and quaternion rotation. After testing every option, quaternion rotation seemed to be the solution. I’m slowly understanding quaternions which I learned from this book and this wikipedia article.

The first thing I did was to randomly distribute a set of points that had no dependency with it’s previous segment. The white lines below represents the segment length and random position.

The violet and green lines represents the start and end 3d tangents of each segment respectively. Getting a 3d tangent aka a cross product is a little tricky only because it requires 2 vectors. I only had 1 so I arbitrarily created another one ( you can barely see it as a small white line extending from each segment corner). After normalizing the cross product and multiplying it by a radius I was able to get the violet and green dots that cap the lines.

Using the quaternion solution above, I was able to get a rotation around the off axis created by the segment line. I distributed the angles in relation to an arbitrary total number of points used to generate a circle and then connecting the front and back points to create a cylinder. I now have enough data to connect the lines using a bezier segment. Each line of a segment is comprised of 2 bezier curves, one from the front and 1 from the back. adjusting where the control points of the bezier are position govern the ‘shape’ of the segment.

This is starting to look good but there was an issue with the segment edges. When I linked a segment, the cross products theoretically should be a mashup of the front and back of two segments. Currently there is no mashing going on so i needed a simple way of averaging of 2 vectors.

My first instinct was to use a SLERP which I will not describe because frankly i couldn’t get it to work. Instead I copped out and used a basic LERP which kind of works well enough to be passable. I think if I started to get serious about creating a balloon shape I’ll probably have to switch over. For now it works well enough. You can see the resulting LERP as the red dotted lines that orbits the joint between two segments.

The next step is to systematize all the arbitrary controls into a unified control panel. ControlP5 made it really easy to add controls to the shape without having to create a radically new interface. PeasyCam made it easy to rotate the balloon in 3d space. I’ll still need an easy way to modify each point manually but currently i’m happy with just using a random spread.

I added a few different views to make it more interesting and a randomizer button that repositions the segments over time. There’s still quite a few more things i’d like to add like audio input and video export but I’m happy with the result so far. Maybe if written images 2 rolls around I can resubmit this to the project.

In the meantime please enjoy the progression of work here.
(Source and local version are also available).


5 Comments so far. Leave a comment below.
  1. Balazs Lajtha,

    Looks great, when I played with the parameters I was able to get something like a balloon animal (had to put the bezier curves on a diet). But the thing missing is the interaction between two segments, which makes the balloon balloon-like.

    The transformations needed for the points to appear correctly are about the same thing as calculating the reach of a robotic arm with 2D joints. Math is hard if you’re doing it on paper (as we were asked on the exam) but it should be managed easily if you have a machine that calculates the quaternion matrix-transformations.

    Keep up the good work, and if you’ll look into the robotic arm problems, you’ll be surprised how easy it is to create a balloon animal that you can twist at each joint as you please. The real big issue will be to make something like the foot of the dog, where the segment itself bends.

  2. mannytan,

    That’s pretty much the next step. From what I can figure out, there’s no edge detection between segments causing the overlaps. Each segment is drawn with bezier lines, stemming from the center to the corners. While the segment corners are passable the way they are, the centers of each segment need a simplified form of collision detection. If I treat the center of a segment as a sphere instead of a 2d circle I think I can figure out the math to prevent the spheres from overlapping, in effect creating that curve you see when you create the dog feet.

  3. peripecio,

    Good Job & Very good explanation.

  4. Alle tiders artikel, håber der kommer flere som den her.

    Venlig hilsen Tom/Hverdag og Familie

  5. You ought to be a part of a contest for one of the highest quality blogs on
    the web. I’m going to highly recommend this site!


2 pings so far.
  1. Aug 25 CM50

Add Your Comments

Your email is never published nor shared.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>