Processing #3

In the third Processing workshop we developed our knowledge and understanding of how you can make interesting patterns with different shape functions.

From the past two workshops I have learnt that the basic setup for a Processing sketch is putting


void setup() { size(1280,720); smooth(8);

background(0); frameRate(25); }

This is a standard setup defining the size and setting the background to black and the framerate to 25fps. This was the basic setup because, the background needed to be black so that the pattern that would be created can be clearly seen. After the initial setup of the sketch, code needed to be setup for the pattern that will be drawn.

For this, we setup up an array of colours called p.


color[] p = {#eb5050,#ff8827,#edeaee,#e8be55};

This was because we can easily put the array colours in without having to put each colour again and again where we want the colours. These types of functions make the coding of sketches in Processing much simpler and easier. Whereas before in the past Processing workshops, we did many functions manually instead of setting up features such as ‘p’ for an array of colours. Now that I know we can use assets such as these, the code for different Processing sketches will be a lot less cluttered. After this, a float function was setup to initialise and declare a variable as a floating point number, this was used to control the roatation angle of the pattern being created.

float r 0;

Now we have the rotation of the pattern being created, the next thing to do was to create the pattern itself. For this, we used various types of rect() translate() fill() to create the basic pattern.


void draw(){
fill(0,10); noStroke();
rect(0,0,width,height);
translate(width/2,height/2);
rotate(r);
r=r+0.1;

}

With this, we were instructed to include another shape into this. This shape was going to be called house.


for (float i=10; i < height/3; i = i+30){

house(i,20,33);

}

This was included into the void draw(). This is for a loop that draws a row of houses. We learnt today that the this house function is not built in like rect(). This means that it is defined below the draw loop, which we had to set up.

The function for the house to be created was:


void house(float x, int y, int o){
color c = p[int(random(p.length))];
fill(c,o); stroke(255,30);
triangle(x+15, y, x, y+15, x+30, y +15);
rect(x,y+15,30,30);
rect(x+12,y+30,10,15);
noFill();
stroke(255,70); strokeWeight(1);
float radius = random(150);
ellipse(x,y,radius,radius);
stroke(c,40);
line(x,y,x+100,y+100);
}

This created a house shape whx

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