[ 作业讨论 ] DAY3 - rectMode(CENTER) 模式下绘制矩形按钮

[RavenKwok]

来来来,交作业了阿...

 DAY3 的pdf中一开始有补充关于按钮如何用条件句来制作的基本原理分析，矩形按钮的原理参照第6页pdf。而后DAY3 的作业01 就是在矩阵模式为CENTER （还记得DAY1 教的注册点么）的情况下制作一个矩形按钮。大家可以以回帖形式提交作业，我会进行review。

[calvinhuang]

我感觉对于语句结构还是有些无法理解

程序代码

boolean shutter;

void setup() {
  size(500, 500);
  background(255);
  smooth();
  rectMode(CENTER);
}

void draw() {
  if (mouseX > width/2-50 && mouseX < width/2+50 && mouseY > height/2-25 && mouseY < height/2+25) {
    fill(255, 0, 255);
  }
  else {
    fill(255,0,255);
  }
  if (shutter) {
    fill(255, 255, 0);
  }
  rect(width/2, height/2, 100, 50);
}
void mousePressed() {
  if (mouseX > width/2-50 && mouseX < width/2+50 && mouseY > height/2-25 && mouseY < height/2+25) {
    shutter = !shutter;
  }
}

[RavenKwok]

@calvinhuang

效果是对的，不过draw(){}内部的代码有些累赘。

鼠标的范围判断在mousePressed(){}内部已经实现，所以在draw(){}内部只需要判断shutter 为真或假即可。

另外，你的代码若要改变矩形的宽和高就需要重新计算数值，并写到条件中，尝试一下使用DAY2 里教到的变量吧。

[calvinhuang]

draw(){}里面的东西该怎么改，给我说说

[RavenKwok]

  先自己思考一下我说的第二句话吧。

“鼠标的范围判断在mousePressed(){}内部已经实现，所以在draw(){}内部只需要判断shutter 为真或假即可。”

实在想不明白的话，我再来帮你解决。

[calvinhuang]

我思路不清楚 一碰到boolean 就不知道怎么弄了 还是贴下吧

[RavenKwok]

我思路不清楚 一碰到boolean 就不知道怎么弄了 还是贴下吧

 

程序代码

void draw() {
  if (shutter) {
    fill(255, 255, 0);
  }else{
    fill(255, 0, 255);
  }
  rect(width/2, height/2, 100, 50);
}

[钱 卓 韵]

偷偷用我的树交按钮作业

程序代码

int x;
int y;
boolean shutter;

void setup() {
  size(640, 360);
  frameRate(30);
  smooth();
  shutter = false;
}

void draw() {
  background(#AFC14C);
  for (int i = 0; i < 3; i = i+1) {
    x=100+i*100+i*20;
    y=100+i*20;
    float d = dist(0, 180, mouseX, mouseY);
    noStroke();
    if (shutter) {
      fill(#D30D2B);
    }
    else {
      fill(52+d, 103, 31);
    }
    ellipse(x+100, y-5, 90+i*10, 90+i*10);
    stroke(#4D2D05);
    strokeWeight(2);
    line(x+100, y-30, x+100, y+100);
    line(x+90, y-20, x+100, y-10);
    line(x+75, y+5, x+100, y+30);
    line(x+100, y+10, x+115, y-5);
    noStroke();
    fill(#D30D2B);
    rectMode(CENTER);
    rect(100, 270, 40, 20);
  }
}

void mousePressed() {
  if ((mouseX>80)&&(mouseX<120)) {
    if ((mouseY>260)&&(mouseY<280)) {
      shutter = !shutter;
    }
  }
}

[RavenKwok]

@钱 卓 韵

一个if()内的条件可以有多个&&或是||。所以你的mousePressed() 内的判断可以直接写成

if ((mouseX>80)&&(mouseX<120)&&(mouseY>260)&&(mouseY<280)) {}

另外你可以用DAY3 教的内容来自己定义一个drawTree() 的函数。

[kulala]

一个累赘土鳖的写法，先交作业了。回头再改写成函数形式。

程序代码

int p;

void setup(){
  size(500,500,P3D);
  background(0);
  lights();
}

void draw(){
  //draw Button
  fill(150,150,0);
  rect(40,40,50,50);
  fill(0,150,0);
  rect(40,100,50,50);
  fill(150,100,240);
  rect(40,160,50,50);
 
 if(mousePressed == true)
 {
   if(mouseX>40 && mouseX<90){
     if(mouseY>40 && mouseY<90){
     p = 1;
     println(p);
      } else if(mouseY>100 && mouseY<150){
      p = 2;
      println(p);
        }else if(mouseY>160 && mouseY<210){
        p = 3;
        println(p);
              }
           }
       }
 
 if(p==1){
  fill(0);
  rect(150,40,350,350);
  fill(150,150,0);
  pushMatrix();
  translate(250,250,0);
  sphere(100);
  popMatrix();
  }
  
  if(p==2){
  fill(0);
  rect(150,40,350,350);
  fill(0,150,0);
  pushMatrix();
  translate(250,250,0);
  sphere(100);
  popMatrix();
  }
  if(p==3){
   fill(0);
  rect(150,40,350,350);
  fill(150,100,240);
  pushMatrix();
  translate(250,250,0);
  sphere(100);
  popMatrix();
  }
}  

[RavenKwok]

@kulala

发现你sketch 的几个问题。

1 .lights() 函数必须在draw(){} 结构内才能起效。放在setup(){}不会报错，但却是无效的。

2 .在draw(){} 结构内的if(mousePressed){} 与在draw(){} 结构外的void mousePressed(){} 的功能是完全不一样的。

前者作为一个布尔值，而后者作为一个事件。

你可以试试按住鼠标在不同按钮间来回拖拽，球体依然会变色，这和按钮功能不符。

3 .几个if(p ==....){} 结构内重复内容太多，可以把重复内容提到结构之外。

 

[钱 卓 韵]

@钱 卓 韵

一个if()内的条件可以有多个&&或是||。所以你的mousePressed() 内的判断可以直接写成

if ((mouseX>80)&&(mouseX<120)&&(mouseY>260)&&(mouseY<280)) {}

另外你可以用DAY3 教的内容来自己定义一个drawTree() 的函数。

于是乎更新了

程序代码

int x;
int y;
boolean shutter;

void setup() {
  size(640, 360);
  frameRate(30);
  smooth();
  shutter = false;
}

void draw() {
  background(#AFC14C);
  float d = dist(0, 180, mouseX, mouseY);
  noStroke();
  if (shutter) {
    fill(#D30D2B);
  }
  else {
    fill(52+d, 103, 31);
  }
  drawTree(100, 100, 1);
  drawTree(170, 200, 4);
  drawTree(350, 150, 2);
  noStroke();
  fill(#D30D2B);
  rectMode(CENTER);
  rect(610, 340, 40, 20);
}

void drawTree(float x_, float y_, int i) {
  noStroke();
  ellipse(x_+100, y_-5, 90+i*10, 90+i*10);
  stroke(#4D2D05);
  strokeWeight(2);
  line(x_+100, y_-30, x_+100, y_+100);
  line(x_+90, y_-20, x_+100, y_-10);
  line(x_+75, y_+5, x_+100, y_+30);
  line(x_+100, y_+10, x_+115, y_-5);
}

void mousePressed() {
  if ((mouseX>590)&&(mouseX<630)&&(mouseY>330)&&(mouseY<350)) {
    shutter = !shutter;
  }
}

[RavenKwok]

@钱 卓 韵

恩，不错不错，代码现在很干净了。