p5.js 我的第一幅码绘——小丑
2024-06-28 14:21:55
p5.js 我的第一幅码绘——小丑
码绘相比较于手绘肯定是要繁琐，但优势在于可以做一些有意思的动态效果和交互。
效果图
小交互——癫狂状态的小丑
DC漫画里，小丑是个癫狂的角色，令人战栗。让我们展现一个癫狂的小丑。
按下空格键：背景变色、小丑抖动；
移动鼠标：小丑随之移动；
点击鼠标：出现“Hhhhh”的笑声字样。
网页里效果比gif好。
①设置变量isChangeColor判断是否按下空格
设置变量isPressed判断是否点击鼠标
②随按下空格改变变量isChangeColor的值
随按下鼠标改变变量isPressed的值
③ondraw()函数里，使用random()函数改变背景颜色与小丑位置。
mouseX和mouseY使小丑随鼠标移动。
④在joker()函数里，鼠标按下显示字，字的大小在90~100间变化。
绘制注意点
1、贝塞尔曲线填充颜色按从第一个点到最后一个点的顺序。
2、后画图层覆盖先画图层。
3、本图样使用了大量贝塞尔曲线，需要借用辅助工具。辅助工具帮助获得贝塞尔曲线的点坐标，大大简化了工作量。
4、裤子阴影
因为后画图层覆盖先画图层。再加裤子阴影时，为了不完全遮挡裤子纹理，把颜色模型设置为
多的第四个参数，调整不透明度。
完整代码
复制代码到p5.js编辑器测试。
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
</head>
<body>
<script>var isChangeColor=false;var isPressed=false;function setup(){createCanvas(900,900);frameRate(60);}function draw() { if(isChangeColor) //癫狂{background(random(255),random(255),random(255));strokeWeight(140);stroke(random(255),random(255),random(255));line(0, 0, 920, 460);line(500, -60, 920, 150);line(-60, 300, 920, 790);line(-60, 630, 920, 1120);if(frameCount%20>=10)translate(random(10)+mouseX-450,random(20)+mouseY-450);elsetranslate(-random(10)+mouseX-450,-random(20)+mouseY-450);joker();}else{background(80,193,101); //普通strokeWeight(140);stroke(222,94,81);line(0, 0, 920, 460);line(500, -60, 920, 150);line(-60, 300, 920, 790);line(-60, 630, 920, 1120);joker();}} function mousePressed(){isPressed=!isPressed;}function joker(){stroke(255); //脸轮廓strokeWeight(10);fill(255,255,255);beginShape();vertex(238,421);bezierVertex(184,516,577,607,682,424);bezierVertex(726,330,700,212,685,171);bezierVertex(672,133,650,124,627,95);bezierVertex(593,74,588,60,548,59);bezierVertex(507,47,493,27,447,43);bezierVertex(389,44,347,51,299,104);bezierVertex(294,111,201,152,232,303);bezierVertex(242,349,248,379,238,423);endShape();stroke(11,49,4); //脸轮廓2strokeWeight(20);fill(255,255,255);beginShape();vertex(249,421);bezierVertex(214,512,584,584,667,418);bezierVertex(709,329,696,214,668,168);bezierVertex(657,145,639,122,611,105);bezierVertex(585,83,568,71,546,72);bezierVertex(502,57,495,35,447,59);bezierVertex(386,55,354,57,305,118);bezierVertex(285,116,210,212,249,304);bezierVertex(247,350,268,383,250,419);endShape();noStroke(); //鬓角
fill(15,146,42);
beginShape();
vertex(474,506);
bezierVertex(527,489,594,477,621,426);
bezierVertex(698,406,632,278,608,404);
bezierVertex(601,365,604,356,596,326);
bezierVertex(591,305,539,309,568,287);
bezierVertex(611,281,668,297,672,196);
bezierVertex(711,304,691,513,469,508);
endShape();fill(82,183,15); //顶发
beginShape();
vertex(568,286);
bezierVertex(587,287,674,301,674,196);
bezierVertex(652,134,558,61,541,79);
bezierVertex(499,60,486,47,450,67);
bezierVertex(384,67,355,64,313,122);
bezierVertex(294,134,297,126,280,147);
bezierVertex(251,189,233,257,258,301);
endShape();fill(255,255,255); //额头
beginShape();
vertex(258,307);
bezierVertex(261,262,273,258,282,241);
bezierVertex(335,253,354,257,374,272);
bezierVertex(448,243,486,241,546,253);
bezierVertex(559,256,590,263,559,301);
endShape();fill(15,146,42); //发丝1
beginShape();
vertex(287,213);
bezierVertex(291,177,289,154,315,122);
bezierVertex(340,100,331,101,351,86);
bezierVertex(319,124,310,133,300,163);
endShape();beginShape(); //发丝2
vertex(358,252);
bezierVertex(341,226,333,206,346,177);
bezierVertex(347,193,334,212,357,249);
endShape();beginShape(); //发丝3
vertex(381,180);
bezierVertex(386,148,394,137,406,115);
bezierVertex(413,101,425,93,433,78);
endShape();beginShape(); //发丝4
vertex(423,245);
bezierVertex(426,224,426,221,435,208);
bezierVertex(451,196,443,201,459,190);
bezierVertex(444,208,446,208,436,220);
endShape();beginShape(); //发丝5
vertex(493,141);
bezierVertex(495,127,493,129,497,118);
bezierVertex(510,104,508,113,517,104);
bezierVertex(506,114,511,110,504,121);
endShape();beginShape(); //发丝6
vertex(565,229);
bezierVertex(570,217,577,208,581,203);
bezierVertex(603,208,592,205,611,207);
bezierVertex(592,211,604,209,584,213);
endShape();fill(101,208,2); //发-圆
ellipse(273,198,10,20);
ellipse(310,207,10,15);
ellipse(392,209,10,20);
ellipse(407,199,8,15);
ellipse(527,193,10,20);
ellipse(557,180,17,35);
ellipse(644,165,10,20);fill(0); //左眼框
beginShape();
vertex(287,404);
bezierVertex(262,350,278,369,265,323);
bezierVertex(277,336,271,325,296,328);
bezierVertex(325,343,325,336,348,385);
bezierVertex(334,354,301,331,282,341);
bezierVertex(278,354,280,377,289,404);
endShape();beginShape(); //右眼框
vertex(438,406);
bezierVertex(443,367,475,327,559,351);
bezierVertex(576,349,567,356,582,346);
bezierVertex(572,364,566,388,536,433);
bezierVertex(561,388,555,397,562,375);
bezierVertex(522,344,492,341,453,379);
endShape();fill(108,208,2); //左眼珠
beginShape();
vertex(315,348);
bezierVertex(282,347,282,443,334,438);
bezierVertex(364,430,346,352,313,346);
endShape();beginShape(); //右眼珠
vertex(513,351);
bezierVertex(451,353,473,450,520,441);
bezierVertex(553,437,564,349,513,352);
endShape();fill(0); //鼻子
ellipse(360,432,8,12);fill(170,234,40); //左眼内部细节
ellipse(309,416,10,20);
fill(46,101,0);
ellipse(324,399,12,24);
fill(255);
ellipse(335,375,10,20);fill(170,234,40); //右眼内部细节
ellipse(497,418,10,20);
fill(46,101,0);
ellipse(513,397,12,24);
fill(255);
ellipse(535,372,10,20);fill(187,25,36); //嘴唇
beginShape();
vertex(320,443);
bezierVertex(329,477,436,462,450,456);
bezierVertex(481,450,462,457,485,445);
bezierVertex(453,523,343,502,325,455);
endShape();
if(isPressed)
{fill(0);textStyle(BOLD);textSize(random(90,100));text('Hhhhh',500,500);
}fill(255); //牙齿
beginShape();
vertex(347,468);
bezierVertex(403,481,404,470,446,465);
bezierVertex(444,474,445,471,442,481);
bezierVertex(409,492,393,491,360,478);
endShape();strokeWeight(2); //牙缝
stroke(0);
fill(255);
beginShape();
vertex(443,476);
bezierVertex(406,485,376,487,346,469);
endShape();
line(366,476,365,479);
line(384,479,384,483);
line(403,479,403,485);
line(417,480,418,482);
line(432,474,434,477);//白底
noStroke(); //左臂
fill(255);
beginShape();
vertex(369,521);
bezierVertex(335,564,350,541,280,630);
bezierVertex(260,642,248,669,263,687);
bezierVertex(287,734,309,714,329,701);
bezierVertex(352,679,345,685,355,668);
endShape();beginShape(); //左脚
vertex(342,654);
bezierVertex(326,728,308,761,357,794);
bezierVertex(360,803,361,796,361,810);
bezierVertex(336,831,368,863,398,859);
bezierVertex(458,860,444,818,461,771);
endShape();beginShape(); //右脚
vertex(445,755);
bezierVertex(442,794,445,775,449,838);
bezierVertex(449,877,533,867,545,840);
bezierVertex(546,811,543,828,545,800);
bezierVertex(606,773,595,750,550,639);
endShape();beginShape(); //右臂
vertex(527,663);
bezierVertex(602,595,587,614,627,559);
bezierVertex(651,545,661,507,630,480);
bezierVertex(617,500,559,514,530,524);
bezierVertex(492,523,475,531,415,527);
endShape();beginShape(); //身体
vertex(369,520);
bezierVertex(436,531,467,535,487,543);
bezierVertex(633,732,536,897,300,667);
endShape();//绿边
fill(11,49,4);
beginShape();
vertex(534,636);
bezierVertex(590,587,578,600,618,551);
bezierVertex(643,531,648,508,611,486);
bezierVertex(594,472,573,503,562,524);
bezierVertex(548,543,555,532,541,553);
endShape();
beginShape();
vertex(533,624);
bezierVertex(555,688,552,657,574,748);
bezierVertex(583,763,566,774,533,790);
bezierVertex(539,835,543,848,491,853);
bezierVertex(444,852,461,820,466,819);
endShape();strokeWeight(20);
stroke(11,49,4);
fill(255);
beginShape();
vertex(476,816);
bezierVertex(466,790,462,761,449,766);
bezierVertex(436,766,435,783,432,816);
bezierVertex(418,863,348,840,378,813);
bezierVertex(375,788,378,800,372,779);
bezierVertex(319,757,351,723,362,635);
bezierVertex(332,673,349,655,319,684);
bezierVertex(300,708,290,693,280,680);
bezierVertex(273,669,276,656,285,648);
bezierVertex(356,562,328,597,395,520);
bezierVertex(448,514,424,517,502,517);
bezierVertex(528,540,520,533,544,557);
bezierVertex(567,587,576,585,551,616);
bezierVertex(532,640,543,626,527,648);
endShape();strokeWeight(20);
stroke(11,49,4);
line(540,595,500,660);noStroke(); //脖子
fill(238,211,200);
beginShape();
vertex(424,505);
bezierVertex(420,517,423,509,421,517);
bezierVertex(426,530,449,529,473,520);
bezierVertex(479,510,476,518,477,506);
endShape();fill(99,101,178); //衬衫领子
beginShape();
vertex(422,510);
bezierVertex(429,535,449,521,476,513);
bezierVertex(474,524,474,512,473,525);
bezierVertex(450,543,464,531,429,555);
bezierVertex(413,531,422,544,409,525);
endShape();stroke(151,255,11); //领带
strokeWeight(9);
line(431,523,441,524);
strokeWeight(10.5);
line(440,525,425,556);
strokeWeight(10.5);
line(432,524,437,550);stroke(61,54,151); //衬衫领子左边边
strokeWeight(2);
beginShape();
vertex(426,521);
bezierVertex(424,524,424,528,419,534);
endShape();beginShape(); //衬衫领子右边边
vertex(445,524);
bezierVertex(448,533,448,529,449,537);
endShape();noStroke(); //马甲
fill(73,172,90);
beginShape();
vertex(411,524);
bezierVertex(420,535,417,530,428,552);
bezierVertex(451,536,447,540,476,520);
bezierVertex(445,558,469,627,482,682);
bezierVertex(463,693,472,688,451,697);
bezierVertex(429,689,439,692,420,681);
bezierVertex(402,690,411,685,392,697);
bezierVertex(376,688,382,691,371,682);
bezierVertex(384,599,377,629,404,538);
endShape();stroke(44,143,62); //马甲衣襟
strokeWeight(2);
beginShape();
vertex(427,551);
bezierVertex(422,601,415,638,420,678);
endShape();beginShape(); //马甲左领子
vertex(427,552);
bezierVertex(413,545,418,546,404,538);
endShape();beginShape(); //马甲右领子
vertex(427,552);
bezierVertex(454,549,443,548,460,548);
endShape();noStroke(); //马甲阴影左侧
fill(15,140,41);
beginShape();
vertex(408,519);
bezierVertex(406,549,398,553,375,684);
bezierVertex(367,674,372,678,364,671);
endShape();beginShape(); //马甲阴影右侧
vertex(470,539);
bezierVertex(442,549,453,605,468,684);
bezierVertex(480,680,472,682,484,679);
endShape();noStroke(); //马甲扣子
fill(151,255,11);
circle(430,564,5);
circle(428,590,5);
circle(426,614,5);
circle(425,636,5);
circle(425,657,5);
circle(425,678,5);noStroke(); //裆
fill(122,7,136);
beginShape();
vertex(429,767);
bezierVertex(445,756,452,757,465,764);
bezierVertex(463,744,465,755,461,735);
bezierVertex(439,731,452,734,431,736);
endShape();noStroke(); //左鞋
fill(93,45,36);
beginShape();
vertex(381,809);
bezierVertex(371,819,369,822,372,833);
bezierVertex(382,848,416,842,422,835);
bezierVertex(429,818,428,826,429,807);
endShape();beginShape(); //右鞋
vertex(479,812);
bezierVertex(472,822,467,834,471,841);
bezierVertex(489,844,509,844,524,837);
bezierVertex(533,826,526,824,519,799);
endShape();noStroke(); //裤子
fill(157,97,192);
beginShape();
vertex(367,682);
bezierVertex(383,694,374,685,389,699);
bezierVertex(410,688,396,696,420,683);
bezierVertex(441,694,439,693,450,698);
bezierVertex(464,689,474,686,505,675);
bezierVertex(520,776,518,739,523,810);
bezierVertex(496,815,510,813,478,816);
bezierVertex(458,765,471,789,458,745);
bezierVertex(443,738,447,739,437,746);
bezierVertex(431,785,432,768,428,816);
bezierVertex(397,820,410,819,378,819);
bezierVertex(362,753,372,793,360,734);
endShape();stroke(130,70,160); //裤子条纹
strokeWeight(2);
beginShape();
vertex(379,691);
bezierVertex(376,738,374,765,385,818);
endShape();beginShape();
vertex(389,696);
bezierVertex(381,734,386,763,392,818);
endShape();beginShape();
vertex(398,695);
bezierVertex(403,734,395,768,399,818);
endShape();beginShape();
vertex(410,689);
bezierVertex(413,733,407,769,408,817);
endShape();beginShape();
vertex(429,691);
bezierVertex(428,733,423,770,421,817);
endShape();beginShape();
vertex(439,692);
bezierVertex(440,709,439,722,441,743);
endShape();beginShape();
vertex(451,694);
bezierVertex(451,709,452,723,453,742);
endShape();beginShape();
vertex(458,693);
bezierVertex(459,722,467,762,484,815);
endShape();beginShape();
vertex(467,690);
bezierVertex(473,724,477,771,492,815);
endShape();beginShape();
vertex(474,686);
bezierVertex(485,726,494,768,506,813);
endShape();beginShape();
vertex(508,771);
bezierVertex(510,788,512,802,515,811);
endShape();beginShape();
vertex(515,770);
bezierVertex(518,787,520,798,522,802);
endShape();colorMode(RGB, 255, 255, 255, 1); //裤子阴影
noStroke();
fill(102,52,101,0.6);
beginShape();
vertex(499,673);
bezierVertex(475,680,481,678,470,685);
bezierVertex(485,739,481,709,496,791);
bezierVertex(507,796,512,795,523,792);
endShape();stroke(110,35,127); //马甲下摆
strokeWeight(8);
line(370,680,390,698);
line(390,698,420,683);
line(420,683,450,695);
line(450,695,484,682);noStroke(); //左手
fill(242,212,197);
beginShape();
vertex(287,667);
bezierVertex(282,662,276,672,286,683);
bezierVertex(299,697,310,689,304,683);
endShape();beginShape(); //右手
vertex(589,533);
bezierVertex(572,509,594,484,614,496);
bezierVertex(646,520,612,543,592,536);
endShape();noStroke(); //左风衣
fill(154,52,162);
beginShape();
vertex(417,516);
bezierVertex(397,513,404,517,389,523);
bezierVertex(332,596,374,543,279,661);
bezierVertex(296,683,287,675,310,692);
bezierVertex(354,646,333,673,368,627);
bezierVertex(345,720,321,758,374,779);
bezierVertex(364,680,385,596,405,537);
endShape();beginShape(); //右风衣
vertex(475,515);
bezierVertex(494,519,486,516,499,525);
bezierVertex(529,541,512,527,545,562);
bezierVertex(568,529,558,541,582,513);
bezierVertex(587,530,597,542,623,530);
bezierVertex(596,564,580,576,559,608);
bezierVertex(545,629,532,633,519,623);
bezierVertex(538,679,546,699,559,755);
bezierVertex(547,770,533,778,507,783);
bezierVertex(493,718,455,640,461,549);
endShape();stroke(122,20,130); //风衣右衣襟上
strokeWeight(2);
beginShape();
vertex(478,516);
bezierVertex(485,526,483,521,491,535);
bezierVertex(481,551,486,545,473,563);
endShape();beginShape(); //风衣右衣襟下
vertex(463,550);
bezierVertex(484,581,473,565,495,594);
bezierVertex(477,650,491,612,474,663);
endShape();beginShape(); //风衣左衣襟上
vertex(398,517);
bezierVertex(384,532,393,523,380,537);
bezierVertex(381,553,380,547,383,563);
endShape();beginShape(); //风衣左衣襟下
vertex(397,555);
bezierVertex(370,571,386,560,362,580);
bezierVertex(364,602,370,625,376,647);
endShape();}function keyPressed() {if (keyCode == 32) //spaceisChangeColor=!isChangeColor;
}</script>
</body>
</html>
感谢观看~~
p5.js 我的第一幅码绘——小丑相关推荐
- 1.5 开始第一幅“码绘”——自定变量与函数，创一招“懵逼表情涂”
引言--想要重复绘制内容应该怎么办? 目前我们已经清晰地理解了如何用代码绘制1个懵逼脸. 现在升级一点难度,考虑一个问题: 如果要在屏幕上不同位置画N个懵逼脸,怎么办? 若采用之前一样的方法,我们可以 ...
- 用p5.js实现的码绘与手绘的比较（动态）
用p5.js实现的码绘与手绘的比较(动态) 上篇:用p5.js实现的码绘与手绘的比较(静态)https://blog.csdn.net/wangyouxu24/article/details/8433 ...
- p5.js之数媒logo（码绘1）
一.开发环境: window10.火狐浏览器63.0.3.vs code1.28.2 二.应用框架: p5.js 三.开发背景: 近日学习p5.js稍有所得,想利用此框架绘出一幅自己的作品,便以学院l ...
- 雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
- 码绘VS手绘（二）动态绘图
码绘VS手绘(二)动态绘图 一.前言 二.实验内容 (一)主题 (二)实验结果 1.码绘 最终效果 程序结构 具体函数解析 2.手绘 三.总结--编程与手绘的比较 1.工具和载体 2.技法 3.理念 ...
- 手绘VS码绘——动态篇（视觉错觉）
前言 在介绍这次的实验前,先让我们看看一组图片: 相信大家看完这组图片已经有点难受的想点一下右上角的X了,其实不止你们,我在写这篇文章的时候也想关掉它-- 接下来我就按照正常的介绍流程告诉大家,这些图 ...
- 手绘 v.s. 码绘（1.2 实践报告）
目标 多角度比较手绘与码绘:技法.工具.理念.创作体验.呈现效果.载体.局限性.应用-- 思考深刻,理论完善,参考资料详实规范,必须引用文末的参考文章 使用各种论证方法,体现严谨清晰的逻辑 按时间线对 ...
- p5js动态交互式码绘作业二小结
p5js码绘小律老师作业二之动态码绘+交互功能 实验截图: 码绘由程序动态完成 用户可以用鼠标交互的直接画出带点的线条 手绘照片: 真的是码绘五分钟手绘两小时还不止!!!!这局计算机完胜了!!!! 码 ...
- 码绘VS手绘（一） 编程与手绘的对比
前言 本文主要讲解在静态图方面如何分别通过手绘和码绘两种方式来表现,以及它们之间的差异与联系,谨以此博客记录学习过程.博主新手一枚,这是博主第一次写博文,若有不足之处,还请温柔拍打~~(笔芯~~) 手 ...
最新文章
- Go 学习笔记（45）— Go 标准库之 flag（命令行参数解析）
- c# hdf5 写string_聊一聊C#8.0中的 await foreach
- element菜单默认展开和选中
- SpringBoot | 自动配置原理
- .NET和Android解压缩处理
- [css] 举例说明你知道的css技巧有哪些？
- 常用算法以及加密工具
- [BJOI2017]树的难题 点分治，线段树合并
- 第九届河南省程序设计大赛-----表达式求值-------递归+模拟
- word排版字体选用
- SQLite数据库锁机制研究
- 信息系统项目管理师计算题（进度管理总浮动时间、自由浮动时间、工期）
- FS\OFS\RS\ORS的使用
- 系统学习——Bootstrap
- 有哪些在成都开了 20 年以上的味道不错的小饭馆
- 从赛马游戏看CyclicBarrier，从斗地主看CountDownLatch
- SQL必知必会笔记（上）
- 华为占据折叠手机市场半数份额，证明它在高端市场的地位无可替代
- 接口限流：限制接口的访问频率
- 学会这一招，轻松玩转小程序自动化