Ass­i­g­n­m­e­n­t 2

by Andrew Kobylski

Inspiration and original idea

Each time I enter the Wilkinson building for the weekly tutorial I pass by a large room on the first floor which appears to be a workshop. This made me want to create an animated logo where each letter was split into different parts and would come together in various ways, just as multiple parts come together in a workshop.

First version

With a designated font the concept of splitting up each letter became too difficult to implement, however, I still wanted the text to be the animated focus of the logo.
Continuing with the 'building' and 'coming together' idea I decided to begin a Tetris influenced animation where the letters come down from above and stop once they hit the bottom or another letter.

Second version

After the first version my intention was to make it more like Tetris where not all the letters would appear when a new line appears. However, while changing how the letters move I created a bug which made the letters drop slowly after reaching their destination. I liked how it looked and the smooth motion of it fit the design brief of not being distracting. So this bug became a feature.

Third version

At this point I was pleased with the animation even though it didn't fit my original idea. Now the colour section of the design brief needed to be fulfilled. First was choosing which colour belonged where, the yellow background with black text looked most pleasing and highlighting a small percentage of random letters gave a more distinct look without being distracting (if too many were highlighted that may be distracting).

Final version

The last two features were to make the highlighted letters come in smoothly, again to fit the design brief of not being distracting. And to not base the highlighted letters completely on random. This was a good fit for Markov chains where the next letter is chosen randomly but also based on the previous choice.

The four possible starts of the chains are 'sign', 'lab', 'dig', and random. Random being implemented differently to how it is seen in the above design. Final

Desired changes

While I am pleased with the final version, I should have attempted something that fit more with my original 'building up' idea.
From a technical perspective I am happy with the Markov chains, however, the possible chains could have been more interesting from a visual perspective specifically I would have replaced the 'dig' possiblity with one that had highlighted letters next to each other.

Finally, although only square resolution examples are included in this portfolio, the actual version of the sketch is in a landscape resolution to fit with the banner design brief. The sketch will work accurately at any given resolution by simply altering the parameters given to the size function. I personally think it looks very good at a 'portrait' resolution due to the letters falling, this may be appropriate as an animation on the side of a website rather than at the top. Although this sketch will not look the same if run as processingjs so it is not appropriate for a website in any case.


Nobody has said anything yet.