Processing 教程(2) - 鼠标、键盘事件、条件选择、屏幕宽高

  本次内容开始之前，回答之前的一个问题：如何设置屏幕刷新率？

  看到下面代码就明了了。

实例1：

int wh;


void setup()
{   
  size(640,220); 
  background(0);
  frameRate(30); // 设置屏幕刷新率；
}


void draw()
{
  fill(0);
  //stroke(255);
  float spn = dist(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(20/sqrt(spn));
  line(pmouseX,pmouseY,mouseX,mouseY);
}


void mousePressed() //鼠标点击，改变线条颜色；
{
  stroke(int(random(0,255)),
          int(random(0,255)),
          int(random(0,255)));
}

执行结果：

增加键盘事件：如果键盘点击，则保存当前图片。

void keyPressed()
{
    saveFrame("C:\\out.png");
}

那么问题来了，如果保存多张图片， 怎样让保存名称自动改变呢？这应该设计 格式化字符串的问题。

通常有两种命名方式：1.序号增加；2.根据保存的时间命名；

这个问题，现在还不会回答，查找浪费时间，先保留，以后遇到再记录吧！

实例2：鼠标拖动，画图

void setup()
{   
  size(640,220); 
  background(0);
  frameRate(60);
  fill(0);
  stroke(199);
}

void draw()
{   }

void mouseDragged()
{
    line(pmouseX,pmouseY,mouseX,mouseY);
}

直接运行即可。

实例2：代码片段：

void draw()
{   
  if(!mousePressed)
  {
    x = 0;
  }
  if(mousePressed)
  {
    ellipse(mouseX,mouseY,x,x);
    x += 1;
  }  
}

如果鼠标松开，圆半径归零；

如果鼠标按下，画圆，半径增加；

实例3：代码片段：条件语句，点击鼠标，屏幕黑白切换；

boolean black = true;

void draw()
{   
  if(black)
      background(0);
  else
      background(255);
}

void mouseClicked()
{
    black = !black;
}

实例4：键盘输入，改变屏幕颜色

void setup()
{   
  size(640,220); 
  background(0);
  frameRate(60);
  fill(0);
  stroke(199);
}

void draw()
{     
}

void keyPressed()
{
    if(key == 'b')
        background(0,0,255);
    if(key == 'r')
        background(255,0,0);
    if(key == 'g')
        background(0,255,0);
    else
        background(
                    int(random(0,255)),
                    int(random(0,255)),
                    int(random(0,255))
                    );
}

实例5：点击不同区域，产生一个颜色矩形；

void setup()
{   
  size(640,220); 
  background(0);
  frameRate(60);
  fill(0);
  stroke(255,255,0);
  strokeWeight(0);
}

void draw()
{       
}

void keyPressed()
{
  fill(255);
  rect(0,0,width,height);
}

void mouseClicked()
{
    if(mouseX < width/4)
  {
      fill(255,0,0);
      rect(0*width/4+1, 1, width/4 - 2, height-2);
  }
    
  else if(mouseX < 2 * width/4)
  {
      fill(0,255,0);
      rect(1*width/4+1, 1, width/4 - 2, height-2);
  }
    
  else if(mouseX < 3 * width/4)
  {
      fill(0,0,255);
      rect(2*width/4+1, 1, width/4 - 2, height-2);
  }    
    
  else
  {
      fill(0,255,255);
      rect(3*width/4+1, 1, width/4 - 2, height-2);
  }
}

执行结果：

说明：

width 和 height 是语法中的关键字，表示屏幕的宽和高。