Tong Xu's Report on Processing

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.
1

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.
2

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.
3

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 50
}
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.
4

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!
5