Your SlideShare is downloading. ×
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
Interactive Mouse (Report On Processing)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Interactive Mouse (Report On Processing)

774

Published on

Tong Xu's Report on Processing

Tong Xu's Report on Processing

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
774
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×