naturally digital.

My second coding assignment is inspired by the possibilities of the Perlin noise code.  When we were first introduced to this code in our MEDA102 tutorial, I was fascinated by the way a computer can craft something so natural and realistic through coding.  I decided to abstract this concept of the natural vs the man-made in my digital code, by changing the form, colour and transparency of the Perlin noise design.

Screen Shot 2017-09-19 at 11.44.16 PM
An example of Perlin noise in action.

For inspiration, I drew on the concept of ordered chaos present in many works of early computer artists.  These included Vera Molnar (who utilised overlapping, transparent shapes to create depth) and Frieder Nake (who layered rectangles to create chaotic, colourful grids) in particular.  By combining these and adding elements from my own imagination, I successfully abstracted my idea into digital code.


Through the use of rectangles, blue/green tones and contrasting straight lines, I managed to create a digital waveform effect.  The result is similar to what you might see in a digital audio visualisation, whilst also remaining reminiscent of natural forms such as the ocean’s waves and rolling hills.

Screen Shot 2017-09-19 at 11.44.56 PM
One possible abstraction of my code.

The code itself is written below.

//I chose to keep the background simple, in order to draw attention to the design
void setup() {
 size(1000, 600); background(255);
//I created these commands in order to utilise the Perlin noise waveform
float perlinStrength = 100;
float sideways = 250;
//the x command refers to the lines in the drawing
float x = 300;

void draw(){
//these lines were added in to give the piece a central focal point
// and bring stability to an otherwise randomised creation
    line(0, x-40, 1000, x-40);
    line(0, x+40, 1000, x+40);
    line(0, x, 1000, x);

//I adapted the Perlin waveform to be constructed of rectangles
// the various shades of blue/green and the transparency work to blend the rectangles with those around it
 for (int j = 0; j < 600; j = j + 8) {

//I took away the stroke so as not to draw attention away from the colours
// the randomised rectangle colour adds naturality
    for (int i = 0; i < 1000; i = i + 25) {
     rect(i, noise( i / perlinStrength, j / perlinStrength + sideways) * 600, 25, random(60));

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s