互动媒体技术-基于p5.js的自画像（划去）

1.先展示图像⑧

用鼠标点击屏幕可以改变小奂头发的颜色！快起来能闪瞎眼！

 

2.自画像是不存在的！

下面先介绍一下这位拿着吉他的主人公吧！

金在奂，1996年5月27日出生于首尔特别市，韩国男歌手，原男子演唱组合WANNA ONE成员 。

2012年，金在奂出演了tvN音乐选秀节目《Korea's Got Talent 2》，首次进入到大众的视野   。2016年2月10日，金在奂出演了韩国SBS电视台音乐综艺节目《Vocal战争：神的声音》试播集，在节目中挑战尹道贤，并成为首位挑战成功的选手   。2017年3月9日，金在奂以个人练习生身份参与录制首支数位单曲《我啊我（Pick Me）》 ；4月7日，金在奂出演了Mnet音乐选秀节目《PRODUCE 101 第二季》，并最终以第4名的成绩成功获得出道资格  ；8月7日，金在奂随组合WANNA ONE发行首张迷你专辑《1X1=1（TO BE ONE）》，正式出道  。2019年1月9日，金在奂正式成为SWING Entertainment旗下艺人并开启个人演艺活动 。

2019年5月20日，发行首张SOLO迷你专辑《Another》 。6月21日，金在奂为JTBC金土电视剧《辅佐官–改变世界的人们》演唱的OST《Black Sky》发行 。

3.主要函数

主要就是就是Bezier曲线。参见这个文档 https://p5js.org/zh-Hans/learn/curves.html

为了画出平滑的曲线，主要是连续Bezier曲线的使用。

 beginShape();
        vertex(201, 285); // first point
        bezierVertex(189,272,186,269,167,273);
        bezierVertex(148,271,163,314,169,331);
        bezierVertex(209,316,203,288,201,285);
 endShape();

以这段代码为例：

1.首先代码要被beginShape()和endShape包裹起来。

2.通过vertex()指定起始点。

3.使用bezierVertex()函数完成一段曲线的绘制，其中最后两个参数为终止点坐标，前两个参数和中间两个参数为控制点的坐标。

整个过程就是试坐标，完成自己图像，感觉没什么技术含量而且还挺浪费时间的。

代码就不放了，就全程Bezier。

4.注意事项

1.要想填充Bezier曲线围成的图形，注意要将其曲线闭合！即初始点坐标也为最后一个点坐标

2.注意画图的顺序，后画的图形会覆盖前面画的图形。

5.小技巧

1.在寻找点坐标时，我们可以首先使用PS等工具该确定我们要画形状的初始点和最后一个点。

 beginShape();
        vertex(201, 285); // first point
        bezierVertex(189,272,186,269,167,273);
        bezierVertex(148,271,163,314,169,331);
        bezierVertex(mouseX，mouseY,203,288,201,285);
 endShape();
//mouseX，mouseY
console.log(mouseX,mouseY);

2.我们通过mouseX，mouseY来控制第一个控制点的位置，并通过console.log(mouseX,mouseY)记录第一个控制点的坐标。

 beginShape();
        vertex(201, 285); // first point
        bezierVertex(189,272,186,269,167,273);
        bezierVertex(148,271,163,314,169,331);
        bezierVertex(209,316,mouseX,mouseY,201,285);
 endShape();
//mouseX,mouseY
console.log(mouseX,mouseY);

3.我们通过mouseX，mouseY来控制第二个控制点的位置，并通过console.log(mouseX,mouseY)记录第二个控制点的坐标。

4.反复2，3操作。我们就可以较准确的获得我们想要到Bezier曲线的形状。