Padded Landscape

a loop-based generative audio-visual experiment

A while ago I decided to relax a bit more with my music production. The idea was to remove the pressure to finish and release tracks, and just noodle around and make loops. If I had fun jamming, I’d render the parts as a loop, archive it, and move on.

It was really liberating to focus in on short sections of music, and not concern myself with arrangement.

I might set out to make an “east coast whine” sound, and end up with a little trap/hip hop loop (Kufca). Or I might want to make a classic “synth strings” sound, and then turn that into a vocal-sample driven 90s big-beat loop (Mivova).

Around the same time, I was experimenting with the Web Audio API. It’s really powerful, making it easy to slice up audio files, sequence audio and midi, and even build custom synthesis and effects processing.

I’ve also been dabbling in ways to combine audio and (primitive) animation. Wouldn’t it be cool to jam out on a sequencer or midi controller, and synthesise visual and audio content at the same time?

How the audio works

There are currently nine songs/loops of material set up. Each song is divided into four stem parts – sometimes a single instrument (drums, bass, or vocals), sometimes a combination.

I’ve named the different mix layers using words that you might use to navigate a mountainous landscape:

  • alpine – typically drums
  • ridge – typically bass
  • uplands – lead, chords, synth
  • hills – vocals, texture, arpeggio, pad

These aren’t hard & fast categories; for example, some songs have different drum patterns in alpine and ridge. The idea here is that if you combine say a ridge and alpine from one song and hills from another, it won’t sound terrible πŸ™‚

The playback is automated and has some gentle randomisation so it’s not exactly the same each time.

  • Playback happens in 64 beat cycles.
  • The order of the songs is shuffled. πŸ—‚
  • For each song, a part is selected at random in each cycle, until all parts are playing.
  • Then the parts are removed in a random order.
  • When there’s only one or two parts of the outgoing song playing, a new song kicks in. This means parts from two different songs will overlap – like a DJ blend.
  • Each part might fade in or filter in slowly over the cycle, or start fully turned up. Similarly, parts may fade or filter out. πŸŽ›
  • When we run out of songs, we shuffle the order and start again. 🎲

To add a little punctuation & spice to this, I’ve added in a handful of sound effects. Some are recordings of cutting card or ripping paper, but there’s also an airhorn. These are randomly sprinkled on cycle changes, especially if a song is changing. These are fed into a dub-delay effect.

There are also some texture samples – maybe birds, a dripping tap, the ocean, or sea scouts around a campfire. When the song changes, a beat-synched chunk is sampled and looped from one of these textures, to add another layer to the transition.

The mixing and effects processing happens live in your web browser, using Web Audio nodes – filters, delays.

How the animation works

The mountains are React components containing SVG. There are four mountain ranges, to match the four mix layers. If a ridge (e.g. a bassline) part is playing, you’ll see a moderately tall mountain range. When parts fade in or out over the cycle, the mountains fade in too.

Each mountain is an SVG polygon, and the points are animated, parallax-scrolling style. There’s a codepen prototype here.

When a song comes in, random colours are picked for the front (hills) & back (alpine) range. The intermediate two colours are interpolated.

What next?

Occasionally I may add new songs to Padded Landscape. One song will get released on Cartoon Beats later this year – Redline Train, based on the Maenyb dub / reggae loop. Keep an ear out for it – this will include a remix from nsu (of Newclear Music).

If you need a low-maintenance soundscape…
fire up the site and click play!


Manhole Covers

Click play to listen to an evolving soundtrack as you scroll through the post.

Anunaku – Teleported

If you read this blog you might already know I like taking photos of tiles. This post is about another photographic hobby of mine – manhole covers.

Here’s one from Amsterdam which (to my eyes) evokes a computer keyboard. I did a quick google to find out what Purator is – and found a website devoted to manhole covers!

Herzel – Glide

So far, the Czech Republic is winning – two manhole covers of note. I think this one is from the quad inside Prague Castle.

CYRK – Memorial

This one’s just a regular manhole from a random street in Prague, but it’s a damn cool design, especially against the backdrop of the concentric intersected rings of the pavement.

Noir – Disruption

Actually it looks like the USA (or LA to be precise) is a close second, though the manhole covers aren’t nearly as interesting. This one’s a pretty great nod to futuristic 80s vector art.

That one looks more square than the others. I heard that “Why are manhole covers round?” is an interview question at Microsoft. I feel like this is the one question I wouldn’t have a problem with.

Shedbug – There’s Hope for You Yet

This one here is not really noteworthy, except for the clear pride that LA has that this manhole cover was made in India.

Wyatt Marshall – This & That

Nothing to say about this one from Canada, except that the sun was nice and low when I took the photo.

Shedbug – There’s Hope for You Yet

Computer & Nerd Boxes

First stop on our summer holiday was Sunnyvale. The first thing to do in silicon valley – the Computer History Museum. So much historical computer info and hardware all housed in Silicon Graphics’s old headquarters.

After the CHM we visited ex-colleague Aidan at his new workplace – one of the many Apple campuses dotted around. He’s in Wolfe, where marketing happens, and we also peeked at new, inpenetrable Apple Park. Impressive and inspiring places to work, nice food, and overly carbonated water on tap!


Memorable Moments from 2019 Automattic Grand Meetup

I’ve finally recovered from the Automattic Grand Meetup – took me a while this year, spent a few days in nomad-working in Cocoa Beach, and found myself sick for quite a few days. One reason it took so long to recover was because the meetup was totally amazing!

The keynote speakers this year were consistently fantastic. Each one made me look at the world slightly differently – very thought-provoking. Here are some memorable moments πŸ™‚

Alexander Rose of the Long Now Foundation

I’d heard about the Long Now Foundation, but never really looked past the surface. At face value, it’s a compelling idea – how can we think and operate on timescales larger than our experience?

The work they are actually doing is delightfully idiosyncratic, and generally inspiring engineering (of the mechanical variety). I learned a lot about exactly what they mean by “long now clock”, and lots of fascinating details about what they are building.

Stephen Wolfram

Stephen Wolfram was an intense experience! He casually walked us through a bunch of big ideas, noodling in his interactive, natural-language based system for so-called “computational essays”.

His way of working really resonated with me – this seems like an important part of the next wave of computing. It really was like science fiction unfolding on stage. The Wolfram language allows you to jot down questions in a much more precise format. The system has types & semantics so that it really understands the places, concepts and numbers that you type, and it has “knowledge” – it’s connected to many vast data sources.

What I found compelling about this is its expressive and communicative power. When we use natural language, there’s always a “translation gap” – the symbols in the language are an approximation for what we mean. Can we develop a more precise way to communicate? Could such a system provide a common, standard set of tools for white papers or public policy development?

Scott Berkun

Scott Berkun presented a very a holistic view of design. He’s currently working on a new book – refreshing to have a talk not selling a book, but workshopping a book that’s in progress!

Everything is design, everything is designed, everyone is a designer. Often the nominal “designer” is working within constraints that they don’t control, and the “true” designer might be a producer, a mayor, a lobbyist, etc.

I really appreciated the “call to arms” in Scott’s talk. How can we ask questions and peel the layers back to understand what patterns and agents are really designing the experiences, cities, and products that we all use every day? Get involved here!


WordCamp Brisbane talk – Cool Stuff Inside Gutenberg

I spoke at WordCamp Brisbane last weekend – my first WordCamp! I chose Brisbane as it seems like the strongest community in my part of the world. It didn’t disappoint – the 2019 event broke records as the biggest #WCBNE ever!

For my talk topic, I wanted to shine a light on all the work going into the Gutenberg project. This code base powers the block editor in WordPress, but there’s so much potential here.

Inside Gutenberg there’s a rich library of components that you can use to build the custom block your site needs, dashboard interfaces in wp-admin, and more. You can even use these packages outside WordPress – the possibilities are endless!

Demo – Page Soundtrack

To demo this, I decided to invest some of my spare time in building something fun that I might use. The idea was to add a soundtrack to blog posts and pages.

When writing a post, you add loops to the page. When the user is reading (scrolling) through the page, it will automatically sync and crossfade between the loops, a bit like a DJ.

The two blocks – a loop block and a play button – use Gutenberg components to allow the author to configure things like loop settings, and the page tempo. Have a play with it!

Explore more


Building a Dining Booth

A little while ago we had some work done on our house to make it better.

We swapped the windowless, dank bathroom out to the large sun-filled laundry (with a vaulted/angled ceiling), extended the hallway to the back of the house, and added a toothbrush nook.

Next to our kitchen there was a nice chunk of space, with a view out to the back yard (and forthcoming deck). I was really keen on turning this into a dining booth – a bit like a cafe/diner booth, but a bit bigger.

So I borrowed a circular saw, started measuring, and built it!


Lisbon Tiles

Last year I went to Portugal for a meetup. What a fantastic place to visit – very walkable, lots of visual interest.

The paste-up cartoon street art people above are by Kamlaurene. I love their anonymous, ambivalent eyes 😢


Vogel Street Party

In 2014 the first Vogel Street Party happened in the warehouse precinct in Dunedin. The reason for the party was to celebrate the local community making things happen & the general rejuvenation of the area.

It was incredible! 

From 3pm to 10pm on Saturday the 18th of Oct 2014:

  • the street was closed to traffic
  • street food vendors sold delicious wares
  • a huge range of activities for young and old were held
  • a HUGE LED wall screen showed animation, video and digital art
  • musicians performed over the afternoon
  • there was an upcycled street-fashion show
  • DJs played into the evening

Also the party coincided with the Dunedin Street Art Festival. Local and international artists transformed walls around the area into vibrant pieces of art.

A strong group of volunteers made this happen. I got myself involved from day one and put a lot of energy into the website, booking the DJs, as well as curating & producing the digital screen content.

I also had the privilege of performing – DJing and triggering custom synchronised animations on the big screen.


A huge thanks to everyone who contributed to the event, and the sponsors who backed us!

This post was originally posted in 2014; since then there have been more Vogel Street Parties every year (with a hiatus in 2018), each one getting bigger and better! See you at the next one πŸ™‚