[ 作业提交 ] P5 Workshop (3rd) @ xinchejian DAY1

[RavenKwok]

请大家以回帖的形式提交第一天的作业，附上代码和显示窗口的效果图。提交的作业我会在下周六前审阅完毕。

Please reply this post and submit your DAY1's homeworks( including code and snapshot of the display window ). I'll review your homeworks before next Saturday. XD

[光羽]

我先来抛砖引玉吧，我是菜鸟我怕谁！水平有限，感觉第二题有点思路，就先做了No.2，不知道是否对头，还请Raven大力指正 。;D

程序代码

float xA,yA,xB,yB;
float radiusA,widthB,heightB;

void setup(){
  size(480,360);
  background(255);
  radiusA = 50;
  xA = 425;
  yA = 310;
  xB = 318;
  yB = 300;
  widthB = 60;
  heightB = 36;
  frameRate(30);
  smooth();
}

void draw(){
  //------------圆形按钮，点击随机切换背景色---------------
  noStroke();
  if(dist(mouseX,mouseY,xA,yA) < radiusA/2){
    fill(#EEFC54); 
    if(mousePressed){
    fill(250,0,250);
    background(random(255),random(255),random(255));
    }
  }else{
    fill(#93843A);
  }
  ellipse(xA,yA,radiusA,radiusA);
  //-------------方形按钮，点击随机出现彩色小圆点-------------
  if(mouseX> xB && mouseX < xB + widthB && mouseY> yB && mouseY < yB + heightB){
    fill(#EEFC54);
    if(mousePressed){
    fill(random(255),random(255),random(255));
    ellipse(random(360),random(480),10,10);
    }
  }else{
  fill(#93843A);
  }
  rect(xB,yB,widthB,heightB);
}

[RavenKwok]

@光羽

思路上没有问题。但是如果我希望鼠标点击作为事件来处理呢，譬如点一下按钮，背景随机颜色一次。而不是我鼠标一旦不松开，就会不停地随机颜色。试着改一下代码吧

[光羽]

@光羽

思路上没有问题。但是如果我希望鼠标点击作为事件来处理呢，譬如点一下按钮，背景随机颜色一次。而不是我鼠标一旦不松开，就会不停地随机颜色。试着改一下代码吧

试着加了一个shutter的布林值来控制，圆形按钮达成目标。但是不知咋回事，方形按钮失效了。Raven帮我看看问题出在哪？

程序代码

float xA,yA,xB,yB;
float radiusA,widthB,heightB;
boolean shutter;

void setup(){
  size(480,360);
  background(255);
  radiusA = 50;
  xA = 425;
  yA = 310;
  xB = 318;
  yB = 300;
  widthB = 60;
  heightB = 36;
  shutter = false;
  frameRate(30);
  smooth();
}

void draw(){
  //------------圆形按钮，点击随机切换背景色---------------
  noStroke();
  if(dist(mouseX,mouseY,xA,yA) < radiusA/2){
    fill(#EEFC54); 
    if(shutter){
    fill(250,0,250);
    background(random(255),random(255),random(255));
    }
  }else{
    shutter = false;
    fill(#93843A);
  }
  ellipse(xA,yA,radiusA,radiusA);
  //-------------方形按钮，点击随机出现彩色小圆点-------------
  if(mouseX> xB && mouseX < xB + widthB && mouseY> yB && mouseY < yB + heightB){
    fill(#EEFC54);
    if(shutter){
    fill(random(255),random(255),random(255));
    ellipse(random(360),random(480),10,10);
    }
  }else{
    shutter = false;
    fill(#93843A);
  }
  rect(xB,yB,widthB,heightB);
}
void mousePressed(){
  shutter = !shutter;
}

[RavenKwok]

@光羽

其实鼠标位置判断的逻辑可以写在事件结构内的。譬如

程序代码

void mousePressed(){
  if(...){
    ......
  }
}

然后可以声明两个布尔值，在draw 结构内做判断并绘制对应的图形。 写写看吧。加油。:)

[KOJYA]

先把二贴了吧，一还在纠结贝兹尔曲线

程序代码

float xA, yA, xB, yB;
float radiusA, widthB, heightB;

void setup() {
  size(500, 500);
  background(255);
  frameRate(30);
  smooth();
  radiusA=40;
  xA=200;
  yA=200;
  xB=300;
  yB=180;
  widthB=100;
  heightB=50;
}
void draw() {
  noStroke();
  //--circle--
  fill(#ACF005);
  ellipse(xA, yA, radiusA*2, radiusA*2);

  //--square--
  rect(xB, yB, widthB, heightB);
}
void mousePressed() { 
  if (dist(mouseX, mouseY, xA, yA)<radiusA) {
    background(random(255), random(255), random(255));
  }
  else if (mouseX>xB && mouseX< xB+widthB && mouseY>yB && mouseY< yB+heightB) {
    fill(255, random(255), random(255));
    ellipse(random(500), random(500), 10, 10);
  }
}

[光羽]

@光羽

其实鼠标位置判断的逻辑可以写在事件结构内的。譬如

程序代码

void mousePressed(){
  if(...){
    ......
  }
}

然后可以声明两个布尔值，在draw 结构内做判断并绘制对应的图形。 写写看吧。加油。:)

玩弄布林值啊

程序代码

float xA,yA,xB,yB;
float radiusA,widthB,heightB;
boolean shutterRound,shutterRect;

void setup(){
  size(480,360);
  background(255);
  radiusA = 50;
  xA = 425;
  yA = 310;
  xB = 318;
  yB = 300;
  widthB = 60;
  heightB = 36;
  shutterRound = false;
  shutterRect = false;
  frameRate(30);
  smooth();
}

void draw(){
  //------------圆形按钮，点击随机切换背景色---------------
  noStroke();
  if(shutterRound){
    fill(250,0,250);
    background(random(255),random(255),random(255));
    shutterRound = false;
  }else{
    fill(#93843A);
  }
  ellipse(xA,yA,radiusA,radiusA);
  //-------------方形按钮，点击随机出现彩色小圆点-------------
  if(shutterRect){
    fill(random(255),random(255),random(255));
    ellipse(random(360),random(480),10,10);
    shutterRect = false;
  }else{
    fill(#93843A);
  }
  rect(xB,yB,widthB,heightB);
}
void mousePressed(){
  if(dist(mouseX,mouseY,xA,yA) < radiusA/2){
      shutterRound = !shutterRound;
  }
  if(mouseX> xB && mouseX < xB + widthB && mouseY> yB && mouseY < yB + heightB){
     shutterRect = !shutterRect;  
  }
}

[RavenKwok]

@KOJYA

小问题。当rect 按钮按下时，如果随机小点在按钮的范围内的话，会先绘制而后被按钮覆盖，也就是会跳一下，或者说闪一下，不知道你有没有注意到。

其实可以在事件里只控制布尔值，而在draw 结构内用布尔值来控制小点的绘制，这样就可以在draw 结构内决定绘制顺序，就不会发生跳的现象。

代码如下：

程序代码

float xA, yA, xB, yB;
float radiusA, widthB, heightB;
boolean shutterB;

void setup() {
  size(500, 500);
  background(255);
  smooth();
  radiusA=40;
  xA=200;
  yA=200;
  xB=300;
  yB=180;
  widthB=100;
  heightB=50;
}
void draw() {
  noStroke();
  //--circle--
  fill(#ACF005);
  if(shutterB){
    fill(255, random(255), random(255));
    ellipse(random(500), random(500), 10, 10);
    shutterB = false;
  }
  fill(#ACF005);
  ellipse(xA, yA, radiusA*2, radiusA*2);

  //--square--
  rect(xB, yB, widthB, heightB);
}
void mousePressed() { 
  if (dist(mouseX, mouseY, xA, yA)<radiusA) {
    background(random(255), random(255), random(255));
  }
  else if (mouseX>xB && mouseX< xB+widthB && mouseY>yB && mouseY< yB+heightB) {
    shutterB = true;
  }
}

[RavenKwok]

@光羽

赞。

[xurenfang]

用很低级的方法画了一，不太像。。。纽扣还懒得做rotate（）了

程序代码

void setup() {
  background(255);
  size(500, 500);
  smooth();
}
void draw() {
  //leg
  noStroke();
  fill(#0C481A);
  rect(150, 350, 208, 50);

  //body
  stroke(#86FFE2);
  strokeWeight(70);
  strokeCap(ROUND);
  line(180, 280, 160, 300);
  stroke(#86FFE2);
  strokeWeight(70);
  strokeCap(ROUND);
  line(320, 280, 340, 300);

  noStroke();
  fill(#86FFE2);
  beginShape();
  vertex(200, 180);
  vertex(150, 350);
  vertex(360, 350);
  vertex(300, 180);
  endShape(CLOSE);
  noStroke();
  fill(#86FFE2);
  ellipse(255, 350, 208, 50);

  //foot
  noStroke();
  fill(#43361C);
  beginShape();
  curveVertex(120, 400);
  curveVertex(320, 400);
  curveVertex(120, 400);
  curveVertex(280, 600);
  endShape(CLOSE);

  noStroke();
  fill(#43361C);
  beginShape();
  curveVertex(130, 400);
  curveVertex(130, 400);
  curveVertex(390, 400);
  curveVertex(350, 600);
  endShape(CLOSE);

  stroke(0);
  strokeWeight(5);
  strokeCap(ROUND);
  line(250, 270, 250, 373);

  stroke(0);
  strokeWeight(0.2);
  fill(#F0D39B);
  ellipse(270, 310, 40, 50);
  stroke(0);
  strokeWeight(0.2);
  fill(#F0D39B);
  ellipse(235, 310, 40, 50);
  stroke(0);
  strokeWeight(1);
  noFill();
  ellipse(272, 295, 20, 20);
  stroke(0);
  strokeWeight(1);
  noFill();
  ellipse(238, 295, 20, 20);

  //face
  noStroke();
  fill(250, 213, 189);
  ellipse(250, 150, 250, 250);

  noStroke();
  fill(#392806);
  ellipse(250, 250, 40, 10);
  stroke(#392806);
  strokeWeight(5);
  strokeCap(ROUND);
  line(232, 252, 268, 252);
  endShape(CLOSE);


  //hair
  noStroke();
  fill(255, 255, 0);
  beginShape();
  vertex(250, 25);
  vertex(150, 10);
  vertex(180, 40);
  vertex(150, 45);
  vertex(100, 100);
  vertex(180, 70);
  vertex(160, 120);
  vertex(200, 100);
  vertex(250, 70);
  vertex(350, 100);
  vertex(300, 50);
  vertex(360, 50);
  vertex(300, 30);
  vertex(320, 5);
  vertex(250, 25);
  endShape(CLOSE);

  //eye
  noStroke();
  fill(255);
  translate(230, 150);
  rotate(PI/3);
  ellipse(0, 0, 60, 70);
  noStroke();
  fill(255);
  translate(30, -60);
  rotate(PI/3);
  ellipse(0, 0, 60, 70);
  noStroke();
  fill(0);
  ellipse(-10, 0, 10, 10);
  noStroke();
  fill(0);
  ellipse(20, 40, 10, 10);
  stroke(0);
  strokeWeight(7);
  strokeCap(SQUARE);
  rotate(PI/3);
  translate(-30, 30);
  line(-10, -10, 30, 30);
  stroke(0);
  strokeWeight(7);
  strokeCap(SQUARE);
  rotate(PI/-2);
  translate(-20, 100);
  line(-10, -10, 30, 30);


  endShape(CLOSE);
}

[Ting]

先发个第一课的练习吧，加了gravity和颜色变化。在顶部卡住的那个bug解决了， 方法是将if()里面的两个条件拆开写。

程序代码

float xPos,yPos;
float diam;
float incrementX;
float incrementY;
float gravity;

void setup(){
  size(500,500);
  colorMode(HSB);
  smooth();
  background(255);
  xPos = width/2;
  yPos = height/2;
  incrementX = 5;
  incrementY = 4;
  diam = 100;
}
  
void draw(){
  
  fill(255,15);
  rect(0,0,width,height);
  
  
  fill(color(360*(yPos/height),255,200));
  
  
  noStroke();
  ellipse(xPos,yPos,diam,diam);
  


  // when hits bounds x
  if(xPos < diam/2 ){

    incrementX=5;
 
  }else if(xPos > width-diam/2){
  
    incrementX=-5;
  }
  
  // when hits bounds y
  if(yPos < diam/2 ){

      incrementY=4;

      
 
  }else if(yPos > height-diam/2){
  
      incrementY=-4;
      
  }
  
  
    gravity = yPos/height*5;    
    xPos += incrementX;
    yPos += incrementY*gravity;
    
}

[Ting]

作业二

程序代码

float x1, x2, y1, y2;
float button1Radius=100;
float button2Width=200;
float button2Height=200;

void setup() {

  size(500, 500);
  background(255);
  smooth();
  noStroke();
  x1 = width/4;
  x2 = width/1.4;
  y1 = y2 = height/2;
  
}


void draw() {

  fill(200, 100, 200);
  ellipse(width/4, height/2, button1Radius*2, button1Radius*2);


  fill(200, 200, 100);
  rectMode(CENTER);
  rect(width/1.4, height/2, button2Width, button2Height);
}


void mousePressed(){

  if(dist(mouseX,mouseY,x1,y1)<button1Radius){
  
    fill(200, 100, 200);
    ellipse(random(500),random(500),20,20);
     

  }else if (mouseX>x2-button2Width/2 && mouseX< x2+button2Width/2 && mouseY>y2-button2Height/2 && mouseY< y2+button2Height/2) {

    fill(200, 200, 100);
    rect(random(500),random(500),20,20);
    
  }else{
  
    background(255);
    
  }
  
  
}

[RavenKwok]

@Ting

效果很漂亮。我小改了一下，可能运动更自然些。

程序代码

float xPos, yPos;
float diam;
float incrementX;
float incrementY;
float gravity;

void setup() {
  size(500, 500);
  colorMode(HSB);
  smooth();
  background(255);
  xPos = width/2;
  yPos = 0;
  incrementX = 5;
  incrementY = 0;
  diam = 100;
  gravity = 0.1;
}

void draw() {
  fill(255, 15);
  rect(0, 0, width, height);
  fill(color(360*(yPos/height), 255, 200));
  noStroke();
  ellipse(xPos, yPos, diam, diam);

  // when hits bounds x
  if (xPos < diam/2 ) {
    xPos = diam/2;
    incrementX *= -0.8;
  }
  else if (xPos > width-diam/2) {
    xPos = width-diam/2;
    incrementX *= -0.8;
  }

  // when hits bounds y
  if (yPos > height-diam/2) {
    yPos = height-diam/2;
    incrementY *= -0.8;
  }
  incrementY += gravity;
  xPos += incrementX;
  yPos += incrementY;
}

[RavenKwok]

@Ting

作业二参见#7楼 我回复@KOJYA 的那个帖子，问题比较类似。

[RavenKwok]

@xurenfang

Nice work.

Tips，形变矩阵其实也可以用pushMatrix() 和popMatrix() 来出栈入栈（你可以先理解为存储或是读取坐标系位置）。

http://processing.org/reference/pushMatrix_.html

http://processing.org/reference/popMatrix_.html

另外，脚其实可以用arc() 函数来绘制，会更方便些，具体用法参见：

http://processing.org/reference/arc_.html