Processing

Creating basic sketches

Fig.1

HOME

For this project, we were given the task of creating an interactive design using software called Processing, which is an open source development environment based on creating visual arts. Initiailly, we were told to experiment with some basic sketches in the program first, before moving on to creating a final design. On the right, in the video labelled 'First Sketch' I have included footage of the first design I created using processing, which is a simple sketch that contains an ellipse bouncing around a canvas, similar to a DVD pause sceen. Additionally, the sketch contains code that changes the colour of the ellipse when the user changes the X and Y position of the mouse.

int xPos = 100;
int yPos = 100;
int xSpeed = 3;
int ySpeed = 3;
int sizeOfCircle = 200;

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

void draw()
{
background(0);
fill(mouseX, mouseY, 0);
stroke(255);
ellipse(xPos, yPos, sizeOfCircle, sizeOfCircle);

if (xPos > width - sizeOfCircle || xPos < 0)
{
xSpeed = -xSpeed;
}
xPos = xPos + xSpeed;

if (yPos > height - sizeOfCircle || yPos < 0)
{
ySpeed = -ySpeed;
}
yPos = yPos + ySpeed;
}

In fig. 1, I have shown the code that I wrote to implement the first sketch. I started by first defining all my variables as integers, and then went to to writing code for the initial properties of the sketch. You can see that I have used a function named 'ellipseMode' which is used to change the location from where the ellipse is drawn, by modifying how the parameters given to the ellipse are interpreted. The ellipse mode I used was named 'ellipseMode(CORNER)', which interprets the first two parameters of an ellipse as the upper-left corner of the shape, and the 2nd two parameters as its height and width*. I used this piece of code as I was initially having problems with my sketch in that part of the ellipse would go past the edge of the canvas before reversing direction, so I used ellipseMode to alter the radius of the shape and fix the issue.

The code I used to change the colour of the ellipse depending on the location of the mouse was:

fill(mouseX,mouseY,0);

The two variables named mouseX and mouseY each respectively contain the X and Y coordinates of the mouse, and when the mouse is moved, the fill() function sets the color of the ellipse, depending on the coordinates.

The code become slightly more complex towards the end, as i had to write code to tell the ellipse when to stop and reverse direction. I started off by saying that if the X position of the ellipse became greater than the width of the ellipse - 200px (sizeOfCircle), the ellipse would reverse direction. The ellipse would also reverse direction if the X position of the ellipse became less than zero. I then wrote code to say that if the statement became true, the horizontal speed of the ellipse would become the same but negative, and then the X position would equal X position plus X speed. This meant that once the X speed became negative, the X position would start to become negative and the ellipse would move in the opposite direction.

On the right, in fig. 2, I have included the code that I used to help write my 'Ellipse Scale' sketch. The setup for this sketch is quite similar to the setup for my first sketch, except for the fact that I have used ellipseMode(RADIUS) instead of ellipseMode(CORNER). 'ellipseMode(RADIUS) also uses the first two parameters of the ellipse as the shape's centre point, but uses the other two parameters to specify half of the shape's width and length. In this situation, the ellipseMode(RADIUS) is used to ensure that the ellipses scale properly during the animation*. Additionally, in this setup, I have set the frame rate to refresh 30 times a second, in order to make the animation look as smooth as possible.

In the main part of the code, I defined the position of the ellipses as:

a = a + 0.04

I have used a function named 'scale()', which is simply used to increase the dimension of the shape by a certain amount, depending on the position of the shape:

s = cos(a) * 1.5

In this case, the dimension of the ellipse is increased to 150% relative to its location. I have used a piece of code to translate one of the ellipses by half it's width and half it's length, in order to create a kind of 'swinging' effect in the animation. The second translation of (75, 0) is used to ensure that one ellipse is always scaled larger than the other. I have again used the mouse X and mouse Y variables to set the fill colour of the ellipses.

float a = 0.0;
float s = 0.0;

void setup() {
size(640, 360);
ellipseMode(RADIUS);
frameRate(30);
}

void draw() {

background(0);

a = a + 0.04;
s = cos(a)*1.5;

translate(width/2, height/2);
scale(s);
fill(mouseX,mouseY,0);
stroke(255);
ellipse(0, 0, 50, 50);

translate(75, 0);
fill(mouseX,mouseY,0);
stroke(255);
scale(s);
ellipse(0, 0, 50, 50); }

Fig.2

Fig.1

Developing Sketches

In fig. 3, I have shown the code I used to create the sketch labelled '2D Mouse Ellipse'. When writing code for the setup of this sketch, I have again used the function call 'ellipseMode', except in this case I have used ellipseMode(CENTER), which interprets the first two parameters of the ellipse as the shape's center point and the other two paramaters as it's width and height.*

In the main body of code, I have used the ellipse function to draw a shape for my sketch, but have used a series of variables for the parameters of the ellipse, rather than just a series of integers. For the first two parameters which set the shapes center point, I have used the variable mouseX for the X position and the (ellipse) height/2 for the Y position. Using the mouseX variable for the X position of the ellipse means that one of the shapes always follows the mouse in the X axis. For the 2nd two parameters, which are interpreted as the ellipse's width and height, I have set both of the values as mouseY/2 + 10, which means that the height and width of the ellipse will change as the Y position of the mouse varies. The ellipse reaches a minimum height and width when the cursor leaves the canvas of the sketch.

For the second ellipse, I have used the same ellipseMode as the first shape, but for the parameters, I have used different variables. I have set values for inverseX and inverseY, which are width-mouseX and height-mouseY respectively. Setting the X position of the ellipse equal to the width of the ellipse minus the X position of the mouse means that the width scales in magnitude depending on the location of the cursor and the height of the ellipse is equal to double the value of the Y component of the centre point.

void setup()
{
size(800,600);
noStroke();
ellipseMode(CENTER);
}

void draw()
{
background(51);
fill(255,0,0);
ellipse(mouseX,height/2,mouseY/2+10,mouseY/2+10);
fill(255,0,0);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
ellipse(inverseX,height/2,(inverseY/2)+10, (inverseY/2)+10);
}

Fig.3

Final Sketch

Processing

In fig. 4 on the right, I have included the code for my final sketch in Processing. In the setup section of my code for this sketch, I have included an important piece of code which is named 'P3D'. This is a render mode in Processing and is vital for my final sketch, as the P3D render mode allowed me to draw a 3D sketch. The third axis (Z axis) refers to the depth of any given point in the sketch, and enables us to create the illusion of three dimensional space in the Processing window*. Similar to the ellipseMode function I have used in my previous sketches, I have used the rectMode function call in this sketch. It has the same properties as the ellipseMode function but is based on parameters for a square rather than a circle. The rectMode is set to CENTER in this sketch, meaning that the first two parameters are set as the shape's center point, and the 2nd two parameters are set as the shape's width and height.

This sketch uses the same scaling function that I used in my 'Ellipse Scale' sketch, except that in this case, the percentage that the shape is scaled by is 200% rather than 150%. One of the rectangles is translated by half it's width and half it's height each time the code runs, again in order to create the 'swinging' effect of the animation. The box is also scaled by 200% from the center point during the animation, and this process continues on a loop.

As with the earlier 'Ellipse Scale' sketch, one of the shapes is translated so that it is always up slightly less than the other shape, but as this sketch is now working in the P3D render mode, the rectangle has to also be translated in the theoretical Z axis. The fill color is again set by the variables mouseX and mouseY.

In this final sketch, I decided to use a stroke of 255 for both of the rectangles, so that when the sketch is running and the shapes are being scaled, the stroke on both of the shapes leaves a kind of 'colour trail'. I thought it was important to use a stroke for the shape, as without it, the effect of the trail is somewhat less noticable, since the colours from the shape merge into each other.

float x = 0.0;
float y = 0.0;
float z = 0.0;
float angle;
float spin = 0.0;

void setup() {
size(900,720,P3D);
rectMode(CENTER);
frameRate(30);
background(50);
}

void draw() {

x = x + 0.04;
y = cos(x)*2;

translate(width/2, height/2);
scale(y);
fill(mouseX,mouseY,0);
stroke(255);
box(30,30,30);

translate(50, 75, 50);
fill(mouseX,mouseY,0);
stroke(255);
scale(y);
box(30,30,30);

}

Fig.4

*Info referenced from: https://www.processing.org/reference/ellipseMode_.html

*Info referenced from: https://processing.org/tutorials/p3d/