# Media Arts

This was my first go at using Processing.org; actually it was my first time coding at all.
And this was the end product.

This program works on the idea of repetition and variation. Originally I started with circles on a page that varied in size and colour. I loved (and still do) how they look asthetically, but thought it could be more complex.

But the more I added to this, the more complex I tried to make it, the more I changed my code the less it resembled my initial vision for the piece. At one point I ended up with what could only be described as a mess of circles. And it reminded me of some concepts and videos we had looked at in class that examined the relationship between repetition and deterioration.

Alvin Lucier’s “I am sitting in a room” and William Raben’s 4’22”
Both pieces, in different ways, look at the way repetition distorts the message to produce something new.

So I pretended the mess was deliberate, and I added some order to chaos I was creating. I started with neat little lines of pastel circles which become bigger, less ordered and deepen in colour each time a new layer is added. And in the end you get a sense of distortion of the circle’s colour and shape. But the levels of opacity allow the past to remain visible and patterns emerge.

There are a lot of places to find inspiration for the resulting work, and the code. If you are starting out with processing I recommend working through processing.org/tutorials. But there is plenty of information just a google away. I got the code for moving objects from here then just added what I had learnt from our class workshops.

The Code:

//Colourful Mess – Emily Ward
int numofcolours = 5;//this line establishes the number of colours that will be selected and drawn on
int rbgop = 4; //this line allows the red blue green tones of a colour to be determined, as well as opacity.
int[][] colArray= new int [numofcolours][rbgop] ;

int xpos = 0; //the starting position of the circle on the x axis
int ypos = 0; //the starting position of the circle on the y axis
int diameter = 10; //the diamater of the first row of circles

void setup() {
size (800,300); //determines the size of the canvas
background (255); //the background is white
//noLoop is turned off because the program needs to loop to function. noLoop is a part of a if function at the end to stop the program from running infinitely.
}

void draw() {
noStroke(); //circles don’t have an outline
ellipse(xpos, ypos, diameter, diameter); //draws the first circle
xpos=xpos+diameter; //moves the second circle along the x axis the width of the diameter to ensure no overlap
//the next 3 lines of code are that when a circle is to be drawn off the canvas on the x axis then it goes back to x = 0 but moves down the y axis the width of the diameter.
if (xpos>width)
{xpos=0;
ypos=ypos+diameter;
}
//the next 4 lines of code are that when a circle is being drawn off the canvas on the y axis it goes back to the top left corner (0,0).
//but the diameter increases by 20 pixels. This way the circle size grows with each layer.
if (ypos>height)
{xpos=0;
ypos = 0;
diameter = diameter +20;
}
//the next 2 lines of code are so that when the circles reach a size of more than half the height of the canvas the program ends.
if (diameter > height/2)
{noLoop();
}
//This just places the array within the program
fillcolourArray();
getColour ();
}

//this creates the array from which the colour will be selected from.
void fillcolourArray(){
for(int i = 0; i < numofcolours; i++){
//I originally had the array set to a specific palette. But once I decided I liked the distortion of the image through overlaying I thought that the wider range of colours would make more interesting relationships.
colArray[i][0] = (int)random(255);
colArray[i][1] = (int)random(255);
colArray[i][2] = (int)random(255);
//I set opacity at 50 because I wanted each circle to have an obvious deepening of colour
colArray[i][3] = (int)(50);
}
}

// this function uses the array to get a colour from the array and sets the fill() based on that colour.
void getColour(){
int colSelect = (int)random(numofcolours);
fill(colArray[colSelect][0], colArray[colSelect][1], colArray[colSelect][2], colArray[colSelect][3]);
}

## 2 thoughts on “Media Arts”

1. psychosophonis says:

With array properly working this is beautiful..fixed

//Colourful Mess – Emily Ward
int numofcolours = 3;//this line establishes the number of colours that will be selected and drawn on
int rbgop = 4; //this line allows the red blue green tones of a colour to be determined, as well as opacity.
int[][] colArray= new int [numofcolours][rbgop] ;

int xpos = 0; //the starting position of the circle on the x axis
int ypos = 0; //the starting position of the circle on the y axis
int diameter = 10; //the diamater of the first row of circles

void setup() {
size (800,300); //determines the size of the canvas
background (255); //the background is white
//noLoop is turned off because the program needs to loop to function. noLoop is a part of a if function at the end to stop the program from running infinitely.
fillcolourArray();
}

void draw() {
noStroke(); //circles don’t have an outline
ellipse(xpos, ypos, diameter, diameter); //draws the first circle
xpos=xpos+diameter; //moves the second circle along the x axis the width of the diameter to ensure no overlap
//the next 3 lines of code are that when a circle is to be drawn off the canvas on the x axis then it goes back to x = 0 but moves down the y axis the width of the diameter.
if (xpos>width)
{xpos=0;
ypos=ypos+diameter;
}
//the next 4 lines of code are that when a circle is being drawn off the canvas on the y axis it goes back to the top left corner (0,0).
//but the diameter increases by 20 pixels. This way the circle size grows with each layer.
if (ypos>height)
{xpos=0;
ypos = 0;
diameter = diameter +20;
}
//the next 2 lines of code are so that when the circles reach a size of more than half the height of the canvas the program ends.
if (diameter > height/2)
{noLoop();
}
//This just places the array within the program

getColour ();
}

//this creates the array from which the colour will be selected from.
void fillcolourArray(){
for(int i = 0; i < numofcolours; i++){
//I originally had the array set to a specific palette. But once I decided I liked the distortion of the image through overlaying I thought that the wider range of colours would make more interesting relationships.
colArray[i][0] = (int)random(255);
colArray[i][1] = (int)random(255);
colArray[i][2] = (int)random(255);
//I set opacity at 50 because I wanted each circle to have an obvious deepening of colour
colArray[i][3] = (int)(50);
}
}

// this function uses the array to get a colour from the array and sets the fill() based on that colour.
void getColour(){
int colSelect = (int)random(numofcolours);
fill(colArray[colSelect][0], colArray[colSelect][1], colArray[colSelect][2], colArray[colSelect][3]);
}

• Thank you! I had it working at one point and I just couldn’t work out what I had changed that stopped the array. I’ve adjusted my post accordingly.