Processing自画像

总体概览

1.设计理念

2.设计步骤

3.设计效果展示

一、设计理念

我对于自画像的理解，不只停留在当前画像上的理解。人的一生经历过很多很多特殊的时期，也有着每个时期的特色，因此我的设计将我以前的时光中一些具有特殊意义的时期的画像也囊括了进来，其中由于画人像比较复杂，有些部分以其他部件代替。

二、设计步骤

(1）童年时期的设计：奶瓶+婴儿

奶瓶的绘制：

• 思考奶瓶的各个部分的元素：从而为建立奶瓶类做准备。我们先参考一下市面上的奶瓶：
  
  通过观察我们发现，奶瓶的绘制可以使用基础图形实现，其中包括线、圆角矩形、椭圆等等。
  
• 圆角矩形的画法：
  <1>在屏幕上绘制一个矩形。长方形是四边的形状，每个角都是九十度。默认情况下，前两个参数设置左上角的位置，第三个参数设置宽度，第四个参数设置高度。但是，可以使用rectMode()函数更改这些参数的解释方式。
  <2>要绘制圆角矩形，需要添加第五个参数，该参数用作所有四个角的半径值。
  <3>要为每个角使用不同的半径值，需要包含八个参数。当使用8个参数时，后4个参数分别设置每个角的圆弧半径，从左上角开始，沿矩形顺时针移动。
  
• 构建奶瓶类：
  在绘制奶瓶时，其中奶瓶类有个属性是奶瓶绘制的位置坐标x，y。这个x，y在这里我设定的是瓶身左上角的坐标值。要注意：矩形绘制的时候是有很多模式设置的，模式的不同，决定矩形绘制的位置的不同。同时，还应该注意使用类时，使用相对位置来表示，不要设置绝对的数值，那样会造成可变性弱。

class FeedingBottle {
   
  private float x;
  private float y;
  private float w;//the width
  private float h;//the hight of the center bottle body
  private color c1;//the color of the bottle
  private color c2;
  private color c3;
  private color c4;
  private color lineColor=color(164, 169, 172);
  private float bottleHight;
  private float bottleWidth;

  public FeedingBottle() {
   
    this.x=0;
    this.y=0;
    this.w=0;
    this.h=0;
    this.c1=color(0, 0, 0);
    this.c2=color(0, 0, 0);
    this.c3=color(0, 0, 0);
    this.c4=color(0, 0, 0);
  }
  public FeedingBottle(float x, float y, float w, float h, color c1, color c2, color c3, color c4) {
   
    this.x=x;
    this.y=y;
    this.w=w;
    this.h=h;
    this.c1=c1;
    this.c2=c2;
    this.c3=c3;
    this.c4=c4;
    this.bottleHight=this.h;
    this.bottleWidth=this.w;
  }
  public void setLineColor(color line) {
   
    this.lineColor=line;
  }
  public void setScale(float scale) {
   

    this.w=bottleWidth*scale;
    this.h=bottleHight*scale;
  }
  public void setColor1(color c1) {
   
    this.c1=c1;
  }
  public void setColor2(color c2) {
   
    this.c2=c2;
  }
  public void setColor3(color c3) {
   
    this.c3=c3;
  }
  public void setColor4(color c4) {
   
    this.c4=c4;
  }

  public void drawBottleBody() {
   
    fill(c1);
    rect(x, y, w, h, 10);
    //draw line
    float bottoleHeight=this.y;
    for (; bottoleHeight<y+h-h/6; bottoleHeight+=h/7) {
   
      line(x, bottoleHeight, x+w/3, bottoleHeight);
    }
  }
  public void drawLid() {
   
    fill(c2);
    rect(x, y-h/6, w, h/6, 10);
  }
  public void drawFeedingMouse() {
   
    fill(c4);
    ellipse(x+w/2, y-h/3, w/3, h/3);
    fill(c3);
    rect(x+w/6, y-h/3, 2*w/3, h/4, 20);
  }
  public void drawAllBottle() {
   
    stroke(lineColor);
    this.drawFeedingMouse();
    this.drawBottleBody();
    this.drawLid();
  }
}

• 绘制的奶瓶的展示

婴儿的绘制

小时候我，比较圆圆润润，白白净净，因此在这里，我给自己设定的形象是圆滚滚可爱的样子。同时将刚刚的绘制的奶瓶放在了我绘制的小时候的自己的手中~~~~在这里，由于涉及到很多曲线，因此打算使用Bezier曲线来绘制。

• Bezier曲线的介绍
  

贝塞尔曲线就是这样的一条曲线，它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上，研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”，也就是说，随着点有规律地移动，曲线将产生皮筋伸引一样的变换，带来视觉上的冲击。
线性公式
给定点P0、P1，线性贝兹曲线只是一条两点之间的直线。这条线由下式给出：

二次方公式
二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

三次方公式
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P0走向P1，并从P2的方向来到P3。一般不会经过P1或P2；这两个点只是在那里提供方向资讯。P0和P1之间的间距，决定了曲线在转而趋进P3之前，走向P2方向的“长度有多长”。
曲线的参数形式为：

• Bezier曲线在processing中的使用

这些曲线由一系列锚点和控制点定义。前两个参数指定第一个锚点，后两个参数指定另一个锚点。中间参数指定了定义曲线形状的控制点。

• 建立婴儿类
  

class Baby {
   
  public Baby() {
   
    super();
    background(254, 242, 242);
  }
  public void drawBaby() {
   
    this.drawHead();
    this.drawCloth() ;
    this.drawHands();
    this. drawBottle();
    this.drawWings();
  }
  //draw head of the baby
  public void drawHead() {
    
    //noFill();
    fill(253, 235, 211);
    strokeWeight(2);
    stroke(0);
    bezier(371, 266, 340, 183, 402, 104, 494, 108); 
    noStroke();
    bezier(371, 266, 524, 316, 524, 316, 494, 108); //fillcolor
    stroke(0);
    bezier(494, 108, 584, 114, 628, 151, 631, 228);
    noStroke();
    bezier(494, 108, 468, 278, 548, 323, 631, 228);//fillcolor
    stroke(0);
    bezier(631, 228, 628, 247, 633, 242, 609, 291);
    noStroke();
    bezier(631, 228, 477, 228, 477, 228, 609, 291);
    stroke(0);
    bezier(609, 291, 614, 329, 578, 368, 506, 361);
    noStroke();
    bezier(609, 291, 559, 227, 498, 265, 506, 361);
    stroke(0);
    bezier(506, 361,