Type on the Move

Our penultimate assignment for this class involves moving or interactive type while also thinking about our final project.

My idea for the final project involves falling snowflakes morphing into letters and forming words. This is an idea that has been percolating in my mind for a few weeks now but faced a critical problem: I didn't know how to properly morph one character into another. I was very happy to see my friend and fellow student Oren Shoham accomplish this last week for his assignment using rune.js and flubber.js.

As suggested by Oren, the rune.js was not necessary so I only used flubber.js in my sketch. I also used it completely differently because I wanted to have filled in characters. Below is an example.

If you click on the sketch it will pick a different snowflake to use. The snowflake comes from the decorative snowflake font WWFlakes by WindWalker64.

One difficulty I faced involves what to do with characters with holes in them, like the letter 'a' or 'b'. Well, my code can handle that too:

How did I do this? Simple. I looked at the snowflake characters and picked out the ones that had a single hole in them and only pair them with characters that also have a single hole. Characters with no holes are paired with a different set of snowflakes that don't have any holes. In both cases the code is randomly picking snowflakes that "works" with the selected character. Mathematically we would say that the character and the snowflake must have topological equivalence or be homeomorphic.

But what about characters that don't have holes but are separated, like the letter 'i' or an explanation point? My code can handle that too:

The flubber.js library has combine and separate functions specifically for this purpose.

One thing my code doesn't currently handle but could cope with is letters with two holes, like the letter 'B'. For that I would need snowflakes with two holes in them. The snowflake font I am using doesn't have any, but of course I could always create my own snowflakes for this. I don't have to actually use a snowflake font for this because any SVG graphic would work with the flubber library.

The end goal here is to have the snowflakes form words to communicate holiday greetings like "Happy Holidays," "Merry Christmas," "Happy Hanukkah," and "Happy Festivus." I don't need the letter 'B' for that. I want the letters to fall randomly like real snowflakes but morph into letters and position themselves properly to form words at the last moment. I know how to do that with the noise function but will explain that later.

One can ponder if the visuals of these sketches can be separated from the content of the text. In this case the question is interesting because snowflakes don't have content in the same way that letters do. As the snowflake is morphed into a character, when is the threshold crossed? Is there are clear moment when content is created, or is it gradual?

If you are interested you can see the code.