运用p5.js实现王一博q版形象
2024-04-20 11:28:56
创意编程——卡通自画像设计
- 展示成果
- 创作灵感
- 交互代码
- 生成动态代码
- 所有代码
展示成果
静态：
gif：
创作灵感
这次题目是自画像、自己喜欢的事物，所以我选取了自己喜欢的一个q版形象进行模仿。以下是原图：
因为要加上动态和交互，于是我给人物的眼睛、手脚加上动态效果，鼠标点击改变衣服颜色进行交互。
交互代码
// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;function mousePressed() {// Check if mouse is inside the circlelet d = dist(mouseX, mouseY, 110,85);if (d < 25) {// Pick new random color valuesr = random(255);g = random(255);b = random(255);}let d1 = dist(mouseX, mouseY, 110,150);if (d1 < 25) {// Pick new random color valuesr1 = random(255);g1 = random(125);b1 = random(255);}let d2 = dist(mouseX, mouseY, 110,215);if (d2 < 25) {// Pick new random color valuesr2 = random(255);g2 = random(255);b2 = random(255);}let d3 = dist(mouseX, mouseY, 110,280);if (d3 < 25) {// Pick new random color valuesr3 = random(255);g3 = random(255);b3 = random(100);}let d4 = dist(mouseX, mouseY, 800,800);if(d4<800){// Pick new random color valuesr = 58;g = 46;b = 57;r1 = 106;g1 = 82;b1 = 77;r2= 210;g2 =188;b2= 230;r3 = 13;g3 = 27;b3 = 44;}}
function setup() {createCanvas(800,800);r = random(255);g = random(255);b = random(255);r1 = random(255);g1 = random(255);b1= random(255);r2 = random(255);g2 = random(255);b2= random(255);r3 = random(255);g3 = random(255);b3= random(255);
}
生成动态代码
let ang1 = radians(angle1);let ang2 = radians(angle2);let x1 =3*cos(ang1);let x2=cos(ang1);let x4=sin(ang1);let x3 =3*sin(ang1+100);所有代码
// When the user clicks the mouse
let angle1 = 0;
let angle2 = 0;
let scalar = 70;function mousePressed() {// Check if mouse is inside the circlelet d = dist(mouseX, mouseY, 110,85);if (d < 25) {// Pick new random color valuesr = random(255);g = random(255);b = random(255);}let d1 = dist(mouseX, mouseY, 110,150);if (d1 < 25) {// Pick new random color valuesr1 = random(255);g1 = random(125);b1 = random(255);}let d2 = dist(mouseX, mouseY, 110,215);if (d2 < 25) {// Pick new random color valuesr2 = random(255);g2 = random(255);b2 = random(255);}let d3 = dist(mouseX, mouseY, 110,280);if (d3 < 25) {// Pick new random color valuesr3 = random(255);g3 = random(255);b3 = random(100);}let d4 = dist(mouseX, mouseY, 800,800);if(d4<800){// Pick new random color valuesr = 58;g = 46;b = 57;r1 = 106;g1 = 82;b1 = 77;r2= 210;g2 =188;b2= 230;r3 = 13;g3 = 27;b3 = 44;}}
function setup() {createCanvas(800,800);r = random(255);g = random(255);b = random(255);r1 = random(255);g1 = random(255);b1= random(255);r2 = random(255);g2 = random(255);b2= random(255);r3 = random(255);g3 = random(255);b3= random(255);
}function draw() {background(255);/帽子/beginShape();textSize(20);fill(r, g, b); text('帽子:',30,90);ellipse(110, 85, 50, 50);stroke(0,0,0);
strokeWeight(6);vertex(209,262);bezierVertex(239,12,534,37,557,258);bezierVertex(453,144,279,167,209,262);endShape();beginShape();
fill(r, g, b);vertex(210,259);
bezierVertex(298,145,497,156,560,271);
bezierVertex(559,317,561,294,545,350);
bezierVertex(467,243,311,232,228,339);
bezierVertex(216,317,205,292,208,270);
endShape();noFill();beginShape();
vertex(264,214);
bezierVertex(255,187,253,169,260,139);
endShape();beginShape();
vertex(310,193);
bezierVertex(300,161,300,138,307,100);
endShape();beginShape();
vertex(363,85);
bezierVertex(369,121,372,131,371,181);
endShape();beginShape();vertex(419,88);
bezierVertex(431,126,431,147,423,186);
endShape();beginShape();
vertex(479,115);
bezierVertex(492,146,494,175,480,203);
endShape();beginShape();
vertex(530,173);
bezierVertex(535,195,533,213,526,230);
endShape();beginShape();
vertex(209,262);
bezierVertex(203,297,207,312,227,341);
endShape();beginShape();
vertex(557,258);
bezierVertex(565,297,558,315,545,341);
endShape();beginShape();
vertex(237,337);
bezierVertex(299,240,462,236,532,339);
endShape();beginShape();
vertex(229,240);
bezierVertex(224,267,232,282,248,320);
endShape();beginShape();
vertex(276,207);
bezierVertex(272,240,272,250,286,291);
endShape();beginShape();
vertex(326,187);
bezierVertex(329,218,328,239,334,269);
endShape();beginShape();
vertex(383,182);
bezierVertex(385,212,384,231,384,262);
endShape();beginShape();
vertex(445,190);
bezierVertex(445,223,440,244,430,269);
endShape();beginShape();
vertex(490,207);
bezierVertex(492,243,492,259,471,284);
endShape();beginShape();
vertex(542,244);
bezierVertex(542,282,539,292,515,318);
endShape();///耳朵脸beginShape();strokeWeight(0);fill(253,245,239);
vertex(399,437);
bezierVertex(345,379,281,471,371,474);
bezierVertex(478,480,491,373,401,422);
endShape();beginShape();fill(255, 245, 238);strokeWeight(0);
vertex(236,342);
bezierVertex(269,242,506,232,523,341);
bezierVertex(470,352,343,337,261,345);vertex(249,330);vertex(522,330);vertex(530,403);vertex(249,395);
endShape();beginShape();fill(255, 245, 238);stroke(170,128,126);strokeWeight(3);endShape();
beginShape();
vertex(252,340);
bezierVertex(186,316,215,426,269,410);
endShape();beginShape();
vertex(515,345);
bezierVertex(579,313,559,421,501,407);
endShape();beginShape();
vertex(261,393);
bezierVertex(294,479,488,468,509,389);
endShape();beginShape();fill(238,212,202);
vertex(260,368);
bezierVertex(240,345,213,391,262,399);
endShape();beginShape();
vertex(512,366);
bezierVertex(556,345,535,405,506,393);
endShape();beginShape();
vertex(262,315);
bezierVertex(260,326,260,340,269,364);
endShape();beginShape();
vertex(249,336);
bezierVertex(256,350,256,353,269,364);
endShape();beginShape();
vertex(385,263);
bezierVertex(365,286,367,299,388,319);
endShape();beginShape();
vertex(429,269);
bezierVertex(400,287,385,303,388,319);
endShape();beginShape();
vertex(429,269);
bezierVertex(425,300,456,328,505,316);
endShape();beginShape();
vertex(505,316);
bezierVertex(505,342,505,353,498,365);
endShape();beginShape();
vertex(515,345);
bezierVertex(508,359,513,353,498,365);
endShape();///眉毛/stroke(72,34,33);line(294,292,350,300);line(294,293,350,301);line(294,295,350,301);line(294,297,350,303);line(294,296,350,302);line(294,298,350,304);line(294,300,350,305);line(294,301,350,305);line(410,301,435,295);line(410,302,435,296);line(410,303,435,297);line(410,304,435,298);line(410,305,435,299);line(410,300,435,294);line(410,299,435,293);/头发textSize(20);fill(r1, g1, b1); strokeWeight(0);text('头发：',30,160);ellipse(110, 150, 50, 50);beginShape();
fill(107,83,78);fill(r1, g1, b1);
strokeWeight(4);
stroke(61,30,25);
vertex(378,266);
bezierVertex(367,280,368,315,420,340);
bezierVertex(400,296,416,257,384,254);
endShape();beginShape();
vertex(411,266);
bezierVertex(424,317,490,333,514,327);
bezierVertex(466,313,485,264,439,266);
endShape();vertex(472,276);
bezierVertex(484,306,497,314,522,326);
bezierVertex(517,305,493,282,494,285);
endShape();
beginShape();
vertex(405,259);
bezierVertex(408,281,414,292,428,311);
bezierVertex(429,297,437,270,404,253);
endShape();
beginShape();
vertex(509,305);
bezierVertex(501,331,518,340,495,371);
bezierVertex(521,340,526,340,523,314);
endShape();
beginShape();
vertex(247,314);
bezierVertex(279,315,301,309,307,272);
endShape();beginShape();
vertex(238,325);
bezierVertex(243,343,248,355,263,373);
bezierVertex(260,338,267,339,269,294);
endShape();//衬衫外套///strokeWeight(0);textSize(20);fill(r2, g2, b2); strokeWeight(0);text('外套：',30,225);ellipse(110, 215, 50, 50);beginShape();fill(229,203,238);fill(r2, g2, b2); vertex(292,467);vertex(306,514);vertex(301,559);vertex(292,563);vertex(253,497);endShape();beginShape();
vertex(473,464);vertex(515,496);vertex(476,555);vertex(466,532);vertex(473,464);endShape();line(443,444,476,468);line(449,443,476,466);strokeWeight(3);stroke(0,0,0);line(443,445,475,465);beginShape();stroke(49,32,35);strokeWeight(2);
vertex(372,609);
bezierVertex(371,569,364,541,327,448);
bezierVertex(314,451,308,455,293,465);
bezierVertex(300,491,303,516,301,536);
bezierVertex(302,556,302,574,294,595);
bezierVertex(321,606,344,613,372,609);
endShape();beginShape();
vertex(443,444);
bezierVertex(411,477,400,507,398,609);
bezierVertex(426,609,451,605,473,599);
bezierVertex(470,567,470,547,467,524);
bezierVertex(471,500,472,484,476,468);endShape();line(293,465,253,494);
line(253,494,291,565);
line(267,485,300,551);
line(291,565,299,560);line(477,466,515,497);
line(515,497,476,552);
line(505,489,469,543);
line(476,552,469,545);line(326,446,318,448);line(318,448,313,495);line(313,495,347,503);line(336,500,324,524);line(324,524,365,558);line(349,565,360,565);line(349,580,360,580);
line(453,449,454,495);line(454,495,410,502);line(430,499,446,527); line(446,527,403,555);
line(417,548,417,610);strokeWeight(9);stroke(255,255,255);line(408,569,408,569);line(408,590,408,590);stroke(0,0,0);strokeWeight(2);T恤///noFill();beginShape();
vertex(335,466);
bezierVertex(371,475,401,474,424,467);
endShape();beginShape();
vertex(340,480);
bezierVertex(372,487,396,488,418,480);
endShape();line(350,501,412,501);line(362,540,403,540);line(364,545,402,545);///下摆//
beginShape();
vertex(292,616);
bezierVertex(371,636,403,633,475,617);
endShape();line(295,598,291,616);line(473,598,476,616);
//裤子let ang1 = radians(angle1);let ang2 = radians(angle2);let x1 =3*cos(ang1);let x2=cos(ang1);let x4=sin(ang1);let x3 =3*sin(ang1+100);strokeWeight(0);textSize(20);fill(r3, g3, b3); strokeWeight(0);text('裤子：',30,290);ellipse(110, 280, 50, 50); beginShape();stroke(63,40,41);fill(4,26,44);fill(r3, g3, b3); strokeWeight(2);
vertex(296,614);
bezierVertex(297,630,296,643,299-x1,674);
bezierVertex(328,673-2*x1,346,675,370-x1/2,674);
bezierVertex(370,652,372,639,378,618);
bezierVertex(388,652,386,661,388-x3,673);
bezierVertex(430,673-2*x3,412,675,462-x3/2,673);
bezierVertex(464,651,468,632,469,619);
endShape();//腿fill(257,247,239);stroke(215,151,137);strokeWeight(3);
beginShape();
vertex(313-x1,675);
bezierVertex(314,696+2*x1,347,704+2*x1,359+x1,675);
endShape();beginShape();
vertex(404-x3,676);
bezierVertex(415,705+2*x3,444,707+2*x3,455+x3,676);
endShape();胳膊/beginShape();
vertex(257-x1,508-x1);
bezierVertex(230-x1,525-x1,220-x1,537-x1,233-x1,552-x1);
bezierVertex(248-x1,579-x1,266-x1,577-x1,287-x1,557-x1);
endShape();beginShape();
vertex(480+x3,549-x3);
bezierVertex(508+x3,582-x3,523+x3,575-x3,541+x3,563-x3);
bezierVertex(549+x3,542-x3,535+x3,527-x3,509+x3,507-x3);
endShape();angle1 += 10;/眼睛鼻子嘴stroke(224,154,151);
beginShape();
noFill();
strokeWeight(3);
vertex(283,348);
bezierVertex(284,396,329,376,343,376);
endShape();beginShape();
noFill();
strokeWeight(2);
vertex(282,346);
bezierVertex(284,396,329,376,343,376);
endShape();beginShape();
noFill();
strokeWeight(2);
vertex(281,348);
bezierVertex(284,396,329,376,343,376);
endShape();beginShape();
noFill();
strokeWeight(2);
vertex(284,348);
bezierVertex(284,396,329,376,343,376);
endShape();beginShape();
noFill();
strokeWeight(2);
vertex(280,348);
bezierVertex(284,396,329,376,343,376);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,490,345);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,491,345);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,492,345);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,493,345);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,488,345);
endShape();beginShape();
vertex(423,372);
bezierVertex(462,386,487,383,489,345);
endShape();stroke(72,34,33);
beginShape();noFill();strokeWeight(9);
vertex(355,341);
bezierVertex(324,321,290,322,276,354);
endShape();beginShape();noFill();strokeWeight(9);
vertex(495,353);
bezierVertex(487,325,456,316,413,341);
endShape();strokeWeight(2);beginShape();
fill(64,32,24);
vertex(301,330);
bezierVertex(280,393,359,395,342,330);
endShape();beginShape();
vertex(423,335);
bezierVertex(406,381,488,404,465,324);
endShape();noFill();stroke(214,154,143);
beginShape();
vertex(269,347);
bezierVertex(280,322,312,314,342,326);
endShape();stroke(109,91,91);beginShape();
vertex(425,327);
bezierVertex(467,308,493,319,507,355);
endShape();beginShape();fill(204,159,113);
vertex(303-x2,363+x2/2);strokeWeight(3);
bezierVertex(321-x2,375+x2/2,319-x2,380+x2/2,337-x2,364+x2/2);strokeWeight(3);endShape();beginShape();
vertex(427-x2,359+x2/2);
bezierVertex(447-x2,379+x2/2,453-x2,370+x2/2,466-x2,358+x2/2);
endShape();stroke(237,204,172);
line(461,354,465,354);
line(461,350,465,350);line(336,354,340,354);
line(336,350,340,350);
strokeWeight(6);
stroke(255,255,255);
line(304,340+x2,308,338+x2);
line(425,343+x2,429,340+x2);stroke(173,104,069);strokeWeight(14);line(323,352,323,352);line(444,350,444,350);stroke(72,34,33);
strokeWeight(2);
noFill();line(389,370,389,374);
line(387,370,389,374);stroke(72,34,33);
beginShape();
vertex(366,407);
bezierVertex(378,402,400,402,416,405);
endShape();beginShape();fill(247,192,188);strokeWeight(0);
vertex(278,400);
bezierVertex(287,413,345,415,344,398);
bezierVertex(333,383,285,382,279,397);
endShape();beginShape();
vertex(426,396);
bezierVertex(435,417,482,417,490,394);
bezierVertex(481,375,442,378,426,398);
endShape();}
运用p5.js实现王一博q版形象相关推荐
- P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
- 最新天选姬Q版桌宠V2.3+比原版更可爱
正文: 天选姬2.3一款Q版桌宠 Q版形象比原版更可爱 [资源说明]Windows通用 [资源名称]:天选姬 [资源版本]:2.3.1 [资源大小]:66.1m [测试机型]:win10 程序: ww ...
- 【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像 来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧 我的实验过程: 手 ...
- p5.js创意编程——Q版人像绘制
目录 主要函数介绍 贝塞尔曲线 Shape frameRate 完整代码 实现效果 主要函数介绍 贝塞尔曲线 如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
- p5.js 临摹作品“随鼠标转动的三角形”及自主作品“太阳花”
太阳花(自己的作品) 最近正在上互动媒体技术这门课,应作业要求用p5.js画了简笔画,好吧,不是很好看,但是在这个过程中,我还是学到了很多. 课上,我们看过一些影片,记忆最深刻的就是关于达芬奇的,他因 ...
- p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程 走过的弯路 拓展 总结 动态图形的规律分析 从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
- 绘画系统的简单实现（p5.js）
绘画定义 搜狗词条给了"绘画"一个很有意思的词----"猴子的艺术",这是在中世纪的欧洲这样形容的,我觉得十分地贴切,因为如同猴子喜欢模仿人类活动一样,绘画也是 ...
- 用P5 JS绘制二维动画场景——静态篇
绘画 根据wiki百科的定义,绘画是在技术层面上,是一个以表面作为支撑面,再在其之上加上颜色的行为,那些表面可以是纸张.油画布.木材.玻璃.漆器或混凝土等,加颜色的工具可以是画笔.也可以是刀.海绵或是 ...
- 用p5.js实现动态形状笔刷
用p5.js实现动态创意画板 跟之前两篇文章有关联的是,这次也是为了互动媒体大作业写了一篇博客. 这次的作业内容是编写一个绘画系统,提供一系列绘画颜料给用户操作,这颜料可以是画笔.颜料或者滤镜的形式, ...
最新文章
- python编程入门经典实例-总算明了python编程入门经典实例
- 华为手机如何关闭通知栏推送消息_如果华为手机升级EMUI10后，电池耗电很快！要记得调整这3个设置...
- python excelwriter保存路径_python管理文件神器 os.walk
- SAP UI5 app view router - Haiji's application
- 如何实现单链表交换任意两个元素（不包括头结点）
- 以下哪些组件是Oracle,Oracle考试题1参考
- PAT (Basic Level) Practice1023 组个最小数
- windows系统文件和dll文件
- 【老生谈算法】matlab实现图像复原算法源码——图像复原
- java byte数组转long型
- nltk学习之统计词频和分词nltk.word_tokenize nltk.FreqDist
- 第三百篇博客：写给自己的总结
- 爱国者曲敬东:平板厂商要学会靠内容增值
- 低成本佐川泽川圣安变频器设计方案ZC600量产VF80源代码原理图PCB
- 100本软件开发最佳书籍排行榜
- origin Pro 9.0画多条三维折线图（此处以两条为例）
- unity背景设置透明，显示ios原生ui背景
- opencv颜色识别-红色
- BUUCTF黑客帝国
- 适合医院、诊所、乡镇卫生院使用的门诊管理系统