P5.js码绘–阿珊自画像
在此次互动媒体设计的作业中，老师让我们用p5.js或者processing画一个自画像，并且实现交互功能。在此篇博文中，阿珊将详细记录从手绘到码绘的详细过程。
一、 步骤：
1.手绘自画像
2.在p5上完成基本绘制
3.实现交互功能
二、人物的绘制以及交互的实现
1.绘制手稿
预想效果：
是一个头发膨胀的笑的憨憨的小女孩。
在PS上画出的参考像素心：
取色参考：是一只来自韩国叫做mongmong的kiyo的小兔子~
像素心参考：
2.实现效果：
可以实现给我的自画像选择不同颜色的轮廓、眉毛、美瞳、腮红。
可以一边按1~0和鼠标左键，分别画出10颗像素心，并且可以动态为它们选择颜色。
可以滑动鼠标滚轮可以改变心的大小，向上是变大，向下是变小。
静态
因为mongmong的颜色是偏冷的，你可能会不喜欢我自画像的颜色，觉得过于电子迷幻（呜呜）。没关系，我提供颜色选择功能：
颜色动态选择：
选择人物
选择背景的心
但其实：我的小朋友是自带BGM的，只是gif截图体现不出来，所以我们就假装gif有声音吧bgm:BTS–SpringDay.（需要付费不好意思，但是买了不吃亏不上当，循环一辈子）
调整音量大小
3.绘图主要方法：
3.1曲线
在进行绘制之前，我先了解了p5的绘制函数: p5.js学习，里面有各式各样的绘图方法：例如三角形、四边形、圆。然而我发现自己手绘的自画像，大部分是需要使用曲线去实现的，因此主要看了曲线函数： 曲线
在上学期的计算机图形学中，我们有学习过贝塞尔曲线，使用贝塞尔曲线可以使得多个线段连接光滑，所以，在此次绘制中，我全部使用了bezier（）。
因为贝塞尔曲线的起点终点和弯曲程度是由四个点去控制的，很难去调整，但是我在做的过程中，还是有一个小技巧的：在P5.js上给的曲线演示中去调整曲线预览，记下点，放在自己的坐标中。
如图：这四个点都是可以自己动态调整的，会显示在画布中的坐标位置。
曲线应用：
头发、脸部轮廓、嘴巴、脖子、衣服（几乎都是曲线，就调整曲线的时候心如死水。
下面举例子是嘴巴的绘制过程：
beginShape();
stroke(color(Aline));
strokeWeight(2);
vertex(103+x,125+y);
bezierVertex(93+x, 139+y, 158+x, 139+y, 147+x, 125+y);
endShape();
stroke()：
noStroke()：
fill()：
noFill()：
bezier()
但是要讲一下两句话的用法：
vertex(x1,y1);
bezierVertex(px1,py1,px2,py2,x2, y2);
bezierVertex(px3,py3,px4,py4,x3, y3);
这个是我用来连接两条曲线的语句：(x1,y1)(x2,y2)(x3,y3)分别是两条曲线的起点终点，剩下的点都是控制点。
ok，曲线先说到这里吧，因为真的用起来挺麻烦的，所以我还使用了对称轴，仔细看我的小孩，她是对称的，嘿嘿。
3.2圆弧和线
圆弧主要是用在眼睛，眼线以及双眼皮。而线则是用来画头发和BTS的标志。
线：line（x1,y1,x2,y2）线段起点和中点的坐标
画完整的圆其实可以直接用方法：ellipse（x,y,r1,r2）：中心点坐标，长宽
画圆弧则是使用arc(x,y,r,r,sAngle,eAngle)：中心点坐标，长宽大小，起点角度，终点角度
3.3正方形
rect（x1,y1,wid,hei），中心点位置，长宽。
用来绘制像素心。
像素心整体就是正方体构成的，所以画起来不是很难，我在PS里找好每一排的个数之后就好做了很多。
3.交互的实现：
颜色修改
引用p5.gui.js以及qucksettings.js库
我一共创建了两个gui，用来存放调整的参数
var figure;
var heart;
void setup(){
figure = createGui();
heart=createGui();
figure.addGlobals('Aline', 'eyebrow', 'cheek','eye','tongue','myVoice','myChoice');
heart.addGlobals('colora', 'colorb', 'colorc');
}
键盘鼠标响应绘制像素心，并且使用鼠标滑轮调整心的大小。
使用了判断鼠标以及键盘判断函数：
如果鼠标被按下，键盘的x键被按下，则会响应：
if (mouseIsPressed&&keyIsPressed == true&&key=='')
监听鼠标滑轮，如果滑轮向上，则心的大小变大，否则变小
function setup(){
cnv=createCanvas(1000, 600);
cnv.mouseWheel(changeSize);
...
}
function mouseWheel() {
}
function changeSize(event) {
if (event.deltaY > 0) {
l = l - 5;
}
else {
l = l + 5;
}
播放音乐并且调试音量大小
引用p5.gui.js以及p5.sound.js库
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound('BTS-TheTruthUntold.mp3');
}
function setup(){
mySound.play();
...
}
function draw(){
mySound.setVolume(myVoice);
...
}
为了使得对音量的修改可以实时，我们把音量的设置放在了draw（）里。
添加音量选择的选项：最小为0，最大是1.5，每次滑动增加0.1。
var myVoice = 0.1 ;
var myVoiceMin = 0 ;
var myVoiceMax = 1.5 ;
var myVoiceStep = 0.1 ;
void setup(){
...
figure.addGlobals('Aline', 'eyebrow', 'cheek','eye','tongue','myVoice');
}
4.心得：
4.1遇到的麻烦和解决
4.1.1涂色问题
我本来想的小孩整个都是涂上颜色的，但是因为在做的过程中，大部分都是使用的曲线，并且没有按照我想的填涂区域进行闭合，所以使用fill（）对整个图形进行可选择性填涂就是很困难的。
所以就改成了修改线条颜色，哈哈。
4.1.2画心问题
我本来的预想效果是，鼠标点一下，就可以画一颗心，没有数量限制，没有大小限制。
但是发现draw（）每次都会把我画的心刷新掉。…可能是我鼠标点击函数用的还是不太熟练，所以最后我在项目里建立了一个.js文件专门存储我的画十个心的函数，在.html里引用，每次响应函数被调用的时候，都可以画出一个心。
暂时还没想到可以只用一个原始的画心函数，直接一个点击一个心，并且保存原来画的心的方法。
4.1.3其他问题
还有好多好多问题都被我，逐渐解决掉啦！有一些是粗心造成的，有的就是不太熟悉函数，导致做出来的东西不稳定，最后慢慢改好的。就统一被归类到其他问题吧！！
4.2感受
把自己的手绘作品用代码呈现出来真的很神奇，虽然过程有一点点坎坷，但是当小孩呈现在屏幕上的时候，心里充满了自豪kk。
虽然写代码绘制的过程比较繁琐，需要一点点调整参数。但是绘制出的图形要比手绘规整很多，所以这也是代码的魅力，将参差不齐规整。
当然在学习p5的过程中，我发现了这个平台可以做很多事情，比如说webgl、语音识别等等。感觉要学习的东西还有很多，阿珊还需要继续努力啊啊啊！
7840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
