互动媒体技术自画像作业博客

1. 构思
   P5JS有丰富灵活的几何图形函数，支持良好的RGB颜色定义，还可以引入时间变量，但对不规则图形的支持并不算好，debug调试的时间和精力可能消耗太大
   因此自画像采用Q版风格，尽量用规则的几何图形来表现五官等形体，同时颜色也尽量采用轻快明亮的颜色，衬托Q版风格。
   还可以加入一些动态效果和少量交互，使自画像看上去更活跃，更像是当今计算机绘画的产物
2. 宏观设计
   由于五官的绘画都涉及多个几何图形的叠加，以及考虑到各个部分的绘制顺序可能需要调试，于是把无关的每一个部分都封装成一个函数，方便调整：
   格式大致如下：

function drawXXX(x,y,s)//XXX为需要单独出来的部位，x，y为该部分绘制的中心坐标，s为大小调整的参数
{
push();//首尾的push()和pop()保证绘制环境的相对独立
scale(s);//调整大小
translate(x,y);//调整绘制的中心

pop();
}
最后一致在一个drawOverAll()函数中拍好绘制顺序，也可以随时在drawOverAll中灵活调整
3. 微观+调整
五官具体的几何图形选择属于个人审美问题，再次不多赘述
对于一些需要水平对称绘制的部分（如耳朵），在函数中加上一个新的参数（这里为l）

function drawEar(x,y,s,l)
{
push();
scale(s);
translate(x,y);
stroke(219,120,131);
strokeWeight(6);
fill(255,251,244);
rotate(lPI/4);
ellipse(x,y,110,130);
noStroke();
fill(255,219,217);
ellipse(x-l10,y+10,80,100);
pop();
}
只要把l设置为-1或者1就能使函数绘制左边的部分或右边的部分

4. 收尾
   加上呼吸的动态效果。
   在这里再次体现出部位分层的好处，可以分别让调整呼吸的参数在不同的部分起作用
   也可以把数个部位打包在一个函数里，做出整体的效果，如drawHead(x,y,s)中把五官，脸和头发等包含进去，使得呼吸的动态更富有层次。
   加上眼睛会追踪鼠标位置的效果。
   加上眨眼效果，利用的是有填充和描线的bezier形状加上sin和cos函数控制。
5. 问题反思与总结
   眨眼的效果并不好，因为眨眼这个动作持续时间不能太长，而频率也不宜太高，其实不太适合用sin和cos函数配合时间变量控制，但效果还凑活，应该找到更好的解决办法。