Abstract shapes go on a web journey: behind the scenes of an audio-visual album by Andrey Lee × Readymag

Moscow-based musician Andrey Lee has collaborated with Readymag on a synesthetic web edition for his album Object and Environment («Объект и среда»). Currently, two tracks accompanied by interactive animated graphics are available at andreylee.com. The full album will be released on April 28.

The animations for Object and Environment were created by Readymag designers Stas Aki and Tanya Egoshina, partially aided by Readymag developer Anna Shishlayakova. In this piece we tell how the collaboration came to be.

Interplay of identities

In terms of musical genres, Object and Environment blends and experiments with dub and krautrock, as well as the early ambient and electronic sounds of the late 1960s. “Beginning work, I did not expect this album would go beyond standard listening. But when my work was finished, I realized these nine tracks definitely needed a concept to shift how they are perceived. So, I had the idea to release Object and Environment as a living substance placed in a web environment,” Andrey says.

“By that time, I had already collaborated with Readymag: my tracks are used in some of their promo videos. I always liked how my music matches the tool’s visual identity. That’s why I had the idea to expand our relationship and make a website for my album, in which Readymag designers could cut loose and showcase the tool’s full creative arsenal,” he adds.

Andrey asked Readymag Product Designer Stas Aki to create visuals for the album that would resemble his projects Moving Flags and Ornament and Crime. “I admire how Stas creates real works of art with Readymag using very simple geometric shapes. That’s why I set him no specific task: it was all about creative freedom and trust. I just sent Stas the album demo, saying it would be awesome if he held his hand to it, adding something personal to the music,” the Andrey says. Stas accepted the challenge. Later, he joined forces with his colleague Tanya.

Aesthetic of mixing surfaces and controllers

The experimental Object and Environment website includes dozens of pages: the main entry contains only the name of the album and several rounded shapes, alluding to the buttons at the top of a mixing controller.

Hover your cursor over any of the active (colored) shapes and a corresponding track number will appear in the bottom right corner of the screen. A click on any of the active shapes redirects you to individual track pages. Click on the last shape and you’ll see the project credits.

The track navigation was inspired by the look of media players, providing the same traditional controls: play, pause, stop, next, and back.

Track №2: the playful circles

Readymag does not offer default options to play audio and animation by clicking on one widget, so developer Anna Shishlyakova wrote the necessary code and added it to the project via Code Injection. The tracks are hosted in Dropbox and embedded using the <audio> tag. The audio player is hidden beyond the borders of the screen, so it can’t be seen. It starts playing by default and includes an animated widget.

“In track two, the whole composition is based on circles filling the screen like a tessellation: On Hover and On Click animations are applied to each of the circles. Viewers can hover over or click on circles, making them rotate and create unique mesmerizing patterns. Watching a music video is often perceived as a passive act. Yet we’ve turned passive viewers into active collaborators,” Stas says.

Track №6: the orchestrated chaos

“I expanded the idea based on playing with button shapes. Interfaces are a true source of inspiration for this project: I look at buttons and pop-up windows much more often than at art museum expositions,” Tanya explains. “It’s so cool when music mixes with shape and color! Our synesthetic experiment plays, to some extent, with the same ideas as the Light Organ by Russian composer Alexander Scriabin — images mix with music to create a new level of sensation, expanding the boundaries of possible,” she adds.

In track nine, Tanya made geometric shapes that dance and fill out the screen — but again, only if you hover over the right part of the screen with your cursor. Technically, the screen is separated into equal parts, each presenting a Slideshow widget with On Hover slide transition applied.

New dimensions

“I’ve always been inspired by collabs between visual artists and musicians. Andy Warhol made covers for Velvet Underground, Miles Davis collaborated with Mati Klarwein, Reid Miles created over 500 LP covers for jazz label Blue Note Records. Such joint works are a lifehack on how to alter and expand the perception of music, reveal new meanings, add dramaturgy — and that’s great! Thinking of such collaborations I recall my youth, when music was often chosen by its cover art, instead of its tag cloud. Back then, the visual imagery told so much, yet sometimes it created a false impression of the music. But in this case, a powerful image was attributed to music and left a mark in memory for a long time,” Andrey says.

“Back in the day, I was very impressed with the story of the Noisembryo album released by Japanese noise project Merzbow in 1994. Along with the standard edition, there was a special edition known as the Merzcar: the label owner had a rundown Mercedes-Benz, so he rigged the CD player to play Noisembryo and made it impossible to turn off or remove. He then put the car up for sale as a limited edition. In our collaboration with Andrey Lee, we worked with a similar idea of the inseparability of music and medium,” says Stas.

For this album, Readymag becomes a nutrient solution that to some extent defines the aesthetic of the project. “We did not challenge ourselves to make the UX as simple or friendly as possible: to some extent, this is an adventure game. One in which the viewer assumes the role of a protagonist driven by exploration,” Stas explains. Dive into this experience, play with geometric shapes, and feel like a small child discovering the world.