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:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: url(""); // 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.