processing学习整理---Input（输入）

1、鼠标1D。

左右移动鼠标可移动天平。 “mouseX”变量用于控制矩形的大小和颜色。

 1 void setup(){
 2   size(640,360);
 3   noStroke();
 4   colorMode(RGB,height,height,height);
 5   rectMode(CENTER);
 6 }
 7 
 8 void draw(){
 9   background(0.0);
10   
11   float r1 = map(mouseX,0,width,0,height);
12   
13   float r2 = height -r1;
14   
15   fill(r1);
16   rect(width/2 + r1/2,height/2,r1,r1);
17   
18   
19   fill(r2);
20   rect(width/2 - r2/2,height/2,r2,r2);
21 }

View Code

2、鼠标2D。

移动鼠标会更改每个框的位置和大小。

 1 void setup() {
 2   size(640, 360); 
 3   noStroke();
 4   rectMode(CENTER);
 5 }
 6 
 7 void draw() {
 8   background(51); 
 9   fill(255, 204);
10   rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
11   fill(255, 204);
12   int inverseX = width-mouseX;
13   int inverseY = height-mouseY;
14   rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
15 }

View Code

3、鼠标点击。

移动鼠标以定位形状。按下鼠标按钮反转颜色。

 1 void setup() {
 2   size(640, 360);
 3   noSmooth();
 4   fill(126);
 5   background(102);
 6 }
 7 
 8 void draw() {
 9   if (mousePressed) {
10     stroke(255);
11   } else {
12     stroke(0);
13   }
14   line(mouseX-66, mouseY, mouseX+66, mouseY);
15   line(mouseX, mouseY-66, mouseX, mouseY+66); 
16 }

View Code

4、鼠标信号。

移动并单击鼠标以生成信号。顶行是来自“mouseX”的信号，中间行是来自“mouseY”的信号，底行是来自“mousePressed”的信号。

 1 int[] xvals;
 2 int[] yvals;
 3 int[] bvals;
 4 
 5 void setup() 
 6 {
 7   size(640, 360);
 8   noSmooth();
 9   xvals = new int[width];
10   yvals = new int[width];
11   bvals = new int[width];
12 }
13 
14 int arrayindex = 0;
15 
16 void draw()
17 {
18   background(102);
19   
20   for(int i = 1; i < width; i++) { 
21     xvals[i-1] = xvals[i]; 
22     yvals[i-1] = yvals[i];
23     bvals[i-1] = bvals[i];
24   } 
25   // Add the new values to the end of the array 
26   xvals[width-1] = mouseX; 
27   yvals[width-1] = mouseY;
28   if(mousePressed) {
29     bvals[width-1] = 0;
30   } else {
31     bvals[width-1] = 255;
32   }
33   
34   fill(255);
35   noStroke();
36   rect(0, height/3, width, height/3+1);
37 
38   for(int i=1; i<width; i++) {
39     stroke(255);
40     point(i, xvals[i]/3);
41     stroke(0);
42     point(i, height/3+yvals[i]/3);
43     stroke(255);
44     line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
45   }
46 }

View Code

5、缓和（Easing）。

将鼠标移动到屏幕上，符号将会跟随。在绘制动画的每个帧之间，程序计算符号的位置和光标之间的差异。如果距离大于1像素，则符号从其当前位置向光标移动部分距离（0.05）。

 1 float x;
 2 float y;
 3 float easing = 0.05;
 4 
 5 void setup() {
 6   size(640, 360); 
 7   noStroke();  
 8 }
 9 
10 void draw() { 
11   background(51);
12   
13   float targetX = mouseX;
14   float dx = targetX - x;
15   x += dx * easing;
16   
17   float targetY = mouseY;
18   float dy = targetY - y;
19   y += dy * easing;
20   
21   ellipse(x, y, 66, 66);

View Code

6、约束。

在屏幕上移动鼠标移动圆圈。程序将圆圈限制在其框中。

 1 float mx;
 2 float my;
 3 float easing = 0.05;
 4 int radius = 24;
 5 int edge = 100;
 6 int inner = edge + radius;
 7 
 8 void setup() {
 9   size(640, 360);
10   noStroke(); 
11   ellipseMode(RADIUS);
12   rectMode(CORNERS);
13 }
14 
15 void draw() { 
16   background(51);
17   
18   if (abs(mouseX - mx) > 0.1) {
19     mx = mx + (mouseX - mx) * easing;
20   }
21   if (abs(mouseY - my) > 0.1) {
22     my = my + (mouseY- my) * easing;
23   }
24   
25   mx = constrain(mx, inner, width - inner);
26   my = constrain(my, inner, height - inner);
27   fill(76);
28   rect(edge, edge, width-edge, height-edge);
29   fill(255);  
30   ellipse(mx, my, radius, radius);
31 }

View Code

7、存储输入。

在屏幕上移动鼠标可更改圆形的位置。鼠标的位置被记录在阵列中并且每帧被回放。在每个帧之间，最新的值被添加到每个数组的末尾，并且最早的值被删除。

 1 int num = 60;
 2 float mx[] = new float[num];
 3 float my[] = new float[num];
 4 
 5 void setup() {
 6   size(640, 360);
 7   noStroke();
 8   fill(255, 153); 
 9 }
10 
11 void draw() {
12   background(51); 
13   
14   // Cycle through the array, using a different entry on each frame. 
15   // Using modulo (%) like this is faster than moving all the values over.
16   int which = frameCount % num;
17   mx[which] = mouseX;
18   my[which] = mouseY;
19   
20   for (int i = 0; i < num; i++) {
21     // which+1 is the smallest (the oldest in the array)
22     int index = (which+1 + i) % num;
23     ellipse(mx[index], my[index], i, i);
24   }
25 }

View Code

8、鼠标功能。

单击框并将其拖动到屏幕上。

 1 float bx;
 2 float by;
 3 int boxSize = 75;
 4 boolean overBox = false;
 5 boolean locked = false;
 6 float xOffset = 0.0; 
 7 float yOffset = 0.0; 
 8 
 9 void setup() {
10   size(640, 360);
11   bx = width/2.0;
12   by = height/2.0;
13   rectMode(RADIUS);  
14 }
15 
16 void draw() { 
17   background(0);
18   
19   // Test if the cursor is over the box 
20   if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
21       mouseY > by-boxSize && mouseY < by+boxSize) {
22     overBox = true;  
23     if(!locked) { 
24       stroke(255); 
25       fill(153);
26     } 
27   } else {
28     stroke(153);
29     fill(153);
30     overBox = false;
31   }
32   
33   // Draw the box
34   rect(bx, by, boxSize, boxSize);
35 }
36 
37 void mousePressed() {
38   if(overBox) { 
39     locked = true; 
40     fill(255, 255, 255);
41   } else {
42     locked = false;
43   }
44   xOffset = mouseX-bx; 
45   yOffset = mouseY-by; 
46 
47 }
48 
49 void mouseDragged() {
50   if(locked) {
51     bx = mouseX-xOffset; 
52     by = mouseY-yOffset; 
53   }
54 }
55 
56 void mouseReleased() {
57   locked = false;
58 }

View Code

9、键盘。

点击图像给它的焦点，按字母键在时间和空间中创建表单。每个键具有唯一的标识号。这些数字可用于定位空间中的形状。

 1 int rectWidth;
 2    
 3 void setup() {
 4   size(640, 360);
 5   noStroke();
 6   background(0);
 7   rectWidth = width/4;
 8 }
 9 
10 void draw() { 
11   // keep draw() here to continue looping while waiting for keys
12 }
13 
14 void keyPressed() {
15   int keyIndex = -1;
16   if (key >= 'A' && key <= 'Z') {
17     keyIndex = key - 'A';
18   } else if (key >= 'a' && key <= 'z') {
19     keyIndex = key - 'a';
20   }
21   if (keyIndex == -1) {
22     // If it's not a letter key, clear the screen
23     background(0);
24   } else { 
25     // It's a letter key, fill a rectangle
26     fill(millis() % 255);
27     float x = map(keyIndex, 0, 25, 0, width - rectWidth);
28     rect(x, 0, rectWidth, height);
29   }
30 }

View Code

10、键盘功能。

点击窗口给它的焦点，然后按字母键来输入颜色。每当按下一个键时，键盘功能keyPressed（）被调用。 keyReleased（）是释放键时调用的另一个键盘函数。

 1 int maxHeight = 40;
 2 int minHeight = 20;
 3 int letterHeight = maxHeight; // Height of the letters
 4 int letterWidth = 20;          // Width of the letter
 5 
 6 int x = -letterWidth;          // X position of the letters
 7 int y = 0;                      // Y position of the letters
 8 
 9 boolean newletter;              
10 
11 int numChars = 26;      // There are 26 characters in the alphabet
12 color[] colors = new color[numChars];
13 
14 void setup() {
15   size(640, 360);
16   noStroke();
17   colorMode(HSB, numChars);
18   background(numChars/2);
19   // Set a hue value for each key
20   for(int i = 0; i < numChars; i++) {
21     colors[i] = color(i, numChars, numChars);    
22   }
23 }
24 
25 void draw() {
26   if(newletter == true) {
27     // Draw the "letter"
28     int y_pos;
29     if (letterHeight == maxHeight) {
30       y_pos = y;
31       rect( x, y_pos, letterWidth, letterHeight );
32     } else {
33       y_pos = y + minHeight;
34       rect( x, y_pos, letterWidth, letterHeight );
35       fill(numChars/2);
36       rect( x, y_pos-minHeight, letterWidth, letterHeight );
37     }
38     newletter = false;
39   }
40 }
41 
42 void keyPressed()
43 {
44   // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122)
45   if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
46     int keyIndex;
47     if(key <= 'Z') {
48       keyIndex = key-'A';
49       letterHeight = maxHeight;
50       fill(colors[keyIndex]);
51     } else {
52       keyIndex = key-'a';
53       letterHeight = minHeight;
54       fill(colors[keyIndex]);
55     }
56   } else {
57     fill(0);
58     letterHeight = 10;
59   }
60 
61   newletter = true;
62 
63   // Update the "letter" position
64   x = ( x + letterWidth ); 
65 
66   // Wrap horizontally
67   if (x > width - letterWidth) {
68     x = 0;
69     y+= maxHeight;
70   }
71 
72   // Wrap vertically
73   if( y > height - letterHeight) {
74     y = 0;      // reset y to 0
75   }
76 }

View Code

11、毫秒。

毫秒是1/1000秒。处理跟踪程序运行的毫秒数。通过使用模（％）运算符修改此数，可创建不同的时间模式。

 1 float scale;
 2 
 3 void setup() {
 4   size(640, 360);
 5   noStroke();
 6   scale = width/20;
 7 }
 8 
 9 void draw() { 
10   for (int i = 0; i < scale; i++) {
11     colorMode(RGB, (i+1) * scale * 10);
12     fill(millis()%((i+1) * scale * 10));
13     rect(i*scale, 0, scale, height);
14   }
15 }

View Code

12、时钟。

可以使用second（），minute（）和hour（）函数读取当前时间。在本例中，sin（）和cos（）值用于设置指针的位置。

 1 int cx, cy;
 2 float secondsRadius;
 3 float minutesRadius;
 4 float hoursRadius;
 5 float clockDiameter;
 6 
 7 void setup() {
 8   size(640, 360);
 9   stroke(255);
10   
11   int radius = min(width, height) / 2;
12   secondsRadius = radius * 0.72;
13   minutesRadius = radius * 0.60;
14   hoursRadius = radius * 0.50;
15   clockDiameter = radius * 1.8;
16   
17   cx = width / 2;
18   cy = height / 2;
19 }
20 
21 void draw() {
22   background(0);
23   
24   // Draw the clock background
25   fill(80);
26   noStroke();
27   ellipse(cx, cy, clockDiameter, clockDiameter);
28   
29   // Angles for sin() and cos() start at 3 o'clock;
30   // subtract HALF_PI to make them start at the top
31   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
32   float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
33   float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
34   
35   // Draw the hands of the clock
36   stroke(255);
37   strokeWeight(1);
38   line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
39   strokeWeight(2);
40   line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
41   strokeWeight(4);
42   line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
43   
44   // Draw the minute ticks
45   strokeWeight(2);
46   beginShape(POINTS);
47   for (int a = 0; a < 360; a+=6) {
48     float angle = radians(a);
49     float x = cx + cos(angle) * secondsRadius;
50     float y = cy + sin(angle) * secondsRadius;
51     vertex(x, y);
52   }
53   endShape();
54 }

View Code