Creative Coding: Group 1 Case Studies
Case 01: Resolution independent pixel art
Have you ever seen pixel art that is independent of resolution? This oxymoron was beautifully executed by German designer Marcus Blätterman in his illustrations that depict scenes from Greek mythology. As you resize their frame, the drawings animate wonderfully, not only maintaining their readability at absurd aspect ratios and low resolutions but also adding to the story they’re telling.
Take the example of Teiresias, who ran into two snakes mating. Being disturbed by the view, he stepped on the female serpent and was immediately transformed into a woman. As you change the orientation of the illustration from portrait to landscape, the figure comes closer to the snakes and slowly mutates from man to woman.
The author shies away from calling them “responsive” — “these images work differently, there is no source image […], the whole image is described [so] that everything depends on the final resolution”. Therefore, independence from resolution is to be intended as more of the absence of a fixed image (or set of images) to start from.
The code has the .px extension, but it’s actually all vanilla Javascript. The author said he will publish an article on his website explaining in depth what’s going on behind the curtains. In the meantime, the publication of these illustrations has brought new attention to the research about finding easier ways to create resolution-independent images. In fact, writing a thousand lines of code for one image (as is the case for The Three Graeae) is not really a straightforward solution.
Case 02: Scope
Scope is “a variable, monolinear typeface designed to enable typographic interactions”. The font and the site that shows it are designed by Jonas Pelzer, a designer and developer based in Berlin.
The font is thought for being displayed on screens, so the website is exploited to prove its qualities thanks to an interactive interface that allows the user to experiment in a live experience all its possibilities.
The site has kind of a cover, that immediately clarifies that the font doesn’t have a limited number of weights nor widths, but there is a range between which these two values can be scaled.
Then there is a tracking shot of the possible animations that this features allow. For example there’s a hover animation where the selected letter has the maximum width and the others have the minimum one. This part of the site shows also the different effect of the font on various combinations of black, white and grayscale, and its appearence as bordered or filled. The key aspect in these animations is that the scalability of the features allows a fluent transition, that is impossible with any other font.
There is also a section with a paragraph where you can explore the look of different widths, weights and font sizes in a long text.
Case 03: The VHS Retrominder
The VHS Retrominder is a tribute to the 80s and 90s.
Designed by the french digital agency Viens-Là it was entirely created with HTML5, in particular using the API (Application programming interface) WebGL and the HTML5 creation engine pixi.js.
The game is an interactive journey where you’ll be exploring everything that makes the 80’s and 90’s culture: from songs, movies, celebrities and cartoons to manga, videogames, sports, and even politicians!
In 90 seconds you’ll test how much you know about this culture by guessing the character that will appear on the TV interface.
It’s really simple: If you’re stuck you can skip to the next character.
Each character is shown for 30 seconds until the game automatically load the next question. You can also test your reactivity by earning extra time on the bonus stage. You can also share your high scores with your friends.
The VHS Retrominder is a very fair example of coding and design: the interface is very well done thanks to the handmade typography, chrome effects, fishy gradient, and lighting. This retro atmosphere ensures the player a complete experience in the past.
Case 04: Semantris
Semantris is a small web-game developed at Google to demonstrate the use of machine learning algorithms in semantic word association. Differently from Google’s own search engine, this model tries to predict word relations which might flow naturally in a real conversation.
The game offers two modes, both of which challenge the player to respond to a series of words by inputting synonyms and other liberally associated terms. As such, they resemble a number of real-life word association games, with the exception of the opponent being a machine.
The first of the two consists in an increasingly difficult time-trial challenge, while the second requires concentration to solve a grid-based puzzle game akin to Tetris.
While this might seem like a highly complex interaction inaccessible to most and limited to high-profile companies like Google, these models are in fact fully open-source and ready to use for any developer through TensorFlow, a popular machine learning framework: for this reason we hold that they may surely be of interest, and, as this example showcases, useful for both practical and creative purposes.
