Processing实现绘制自画像

关于自画像创作

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

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

工具准备

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

  println(mouseX  mouseY);

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

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

轮廓构建

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

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

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

line(595,518,67,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 >=2 && 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,62,449,657,49,62);
endShape();beginShape();
vertex(487,617);
bezierVertex(488,627,471,654,461,622);
endShape();}else{
fill(255,255,0);
beginShape();
vertex(465,621);
bezierVertex(466,62,449,657,49,62);
endShape();beginShape();
vertex(487,617);
bezierVertex(488,627,471,654,461,622);
endShape();}
}

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