Processing Sessions | Part 2

This week in Robs workshop I have been learning and experimenting with variables. I always seem to fall behind in the workshops because Ive always been a little slow (no excuses!), so I decided to go through the online materials Rob left on MyBU when I got home.

On the second workshop materials was a processing document that Rob had taken a screenshot of. I’d had a chance to play around with variables in class, but never at my own pace, so I copied out the code and spent a while playing about with them to see what each of them did.

By just changing a few simple things I began to learn more and more about how the variables worked, and why you needed to create initiatives alongside them. Below are a few screenshots of what I started with, and what I changed. It may not seem like an awful lot, but in my own opinion this kind of learning is for me.

This is what I copied out from the online materials. It is a basic piece of code containing variables and initiatives for a 25 fps loop animation to be constructed made of rectangles and random colours on top of a checkered grayscale background.

Screen Shot 2014-10-27 at 12.19.17

After playing around with the initiatives for “x” and for “y”, I was able to change the size of the gaps between the grayscale squares behind the animation.

Screen Shot 2014-10-27 at 12.21.59

And finally I changed the background colours, changed the actually shape and its dimensions along with the opacity of the colours coming out of the animation.

Screen Shot 2014-10-27 at 12.34.27

The code for this piece of work by Rob Canning is as shown below:


void setup(){
size(800,800);
frameRate(25);
smooth();
colorMode(HSB,100);
for(int y=0;y<height;x=x+60){
for (int x=0;x<height;x=x+60){
fill(random(100),70);
rect(x,y,60,60);
}
}
}

int s = 0;
int r = 0;
float h = 0;

void draw(){
//noStroke
translate(width/2, height/2);
rotate(r);
r=r+1;
fill(h,100,100,20);
h=(h+0.5)%100;
rect(0,0,s,s/6);
s=(s+2)%(width/2);

if (mousePressed){
save("an_image.png");
}
}

To start with, the size of the canvas and the amount of FPS are declared at 800 pixels by 800 pixels, and at 25 frames per second. The smooth function determines the effects of the animation frame by frame, in this case the animation is set to run at a smooth pace. The nested element that follows after than is set to draw a background of randomly generated, made of 60×60 squares with a mixture of grayscale colours ranging from 70-100. After the void Setup is finished, some variables need to be declared. The rotation values and the size of the square being redrawn in every frame need to be declared because in the Void draw they will be used to create the colourful spiral pattern. After the variables have been declared, the process of drawing the spiral using rectangles takes place. “Translate” is the point in which the whole rotation will start, in this case it starts at half the width and half the height, meaning it starts at the centre of the canvas. the rotation of the rectangles is r + 1, which means that every frame, the new rectangle being drawn rotates by one pixel. the height of the float (the rectangles) is height + 0.5, then either +100% or -100% of that. Unfortunately, after that I didn’t understand the last chunk of code very well, even after calling Rob over for help. Im still very impressed with what I have learned in this workshop, as Ive covered all kinds of things from positioning and colour variants to rotation values. Im going to look into particle systems soon in my own time, as Ive been looking into using it in my final piece. More on that in a future post.

Advertisements

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