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.


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


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



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);
stroke(255,70); strokeWeight(1);
float radius = random(150);

This created a house shape whx

Processing #2

From the first Processing workshop, I learnt some of the basic functions and some of the basic lines of code. In the second Processing workshop the aim of the workshop was to create a pattern using different shape functions. The first thing to set up was the canvas. For this I used a sizing of 800×800 then for the background colour, I used a random fill of rect() with the colour values of black and white. The full code looks like this:

void setup(){
colorMode(HSB, 100);

for (int y=0;y<height;y=y+60){
for (int x=0;x<height;x=x+60){

This meant that when the Processing file loaded up, the background would have a black and white squared pattern. Which looked like:

Screen Shot 2015-01-09 at 14.18.01

This background works for the sketch as it emphasises the different uses of patterns and colour values. The basic function of this Processing tutorial was to show the different pattern techniques you can use. The next thing to implement on this canvas was a spiral pattern. The purpose of this was to experiment with different shapes and functions in Processing as we are still learning this new program. To make the spiral effect, the code needed looks like this:

void setup(){
colorMode(HSB, 100);

for (int y=0;y<height;y=y+60){
for (int x=0;x<height;x=x+60){

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

void draw(){
translate(width/2, height/2);
if (mousePressed){

With this code, the finished product looks like:

Screen Shot 2015-01-09 at 15.34.46

The finished Processing piece combines both the background pattern using shapes and the shapes that make the spiral pattern. The reasoning behind this piece of Processing is to experiment with different shapes and how they interact with one an other. I feel as though I have learnt a lot from this workshop as I have discovered how to use shape functions and how to create patterns using these functions. I can apply what I have learnt in this workshop to future projects as, using shapes in Processing is a key element in creating new pieces of Processing.

Dorset Independence Project – Putting it in the space/overview of assignment

Today was the day where we put the posters in the foyer in Weymouth house. The aim of today was to see how people react to the posters and if the posters grab the peoples attention. Can’t be too difficult, can it?

One of the main parts of this was the placement of our poster. This was the main part of today because if we put it in a bad place or a place where people can’t see it, it means that we will not see how our posters are perceived by other people. We looked at the different places where we could put the poster and because everyone else on our course was doing the same thing, there wasn’t many places to put myself and Sam’s poster. Although, we had an idea which no one had used yet. This idea was putting our poster in both elevators on the mirror. We did this because normally people in an elevator want to avoid conversation with other people in the lift so if there’s something to look at and read, they will read it. This was our thought process for the placement of our poster. This worked well as a few people got the elevator and every person read the poster. This task was good to assess how working with a space can make or break your poster.

Overall, this assignment gave us an insight on how to design a poster for a purpose and an audience. However, I think it could of been a better purpose as trying to make Dorset independent is quite a far fetched idea and I struggled to make Dorset appealing, no offence people who live in Dorset. Although saying that, the process of thinking of where to put the poster for peoples reactions and being aware of the space was a good experience. I believe I can use techniques and awareness learnt in this task in my future tasks that use the space.

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

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.


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() {
for (int i = 0; i < height; i += 20) {
fill(129, 206, 15);
rect(0, i, width, 10);
rect(i, 0, 10, height);

This code was used to create this:

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() {
line(width/2, height/2, mouseX, mouseY);

This is the outcome:
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.

void setup() {
size(640, 360);
void draw() {
ellipse(random(0,width), random(0,height), 30, 30);

This was the outcome:

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);
void draw(){
ellipse(random(0,width), random(0,height), z, z);
z = z+0.1;

This was the outcome:
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.