Typewriter Cocktail Machine

Excuse the continued delay to fresh posts here lately. I’m currently drafting a talk for a conference next month called Get Together – hosted by the Next Bigger Better Society – and truth told as it’s my first speaking gig I’d like the content to be as fresh as possible.

I’ll be talking on the subject of technology and evolution, probably around how the liberal arts act as playground to new & culturally transformative ideas. If you’re interested in coming along, tickets are available right here.

In the meantime though, here’s the first of some less heavyweight posts I’ll be making over the coming weeks!

I love how this invention takes an analog medium (plastic / liquid) and mimics a digital one (LCD display) in the guise of another analog medium (the typewriter) to output not words, but what looks like a terribly strong concoction of different drinks. Each customer would create a different, personalised recipe based on their input.

I can see this being really fun in a bar that sold tokenised access to the machine, along with predefined recipes such as the keywords ‘pineapple’ or ‘cherrybomb’, each letter plugged into its own mutually exclusive blend of base flavours. Nice work morskoiboy (site currently down).

Cinemetrics: Interactive Movie Infographics

Cinemetrics is the fascinating result of Frederic Brodbeck‘s bachelor graduation project at The Royal Academy of Art in the Netherlands.

cinemetrics quantum of solaceAs a graphic designer, Brodbeck is drawn to particular style details, but as a generative coder he’s interested in exploring the role for graphic design in analysing these same details.

He picked the medium of film as his ‘data-set’ and came up with something actually very unique: rather than analysing the meta-data around a film (i.e. from IMDB), he’s using movies themselves.

The project seeks to ‘fingerprint’ films (a bit like the recent moviebarcode site) and turn them into interactive models. The models can be manipulated to allow users to identify differences or trends in the graphics via a sexy looking interface, all of which he’s now open-sourced on GitHub.

Here’s a demo:

Brodbeck defines the project as “an experiment to find out if the data that is inherent in the movie can be used to make something visible that otherwise would remain unnoticed.” It’s a really interesting area for academic inquiry, one which he set out the following goals:

Measuring and visualizing movie data to reveal the characteristics of movies and to create some sort of unique “fingerprint” for them.

Extracting and analyzing information – such as the editing structure, use of colors, speech or motion – and transform them into graphic representations, so that movies can be seen as a whole and easily be interpreted or compared.

Working experimentally and presenting the work both in print and digital media.

A side effect is that the system he’s built is great at comparing films, so as to see differences between originals and remakes; within similar genres; among a string of sequels, similar filmmaking styles or certain directors.

What’s great is the system is actually useful. It’s an infographic engine for film-buffs, and we know how popular those are, don’t we?!

Frederick, I look forward to the sequel!

I Give You My CSS3 Heart

I made this little heart shape with CSS3, which I’ve been playing around with lately as a way of rendering rounded corners in the latest version of Subscription Options. Turns out there’s loads you can do with CSS3!

Here’s the (admittedly complex) code that’s used to render the above:

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: url("http://files.digitalcortex.net/images/header/rotate.php"); // this makes the colour the same as my header image - but could be any HTML colour instead
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

If you’re interested in playing around with CSS3 shapes like the above, loads of them are are available at CSS Tricks.