1

Report on Processing ---Tong Xu

Ⅰ . My Experience on Processing

Processing was the most difficult module for me because it needed the

Java language, which was a brand new area for me. However, browsing

the academic website (www.processing.org) was a perfect experience.

On Exhibition, diverse examples and original ideas inspired me and

aroused my interests in Java and Processing. What was more fortunate

was that a collection of step-by-step lessons were available covering

beginner, intermediate and advanced topics. And I found similar tutorials

in Chinese, so it was relatively easier for me to learn processing.

Processing is an important tool to make the 3-D chatting in my

dissertation project more interactive and personalized.

2

Ⅱ .The Process to Learn Processing

1. As a novice in Java and Processing, I began by downloading and

installing processing software from processing.org.

2. First of all, I learnt how to change the size of window and draw

shapes. The sketches were as follows:

Figure 1 and 2 showed the sketches to run two points and one line

respectively, and figure 3 displayed the line when I pressed the “run”

button on the top left corner of sketch panel. “Size()” determined the

size of window to show the objects or interactions, “point()” was

decided by the coordinates on X and Y axis, and “line()” was formed

of two points.

After every command, a semicolon (;) was required to tell

processing to perform the command.

3

3. Then I learnt the knowledge of digital color. This part was not

difficult, as I had learnt in Photoshop. Generally speaking, 0 meant

black and 255 meant white, 255 referred to 100% opacity and 0

referred to 100% transparency. In between, other numbers were a

shade of grey or some percentage of opacity.

However, how to set colors in Processing was what I needed to learn.

When I made a shape, I needed to “fill()” it with some color or degree

of opacity. In my project, there was a piece of command

“fill(82,86,246,197)”, which referred that the color was purple (Red:

82, Green: 86, Blue: 246) and it had 75% opacity.

4. Making use of blocks like “setup()” and “draw()” were the

condition to create animation and interactions. The “setup()” block ran

alone and should be used for any initialization. The “draw()” block ran

repeatedly and could be used to handle animation.

5. Then I learnt to take advantage of “x” “y” as variables, in which way

users could be allowed to interact with input devices like the mouse

or keyboard. In my project, I designed an interactive mouse.

4

Ⅲ .The Explanation of the Project---Interactive Mouse

The sketch of Interactive Mouse was as follows:

void setup() { // The setup() block is used for initialization

size(500, 500); // The project sets the window size to 500×500pixels.

}

void draw() { // The draw() block is used to handle animation.

background(0); //The background is set to black.

float x = mouseX; // Value of X is assigned by the position of mouse on X axis.

float y = mouseY; // Value of Y is assigned by the position of mouse on Y axis.

rect(x, y, x+10, y+10); //A rectangle is set up.

fill(238,231,35,200); // Interior of the shape is set to yellow and partial opacity.

rect(x+10, y+10,x+10, y+10); // Another rectangle is set up.

fill(82,86,246,191); //color: purple, partial opacity

rect(x+20, y+20, x+10, y+10); // Another rectangle is set up.

fill(81,235,92,180); //color: green, partial opacity

rect(x+30,y+30,x+10, y+10); // Another rectangle is set up.

fill(255,200,200,255); //color: pink, partial opacity

stroke(255,128,0); //The outline is set to orange. (Red:255, Green:128, Blue:0)

strokeWeight(5); //The width of stroke is set to 5.

5

smooth(); //Shapes are drawn with smooth edges to enhance visual refinement.

line(x, y, x+20, y-40); //A line is built.

line(x+40, y, x+20, y-40); //Another line is forming an angle with previous one.

}

When I ran the sketch of the project, the movements of pictures in the

window followed the position of the mouse. I would like to introduce

interactive mouse in my dissertation project to offer fun to participants.

The effects of my project were as follows:

In the future, I will think of adding texts in the square to offer

real-time messages to users.

Please have fun with you play with it!