Skip to main content

Final Project

Put on your 3D Glasses and watch a video of my final project:

There's also a non-anaglyph version if you don't have 3D glasses with you.

I put a lot of work into this project.

Technical Details

The animation was created in the Java version of Processing. I used the Camera3D library to make the ordinary 3D processing sketch into an anaglyph using the Dubois Anaglyphs algorithm.

The font morphing data came from JavaScript using the opentype.js and flubber libraries we learned about in class. Building on the work from my previous assignment I wrote JavaScript code that morphs every relevant letter into every valid snowflake and saves the data in JSON files that are later read by the Java code. The Java code uses these JSON data files to draw each letter-snowflake as needed during the animation.

The most interesting thing about the animation is that the output as created by my code is this:

The easiest approach for getting the snowflakes to morph into letters and words is to animate the entire thing in reverse. Instead of having the snowflakes fall, letters rise up and morph into snowflakes that then disperse randomly into the sky. After inverting the flow of time this actually becomes a straightforward application of the content of Dan Shiffman's book The Nature of Code.

The source code is available on GitHub if you are interested.

Even More Technical Details

Letters like 't' and 'm' that can be drawn with one contour can morph into snowflakes that also have one contour. Letters like 'y' or 'd' that in this font have a hole in them are morphed into snowflakes that also have a hole in them. This was done to improve the morphing results and avoid having to separate or combine shapes. The JavaScript code finds every valid letter-snowflake pairing and morphs each in 2% increments from 0% to 100%.

Observe the behavior of characters like 'i' and 'F'. In the font I am using for the text both are drawn with two separate contours. The 'i' obviously has a dot and a base, and in this font the 'F' is a fancy F with the top part separate from the rest of the letter. These characters are formed from two separate snowflakes that land on top of each other and morph to form the complete letter.

Although the Java language does have a JavaScript engine built inside it I ran this JavaScript code though the P5 web editor. I originally tried to run it through node but I got some crazy error in the flubber library. The JavaScript code and function input were exactly the same but executed differently in node. Can I not expect JavaScript to be the same from platform to platform? I was very frustrated by this and tried different node versions to get it to work. Eventually I gave up and ran it through the P5 editor so I could move on.

Comments

Comments powered by Disqus