Waves from images


Some time ago I came across a gif of a torus which was made of a bunch of waves. In the gif non empty space corresponded to larger amplitudes and frequencies, and it had a really cool overall effect. Unfortunately I cannot find the original image, but I was really inspired to try and figure out a way to construct something similar.

It looked a little like this, but more… torusy

After experimenting for a couple of days, I came up with a system to encode an n by bitmap – represented by a 2d array of numbers in the range 0 to 1 – and use that to draw a series of discrete waves that correspond to some ‘pixel’ in that bitmap.

The basic setup is to draw one wave per pixel row in the bitmap, extending from 0 to the width of the canvas. The wave has then as many samples as columns in the bitmap. Though not the exact code, the height of a given point on the wave is calculated pretty much like:

// Calculate wave height

const waveHeightAtPoint =  bitmap[y][i] * sin(time+i+y) * maximumHeight

So when the bitmap ‘pixel’ has a value of 0, the height is a normal, unchanged line, but a non zero value will cause the wave to get some height, which could be either positive or negative sin has a range of [-1, 1].

To add interest to the image a few other modulations are introduced, such as varying the thickness of each line, the maximum amplitude (height), introducing random noise, upsampling and downsampling the arrays, blurring by taking averages of lines above and below, etc. The end result is pretty cool and can be found here.

Lastly I built a tiny little grid editor to build the bitmaps which outs an array to the console. That can be found here.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s