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

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

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就能使函数绘制左边的部分或右边的部分

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