What is Processing?
Processing is a free and open source language based on Java. It's a sketching tool which allows you to code almost anything you like and instantly view your creations or 'sketches'. Processing provides the ability to visualise data, make music, program electronics along with creating computer interactive visuals.
(source: processing.org)

I like the simplicity of the Processing platform as it provides you with a blank canvas, you just press play to view your creations. Of course there are a few parameters you must follow as I learnt in my first lesson.

The first lesson introduced me to the software and code; from here I was free to debut my sketches by building on what I had learnt. I learnt that variables need to be stated at the beginning before 'void setup()' and 'void draw()'. 'Void' is a function which doesn't return a value, 'setup' and 'draw' are required to run a sketch. In the 'setup' you define the parameters of the sketch, the size of screen for example. In 'draw' you define what you want to happen within the newly 'setup' environment.

My First Sketch
The first sketch was of a rectangle moving diagonally across the screen. At first I defined the starting position with integers. This was then used in the rectangle function along with the dimensions of the square.
Take a look at the code below, along with the video.














I also learnt that by moving the 'background' function to 'void setup' this leaves a trail behind the rectangle. The reason this happens is because each position of the rectangle is stacked on top of each other within the window. By moving the background to 'setup', this is at the lowest stack level and therefore reveals the path of the rectangle.
Take a look at the video below.















Sketch 2
In this second sketch, I have been introduced to the 'if/else' statement and the 'random' feature. Here the red rectangle follows the path of my mouse, when it get's within 100px range the fill randomly changes and continues until it is out of range again. To achieve this I used 'mouseX' and 'mouseY' functions to locate the cursor on the screen.
Take a look at the code to the left and the video below.



















I appreciate that the 'if/else' statements are powerful within Processing as it allows you to create more interactive and ludic media.



Sketch 3
Building upon the previous code and the if/else statement I created the next sketch. I have changed the rectangle to a circle and altered the size considerably. The in range of mouse function applies as before, but I have also introduced 'void mousePressed'. When the user clicks the mouse, the circle will change to a square. To learn how to achieve this I researched for guidance on processing.org/reference.

I discovered a new variable named 'boolean', this simply requires a true or false statement (1 or 0). I named the variable 'squareMode' and stored 'false'.
For the function to run I used an 'if/else' statement. I couldn't get it to work for a while this is because I needed to state the opposite for the if/else rule to work. Like so...








The '!' negates, means opposite, true becomes false and vice versa. In plain English I'm stating 'if true' - because squareMode is storing 'false'.
View the full code to the left and the video below.















Sketch 4
In this sketch I have taken what I have learnt previously and applied it differently. I have used 'mouseX' and 'mouseY' to change the fill colour of the rectangle/circle depending on the position of the mouse cursor.
I changed the green value and blue value to be 'mouseX' and 'mouseY' respectfully. See the line of code changed below.



Here is the result...













The next three sketches are further sketches I made whilst using Processing's on line reference. I wanted to research different things you can do, looking at shape, colour and the mouse cursor.

Sketch 5 - Changing the mouse cursor
To change the cursor, I used 'PImage' variable and loaded the image URL into the 'setup'. In 'draw' the following if/else statement is used...







This simple statement is saying that if the mouse cursor is within 800px of the screen show 'mouseCursor' variable (my loaded image). Otherwise show the hand cursor. The hand cursor is never shown due to the screen size being 800x600px.
Take a look for yourself...

















Sketch 6
The next sketch is simple, no variables were used, just mouse functions.


















I used 'mouseX' and 'mouseY' to attach a corner of the triangle to the mouse position. I also used it in the fill when 'mousePressed' the colour will change.


Sketch 7 - Ellipses and Arcs
Using 'PI', 'Quater_PI' and 'Half_PI', I was able to create different arcs for this sketch. In this sketch a lot is happening in relation to the position of the mouse. The X and Y axis movements change colour. The X axis also moves the coloured shapes vertically. Whereas the Y axis moves the floating shapes which hide the coloured shapes below it. Also I used a 'void mouseClicked()' to change the background colour.
Take a look below...

int posX = 100;
int posY = 200;

void setup()
{
size(800, 600);
}

void draw()
{
background(100, 150, 100);
fill(0, 100, 100);
rect(posX, posY, 60, 60);
posX = posX +3;
posY = posY +1;
}

PVector position;
PVector v;
float distance;

void setup()
{

size(800, 600);
position = new PVector(100, 100);
v = new PVector(0,0);
}

void draw()
{
rect(position.x, position.y, 20, 20);
v.x=mouseX - position.x;
v.y=mouseY - position.y;

distance= v.mag();

v.normalize();
position.x = position.x + v.x;
position.y = position.y + v.y;


if (distance < 100)
{
fill(random(255),random(255),random(255));
}
else
{
fill(255,0,0);
}
}

if(!squareMode)
{
ellipse(position.x, position.y, 100, 100);
}
else
{
rect(position.x, position.y, 100, 100);
}

PVector position;
PVector v;
float distance;
boolean squareMode = false;

void setup()
{
background(255);
size(800, 600);
position = new PVector(100, 100);
v = new PVector(0,0);
}

void draw()
{
noStroke();
if(!squareMode)
{
ellipse(position.x, position.y, 100, 100);
}
else
{
rect(position.x, position.y, 100, 100);
}
v.x=mouseX - position.x;
v.y=mouseY - position.y;
distance= v.mag();
v.normalize();
position.x = position.x + v.x;
position.y = position.y + v.y;

if (distance < 100)
{ fill(random(255),random(255),random(255));
}
else
{
fill(0,0,255);
}
}

void mousePressed()
{
squareMode = !squareMode;
}

fill(200,mouseX,mouseY);

if(mouseX < 800) {
cursor(mouseCursor, 0, 0);
} else {
cursor(HAND);
}

void setup()
{
background(0,0,0);
size(600,800);
}

void draw()
{
// noStroke();
triangle(300,300,mouseX,mouseY,300,600);

if(mousePressed)
{
fill(mouseX, 2, mouseY);
}
else{
fill(mouseX,mouseY,2);
}
}

int posX = 100;
int posY = 100;
int bg= 0;
float red= mouseX;
float blue= mouseY;



void setup()
{
size(800,600);

}

void draw()
{
background(bg);
stroke(red,blue,0);
strokeWeight(0);
fill(red,blue,0);

ellipse(100, mouseX, 50, 50);
ellipse(200, mouseX, 50, 50);
ellipse(300, mouseX, 50, 50);
ellipse(400, mouseX, 50, 50);
ellipse(500, mouseX, 50, 50);
ellipse(600, mouseX, 50, 50);
ellipse(700, mouseX, 50, 50);

arc(100, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(200, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(300, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(400, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(500, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(600, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);
arc(700, mouseX +100, 50, 50, 0, PI+QUARTER_PI, PIE);

arc(100, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(200, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(300, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(400, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(500, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(600, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);
arc(700, mouseX +200, 50, 50, 0, PI+QUARTER_PI, CHORD);

arc(100.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(200.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(300.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(400.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(500.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(600.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);
arc(700.0, mouseX +300.0, 50.0, 50.0, 0.0, HALF_PI);




stroke(bg);
fill(bg);


ellipse(100, mouseY-30, 60, 60);
ellipse(200, mouseY-30, 60, 60);
ellipse(300, mouseY-30, 60, 60);
ellipse(400, mouseY-30, 60, 60);
ellipse(500, mouseY-30, 60, 60);
ellipse(600, mouseY-30, 60, 60);
ellipse(700, mouseY-30, 60, 60);

posX= mouseX +1;
posY= mouseY +1;
red= map(mouseY, 0, 800, 255, 0);
blue= map(mouseX, 0, 800, 0, 255);




}


void keyPressed()
{
saveFrame();
}


void mouseClicked() {
if (bg == 0) {
bg = 255;
} else {
bg = 0;
}

}

Jump To: What is Processing? | Sketch: 1 | 2 | 3 | 4 | 5 | 6 | 7

^To Top

Reference:
1.) Geometric Line images - processing.org