p5.js 我的第一幅码绘——小丑

p5.js 我的第一幅码绘——小丑

码绘相比较于手绘肯定是要繁琐,但优势在于可以做一些有意思的动态效果和交互。

效果图

p5.js 我的第一幅码绘——小丑_第1张图片

小交互——癫狂状态的小丑

DC漫画里,小丑是个癫狂的角色,令人战栗。让我们展现一个癫狂的小丑。
按下空格键:背景变色、小丑抖动;
移动鼠标:小丑随之移动;
点击鼠标:出现“Hhhhh”的笑声字样。
网页里效果比gif好。

①设置变量isChangeColor判断是否按下空格
在这里插入图片描述
设置变量isPressed判断是否点击鼠标
在这里插入图片描述
②随按下空格改变变量isChangeColor的值
在这里插入图片描述
随按下鼠标改变变量isPressed的值
在这里插入图片描述
③ondraw()函数里,使用random()函数改变背景颜色与小丑位置。
mouseX和mouseY使小丑随鼠标移动。
p5.js 我的第一幅码绘——小丑_第2张图片
④在joker()函数里,鼠标按下显示字,字的大小在90~100间变化。
p5.js 我的第一幅码绘——小丑_第3张图片
p5.js 我的第一幅码绘——小丑_第4张图片

绘制注意点

1、贝塞尔曲线填充颜色按从第一个点到最后一个点的顺序。
p5.js 我的第一幅码绘——小丑_第5张图片
2、后画图层覆盖先画图层。
3、本图样使用了大量贝塞尔曲线,需要借用辅助工具。辅助工具帮助获得贝塞尔曲线的点坐标,大大简化了工作量。
p5.js 我的第一幅码绘——小丑_第6张图片
4、裤子阴影
因为后画图层覆盖先画图层。再加裤子阴影时,为了不完全遮挡裤子纹理,把颜色模型设置为在这里插入图片描述
在这里插入图片描述
多的第四个参数,调整不透明度。

完整代码

复制代码到p5.js编辑器测试。



	
    
    





感谢观看~~

你可能感兴趣的:(p5.js)