Week 74: Visual experiments

10 Jul, 2022

Music and visual experiments #

I’ve been playing the piano since I was a kid, in my teenage years I dabbled in computer music and synthesis, and a couple of years ago I got into modular synthesis. Since I moved back to Denmark and got a piano again, I’ve been curious how to marry the analog and digital music… and how to marry that with my new curiousity with three.js and shader programming.

setup

slightly chaotic setup of laptop, eurorack and mic'ed up piano

These are a couple of experiments where I have recorded the piano, fed it into the eurorack modular synth, and processed it in tone.js using a simple FFT and written a graphical representation in three.js.

Waves001 #

Waves001 uses the amplitude of all the frequency bins of the FFT as points for a smooth spline curve. The curve is then placed on the scene, and pushes any previous curves further away. source

waves001

Experiment with FFT represented as lines

Waves002 #

Waves002 uses the amplitude of all the frequency bins of the FFT as points on a circular curve. source

waves002

FFT represented as points in a circle

At the time of writing, and maybe even still while reading, the code is poor quality.

New blog infrastructure #

I also spent the week migrating this blog to a new design and infrastructure. I used to use Gatsby, but it had too much plumbing and code. I wanted something simpler and ended up settling on hugo. Not intuitive, but it’s simpler and I like it so far. Might migrate more of my static sites to it in the future.

Week 73: New work, New city

3 Jul, 2022

It’s been 62 weeks since I last posted - sorry! I want to start posting side projects again soon, but this week I will focus on why I’ve been absent.

62 weeks ago I was interviewing for a position that I ended up accepted. Since October 2021 I have been working in the design team at Bang & Olufsen, and have moved to Copenhagen where our design studio is. I lead a small but expanding team of designers, modelled after my dreams, called Tools & Interactions.

Tools #

Tools is the aspiration to build products that feel like tools, and build tools that augment a designers ability to think and make.

There’s an old saying that “if all you have is a hammer, everything looks like a nail”. Or put differently, our work is a result of the tools we use for it.

Interaction design for products that have physical and digital components are notoriously difficult to “sketch” with. Compare it to classic industrial design, where you can sketch simply using pen and paper. My team and I develop tools that allow us to sketch with technology effortlessly at high-fidelity. This enables us to iterate much faster and refine our interfaces.

I’m curious how different “intelligences” can interact in my work. These thoughts are still emerging, but I’m thinking about human, parametric and machine intelligences as tools.

Let’s say human intelligence is my ability to think about the concept of a house, and sketch ideas based on my intuition and experience. Parametric intelligence is my ability to instruct a computer on what a house is, and generate houses based on that model of a house. Machine intelligence is using new and emerging AI systems to expand the concept of what a house is or could be. My point isn’t that one kind of intelligence is superior compared to the other, but rather that they interact with and augment each other.

I’m hiring people who can use parametric and machine learning systems to develop these kind of tools in a way that can inspire our work within industrial design, interaction design and sound design.

Interactions #

Interactions is the aspiration to create beautiful relationships between humans and objects, and between objects in a system. At Bang & Olufsen, we have a discipline called CMF - Color, Material, and Finish. That is a testament to how obsessed the company is with how the product looks and feels as a physical object. I like to talk about my team as the “Digital CMF” team. We think about technologies as materials - they have material qualities and affordances.

We work with technology through sketching and making across bits and atoms (which often requires making new tools). To do this, we have built a rapid prototyping workshop with 3D printing, lasercutting, and electronics engineering capabilities.

Did I mention we are hiring? kean [at] bang-olufsen [dot] dk or dm me at @knandersen

Week 12

2 May, 2021

This week I thought I’d share more of the process behind the background graphics of superultra.dk.

The idea came from having some sort of interactive element on the front page which builds on the concept of super ultra. The story behind the name is that it’s an ironic take on my design aesthetic. I like simple, minimalistic, understated objects that unfold in use, but I thought it would be fun to use the prefix super ultra for whatever I create - a super ultra toothbrush for example.

To example the idea of unfolding meaning in use, I decided to design something scattered that would form a united whole through interaction. Rhino+Grasshopper are among my favorite tools to sketch in 3D, and I love oscillating between sketching in parametry design, hand drawn CAD, and a physical notebook. I started out by generating “super ultra” as curves, and then used that as the input for my grasshopper sketch. The three versions display the process: curves -> dividing into fragments using a voronoi pattern -> extrusion to give it a third dimension.

curves -> fragmentation -> extrusion

curves -> fragmentation -> extrusion

Getting it properly into THREE.js was the biggest challenge, but eventually got it working by exporting to a DAE-format and generating a GLB-file. This allowed me to take each fragment in THREE.js, and scatter them along the Z-axis. I built the scroll-mechanism to assemble the fragments. To encourage interaction and create some ambient motion, I built a timer that starts scattering the fragments even further when not scrolling for a while.

timer

After 3 seconds, the fragments will start moving by themselves

At this point I was happy with the scattered logo, but still felt the site could use more life. One of the main messages of super ultra is designing for life away from screens, so I want the site to feel spatial. I decided to create a particle system that would create the feeling of an atmosphere with dust and debris in it.

The final result can be seen at superultra.dk. At the time of writing, it doesn’t work well on mobile, but I hope to address that in the future.

final

When scrolling on the website, the pieces come together

Week 11

25 Apr, 2021

I missed a couple of weeks there! The weather has been excellent here in Denmark, and I’ve spend the last couple of weeks in Copenhagen enjoying the sights and good company of friends.

Recently, I gave a talk about ‘innovation in practice’ to a Danish tax audit company, which reminded me that I should have a company to refer them to, so I’m spinning up my old company that barely ever existed: superultra.dk.

I really want to do something fun with the site, and with my newly acquired THREE.js skills, it seemed like the perfect opportunity. I spent a couple of hours Saturday creating the company, setting up domain and email hosting, but also snuck in some time to fiddle around in rhino and grasshopper with the 3D objects that I want to use in THREE.js.

sketch of fragmented company logo

Sketch of fragmented company logo

Week 8

4 Apr, 2021

It’s Easter holiday and I have prioritized spending quality time with friends and family instead of working on side projects.

I did manage to finish up the last two projects in my Experimental Javascript course! First project is a Google Earth’y project and the second one is a cute poly cat.