For loops, integers & condition experiments

For loops are a repetition function I leant from the plethora tutorials found at http://www.plethora-project.com/education/2011/09/12/processing-tutorials/

A for loop is a structure that allows you to repeat a command any number of times.

Screen Shot 2016-02-01 at 19.11.11

You can ‘nest’ a for loop in another one to create a grid like repeat pattern.

Screen Shot 2016-02-01 at 19.09.26.png

I experimented with this new technique along with my previously learnt knowledge of integers and colours.

 

int x = 0;
int y = 0;
void setup() {
size(600, 600);
 smooth();
}
void draw() {
background(255,204,204);
x++; //this part is shorthand for writing x = x + 1;
y++;
 for (int i = 0; i <50; i++) {
 for (int j = 0; j <100; j++) { //these are the for loop parts which 
                                  create the repeat pattern by adding
                                  on 1 to the integers i & j  
fill(255,204,255);
 stroke(204,153,255);
 ellipse(i * 20, j * 20, x, y);
 }
 }
}

In this experiment it adds a value of 1 each frame which creates some cool patterns however it will keep adding it on forever so I wanted to see if I could make it stop and start minusing 1. For this I looked into condition ‘if’ statements.

int x = 0;
int y = 0;
void setup() {
size(600, 600);
 smooth();
}
void draw() {
background(255, 204, 204);
 x++;
 y++;
if (x>40) {
 x= x * -1;
 }
if (y>40) {
 y= y * -1;        //this if statement means that once x and y have
 }                   reached 40 it will start multiplying them by -1
                     which means it will get smaller.
                     
 for (int i = 0; i <50; i++) {
 for (int j = 0; j <100; j++) {
 fill(100, 204, 255);
 stroke(204, 50, 255);
 ellipse(i * 20, j * 20, x, y);
 }
 }
}

Continue reading “For loops, integers & condition experiments”

Advertisements

Getting my head around variables.

I found variables hard to grasp at first but really it’s just something which stands for something that we can change. In processing you have to define your variable at the top of the script and then you can use it throughout. There are two types I’ve learnt so far, integers and floats. Integers being whole numbers and floats being decimals.

I found this tutorial series really helpful during this project as it clears up and adds to the things I’ve learnt in the workshops.

For instance it made me understand that by moving the background function from void setup, where it is just drawn once at the beginning, to void draw where it is drawn once every frame it changes the appearance when run as it doesn’t leave a trail when the background is in void draw because a new background is drawn every frame over the old one.

Test 1

 

Test 2

Wall Paper Design

ecco-luce-milan1

A very futuristic approach to wall paper design, Ecco Luce from industrial designer Jonas Samson, involves using LEDs instead to created light-emitting wallpaper that looks like normal wallpaper during the day. Switch off the light, however, and the light-sensitive LEDs light up. Some of his designs are simply beautiful, and there’s even scope for active designs that move as you do.

 

 

A similar LED wallpaper project was done by Strømmer, which translates to ‘streams and flows’ in English. It was made as an art installation in Sandnes as part of a European City of Culture bid in 2008, and is made up of a series of wall panels that light up when a shadow is cast on them.

The “light on demand” system has a series of LEDs embedded into the wall panels that react to movement and shadow, much like security lights. When they detect someone walking past the wall lights up in the same shape that a shadow would cast, then once they’re gone the lights turn off. You can cast your shadow onto the wall and watch it light up. Not only is the wall incredibly energy efficient, it’s also a great safety feature that keeps the underpass lit when it needs to be. It reacts instantly to pedestrians walking past, keeping the tunnel lit for them, and then turns off when it’s not needed.

dobpler

Looking at more traditional wallpaper styles I came across Fayre Fair’s wallpaper design by Mini Moderns, Its a modern twist on a vintage subject with beautiful carousel illustrations and a very simple colour pallet it is sure to stand the test of time.

And probably my favorite thing I’ve stumbled across so far is the designs by Barneby Gates, a company set up by Ex Vogue Living Editor, Vanessa Barneby and fellow Edinburgh graduate, Alice Gates. The pair design all of their own wallpapers and get them printed at one of the few remaining print works in the Midlands that use traditional printing techniques. Using a variety of printing techniques including surface printing, flexographic printing, and gravure printing, Barneby Gates creates absolutely beautiful papers that are elegant, charming, enchanting and of course very pretty.

GIANT DECOLLAGES by Ludovica Gioscia

 

“The Giant Decollages are architectural interventions created by layering numerous hand printed and custom wallpapers that get subsequently ripped back in order to reveal the strata underneath.” – http://www.ludovicagioscia.com/artworks/giant-decollages/

I like this idea of decollage, instead of building something up she’s tearing it down, its destructive in quite a captivating way. I also love the way it reacts to changes in light, the glow in the dark effect actually makes it look less torn and ripped apart.

Interactivity

After playing with static shapes we began to look at how to animate them which meant being introduced to a different section of code called ‘void draw() {}’

Unlike the void setup section where everything appears from the start and stays there, void draw continuously draws the shape over and over again.

If the (x,y,w,h) and (r,g,b) all stay the same it will just draw them in the same place, same size and same colour each frame and it won’t appear as if anything is happening at all.

However if you add the word random with your values in brackets e.g. random(x) we start to see some animation.

I added random functions into some of my coordinates of some lines and also into the stroke colours and this is what happened.

 

void setup () {
 
 size(800,600);
 background(200);
 
}
void draw() {
 
 strokeWeight(2);
 stroke(100,0,random(100)); 
 fill(0,100,random(500),50); // red, green, blue (255 each) , aplha 
 line(random(800),random(600),200,200); // rectangle x,y,w,h
 
 strokeWeight(2);
 stroke(100,0,random(100)); 
 fill(0,100,random(255),50); // red, green, blue (255 each) , aplha 
 line(random(600),random(800),600,600); // rectangle x,y,w,h
 
 
}

Playing with shape & colour

Starting out with processing we began by learning the basics of static drawings using code. How to set up a canvas using the ‘void setup () {}’ function.

Everything in the curly brackets happens once, at the start.

In the void setup block we created a canvas using the ‘size’ function, giving it a width and height in a measurement of pixels and closing this off with a semicolon.

We then gave it a colour using ‘background’ and putting a number between 0-255 in the brackets, 0 being black and 255 being white with everything in between being various shades of grey.

Then we added shaped after being introduced to the functions rect, ellipses, line and point. In the brackets you have to but (X coordinate, Y coordinate, width, height) except with the line and point where you just use the coordinates indicating two points where the line will start and end.

Add colour to these we use the stroke and fill functions followed by values for red, green and blue all using the 0-255 scale of intensity for the colour.

We also looked at the ‘strokeWeight’ adding numerical values in the brackets to change the stroke and also using the noStroke(); function to have a shape without an outline.

This was my practicing:

void setup () {
size(800, 600);
 background(255);
strokeWeight(0);
 stroke(0, 0, 255);
 fill(0, 255, 0); 
 rect(200, 100, 400, 400); // rectangle x,y,w,h
noStroke();
 fill(100, 0, 100);
 ellipse(400, 300, 400, 400);
stroke(225, 0, 0);
 strokeWeight(5);
 line(400, 100, 400, 500); // line x,y,x1,y1
point(100, 500);
}
Which looked something like this:

Screen Shot 2016-01-26 at 20.03.37