Bringing π to Life with Sonification

by Jon Salm 7 months ago Filed Under: Design

Pi is a Tokyo-based boutique advertising firm, but you can’t tell by simply visiting their website. Instead, visitors are treated to an experiment in sonification, the auditory technique that conveys data and information through sound.


Screencast – 3.141593 Inc. from Marc Kremers on Vimeo.

In a play off the company name, the website musically explores the first 1,000,000 digits of the irrational number π. Each digit is coded to a particular auditory switch. Numbers 2-9 trigger key sounds while 1 and 0 trigger drum sounds and invert the site’s color scheme. The resulting mix of sound and data is a mesmerizing auditory cacophony.

Pi at 5 seconds

While this might seem counterproductive for an advertiser, it is entirely by design. Pi boasts big name clients such as Google and Nike, but wanted a discrete and unique web presence rather than a standard advertising portfolio. In order to challenge the status quo, Pi enlisted the help of UK-based digital director Marc Kremers and gave him free reign over the company site.

“My background is in design but I’ve always been interested in exploring the Internet as an expressive medium,” Kremers told Visually. “I’ve made many self-commissioned projects over the years. This felt like one of those. I wasn’t limited to having to represent something literally, i.e. show the client’s work. It’s funny how when you take the most expected thing out the equation you’re suddenly able to go into a whole other world.”

Pi at 10 seconds

Invigorated with the autonomy afforded by Pi, Kremers set out to create the most cutting-edge product possible. The first few ideas were all interesting, Kremers said, but nothing quite stuck. After around a month of considering ways to bring π to life, Kremers had his eureka moment.

“This idea of exploring the irrational π literally came to me while in the shower. I realized music works with octaves, in sets of 8, so I used the “0” and “1” to trigger changes in the sounds and colour scheme of the site.”

Once he had the idea down, Kremers hit the ground running. Despite not considering himself a coder, musician, or mathematician, Kremers built the site entirely himself. He tinkered with jQuery plugins, crafted beats in Abelton, and synced them up with π until he had a beautiful combination of all three.

As an irrational number, π both never ends and never settles into a permanent repeating pattern. This means a combination of sounds that will always be unique. But despite the irregularity, π’s avant-garde melodies seem to grow and evolve the longer it plays.

“If you leave it to play for say, 10 or 15 minutes, the melodic patterns you hear start sounding really, really different to what you hear at first, which sounds almost pretty,” Kremers said. “It almost gets a little like Aphex Twin. I found that really fascinating, that you get a sense of π’s personality through audio that you wouldn’t if you just looked at all those digits.”

π

Explore more infographics like this one on the web’s largest information design community – Visually.

 

 

Pi’s website is 3.14-pi.net and Marc Kremers can be found on Visual.ly, his website, and on twitter @marckremers.

 

Jon Salm is an associate client analyst at Millward Brown Digital in New York City and a freelance data journalist in the Visual.ly marketplace. He has a bachelor’s degree in English from Washington and Lee University. You can find him online at about.me/salm.jon and follow him on twitter @S4LM3R.