单击和一些案例

一、单击

1、单击概念

       除了定位鼠标之外，processing鼠标还捕捉鼠标是否被单击。mousePressed在鼠标单击和不单击的情况下有不同的值。mousePressed变量是一种bool变量，也就是说它只有两个可能的值，真和假。当鼠标按下的时候mousePressed的值为真。

2、单击鼠标案例

      2.1单击鼠标

       mousePressed和if语句一同判断一行代码什么时候运行什么时候不运行。案例代码如图1

                                            图1

       运行结果如图2

                     图2

       当鼠标单击时，条件为真（true），条件成立，颜色为黑。

      2.2else补充

       当条件为假时，else块内容会运行。代码如图3

                                            图3

       鼠标并未单击时，else代码运行，进行单击测试的那块颜色为白色，如图4

                    图4

    2.3mouseButton

       mouseButton的变量可以是 LEFT、RIGHT、CENTER。我们可以用mouseButton来进行条件判断。代码如图5

                                        图5

       保存并运行如图6

                图6

3、定位

       一个if结构可以和mouseX和mouseY来判定鼠标在窗口的位置。案例代码如下

float x;
int offset =10;
void setup(){
size(240,120);
x=width/2;
}
void draw(){
  background(204);
  if(mouseX>x){
    x+=0.5;
    offset=-10;
  }
  if(mouseX<x){
    x-=0.5;
    offset=10;
  }
  line(x,0,x,height);
  line(mouseX,mouseY,mouseX+offset,mouseY-10);
  line(mouseX,mouseY,mouseX+offset,mouseY+10);
  line(mouseX,mouseY,mouseX+offset*3,mouseY);
}
       保存运行如图7

                 图7

4、圆形边界案例

       为了检验圆形，我们用dist()函数来得到圆心到光标的距离，然后我们判断这个距离是否小于圆的半径。如果小于圆的半径，我们就知道光标在圆内。下面这个例子中，当光标在圆形区域的时候，它的尺寸会变大。案例代码如图8

                                                图8

       保存并运行如图9

                     图9

       当鼠标靠近圆，圆会变黑且放大，如图10

                     图10

5、矩形边界案例

       我们用做四个独立的检测来检查光标是否在矩形符合条件的边上，然后我们比较每个检测结果，如果它们都是真的，我们就知道光标在矩形内。案例代码如图11

                                                                                                          图11

       保存运行如图12

                     图12

      当所有的检测都被执行且执行结果为真的时候，表示光标在内部，鼠标移动到矩形内，矩形变黑没如图13

                     图13

二、类型

1、Processing会跟踪键盘上那个按键被按下以及最后一个被按下的键。

2、检测按键案例

      在这个例子中，当任意键按下时会绘制第二条线，代码如图14

                                                图14

      保存运行如图15

                        图15

      按下任意键会绘制第二条线，如图16

                        图16

3、绘制字母

      在这个例子中使用textSize()函数设置字母的尺寸，用textAlign()函数设置文字在它的x轴中心上，用text（）函数绘制文字。

      案例代码如图17

                        图17

      保存运行如图18

                         图18

      当按下任一个字母，草图上就会出现那个字母，比如我按下A（按下的字母必须时大写字母）结果如图19

                        图19

4、检查特殊按键

      在这个案例中，我们检测输入的是否是H还是N。我们使用比较操作符“==”来检测key的值是否与我们要找的字符相同。案例代码如图20

                                    图20

      保存运行如图21

              图21

      当按下小写H或者大写H时，草图会显示H，当按下小写n或者大写N时，草图会显示N。

5、用方向键移动

      检测方向键左键或者右键，并控制一个矩形的移动。代码如图22

     

                                              图22

      保存运行如图23

                        图23

三、映射

1、将值映射到范围内

      两条线的位置由mouseX变量控制。灰色的线和光标位置同步，但黑色的线保持在屏幕中心更近的位置，距离左右边的白线更远。案例代码如图24

                                            图24

      保存运行如图25

                  图25

2、用map（）函数做转换

     map()函数使代码更容易读取，因为最小值和最大值被写成了更清晰的参数，mouseX的值从0到width(窗口的宽度转变为60~180,案例代码如图26

                                        图26

      运行结果和图25时一样的。

四、作业补充

1、彩虹代码

int radius = 200;
void setup(){
  size(400,400);
}
void draw(){
  background(255);
  noStroke();
  fill(#de4349);
  arc(180,200,radius,radius,radians(180),radians(360));
  fill(#faad51);
  arc(180,200,radius-20,radius-20,radians(180),radians(360));
  fill(#f9ef52);
  arc(180,200,radius-40,radius-40,radians(180),radians(360));
  fill(#91c640);
  arc(180,200,radius-60,radius-60,radians(180),radians(360));
  fill(#62cef4);
  arc(180,200,radius-80,radius-80,radians(180),radians(360));
  fill(#5462ad);
  arc(180,200,radius-100,radius-100,radians(180),radians(360));
  fill(#845fa5);
  arc(180,200,radius-120,radius-120,radians(180),radians(360));
  fill(255);
  arc(180,200,radius-140,radius-140,radians(180),radians(360));
}

      保存运行如图27

                                   图27

五、下期讲平移、旋转、缩放和媒体。