原图

临摹方法

这次我结合了p5js和ps。利用ps寻找图片的像素坐标，再利用p5js的贝塞尔曲线描点绘制图案。

1. 在ps中新建400*400像素的图层，导入图片并添加网格，打开窗口->信息（F8）。鼠标在图像上移动即可获得像素位置信息，并且可以使用吸管工具提取颜色信息。
   2.通过钢笔工具绘制贝塞尔曲线的四个点（起点、终点和两个控制点）来勾勒图像。图为眉毛部分。
2. 按照起点、控制点、终点顺序依次描点。需要注意的是bezierVertex()的第三个点（终点）也是下一个bezierVertex()函数的起点。

  beginShape();vertex(49,230);bezierVertex(0,57,320,16,307,199);bezierVertex(303,223,320,249,314,241);endShape();

3.每个beginShape()和endShape()之间需要构成一个封闭图形来填充颜色。
4.因为我不是一次完成的，所以很多起点终点不统一导致图案连接性不好，细节没做好。建议每次找贝塞尔点时完整的绘制一圈再进行代码部分。

颜色提取的有些偏。部分地方绘制多遍导致重叠。秃脑袋的反光以及阴影部分表现的不好因此我删掉了。

增加交互

绘制好整体后增加一些简单的交互功能。
1.为了增加猥琐气质，增添一个眉毛的上下抖动。
2.上下抖动周而复始的运动因此我选用正弦函数来实现。
3.构建一个偏移函数。通过w0的自增，不断改变正弦函数的x，使位移值w1在区间内反复改变。里边用到了translate()函数，为了其他函数不受其影响，我用push()和pop()将其包起来。

 w0=w0+Math.PI/20;let w1=20+15*sin(w0);push();translate(0,w1);beginShape();fill(0)vertex(96,175);bezierVertex(58,126,144,60,193,143);bezierVertex(153,108,106,139,96,175);endShape();pop();

4.为了增加憨憨气质，通过键盘响应函数给克林增加一个斗鸡眼。直接简单的keyIsPressed()函数就行了。

if (keyIsPressed === true) { fill(0);ellipse(200,208,13,8);ellipse(242,203,13,9);}else{fill(0);ellipse(200,208,13,8);ellipse(282,200,13,9);}

5.最后再利用鼠标响应函数，添加一个点击绘制一个龙珠的交互。先做一个画龙珠的函数 。用ellipse()和triangle()即可。注意前后覆盖关系。

function ball(x,y){push()noStroke();if (mouseIsPressed === true) {fill(255,208,90);ellipse(x, y, 50,50);beginShape(LINES);fill(255,71,30);triangle(x,y,x+4,y-15,x+21,y-15);triangle(x+16,y,x+12,y-15,x-5,y-15);triangle(x+8,y-24,x+4,y-15,x+12,y-15);endShape()}pop();

最后在主函数中调用ball()函数并给他赋mouseX和mouseY的值即可。

结果