Whole/Broken

Broken 2 from Tami on Vimeo.


Broken from Tami on Vimeo.

Descripion

The assignment was to illustrate an adjective using basic oF draw functions and user interactions. I chose the words Whole & Broken, two halves of the same concept. I wanted to create an organic interaction where the user breaks up a whole object into smaller pieces, much like breaking a mirror. When the user clicks anywhere on the screen (or “glass”), a crack spreads throughout the piece. The breaking point and subsequent spread of the cracks depends on where the user clicks, which gives the user the sense that they are causing the crack.

I went through many iterations of this project. The first was drawing random triangles around the screen, but the randomness coupled with the screen refreshing did not give the sense that anything was breaking.

The second iteration generated triangles randomly around the mouse position, but the triangles sort of popped onto the screen and again gave no sense that the surface was breaking.

For the third iteration, I tried to draw the shards of glass using classes and vector storage of information (with help from the guidance and code of Thom Hines), but I still was not able to create the feeling that I wanted. The cracks were generating randomly, but they did not look natural.

I decided to start from scratch because I was feeling stuck with the code I was using, and I was finally able to get the program to look like it was breaking naturally. I was unable to contain the “shard” information and then move the pieces to simulate glass breaking and those pieces falling to the ground, but this iteration was the most successful at illustrating my adjectives.

Although I ultimately did not use code inspired by Thom Hines’ project, it was a big help in trying to understand how I could generate the look that I wanted. Precedents and inspirations can be viewed in my project proposal.

Code

Download full source here.