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).