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);
else
translate(-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); //脸轮廓2
strokeWeight(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) //space
isChangeColor=!isChangeColor;
}
</script>
</body>
</html>感谢观看~~
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
