Processing Development • Web Design Studio

Processing is a tool for sketching, and a language for learning how to code within the context of visual arts. It is pretty much unlimited what you can create with processing, and surprisingly it is quite simple even if you are a beginner at programming.

I found the processing tool really exciting and quite easy to use. I have already coded a bit with javascript so it was really good to put my knowledge to the test and create things.

Sketch 1

For my first sketch I created two squares and made one move diagonally across the page. This is the code:

int posX = 100;

		int posX2 = 600;

		int posY = 250;

		int corner1 = 10;

		

		void setup()

		{

		　size(800, 600);

		}

		

		　void draw()

		{

		  　background(125, 187, 209);

		  　stroke(0, 146, 165);

		  　fill(0, 146, 165);

		  　rect(posX, 100, 50, 50, corner1);

		  　rect(posX2, posY, 60, 60, corner1);

		  　posX2 = posX2 +-3;

		  　posY = posY +1;

		}

In the session I learnt that you always need to use “void setup()” to setup the sketch, and “void draw()” to draw elements.

Firstly I used integers to define where my elements would be on the sketch. To make the square move diagonally, I set the second rectangle shape to "posX2 = posX2 +-3” and "posY = posY +1” which means that every time processing runs the sketch, posX2 will change by -3 pixels (left), and posY will change by +1 pixels (down).

Sketch 2

For my second sketch, I used the variables mouseX and mouseY to create a square that follows my mouse around the screen and creates a trail behind it.

int posX = 400;

		int posY = 400;

		

		void setup()

		{

		　size(800, 800);

		　background(125, 145, 209);

		}

		

		void draw()

		{

		  　stroke(255, 255, 255);

		  　rect(mouseX, mouseY, 3, 3);

		}

I then altered this sketch slightly with an if/else statement.

int posX = 400;

		int posY = 400;

		color c1 = color(204, 153, 0);

		color c2 = color(0, 153, 230);

		int corner = 2;

		color stroke1 = color(102, 0, 102);

		color stroke2 = color(102, 255, 204);

		

		void setup()

		{

		  　size(800, 800);

		  　background(125, 145, 209);

		}

		

		void draw()

		{

		  　rect(mouseX, mouseY, 10, 10, corner);

		   　if (mousePressed == true) {

		 　　fill(mouseX, 2, mouseY);

		    　　stroke(mouseX, 2, mouseY);

		  　} else {

		    　　fill(mouseX, mouseY, 2);

		    　　stroke(mouseX, mouseY, 2);

		  　}

		}

I used the if/else statement to make the square change colour depending on if it was clicked or not. I also used the mouseX and mouseY variables to make the colour change depending on the position of the mouse.

Sketch 3

For my third sketch, I used the same code such as the mouseX and mouseY variables and if/else statements, but instead used them on a triangle.

void setup()

		{

		  　size(800, 800);

		  　background(125, 145, 209);

		}

		

		void draw()

		{

		  　triangle(10, 15, mouseX, mouseY, 600, 800);

		  　if (mousePressed == true) {

		    　　fill(mouseX, 2, mouseY);

		    　　stroke(mouseX, 2, mouseY);

		  　} else {

		    　　fill(mouseX, mouseY, 2);

		    　　stroke(mouseX, mouseY, 2);

		　}

		}

Sketch 4

In the second session, I continued with the use of if/else statements but started to experiment with other variables.

For my fourth sketch I wanted to create a circle that increases in size when clicked.

int radius=100;

		int Xpos1 = 250;

		int Xpos2 = 250;

		int speed = 8;

		

		void setup() {

		  　　size(500, 500);

		}

		

		void draw() {

		  　background(0);

		  　ellipse(Xpos1, Xpos2, radius, radius);

		  　ellipse(Xpos1, Xpos2, radius/2, radius/2);

		  　stroke(255, 255, 255);

		  　noFill();

		 

		  　if (mousePressed == true) {

		    　　radius = radius + speed;

		  　}

		 

		  　if(radius > width + 200)

		  　{

		    　　radius = 100;

		　}

		}

I drew two ellipses, the second one half the size of the first, and used the variable “mousePressed” to control when the circle increases in size. I also used the integer “speed” which controls how fast the circle expands, which I set to 8. I used a second if statement to make the circles return back the their original sizes if they reached a width 200px more than the width of the screen.

I then decided to make the circle increase and decrease if you pressed a specific key on the keyboard.

int radius =  150;

		int speed = 5;

		

		void setup() {

		  　size(500, 500);

		}

		

		void draw() {

		  　background(0);

		  　ellipse(250, 250, radius, radius);

		  　noStroke();

		}

		

		void keyPressed() {

		  　if(key== CODED){

		    　　if(keyCode == UP) {

		　　　radius = radius + speed;

		　　}

		    　　if(keyCode == DOWN) {

		　　　radius = radius - speed;

		　　}

		  　}

		}

I used the “keyPressed” and “keyCode” variables to make the circle increase when the “up” key is pressed, and for it to decrease when the “down” key is pressed.

To improve the code even more, I changed the speed in which the circles increased and decreased.

int radius =  150;

		int speed = 5;

		

		void setup() {

		  　size(500, 500);

		}

		

		void draw() {

		  　background(255);

		  　ellipse(250, 250, radius, radius);

		  　fill(255);

		  　ellipse(250, 250, radius/2, radius/2);

		  　fill(0);

		  　noStroke();

		 }

		

		void keyPressed() {

		  　if(key== CODED){

		    　　if(keyCode == UP){

		      　　radius = radius + speed;

		      　　speed = speed - 2;

		  　}

		    　　if(keyCode == DOWN) {

		    　　　radius = radius - speed;

		     　　　speed = speed + 2;

		 　　 }

		  　}

		}

I wrote the code so when the circles are smaller they change size quicker

radius = radius + speed;

		speed = speed - 2;

and when they’re bigger, they change size slower

radius = radius - speed;

		speed = speed + 2;

This code also made the circle have quite cool effect if you keep holding down one of the keys - it goes smaller, slightly larger, small again, then continues as normal.