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

[Ting]

@Ting

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

为神马我用boolean怎么改都不成功？。下面用的是用另个简单的方法。。

程序代码

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

void setup() {

  size(500, 500);
  background(255);
  smooth();
  noStroke();
  x1 = width/4;
  x2 = width/1.4;
  y1 = y2 = height/2;
  
  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 draw() {

}


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

[Ting]

作业三： 

程序代码

float ballX,ballY;
float toX,toY;
float ballRadius=70;


void setup() {

  size(500, 500);
  background(255);
  smooth();
  noStroke();

  fill(0);
  
  ballX = width/2;
  ballY = height/2;


  
}


void draw() {

  background(255);

  ellipse(ballX-toX, ballY-toY, ballRadius*2, ballRadius*2);
  toX*=0.9;
  toY*=0.9;
}


void mouseMoved(){

  if(dist(mouseX,mouseY,ballX,ballY)<ballRadius){
  
    float oldX =ballX;
    float oldY =ballY;
    
     ballX = random(ballRadius,width-ballRadius);
     ballY = random(ballRadius,height-ballRadius);
     
     toX = ballX-oldX;
     toY = ballY-oldY;

  }
  
  
}

[Simmel]

今天做作业啦～先一个一个提交。
这个图画死我了。。。。。。。。。。。
大概还没熟练掌握吧。。。。。。。。。。。

程序代码

void setup(){
  size(600,600);
  background(255);
  smooth();
}

void draw(){
  translate(0,60);
  fill(#0B5D3B);
  rect(200,420,230,80);
 //---------------------shoes---------------- 
  fill(0);
  beginShape();
   vertex(185,505);
   bezierVertex(200,480,300,480,310,490);
   bezierVertex(320,480,430,480,453,505);
   endShape(CLOSE);
 //--------------------clothes---------------

strokeWeight(0.5);
fill(#75C1A6);
translate(-20,30);
rotate(-PI/60);
beginShape();
vertex(180,425);
bezierVertex(175,440,473,440,453,425);
bezierVertex(453,423,453,390,450,390);
bezierVertex(470,370,480,350,430,280);
bezierVertex(410,255,315,260,310,260);
bezierVertex(305,260,210,255,190,280);
bezierVertex(310-170,350,310-160,370,180,390);
bezierVertex(178,400,178,420,180,425);
endShape();

noFill();
stroke(0);
strokeWeight(3);
line(310,260,310,430);

//------------------ hands-------------------
translate(0,20);
strokeWeight(0.5);
fill(#FFE6BF);
ellipse(290,370,50,50);
ellipse(330,360,50,50);
strokeWeight(1);
ellipse(285,355,20,20);
ellipse(335,345,20,20);
 //--------------------head------------------

ellipse(310,170,300,300); 
//--------------------hair-------------
fill( #FFFB6F);
strokeWeight(0.5);
beginShape();
vertex(310,50);
vertex(420,95);
vertex(350,35);
vertex(430,37);
vertex(350,10);
vertex(345,10);
vertex(370,-15);
vertex(285,15);
bezierVertex(270,0,220,5,200,0);
bezierVertex(200,0,220,5,245,30);
vertex(220,40);
vertex(160,90);
vertex(240,70);
vertex(223,120);
endShape(CLOSE);
//----------------------eyes-------

fill(0);
beginShape();
vertex(290,280);
vertex(340,280);
bezierVertex(328,263,300,263,290,280);
endShape();

translate(260,-50);
rotate(PI/7);
fill(255);
strokeWeight(0.5);
ellipse(100,200,90,105);
fill(0);
ellipse(108,170,10,10);
fill(0);
rect(30,150,4,50);
strokeWeight(5);
//line(35,150,25,200);
line(155,80,208,82);

rotate(PI/7);
translate(47,-97);
strokeWeight(0.5);
fill(255);
ellipse(180,150,110,90);

translate(60,-50);
fill(0);
ellipse(108,170,10,10);    
}

[Simmel]

图片怎么显示不出来呢。。传个附件再。。。

[Simmel]

还有那个变背景的圆，效果很简单。。。。

程序代码

boolean shutter;

void setup(){
  size(500,500);
  frameRate(30);
  smooth();
  shutter = true;
}
void draw(){
  fill(0);
  noStroke();
  if(shutter){
  background(255); 
  }else{
   background(0,0,255);
  }
  ellipse(width/2,height/2,200,200);
}
void mousePressed(){
 if(dist(mouseX,mouseY,width/2,height/2)< 100){
  shutter = !shutter;}
}

[Simmel]

方形画点的那个

程序代码

float xPos;
float yPos;

void setup(){
  size(500,500);
  background(#FA4C63);
  smooth();
}

void draw(){
  noStroke();
  fill(0);
 rect(220,200,50,50);
}

void mousePressed(){
  if(200<mouseX && mouseX<200+50 && 200<mouseY && mouseY<200+50) {
   fill(random(255),random(255),random(255),random(100,255)); 
   ellipse(xPos,yPos,10,10);
    xPos=random(20,500-20);
    yPos=random(20,500-20);
  }
}

[孟艺洋]

想做个两个结合的，但发现不行，求指点啊！！

程序代码

float xA,yA,xB,yB;
float radiusA,widthB,heightB;
float incrementX,incrementY;
boolean shutterX;

void setup(){
  smooth();
  size(500,500);
  background(255);
  xA = width/2;
  yA = height/2;
  xB = 160;
  yB = 250;
  radiusA = 100;
  widthB = 160;
  heightB = 136;
  incrementX = 3;
  incrementY = 4;
  shutterX = false;
  frameRate(30);

}

void draw(){
  noStroke();
  if(shutterX){
    fill(random(255),random(255),random(255));
    ellipse(random(500),random(500),10,10);
    shutterX = false;
      
  }
  fill(40,30,160);
  ellipse(xA,yA,radiusA,radiusA);
  xA += incrementX;
  yA += incrementY;
   if(xA<radiusA/2 || xA>width-radiusA/2){
    incrementX=-incrementX;
  }
    if(yA<radiusA/2 || yA>width-radiusA/2){
    incrementY=-incrementY;
    }
  rect(xB,yB,widthB,heightB);

}

void mousePressed(){
  if (dist(mouseX, mouseY,xA, yA)<radiusA){
    fill(random(255),random(255),random(255));
    background(random(255),random(255),random(255));

  }
  else if (mouseX>xB && mouseX < xB+widthB && mouseY>yB && mouseY< yB+heightB){
    shutterX = true;
  }
}

[KOJYA]

交小人，bezierVertex()刚用时没理解，代码多了

程序代码

void setup() {
  size(300, 456);
  smooth();
  background(255);
}

void draw() { 
  //--kuzi--
  noStroke();
  fill(#255d42);
  rect(78, 385, 198, 62); 

  //--shoe--
  fill(0);
  beginShape();
  vertex(60, 450);
  bezierVertex(88, 439, 147, 438, 171, 443);
  bezierVertex(196, 440, 273, 443, 289, 450);
  endShape();
  //--clothes--
  fill(#1fdaaa);
  beginShape();
  vertex(63, 412);
  bezierVertex(117, 436, 248, 408, 288, 395);
  vertex(278, 364);
  bezierVertex(280, 364, 277, 360, 280, 357);
  bezierVertex(284, 351, 287, 342, 281, 324);
  bezierVertex(273, 306, 251, 279, 200, 230);
  vertex(67, 298);
  bezierVertex(48, 310, 34, 377, 63, 382);
  endShape();
  fill(0);
  beginShape();
  vertex(168, 405);
  vertex(166, 322);
  vertex(169, 315);
  bezierVertex(171, 417, 169, 411, 168, 405);
  endShape();

  fill(#fddab4);
  ellipse(150, 363, 45, 45);
  ellipse(186, 357, 45, 45);
  stroke(0);
  strokeWeight(0.5);
  stroke(126);
  arc(186, 357, 45, 45, radians(135), radians(235));
  ellipseMode(CORNER);
  strokeWeight(1);
  ellipse(132, 341, 20, 20);
  ellipse(177, 332, 20, 20);
  ellipseMode(CENTER);
  //--head--
  noStroke();
  fill(#fddab4);
  ellipse(150, 185, 280, 280);
  //--眉毛--
  translate(0, 20);
  strokeWeight(6.0);
  stroke(0);
  strokeCap(SQUARE);
  line(60, 162, 90, 120);
  line(190, 102, 231, 130);

  //--Leye--
  noStroke();
  fill(255);
  translate(115, 180);
  rotate(PI/9);
  ellipse(0, 0, 73, 90);



  //--Reye--
  rotate(-PI/9);
  translate(76, -10);
  rotate(-PI/4.5);
  ellipse(0, 0, 73, 90);

  //--yanzhu--
  fill(0);
  ellipse(20, 0, 10, 10);
  ellipse(-45, -40, 10, 10);

  rotate(PI/4.5);
  translate(-191, -190);

  //--hair--
  fill(#FFF524);
  beginShape();
  vertex(40, 25);
  bezierVertex(61, 28, 63, 28, 93, 33);
  vertex(117, 41);
  bezierVertex(150, 27, 164, 19, 188, 4);
  bezierVertex(188, 4, 175, 16, 165, 32);
  bezierVertex(165, 42, 165, 22, 264, 70);
  bezierVertex(264, 70, 216, 77, 204, 76);
  bezierVertex(204, 76, 204, 85, 242, 118);
  bezierVertex(242, 118, 186, 92, 138, 75);
  bezierVertex(138, 75, 101, 106, 61, 146);
  bezierVertex(61, 146, 63, 126, 75, 84);
  bezierVertex(75, 84, 41, 100, 4, 110);
  bezierVertex(4, 110, 28, 91, 51, 61);
  vertex(75, 50);
  bezierVertex(75, 40, 61, 37, 40, 25);
  endShape(0);
  stroke(0);
  strokeWeight(1);
  translate(-2, 0);
  bezier(152, 178, 153, 183, 152, 187, 156, 196);

  //--mouth--
  fill(#2b242b);
  beginShape();
  vertex(149, 287);
  bezierVertex(168, 285, 188, 285, 191, 281);
  bezierVertex(191, 275, 167, 268, 150, 278);
  bezierVertex(146, 280, 145, 284, 149, 287);
  endShape();
}

[RavenKwok]

@Ting

关于作业二，你这样写也可以拉。不过你可以把你说的boolean 值执行有问题的代码贴出来，我可以帮着瞧瞧。

关于作业三，你写的那个缓冲运动其实可以简化，Processing 自带有插值算法，命令是lerp()。具体用法如下：

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

[RavenKwok]

@Simmel

作业一很好阿，不过为啥所有的边线都有保留捏。

作业二两个也可以。但其实你们可以做一些点击按钮后的其他效果拉，没必要限制在变背景或是绘制小点上。

[RavenKwok]

@孟艺洋

你希望得到什么效果呢？ 去掉圆形按钮的运动轨迹？

[RavenKwok]

@KOJYA

效果怒赞。

另外你每次貌似是通过反向translate() 或是rotate() 来使形变矩阵回归原来的位置，其实是有其他更简单的方法的。参见#14楼我回复@xurenfang 的内容。

[tanttant]

我才是真菜鸟！都对眼了。。。再弄就直接白眼了。。。

程序代码

size(600,800);
background(255);
smooth();



//leg
fill(40,90,65);
rect(220,550,180,100);

//body
fill(100,200,172);
noStroke();
beginShape();
curveVertex(230,450);
curveVertex(230,450);
curveVertex(180,550);
curveVertex(220,570);
curveVertex(240,450);
curveVertex(240,450);
endShape();

beginShape();
curveVertex(390,450);
curveVertex(390,450);
curveVertex(400,570);
curveVertex(440,550);
curveVertex(400,450);
curveVertex(400,450);
endShape();

line(240,450,220,430);
line(200,620,220,600);
bezier(240,450,220,430,200,620,220,600);

line(220,600,200,620);
line(420,620,400,600);
bezier(220,600,200,620,420,620,400,600);

line(380,450,400,430);
line(420,620,400,600);
bezier(380,450,400,430,420,620,400,600);

quad(220,450,390,450,400,600,220,600);

stroke(0);
strokeWeight(3);
line(300,450,300,617);

//face
fill(250,215,177);
noStroke();
ellipse(300,350,300,300);

//hair
fill(245,245,60);
noStroke();
beginShape();
vertex(290,220);
vertex(400,265);
vertex(330,205);
vertex(410,207);
vertex(330,190);
vertex(325,190);
vertex(350,145);
vertex(265,185);

vertex(150,170);
vertex(220,200);

vertex(200,210);
vertex(140,260);
vertex(220,240);
vertex(223,290);
endShape(CLOSE);

//eye
pushMatrix();
translate(260,350);
rotate(radians(20));
fill(255);
ellipse(0,0,75,95);
popMatrix();

pushMatrix();
translate(340,340);
rotate(radians(-30));
fill(255);
ellipse(0,0,75,95);
popMatrix();

fill(0);
ellipse(280,330,10,10);
ellipse(360,320,10,10);

//hand
fill(250,215,177);
stroke(200);
strokeWeight(1);
ellipse(280,550,50,50);
ellipse(320,545,50,50);
stroke(0);
ellipse(275,536,20,20);
ellipse(325,530,20,20);

//foot
fill(50,40,45);
arc(260,650,100,20,PI,TWO_PI);
arc(360,650,100,20,PI,TWO_PI);

//eyebrow
stroke(0);
strokeWeight(6);
strokeCap(SQUARE);
line(200,320,240,280);
line(350,270,400,290);

//mouth
fill(0);
beginShape();
curveVertex(280,470);
curveVertex(290,465);
curveVertex(310,475);
curveVertex(330,465);
curveVertex(340,470);
endShape();

[RavenKwok]

@tanttant

很赞阿。嘴有些小奇怪。可能沿用了上面 strokeWeight(6); 来绘制的关系。

[IHan]

先交Butter...：

程序代码

void setup(){
size(500,500);
background(#ffffff);
smooth();
}

void draw(){

  
//pants
  fill(#2B5841);
  noStroke();
  rect(170,410,200,60);
  
//Shoes
  noStroke();
  fill(#000000);
  beginShape();
  curveVertex(135,478);
  curveVertex(151,471);
  curveVertex(215,460);
  curveVertex(277,471);
  
//Shoes left
  noStroke();
  fill(#000000);
  beginShape();
  curveVertex(135,478);
  curveVertex(151,471);
  curveVertex(190,461);
  curveVertex(241,460);
  curveVertex(277,471);
  curveVertex(313,490);
  endShape();
  
//Shoes right
  noStroke();
  fill(#000000);
  beginShape();
  curveVertex(235,478);
  curveVertex(251,471);
  curveVertex(290,461);
  curveVertex(341,460);
  curveVertex(377,471);
  curveVertex(413,490);
  endShape();
  
//torso
  fill(#6ECCB2);
  noStroke();
  beginShape();
  vertex(165,318);
  bezierVertex(158,325,149,353,147.5,356.5);
  bezierVertex(146,360,139,380.5,141.5,387);
  bezierVertex(143.5,393.5,155,402,161,404);
  bezierVertex(161,404,160.5,433,161.5,435);
  bezierVertex(161.5,435,218,442,234.5,442);
  bezierVertex(250,442,338,438,381,416);
  vertex(375,383);
  bezierVertex(375,383,386,375,386,368);
  bezierVertex(386,361,383,354,381,348);
  bezierVertex(378,342,361,310,352,305);
  endShape();
  
//shirt line
  stroke(#000000);
  strokeWeight(4);
  noFill();
  beginShape();
  vertex(267,325);
  bezierVertex(267,357,265,417,267,441);
  endShape();
  
//head base
  fill(#f9d7b6);
  noStroke();
  ellipse(250,200,280,275);

//left eye brow
  stroke(#000000);
  strokeWeight(5.5);
  strokeCap(SQUARE);
  line(160,200,190,160);

//right eye brow
  stroke(#000000);
  strokeWeight(5.5);
   strokeCap(SQUARE);
  line(300,150,340,175);

//left eye ball
  fill(#ffffff);
  noStroke();
  pushMatrix();       //translate starts
  translate(220, 220);
  rotate(degrees(30));
  ellipse(0,0,75,90);

//left pupil
  fill(#000000);
  noStroke();
  ellipse(-10,25,10,10);           
  popMatrix();        //translate ends

//Right eye ball
  fill(#ffffff);
  noStroke();
  pushMatrix();       //translate starts
  translate(295, 210);
  rotate(degrees(-30));
  ellipse(0,0,75,90);

//right pupil
  fill(#000000);
  noStroke();
  ellipse(-20,10,10,10);
  popMatrix();         //translate ends
  
//mouth
  noStroke();
  beginShape();
  vertex(270,295);
  bezierVertex(260,296,243,303,244,306);
  bezierVertex(245,310,252,310,252,310);
  vertex(282,310);
  bezierVertex(289,310,291,307,291,304);
  bezierVertex(290,299,275,296,270,295);
  endShape();

//hair
  fill(#F9F93F);
  noStroke();
  beginShape();
  vertex(219,65);
  bezierVertex(213,61,165,46,139,48);
  bezierVertex(139,48,173,66,173,73);
  bezierVertex(155,79,129,115,104,135);
  bezierVertex(104,135,160,120,170,110);
  bezierVertex(173,115,156,147,161,165);
  vertex(236,95);
  bezierVertex(236,95,326,126,354,151);
  bezierVertex(354,151,284,80,290,80);
  bezierVertex(298,80,335,80,340,80);
  bezierVertex(350,83,280,50,267,53);
  vertex(290,26);
  bezierVertex(290,26,236,48,219,65);
  endShape();
  
// hands
  fill(#F8D7B0);
  noStroke();
  ellipse(252,385,50,60); //left
  ellipse(286,380,50,60); //right
  stroke(#000000);
  strokeWeight(1);
  ellipse(243,370,20,20); //left
  ellipse(290,365,20,20); //left
}