“码绘” —— 使用P5.JS制作一幅自画像

关于自画像，我认为最重要的是要把“我”这个人的特点表现出来。
于是，我的基本想法：

1.是一个长发齐肩的女生，有着中分的刘海
2.是一个追星少女

关于第一点还是比较好实现的，就是外形的塑造。
那么第二点要怎样表现出来呢？
那当然就是一些周边和应援物了！
日常生活中，如果我们书包上扣着某明星的徽章，那么我们就会知道“原来她是XXX的粉丝呀！”
所以我选择在自画像的绘制中加入应援棒和周边T恤，这样我的自画像就会更有我的特点！( * ^ _ ^ *)

在此附上我的手绘稿：
若是只有图像的话会很单调，在手绘的时候有了个基本的交互思路。

基本的 人物形象 绘制好啦~

接下来就是给人物增加个人色彩了！关于应援棒和T恤我搜到了两张参考图片。

完成的初稿如下：

因为短袖和球球帽的搭配太奇怪了，所以改成了棒球帽。
另外更改了颜色，希望能够看上去更活泼一些。

虽然看上去简单，但代码还是有点长的~吸取上一篇博文的经验，这里只讲一些基本函数的作用，具体代码可以自己去看：
具体代码

arc(200, 337, 45, 30, 0, PI , CHORD);
//arc(x, y, width, height, start, stop, [mode], [detail])

这是一个用于绘制弧形的函数。如果函数调用只提供 x、y、width、height、start 及 stop 参数，弧形将会被画成开放的饼形段。如果提供 mode 参数，弧形可是开放式半圆形（OPEN）、封闭式半圆形（CHORD）或封闭式饼形段（PIE）。图中的帽子和衣服上小饼干的嘴都是用该函数绘制的。

rect(160, 70, 40, 20, 3, 3, 3, 3);
//(x,y,width,height,top-left,top-right,bottom-right, bottom-left)

这是一个用于绘制矩形的函数。前面的x、y、width及height参数相信大家已经很熟悉了，这次主要讲的是后面四个参数，分别定义左上角、右上角、右下角及左下角的拐角半径。这样就可以绘制出圆角矩形，让图案看上去没有那么的锐利。图中的手臂和头发就是用该函数绘制的。

另外在绘图过程中，比较需要注意的一点是：如果图形存在stroke的变化或者旋转、移动等改变，应当要用push()和pop()函数将其分隔开，以免影响到其他形状的绘制。

然后就是给自画像加入交互元素了。

希望的效果是：
挥舞应援棒 —— 图中的应援棒可以根据鼠标的移动左右摇摆。<