[ 作业提交 ] P5 Workshop (2nd) @ xinchejian DAY1

[RavenKwok]

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

[RavenKwok]

先虐自个儿。

[yuanyuan]

有关贝塞尔曲线这个还是不懂，控制点坐标是怎么来确定的？

[RavenKwok]

@yuanyuan

曲线会与，控制点和绘制点所在的直线，相切。详细的算法和见此链接。

http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

不过这个例子你们完全无需用Bézier 曲线的，用Catmull-Rom 曲线足矣（也就是curve() 或是curveVertex()）。

[唐勒个唐勒个唐]

点开网页一看将军你换头像了呀
这一周忙死了…………
可是再不交作业就要开课了……先交躲避球的……不过这个不用上什么截图吧……
Kyle Broflovski那张我在思考一下怎么限制眼珠在眼眶里动……下午再交吧…………

程序代码

float xPos,yPos,d,r;

void setup(){
  size(500,500);
  smooth();
  xPos=width/2 ;
  yPos=height/2;
  r=50;
}

void draw(){
  background(255);
  fill(0);
  noStroke();
  ellipse(xPos,yPos,r,r);
}

void mouseMoved(){
  d=dist(xPos,yPos,mouseX,mouseY);
  if(d<=r){
    xPos+=random(-80,80);
    yPos+=random(-80,80);
  }
}

 

[RavenKwok]

@唐勒个唐勒个唐

几个问题。

1，运动会超出场景的范围之外。
2，你把躲避的逻辑写到了mouseMoved 的事件结构中，也就是说当鼠标不移动时，逻辑是不会执行的。
3，random() 中的参数太大，运动感觉不连贯。

你可以查一下Reference 中lerp() 函数的用法，用它可以改善你的运动连贯性 : )

[yuanyuan]

。。。。弄了好久只做了南方公园的那个图，先发个残缺的上来看看把。

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

//maozishang
fill(11,173,9);
//kuzi
noStroke();
fill(1,98,86);
rect(170,650,250,50);
//yifu
fill(240,89,39);
beginShape();
curveVertex(180,500);
curveVertex(400,500);
curveVertex(450,650);
curveVertex(440,650);
curveVertex(380,660);
curveVertex(320,670);//zuixia
curveVertex(300,670);
curveVertex(270,670);
curveVertex(220,660);
curveVertex(130,660);
curveVertex(150,650);
curveVertex(140,600);
curveVertex(140,580);
curveVertex(150,540);
curveVertex(160,510);
curveVertex(220,500);
curveVertex(230,500);
endShape(CLOSE);
//yiling
fill(11,173,9);
strokeWeight(1);
arc(300,400,276,318,radians(30),radians(90));
//lian
fill(252,232,178);
noStroke();
ellipse(286,400,300,300);
//maozidi
noFill();
stroke(11,173,9);
strokeWeight(20);
strokeJoin(BEVEL);
//maozi
fill(11,173,9);
ellipse(130,330,50,160);//left
ellipse(450,330,50,160);//right
//maozizhong
fill(10,98,27);
beginShape();
vertex(150,220);
vertex(430,220);
vertex(430,360);
curveVertex(430,360);
curveVertex(440,360);
curveVertex(350,340);
curveVertex(250,340);
curveVertex(150,360);
curveVertex(150,220);
vertex(150,220);
endShape();
//meimao
stroke(0);
strokeWeight(4);
line(210,350,250,320);//left
line(360,350,320,320);//right
//yanjing
noStroke();
fill(255);
ellipse(250,390,70,75);
ellipse(320,390,70,75);
//yanqiu
fill(0);
ellipse(270,390,12,12);
ellipse(300,390,12,12);
//zui
triangle(240,460,330,460,285,500);
//yachi
fill(255);
quad(250,463,260,463,260,473,255,473);
quad(261,463,280,462,280,474,263,474);
quad(283,463,300,463,298,475,283,475);
quad(303,462,325,462,310,475,300,475);

//jiao
fill(0);
ellipse(215,700,163,12);
ellipse(370,700,163,12);
//shou
fill(11,173,9);
ellipse(135,630,60,60);
ellipse(450,630,60,60);
stroke(0);
strokeWeight(1);
ellipse(160,620,20,20);
ellipse(425,620,20,20);
//koudai
noFill();
strokeWeight(3);
rect(210,580,40,50);
rect(330,580,40,50);
triangle(210,580,250,580,230,605);
triangle(330,580,370,580,350,605);

line(300,560,300,670);

[yuanyuan]

帽子的两个椭圆不知道怎么改变方向，还有领子部分的弧形。。。

[RavenKwok]

@yuanyuan

恩，很不错阿。

领子上的弧形可以用curve() 来绘制，椭圆方向的话涉及到一些transformation matrix 的内容，我明天上课会讲。不过你也可以先查阅一下官方reference，了解一下相关概念。

pushMatrix();
translate();
rotate();
popMatrix();

可以查阅以上这几条命令 : )

[唐勒个唐勒个唐]

先交这样吧……两个按钮换衣服颜色……

程序代码

Kyle hiKyle;

void setup() {
  size(600, 600);
  smooth();
  hiKyle=new Kyle(color(#F25711));
}

void draw(){
  background(255);
  hiKyle.display();
  hiKyle.changecolor();
}

class Kyle{
  color c;
  float d;
  float r;
  int x;
  int y;

Kyle(color c){
  c=color(#F25711);
  r=25;
  x=0;
  y=0;
}

void display() {
  //legs
  noStroke();
  fill(#106B65);
  rect(170, 500, 260, 75);
  //shoes
  fill(#36333B);
  stroke(#36333B);
  strokeWeight(9);
  strokeJoin(ROUND);
  triangle(150, 580, 300, 570, 450, 580);
  //cloth shadow
  noFill();
  stroke(#5F3C1C);
  strokeCap(SQUARE);
  beginShape();
  curveVertex(172,524);
  curveVertex(172,524);
  curveVertex(245,541);
  curveVertex(355,541);
  curveVertex(428,524);
  curveVertex(428,524);
  endShape();
  //body
  noStroke();
  fill(c);
  arc(300, 500, 340, 400, PI, TWO_PI);
  arc(300, 500, 320, 90, 0, PI);
  //arms
  stroke(0);
  strokeWeight(2);
  beginShape();
  curveVertex(180,435);
  curveVertex(180,435);
  curveVertex(176,445);
  curveVertex(170,465);
  curveVertex(170,460);
  endShape();
  beginShape();
  curveVertex(420,435);
  curveVertex(420,435);
  curveVertex(424,445);
  curveVertex(430,465);
  curveVertex(430,460);
  endShape();
  //glove
  fill(#43B135);
  noStroke();
  ellipse(140, 480, 60, 60);
  ellipse(460, 480, 60, 60);
  stroke(0);
  strokeWeight(1);
  ellipse(160, 470, 23, 23);
  ellipse(440, 470, 23, 23);
  //pokets
  strokeWeight(3);
  line(300, 350, 300, 547);
  noFill();
  strokeWeight(2);
  rect(220, 430, 40, 55);
  rect(340, 430, 40, 55);
  triangle(220, 430, 260, 430, 240, 455);
  triangle(340, 430, 380, 430, 360, 455);
  //collar
  stroke(0);
  strokeWeight(1);
  fill(#02A441);
  pushMatrix();
  translate(236, 388);
  rotate(radians(25));
  ellipse(0, 0, 140, 40);
  popMatrix();
  pushMatrix();
  translate(364, 388);
  rotate(radians(155));
  ellipse(0, 0, 140, 40);
  popMatrix();
  //face
  noStroke();
  fill(#FFEABD);
  ellipse(300, 230, 360, 360);
  //hat
  stroke(#43B135);
  strokeWeight(40);
  strokeJoin(ROUND);
  fill(#43B135);
  rect(140, 30, 320, 110);
  noStroke();
  pushMatrix();
  noStroke();
  fill(#43B135);
  translate(109, 225);
  rotate(radians(110));
  ellipse(0, 0, 180, 75);
  popMatrix();
  pushMatrix();
  noStroke();
  fill(#43B135);
  translate(491, 225);
  rotate(radians(70));
  ellipse(0, 0, 180, 75);
  popMatrix();
  fill(#02A441);
  rect(140, 80, 320, 80);
  stroke(#02A441);
  strokeWeight(20);
  strokeCap(SQUARE);
  noFill();
  beginShape();
  curveVertex(141,170);
  curveVertex(141,170);
  curveVertex(300,150);
  curveVertex(459,170);
  curveVertex(459,170);
  endShape();
  stroke(#208D2E);
  strokeWeight(3);
  line(140, 80, 460, 80);
  //eyebrow
  stroke(0);
  strokeWeight(8);
  strokeCap(SQUARE);
  line(190, 180, 240, 150);
  line(410, 180, 360, 150);
  //eye shadow
  pushMatrix();
  noStroke();
  fill(0, 30);
  translate(251, 223);
  rotate(radians(135));
  ellipse(0, 0, 110, 90);
  popMatrix();
  pushMatrix();
  noStroke();
  fill(0, 30);
  translate(349, 223);
  rotate(radians(45));
  ellipse(0, 0, 110, 90);
  popMatrix();
  //eye
  pushMatrix();
  noStroke();
  fill(255);
  translate(250, 225);
  rotate(radians(135));
  ellipse(0, 0, 110, 90);
  popMatrix();
  pushMatrix();
  noStroke();
  fill(255);
  translate(350, 225);
  rotate(radians(45));
  ellipse(0, 0, 110, 90);
  popMatrix();
  //eyeball 
  fill(0);
  noStroke();
  ellipse(270,230,10,10);
  ellipse(330,230,10,10);
  //mouth
  fill(0);
  stroke(0);
  strokeWeight(3);
  strokeJoin(ROUND);
  triangle(250, 330, 350, 330, 300, 370);
  //tooth
  fill(255);
  stroke(255);
  strokeWeight(2);
  strokeJoin(ROUND);
  beginShape();
  vertex(261,331);
  vertex(267,341);
  vertex(277,341);
  vertex(280,331);
  endShape();
  beginShape();
  vertex(284,331);
  vertex(283,341);
  vertex(302,340);
  vertex(301,330);
  endShape();
  beginShape();
  vertex(306,331);
  vertex(307,341);
  vertex(320,341);
  vertex(323,330);
  endShape();
  beginShape();
  vertex(328,331);
  vertex(325,340);
  vertex(327,341);
  vertex(332,340);
  vertex(345,330);
  endShape();
  //button
  noStroke();
  fill(#27FFD5);
  ellipse(550,50,r,r);
  fill(#FF5895);
  rect(540,100,r,r);
}

void changecolor(){
  d=dist(550,50,mouseX,mouseY);
  if(d<r){
    c=color(#27FFD5);
  }else if (mouseX>=540&&mouseX<=590&&mouseY>=100&&mouseY<=150) {
    c=color(#FF5895);
  }else{
    c=color(#F25711);
  }
}
}

[RavenKwok]

@唐勒个唐勒个唐

哈哈，很不错阿。代码都是OOP 的结构了。

但是问题在于你只是把绘制代码全部写入Kyle 类中了，但并没有真正理解为何要这么做。以你现在建的类，无论我新建多少的Kyle 实例，他们都没有任何区别，我无法对每个实例分别指定属性。绘制函数里的数值全是固定的绝对位置，也就是说失去了OOP 的意义。

你可以试着重建一下Kyle 类，可以定制每个对象的位置和大小。譬如每个Kyle 对象本身具有一个原点位置，绘制函数里的参数都是相对与这个原点位置的数值，用户可以直接把原点位置写入display() 函数来改变这个Kyle 对象的位置。

另一个问题，现在你的构造函数Kyle() 里的颜色参数其实应该是类的内部逻辑，你觉得呢？