Processing #5

In the previous workshop, we looked at how to manipulate images. This gave me an understanding of how pixels work and how we can use Processing to alter something greatly just by altering pixels. In this workshop, we were introduced to classes and agents.

This Processing sketch made it so whenever you pressed the mouse, a square would appear made from the class definition. Also, each agent is created at the mouse location and has a unique colour. On each iteration of the draw loop, each agent updates its location taking a random wander around the screen. The main focus of this workshop is to understand using Agents and Classes.


ArrayList agents;

We declared an ArrayList for storing agents. An arraylist is a resizable array object, however, we didn’t go too much into this as we were told it would be covered in future workshops.

The next thing we did was to create the class. This would make up what the agent did.


class Agent{

float x, y, k; 
 color colour; 

 Agent(int x, int y, int k, color c){
 this.x = x; 
 this.y = y;
 this.k = k;
 colour = c;
 }

 void update(){
 x += random(-1, 1);
 y += random(-1, 1);
 }

 void draw(){
 fill(colour);
 rect(x, y, k, k);
 }
}

This was the class setup of the agent. This meant that whenever “Agent” was used, whatever “Agent” was being used for, it would do whatever the class instructed it to do.

The next phase of the workshop was to use the class in the Agent. For this, the code looked like:


void setup(){

size(600, 600);

agents = new ArrayList();

}

void draw(){
 background(222);

 for( int i = 0; i<agents.size(); i++){

 Agent a = (Agent)agents.get(i);
 a.update();
 a.draw(); 

 }

}

void mousePressed(){

 Agent a = new Agent(mouseX, mouseY, 19, color(random(255),111,111));
 agents.add(a);
 println(agents.size());
}

The outcome of this was:

Screen Shot 2015-01-21 at 19.31.31

The squares appeared whenever the mouse was pressed in the Processing sketch. We then looked at the opposite of this.

This was where the squares were already on the sketch, and when the mouse was pressed, the squares would move. For this the code used was:


float[] x, y;
color[] c;

int n = 10;

void setup(){
 size(500, 500); 

 makeAgents(n);

}

void draw(){
 background(255);

 for (int i = 0; i < n; i++){

 if(mousePressed) updateAgents(i);
 drawAgents(i);

 }

}

void makeAgents(int n){

 x = new float[n];
 y = new float[n];
 c = new color[n];

 for(int i = 0; i < n; i++){
 x[i] = random(width);
 y[i] = random(height);
 c[i] = color(random(255), 111, 111);
 }

}

void updateAgents(int i){
 x[i] += random(-1, 1);
 y[i] += random(-1, 1);
}

void drawAgents(int i){
 fill(c[i]);
 rect(x[i], y[i], 10, 10);
}

Which looked like:

Screen Shot 2015-01-21 at 19.39.34

From the two examples we made in this workshop, we have learnt how to use classes and agents to create squares that move when mouse pressed. This has been helpful as I feel that using this type of coding and function will be useful in future tasks. Moreover, using agents lessens the amount of code being used as it is short cutting most of the functions you would have to input normally.

One last thing from this workshop that we were taught was using agents and classes on images. Relating back to the workshop about image manipulation, we used what the squares do to the pixels in the image. This meant that when the mouse is pressed, the image would split into squares and each square would move slightly. The code for this was:


ArrayList agents = new ArrayList();
int pixelSize = 3; 

void setup(){

 PImage img = loadImage("images.jpg"); 

 size(img.width*pixelSize, img.height*pixelSize); 

 convertImgToAgents(img);

}

void draw(){

 for( int i = 0; i < agents.size(); i++){
 Agent a =(Agent)agents.get(i); 

 if(mousePressed)a.update();

 a.draw();

}

}

void convertImgToAgents(PImage img){

 for( int ix = 0; ix < img.width; ix++){
 for( int iy = 0; iy < img.height; iy++){

 color c = img.pixels[ix + (iy*img.width)];

 Agent a = new Agent(ix*pixelSize, iy*pixelSize, c);

 agents.add( a );

 }
 } 

}

Original image:
Screen Shot 2015-01-21 at 20.01.44

Image after mouse pressed:
Screen Shot 2015-01-21 at 20.02.32

As you can see, the image has now been split up into numerous squares which move slightly as you continuously mouse press. This workshop has been helpful as i have learn how to use Agents and Classes and I have learnt how they can be used to create new Processing sketches and shapes and, how they can be used to manipulate images. I can apply this to future projects in Processing as it makes the code simpler and also, makes basic images and shapes more interesting.

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