Creaky Doors Animation

Screenshot 2014-11-16 20.01.08

A few weeks ago I’d went around my house to record various door and drawer sounds then edited them with Audacity and applied a reverb effect realtime using javascript sound libraries. I searched for mathematical easing formulas that best matched the duration and character of each door/drawer type. Then I put together a choreography of simple shapes to bring them to life in interesting patterns. Each time this code is run there will be a different character to its viewing. The overall complete set of potential patterns will be revealed only to viewers with patience.

You can view the live running code here:

Here is a capture of an example run:

Creaky Doors Animation

Triangle Patterns in Grid Of Time-Delayed Frames

Screenshot 2014-11-16 17.32.47

I wanted to experiment with image buffers and repetition and movement with simple geometric shapes. So I built this javascript, p5js, HTML5 canvas thing.

You can view the live running code here:

Here is a capture of a run:

Triangle Patterns in Grid Of Time-Delayed Frames

Twirling, rotating, Shifting Structures

Screenshot 2014-11-16 17.22.04

An experiment involving a never ending constantly changing scene of twirling, swaying, shifting and moving structures. This is interesting to watch with music.

You can view the live running sketch from here:

Here is a screen capture of an example 10+ minute run with default speed:

Twirling, rotating, Shifting Structures

Kalimba Bubbles and “Molecules”

Screenshot 2014-10-12 12.21.31

Here is an experiment involving colorful bubbles that expand, pop and join with others before hitting the screen sides to produce a kalimba sound recorded from my real-life kalimba.

You can view the live animation here:

Here is an example run:

Kalimba Bubbles and “Molecules”

Simple Soothing Waves Using Perlin Noise

Screenshot 2014-11-16 13.08.25

I find that watching waves is relaxing at the beach but since a beach is not always accessible I thought I’d try to create that aspect of one programmatically :)

You can control the speed of the waves by clicking anywhere in the waves. If you do you should see a slider control in the upper left part of the screen. Sliding all the way to the left will stop the waves and sliding to the right will speed them up. Clicking again in the waves will hide the slider control.

You can view it here:

And here is a recording of it in action:

Simple Soothing Waves Using Perlin Noise

Overlapping Shifting Boxes With Shadows

Screenshot 2014-10-24 19.32.46

I was experimenting with abstract art and vector maths to simulate shadows from an artificial light source. In this experiment the source of light is controlled by the horizontal position of the mouse cursor. It was inspired by a CD cover I saw somewhere. Here is a sample screen capture:

You can see a unique sequence of the live running code here:

Also here is a black and white variation on the above that has no shadows but is still interesting on its own.

exp13blackandwhiteshapes (4)

Screenshot 2016-03-05 19.59.11

Screenshot 2016-03-05 19.43.22

Screenshot 2016-03-05 19.43.45

Here is the running code for it:

Overlapping Shifting Boxes With Shadows

Abstract Wiggling and Sliding Boxes

Screenshot 2014-10-31 14.26.17

Another creative coding experiment in javascript involving tweening and animation. The boxes appear to be floating as if underwater with subtle shifting and occasionally moving around. There are an infinite number of unique scenes that change quickly revealing interesting visual patterns. The live version could be displayed in the background on a large TV for example as a constantly changing LIVE abstract painting. You can view the live running code here:

And here is a slightly more varied alternate: