Ksawery Kirklewski on his Symphony in Acid

Published by Tim on Monday May 29, 2023

Last modified on October 3rd, 2024 at 14:35

For me, it’s by far the most inspiring project of the last few years: “Symphony in Acid”, a collaboration between Ksawery Kirklewski and musician Max Cooper. The interactive, completely browser-based music video was developed entirely in HTML, CSS and Javascript with p5.js and fuses Max’s wonderful electronic music with typographic visuals from a text by philosopher Ludwig Wittgenstein. I think the low-tech approach is terrific: Ksawery has restricted himself enormously in terms of technology and creatively squeezed out everything possible within these limits. I am very grateful that I was able to talk to him about this magical work.

Vimeo

By loading the video, you agree to Vimeos’s privacy policy.
Learn more

Load video

Hi Ksawery, let me just start off by saying that I adore your work! We
Today I want to pick your brain about the incredible “Symphony in acid” website/video/experience you created for Max Cooper.
How did the idea of using a philosophical text as the basis for the work come about?

The idea to use philosophical text, came from Max. The whole album titled “Unspoken Words” speaks about limitations of language, and consists of many works covering this topic. For “Symphony in Acid” Max pointed to “Tractatus Logico-Philosophicus” by Ludwig Wittgenstein as it could be a good content to use. It’s full of thoughts about logic behind composing words, sentences, and paragraphs. Wittgenstein sees them as chained objects of atoms, a substance with spatial relations, and tries to figure out the laws which they follow.

Max sent me his favorite lines, and at the beginning I worked only on them, but eventually I got it that it would be more impressive to source the whole text , so viewers could discover more and more ideas from the Tractatus every time they watch the video. Now the system loads random parts of the entire text before every play.

This project is one of a kind! What inspired you the most and how did you come up with the final idea?

My first association was ASCII aesthetic. It’s a typography system, strictly based on a grid, with monospace machine-like font. This was supposed to strengthen the logical vibe of the Tractatus. But ASCII became quite popular, and I was willing to find something more unique and progressive.

I looked for alternative options to play with text and – since my background is heavily based on web development – my next thought was a modern browser engine. Internet was built for texts, so the browsers are very well optimised for rendering it, with lots of features for typography. As soon as I found a way to capture uncompressed frames for animation through a website, it felt most at home for me.

You decided to go very lowtech in this project. Why did you just use HTML, CSS and Javascript for this work?

I started building websites around 2004, and back then, there were a lot of limitations: We could actually use only few system fonts, and most of the design was made with CSS stylesheets. Some people still used to have only limited web color palette.
It may be a sentiment that made me refer to these times, when I was deciding on visual language for the video. The other factor, which I believe drives many of my projects, is a contra point to the commercial work I had in agencies, or for my clients: There are rules to follow, and by my personal projects I try to bend (or sometimes break) them. It’s a big relief for me to finally have this freedom.
I remember that at the very beginning, my first attempt was to “hack” the Wikipedia page and play with the CSS styles for text about the Tractatus; you can still feel the vibe of Wikipedia in the Symphony in Acid.

How did you plan the scenes?

First I tried to work out a way to dynamically change the typography style settings by JavaScript. It was fun to see basic html tags deconstructing or jumping around in a glitchy way.
I played a lot with different settings and compositions, and when I felt I had enough options, I started working on a JavaScript tool, which could help me automatise sequences.
It happens to me often that on some step of a project I end up with a tool. This is probably the nature of big projects, when you have to simplify your workflow. Otherwise it would be too difficult and maybe out-of-sight to plan a big code structure.


Having the tool, it was much easier to create more scenes. I felt that some of the scenes fit well or reacted better to specific parts of the soundtrack, so in the last step I put them into order following the sound. I also wanted to express progression over the time, the same way like Internet evolved; so it starts simply, a sentence with huge font size, and ends up with long paragraphs of text.

How did you prepare the data?

I was quite lucky that the whole “Tractatus” was already available in text version.
I picked the punchiest sentences for some of the scenes, but for the rest I decided to browse the text randomly. Thanks to that, when you play the video through the website, you always get a different part of text to read.

How did you sequence the music video?

The soundtrack is very dense, so it was actually pretty tough task to catch all the sounds, and map them to trigger my tool.

Max sent me separate tracks to make it easier. I started with the automation tool from Ableton to generate MIDI out of the tracks, but still there was a lot of manual work to make sure I don’t miss any important note.
I categorised the notes into seven groups, and gave them different roles to play in every scene. For example the “kick” could change the whole color palette, while the “snares” could change settings of individual characters. There is also one additional silent track, which controls the number of the scene currently played.

You told me about moving to New York, what are your plans?

Yes, it’s a very exciting plan. I’m working on my artist visa right now. I don’t have a specific plan, but you know, now or never. I need to try it. I know that many people I follow live there.

Who do you think I should interview next?

Andreas Gysin! 🙂

Related Links

Enjoying the content?

I put a lot of love and effort into developing content on Creative Coding. Since 2018, I have published 209 interviews, case studies, and tutorials, along with over 272 lessons in 17 online courses – and there's more to come! If you'd like to support my work and help keep this platform evolving, please consider supporting me on Patreon. Thank you very much!

Speaking Image

Monthly Newsletter

Stay up to date and get new content circling around Creative Coding and Design within Limits, every 5th of the month, directly to your inbox.

Related

Studio visit: Julian Hespenheide

Two thousand and twenty-four. At the “Barceloneta” metro station, a few hundred meters from the beach, stands an old dot-matrix […]

Michelle Duong and her Adventures in Interactive Typography

Sometimes it is so difficult to display the potencial of Creative Coding, since it mostly happens in the digital realm, […]

Daniel Shiffman on The Nature of Code

In this conversation Daniel and I discussed a broad range of topics, from the role of AI in Creative Coding to the beauty of Object Oriented Programming.

Kiel Danger Mutschelknaus on building Design Tools with Code

Please note: This is a interim state of this interview, I am currently working on the edit. Stay tuned! How […]

Hannah Gmeiner on Permacomputing in Graphic Design

In an age of increasing digital consumption, Hannah, a recent visual communication graduate, explored “Permacomputing”—a sustainable approach to technology inspired […]

Tameem Sankari on Creative Coding for Large Media Corporations

In this interview, Copenhagen-based creative director Tameem Sankari shares his journey into Creative Coding, combining Processing, Blender, and Adobe CC. […]

Sam Griffith connects Creative Coding with Enviromentalism

In this post I’d like to introduce you to Sam Griffith, a talented graphic designer based in Detroit, to discuss […]

Powers of Two – 128kb by Lena Weber

20 = 1 21 = 222 = 323 = 824 = 1625 = 3226 = 6427 = 128 … »In […]