Processing实现绘制自画像

关于自画像创作

·
自画像的创作主要分以下几个步骤：

---

• 工具准备
• 轮廓构建
• 颜色填充
• 形状修正
• 背景构建
• 交互构建

---

工具准备

关于工具准备是指方便构图而使用的一些代码，比如：

  println(mouseX+"  "+mouseY);

可以比较方便地获取屏幕上的坐标位置，方便修改。

另外由于人脸部分的绘图需要用到曲线（我用的比较多的是贝塞尔曲线），我选择将贝塞尔曲线可视化出来，方便我调控：
这便是我在构建一些需要用到将贝塞尔曲线4个点可视化并且可以通过鼠标移动下的效果，大大提高了作图效率。

轮廓构建

通过调整贝塞尔曲线，例如：

beginShape();
vertex(487,617);
bezierVertex(488,627,471,654,461,622);
endShape();

运用绘制直线和圆的函数，例如：

line(595,518,637,510);
ellipse(540,517,110,88);

其中画笔的粗细和颜色可以通过以下函数调整：

stroke(n);
strokeWeight(n);

终于完成的主要轮廓构建为：

void draw(){ 
  background();
  hair();
  face();
  ears();
  eyes();
  mouse();
  nose();
  TexOfHairAndFace();
  teeth();
  interactive();
  }

效果图为：

颜色填充以及背景构建

颜色填充部分主要用到之前的画笔颜色，粗细更改函数，以及：

fill();  //填充颜色

noFill(); //关闭填充

效果图为：

加上背景以后直接上效果图吧：

交互构建：

交互部分我补充了时间的同步，主要用到了以下函数：

h = hour();  
m = minute();  
s = second();

并导入了字体，通过Text（）将时间显示于界面左上角。

另外，我将背景颜色与时间的建立联系：

   fill(4.25*s,0,0);//s即是当前时间下秒的部分
   rect(i,0,10,height);

可以实现图像背景随着时间每秒发生颜色变化。

另外，我还实现了鼠标点击的交互，具体的代码为：

if(mousePressed) {
  if(mouseX >=323 && mouseX <= 414 && mouseY >= 467 && mouseY <= 566
  ||mouseX >=497 && mouseX <= 585 && mouseY >= 467 && mouseY <= 566)
  {
    is_get = true;
  }
  else
  {
    is_get = false;
  }

通过区域限制，我将点击生效的范围设置在人物两只眼睛部分，若单击眼睛区域会改变布尔变量is_get的值，使得人物的构图发生变化，点击眼睛的效果为：

似乎和坤坤有一点点像…对了，这儿的is_get实际控制了在眼睛，头发，牙齿部分的选择绘制部分，以牙齿为例：

void teeth()
{
  if(is_get == false)
  {
fill(255,255,255);
beginShape();
vertex(465,621);
bezierVertex(466,632,449,657,439,623);
endShape();

beginShape();
vertex(487,617);
bezierVertex(488,627,471,654,461,622);
endShape();
  }
  else
  {
fill(255,255,0);
beginShape();
vertex(465,621);
bezierVertex(466,632,449,657,439,623);
endShape();

beginShape();
vertex(487,617);
bezierVertex(488,627,471,654,461,622);
endShape();
    
  }
}

当鼠标点击其他区域以后，人物又会恢复原来样子。为了提示该功能，我也在界面下方给予文字提示：