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 }
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 }
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 }
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 }
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);
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 }
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 }
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 }
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 }
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 }
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 }
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 }