GitHub: https://github.com/balazsdavid987/dineen-freeze

Demo (live): https://balazsdavid987.github.io/dineen-freeze/

Demo (video): https://www.youtube.com/watch?v=5DQdRuJlgDE



While browsing my Instagram feed, I have come upon an artist named Kyle Dineen who makes abstract sculptures inspired by music.

I wanted to make a music visualizer for a long time and his work seemed perfect. I wrote him a message for his permission to use his work and then decided to go with a piece called “Freeze”:

First, I have traced the shape (a polygon with 21 sides) and tried to identify its main components.

There are 2 main distinct parts: an outer one that consists of several layers with alternating colors (that’s not shown in the drawing) and an inner one with 3 sections (each with 11 panels).

After I have identified the distances, angles, and colors, I was able to write the code that draws the shape on the canvas:

The function that is used for dividing the outer shape into the 9 layers is based on the generalization of the formula for calculating the midpoint of a section:

function calculateDistance(x1, y1, x2, y2, k) { return [ x1 + k * (x2 - x1), y1 + k * (y2 - y1) ]; }

For example, if you have two points, (5, 9) and (16, 11), and you want to divide it into 9 equal parts, you can get the coordinates by:

for(var i = 1; i < 9; i++) { console.log(calculateDistance(5, 9, 16, 11, i/9)); } The beat detection algorithm was implemented by Jason Sigal. When a beat is detected, the shape is enlarged a bit and gets rotated by a random value. The music used for the demo: Bassnectar & Gnar Gnar – I’m Up. For more details on this project, check the code on GitHub.