Processing Project – The Brief

Today we were given the brief for the new assignment we would have to complete.

Screen Shot 2015-01-22 at 18.54.38


This assignment is going to be focusing on a few ideas and outcomes that we should learn by the end of this process. These include: How people react to and understand the graphics being made, how people experience the work in an environment and understanding design rules. One of the main ways we will learn these are through testing the piece of Processing we have in Weymouth House. This is an open space where people go through everyday. Setting up our interactive pieces in this space would make perfect sense as we would gain much needed feedback.

Initial Thoughts

My initial thoughts on this assignment are that it seems very daunting. I say this because, although I have complete some workshops using the software being used in this assignment, I don’t think I am at the stage where I can create something of my own as of yet. If I want to do well on this assignment, I am really going to have to apply myself and to trying to learn Processing. Luckily, the deadline is set for a reasonable time in the future, which gives me enough time to think of an idea.

Plan of action

Now that I know what this assignment asks of me, what should I do first? The assignment is focused on design iterations which is a way of designing a product or media piece, in this assignment it is an interactive piece. The Iterative design process is more of a cycle rather than a set path design. This diagram from Webcredible shows the process:



We are using this process of thinking and developing our piece rather than using the traditional ‘Waterfall’ method. The waterfall method makes it a lot harder to develop the interactive piece as it relies on you getting it right first time, and we all know thats not going to happen. So, it makes much more sense to use the iterative design process for this assignment.

In this moment in time, my time should be focused on getting my initial ideas together and then putting them to test. In this assignment, we are encouraged to use the same structure as iterative designs process. So for every idea I have, I will run it through this process. I have a few ideas that I am eager to try out and see if they work.








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(){
 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(){

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

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



void mousePressed(){

 Agent a = new Agent(mouseX, mouseY, 19, color(random(255),111,111));

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); 



void draw(){

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

 if(mousePressed) updateAgents(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){
 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); 



void draw(){

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





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.

Processing #4

In this weeks Processing workshop, we were going to be looking at images and pixels. This meant that we were going to use different functions to manipulate an image. An image is nothing more than data. It is made up of numbers indicating different variations of colours and pixel values. With this, images can be manipulated in Processing in various ways. The first thing we learnt was using a class for loading and displaying an image as well as looking at its pixels. This class is called PImage. This means we declare the image data type to be called img. So the first line of code in the Processing sketch would be:

PImage img;

Now we have the image declared as a PImage, we made the standard setup for the rest of the sketch. I have now learnt the basic setup for Processing sketches thanks to the past workshops we have done. Although, for this workshop we were taught a new line of code to put in the void setup() {. This code was img = loadImage(“img.jpg”);. As we have declared PImage as ‘img’, using img = loadImage(“img.jpg”); it will find the image file under the name put in the speech marks. Consequently, once it has found the image that you are trying to load, it will load it. This function is helpful as we haven’t learnt how to load images into Processing and now that we have been taught how to, we can use this in many projects in the future. Now we know this, the basic setup for the Processing sketch looked like this:

void setup() {
img = loadImage("Edward_Snowden.jpg");
size(img.width, img.height);

Instead of loadImage loading “img.jpg” we are using a picture of Edward Snowden to manipulate in this workshop. From this, we have the image of Edward Snowden, now it’s time to use different functions to manipulate the image. There are many different ways you can alter an image using Processing. In this workshop, we focused on pixel manipulation. This was one of the main reasons we used PImage as we could see the values of the pixels and change them easily. The code for changing the pixels in the image looked like this:

void draw() {
int n = 30;
for (int y = 0; y < img.height; y+=n ) {

for (int x = 0; x < img.width+n; x+=n) {

int loc = x + y*img.width;

This code makes this image:


Look like:

Screen Shot 2015-01-21 at 17.54.28

So what’s happening here? The code is essentially making every pixel in the image blurred. This creates an interesting effect as it is vastly different from the original image. This manipulation of images has been helpful in understanding how pixels work when being used in code. Instead of a user seeing the normal image, the user can view an image in a completely different way due to Processing.

Although not related to manipulating images, we were then taught how to use different functions such as: adding the date and time and adding letters that appear then disappear after a certain amount of time. We were taught how to use these functions as we had a bit of time left over from finishing the image manipulation. The code we used to make these functions possible was:



void someImage(){
image(img,mouseX,mouseY, img.width/10,img.height/10);
void someTextyThing(){
String[] snowden={"S","N","O","D","E","N"};
String ye= str(year());
String mo= str(month());
String d= str(day());
String h= str(hour());
String m= str(minute());
String s= str(second());
String time = ye +"/"+ mo + "/" + d + " " + h +":" + m + ":" + s;

if (mouseX > width/2) fill(255,60);
else fill(255,0,0,60);

sn = (sn+1) % snowden.length;
text(snowden[sn],random(200, img.width-200),random(200,img.height-200));


This code made:

Screen Shot 2015-01-21 at 18.28.45

As you can see, the date and the time is displayed and also the letters appear and fade out. In this sketch, we made the letters spell out Edward Snowden.

This workshop has been extremely helpful in teaching us the basics of image manipulation and also, teaching us a few functions that could be useful in future projects. As there is so much more image manipulation we can do in Processing, this is just the tip of the ice berg. I am excited to do more image manipulation.