这次我结合了p5js和ps。利用ps寻找图片的像素坐标，再利用p5js的贝塞尔曲线描点绘制图案。
在ps中新建400*400像素的图层，导入图片并添加网格，打开窗口->信息（F8）。鼠标在图像上移动即可获得像素位置信息，并且可以使用吸管工具提取颜色信息。 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的值即可。
