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

1、鼠标1D。

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

 void setup(){
   size(640,360);
   noStroke();
   colorMode(RGB,height,height,height);
   rectMode(CENTER);
 }

 void draw(){
   background(0.0);

   float r1 = map(mouseX,0,width,0,height);

   float r2 = height -r1;

   fill(r1);
   rect(width/2 + r1/2,height/2,r1,r1);

   fill(r2);
   rect(width/2 - r2/2,height/2,r2,r2);
 }

2、鼠标2D。

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

 void setup() {
   size(640, 360);
   noStroke();
   rectMode(CENTER);
 }

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

3、鼠标点击。

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

 void setup() {
   size(640, 360);
   noSmooth();
   fill(126);
   background(102);
 }

 void draw() {
   if (mousePressed) {
     stroke(255);
   } else {
     stroke(0);
   }
   line(mouseX-66, mouseY, mouseX+66, mouseY);
   line(mouseX, mouseY-66, mouseX, mouseY+66);
 }

4、鼠标信号。

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

 int[] xvals;
 int[] yvals;
 int[] bvals;

 void setup()
 {
   size(640, 360);
   noSmooth();
   xvals = new int[width];
   yvals = new int[width];
   bvals = new int[width];
 }

 int arrayindex = 0;

 void draw()
 {
   background(102);

   for(int i = 1; i < width; i++) {
     xvals[i-1] = xvals[i];
     yvals[i-1] = yvals[i];
     bvals[i-1] = bvals[i];
   }
   // Add the new values to the end of the array
   xvals[width-1] = mouseX;
   yvals[width-1] = mouseY;
   if(mousePressed) {
     bvals[width-1] = 0;
   } else {
     bvals[width-1] = 255;
   }

   fill(255);
   noStroke();
   rect(0, height/3, width, height/3+1);

   for(int i=1; i<width; i++) {
     stroke(255);
     point(i, xvals[i]/3);
     stroke(0);
     point(i, height/3+yvals[i]/3);
     stroke(255);
     line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
   }
 }

5、缓和（Easing）。

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

 float x;
 float y;
 float easing = 0.05;

 void setup() {
   size(640, 360);
   noStroke();
 }

 void draw() {
   background(51);

   float targetX = mouseX;
   float dx = targetX - x;
   x += dx * easing;

   float targetY = mouseY;
   float dy = targetY - y;
   y += dy * easing;

   ellipse(x, y, 66, 66);

6、约束。

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

 float mx;
 float my;
 float easing = 0.05;
 int radius = 24;
 int edge = 100;
 int inner = edge + radius;

 void setup() {
   size(640, 360);
   noStroke();
   ellipseMode(RADIUS);
   rectMode(CORNERS);
 }

 void draw() {
   background(51);

   if (abs(mouseX - mx) > 0.1) {
     mx = mx + (mouseX - mx) * easing;
   }
   if (abs(mouseY - my) > 0.1) {
     my = my + (mouseY- my) * easing;
   }

   mx = constrain(mx, inner, width - inner);
   my = constrain(my, inner, height - inner);
   fill(76);
   rect(edge, edge, width-edge, height-edge);
   fill(255);
   ellipse(mx, my, radius, radius);
 }

7、存储输入。

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

 int num = 60;
 float mx[] = new float[num];
 float my[] = new float[num];

 void setup() {
   size(640, 360);
   noStroke();
   fill(255, 153);
 }

 void draw() {
   background(51); 

   // Cycle through the array, using a different entry on each frame.
   // Using modulo (%) like this is faster than moving all the values over.
   int which = frameCount % num;
   mx[which] = mouseX;
   my[which] = mouseY;

   for (int i = 0; i < num; i++) {
     // which+1 is the smallest (the oldest in the array)
     int index = (which+1 + i) % num;
     ellipse(mx[index], my[index], i, i);
   }
 }

8、鼠标功能。

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

 float bx;
 float by;
 int boxSize = 75;
 boolean overBox = false;
 boolean locked = false;
 float xOffset = 0.0;
 float yOffset = 0.0; 

 void setup() {
   size(640, 360);
   bx = width/2.0;
   by = height/2.0;
   rectMode(RADIUS);
 }

 void draw() {
   background(0);

   // Test if the cursor is over the box
   if (mouseX > bx-boxSize && mouseX < bx+boxSize &&
       mouseY > by-boxSize && mouseY < by+boxSize) {
     overBox = true;
     if(!locked) {
       stroke(255);
       fill(153);
     }
   } else {
     stroke(153);
     fill(153);
     overBox = false;
   }

   // Draw the box
   rect(bx, by, boxSize, boxSize);
 }

 void mousePressed() {
   if(overBox) {
     locked = true;
     fill(255, 255, 255);
   } else {
     locked = false;
   }
   xOffset = mouseX-bx;
   yOffset = mouseY-by; 

 }

 void mouseDragged() {
   if(locked) {
     bx = mouseX-xOffset;
     by = mouseY-yOffset;
   }
 }

 void mouseReleased() {
   locked = false;
 }

9、键盘。

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

 int rectWidth;

 void setup() {
   size(640, 360);
   noStroke();
   background(0);
   rectWidth = width/4;
 }

 void draw() {
   // keep draw() here to continue looping while waiting for keys
 }

 void keyPressed() {
   int keyIndex = -1;
   if (key >= 'A' && key <= 'Z') {
     keyIndex = key - 'A';
   } else if (key >= 'a' && key <= 'z') {
     keyIndex = key - 'a';
   }
   if (keyIndex == -1) {
     // If it's not a letter key, clear the screen
     background(0);
   } else {
     // It's a letter key, fill a rectangle
     fill(millis() % 255);
     float x = map(keyIndex, 0, 25, 0, width - rectWidth);
     rect(x, 0, rectWidth, height);
   }
 }

10、键盘功能。

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

 int maxHeight = 40;
 int minHeight = 20;
 int letterHeight = maxHeight; // Height of the letters
 int letterWidth = 20;          // Width of the letter

 int x = -letterWidth;          // X position of the letters
 int y = 0;                      // Y position of the letters

 boolean newletter;              

 int numChars = 26;      // There are 26 characters in the alphabet
 color[] colors = new color[numChars];

 void setup() {
   size(640, 360);
   noStroke();
   colorMode(HSB, numChars);
   background(numChars/2);
   // Set a hue value for each key
   for(int i = 0; i < numChars; i++) {
     colors[i] = color(i, numChars, numChars);
   }
 }

 void draw() {
   if(newletter == true) {
     // Draw the "letter"
     int y_pos;
     if (letterHeight == maxHeight) {
       y_pos = y;
       rect( x, y_pos, letterWidth, letterHeight );
     } else {
       y_pos = y + minHeight;
       rect( x, y_pos, letterWidth, letterHeight );
       fill(numChars/2);
       rect( x, y_pos-minHeight, letterWidth, letterHeight );
     }
     newletter = false;
   }
 }

 void keyPressed()
 {
   // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122)
   if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
     int keyIndex;
     if(key <= 'Z') {
       keyIndex = key-'A';
       letterHeight = maxHeight;
       fill(colors[keyIndex]);
     } else {
       keyIndex = key-'a';
       letterHeight = minHeight;
       fill(colors[keyIndex]);
     }
   } else {
     fill(0);
     letterHeight = 10;
   }

   newletter = true;

   // Update the "letter" position
   x = ( x + letterWidth ); 

   // Wrap horizontally
   if (x > width - letterWidth) {
     x = 0;
     y+= maxHeight;
   }

   // Wrap vertically
   if( y > height - letterHeight) {
     y = 0;      // reset y to 0
   }
 }

11、毫秒。

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

 float scale;

 void setup() {
   size(640, 360);
   noStroke();
   scale = width/20;
 }

 void draw() {
   for (int i = 0; i < scale; i++) {
     colorMode(RGB, (i+1) * scale * 10);
     fill(millis()%((i+1) * scale * 10));
     rect(i*scale, 0, scale, height);
   }
 }

12、时钟。

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

 int cx, cy;
 float secondsRadius;
 float minutesRadius;
 float hoursRadius;
 float clockDiameter;

 void setup() {
   size(640, 360);
   stroke(255);

   int radius = min(width, height) / 2;
   secondsRadius = radius * 0.72;
   minutesRadius = radius * 0.60;
   hoursRadius = radius * 0.50;
   clockDiameter = radius * 1.8;

   cx = width / 2;
   cy = height / 2;
 }

 void draw() {
   background(0);

   // Draw the clock background
   fill(80);
   noStroke();
   ellipse(cx, cy, clockDiameter, clockDiameter);

   // Angles for sin() and cos() start at 3 o'clock;
   // subtract HALF_PI to make them start at the top
   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
   float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
   float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

   // Draw the hands of the clock
   stroke(255);
   strokeWeight(1);
   line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
   strokeWeight(2);
   line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
   strokeWeight(4);
   line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);

   // Draw the minute ticks
   strokeWeight(2);
   beginShape(POINTS);
   for (int a = 0; a < 360; a+=6) {
     float angle = radians(a);
     float x = cx + cos(angle) * secondsRadius;
     float y = cy + sin(angle) * secondsRadius;
     vertex(x, y);
   }
   endShape();
 }