Processing – The Start

Today marked the beginning of learning and using Processing. I am excited to begin this as this program allows you to create various creative texts. In the first workshop we looked at the basics of Processing and getting used to using the software.

The first thing we learned to do whilst using Processing was sizing the canvas. This is the first thing we were taught to do. This is possibly the most useful part of the whole process as it defines how big the thing you are making is.

size(640, 360);

From this we were taught how to implement different features such as text, points and lines. These were accompanied by background color, strokeWeight and smoothing. These are some of the basic lines of coding for Processing which would be used in almost every project created on Processing. At this point in time, we have this code:

size(640, 360);
background(255);
stroke(0);
strokeWeight(12);
smooth();
point(50,50);
line(100,100,200,50);

This was important for us to learn as it gave us some basic grounding in Processing and, as we are just beginners in this particular software, will help us expand our knowledge and understanding when trying to tackle more difficult Processing tasks. After this we were taught how to implement primitive shapes. The codes we were using and trying out were, triangle(), rect(), quad(), ellipse() and arc(). We were shown that different shapes require different lines of code to make them work.

Ellipses

ellipse(252, 144, 72, 72);

Rectangles, Triangles

rect(81, 81, 63, 63);
triangle(288, 18, 351, 360, 288, 360);

Each of the values on the shapes can be changed into variables from a fixed number. This allows us to change the shapes much easier which makes our lives a lot easier when creating the values of the shapes.

size(640, 360);
int a = 50;
int b = 120;
int c = 180;
line(a, b, a+c, b);
line(a, b+10, a+c, b+10);
line(a, b+20, a+c, b+20);
line(a, b+30, a+c, b+30);
a = a + c;
b = height-b;

Now that I have practiced using all of these different functions, it’s time to put them all together to create a piece of Processing.

void setup() {
size(640, 360);
}
void draw() {
background(127);
noStroke();
for (int i = 0; i < height; i += 20) {
fill(129, 206, 15);
rect(0, i, width, 10);
fill(255);
rect(i, 0, 10, height);
}
}

This code was used to create this:
processingbull1

This encompasses all of the techniques taught in the workshop so far. This sketch can be changed in numerous different ways. At this point, I have learnt a lot of basic functions and tools of Processing.

The second part of the workshop was focused on animation and mouse movement. We wanted to learn this as this implements interactivity to the piece of Processing which is much more exciting than just visual. The first animation we created was an animation loop.

void setup() {
size(200, 200);
}
void draw() {
background(204);
line(width/2, height/2, mouseX, mouseY);
}

This is the outcome:
processingbull2
The mouse isn’t shown in the screenshot however, whenever you move the mouse, the end of the line moves with the mouse cursor. This creates a user interaction with the piece of processing. I can see foresee mouse interaction becoming ever growing feature of future Processing sketches I make.

The next part of Processing we looked at and tried out was the random() feature. This makes anything in the sketch to become random. This can be useful especially with colours.

</pre>
<pre>
void setup() {
size(640, 360);
noStroke();
}
void draw() {
fill(random(0,255));
ellipse(random(0,width), random(0,height), 30, 30);
}

This was the outcome:

processingbull3
The random() was set to a gray-scale so the random() only randomises between white and black. Also, a random() was set on the ellipses so that they would appear in random places on the canvas.

I altered this code by including a multi-coloured range of random() and also, as the sketch progresses, the ellipses become bigger as more are randomly created.

float z = 1;
void setup(){
size(640, 360);
noStroke();
}
void draw(){
fill(random(0,255),random(0,255),random(0,255));
//background(0);
ellipse(random(0,width), random(0,height), z, z);
//z++;
z = z+0.1;
z=constrain(z,10,160);
}

This was the outcome:
processingbull4
As you can see, the ellipses range from small to big and are random colours. I tried this as it makes it more visually appealing rather than just having the ellipses all the same size and also, making the colour multi-coloured rather than gray-scale.

From this, we looked at how we could integrate interactivity into this sketch. For this we added a simple if mousePressed function so when the mouse was pressed, a stream of ellipses would appear starting from small to big.

The first workshop on Processing as been a somewhat easy experience as we are dealing with quite simple functions and learning the basics. From this workshop, I can see how Processing can get harder and more complex. I am looking forward to the next workshop as I will be trying to expand my knowledge from this workshop.

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