如何用p5js绘制卡通形象并实现不倒翁效果

鲶鱼精是知名mmorpg游戏中的人气较高的蛮族物种，它被玩家玩家亲切地称为“鲶鲶”，本次实验我准备在它3d模型的基础上创建2d形象，并实现一个不倒翁效果。下面是它的3d正面照：

一.简单几何体的绘制

画这个可爱的鲶鲶，其眼睛，铃铛，肚兜等部分可以使用基本图形绘制
下面展示肚兜的装饰和铃铛的画法：

 fill(color(240,198,116));strokeWeight(3);translate(5,120);circle(0,0,70);fill(0);circle(0,10,17);strokeWeight(6);line(0, 10, 0, 32);strokeWeight(3);fill(color(249,232,152));rect(-38, -10, 76, 15, 5);fill(color(237,165,107));translate(0,150);triangle(32, -20, -1, 25, -36, -20);circle(0,-32,30);circle(15,-22,30);circle(-17,-22,30);line(15,3,-17,3);translate(0,-150);arc(100,40, 60, 80, PI*125/180, PI*235/180,PIE);arc(-105,40, 60, 80, -PI*55/180, PI*53/180,PIE);pop();

主要运用了circle()、arc()、line()等函数

二.使用贝塞尔曲线拟合封闭曲线

这里借用了贝塞尔曲线拟合任意曲线的程序使绘制更加顺利
然后使用自定义多边形函数beginShape()/endShape()绘制由贝塞尔曲线构成的闭合多边形：

 //头beginShape();vertex(329,289);bezierVertex(370,153,515,164,555,287);bezierVertex(575,407,300,405,329,289);endShape();

如上，参考拟合程序，可以绘制出鲶鲶的头。本程序中其他曲线图形也用类似方法绘制。

三.动态不倒翁效果的实现

首先我们要考虑使用鼠标推动这个不倒翁，这里我选择创建一个布尔型变量sad用来判断鼠标状态，而当鼠标按下时，鲶鲶会改变表情给予控制者反馈。
初始化以及鼠标状态获取：

//设置鼠标输入
/*maxtimes-----设置摆动次数*/
var k=0;
let sad=false;
var x1=0,x2=0;
var i=60,j=1,maxtimes=30,a=0;
function mousePressed(){sad=true;
}
function mouseReleased(){sad=false;a=k;//print(a);
}

五官的绘制，包括鼠标状态判断：

  push();strokeWeight(5);translate(-3,0);if(sad==false)bezier(390,320,480,300,410,300,500,320);else{push();fill(color(239,97,97));beginShape();vertex(357,312);bezierVertex(431,296,472,296,525,313);bezierVertex(484,349,416,349,357,313);endShape();pop();}

然后我设想，鼠标按下后拖动一段距离后松开，让这个事件对应拨动不倒翁的操作。
首先就要实现动态的“拨动”：

  x0=mouseX;//不倒翁实现if(sad){i=60;j=maxtimes;k=-(250-x0)/10;}

然后考虑实现松“手”后，怎样实现不倒翁效果。
我把不倒翁运动拆分成两个运动：

它是一个往复运动，如果把运动时间看成x，转过的角度看成y，它符合余弦函数：y=cos(x)。
每经过一定时间，它的振幅a会减小，这个时间和1中余弦函数的周期有关。
（我绘制了一个草图来解释这个规律）

实现这个函数的代码如下：

  //松开后，使用sin函数归位else if(!sad){k=a*cos(i*PI/30);if(i>=0){i--;}else if(j>=0){j--;a=j*a/maxtimes;i=60;}}

最后附上这个鲶鲶的图片：

然后是源代码链接：
p5js可爱鲶鱼精

如何用p5js做一个可爱的鲶鲶并添加不倒翁效果相关推荐

如何用Excel做一个战斗模拟器(一)升级经验表
如何用Excel做一个战斗模拟器(二)属性表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引引言确定战斗公式与怪物强度确定人物升级经验确定人物升级时间确定升级所需经验引言作 ...
如何用Excel做一个战斗模拟器(三)战斗过程模拟
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(二)属性表目录索引定义战斗子过程定位战斗双方基础属性利用基础属性与战斗公式进行计算战斗过程的运算与输出判 ...
android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机
原标题:[自制样机教程]如何用Ps做一个压痕效果的Logo样机上次教你们做的自制小糖袋的贴图样机不知道你们玩耍的咋样今天再给你们介绍一个logo的样机这次的教程主要用到了图层样式来看看怎么 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用UE5渲染一个可爱的茶壶屋？
Hello,今天给大家带来如何用UE5渲染一个可爱的茶壶屋? 1.介绍今天分享一个可爱风茶壶屋制作思路.之所以选择在UE5中进行渲染,是因为他的渲染方便,后处理也可以提高初学者的使用效率. 2.参考 ...
如何用Excel做一个战斗模拟器(四)装备的掉落与展示
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(二)属性表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引定义掉落表与装备表怪物本身掉落装备定义 ...
如何用Excel做一个战斗模拟器(二)属性表
如何用Excel做一个战斗模拟器(一)升级经验表如何用Excel做一个战斗模拟器(三)战斗过程模拟目录索引属性表属性表首先确定人物的生命.攻击.防御.暴击值与闪避值属性.用公式将其设定为与等 ...
仟龙教您如何用html做一个酷炫掉渣的点名器
本文关键详细介绍了如何用html做一个酷炫掉渣的点名器,原文中根据示例编码详细介绍的十分详尽,对大伙儿的学习或是工作中具备一定的参照学习使用价值,必须的小伙伴们下边伴随着我来一起学习学习吧此点名器逐 ...

如何用p5js做一个可爱的鲶鲶并添加不倒翁效果