p5.js之Q版人物绘制
2024-05-25 22:23:43
头上不知是鹿角还是蝴蝶的Q版小人：
完整代码：
function setup() {createCanvas(800, 700);}function draw() {background(255);//背景粉红色fill(255, 134, 128);ellipse(403,419,600,500);//脸部大体颜色strokeWeight(0);fill(254, 224, 178);ellipse(415, 243, 310);//头发大体颜色strokeWeight(0);fill(134, 73, 19);ellipse(275, 260, 100);ellipse(345, 255, 85);strokeWeight(4);fill(134, 73, 19);//头发颜色//头发上半部分beginShape();vertex(200, 236);bezierVertex(249, 227, 225, 29, 461, 69);bezierVertex(445, 38, 494, 44, 509, 88);bezierVertex(601, 74, 646, 214, 584, 286);endShape();fill(254, 224, 178);//耳朵颜色//耳朵弧线beginShape();vertex(552, 263);bezierVertex(605, 248, 601, 351, 536, 343);endShape();//脸弧线beginShape();vertex(291, 332);bezierVertex(224, 413, 455, 430, 534, 343);endShape();strokeWeight(8);fill(99, 30, 0);//眼睛颜色//眼睛//眉毛beginShape();vertex(408, 294);bezierVertex(435, 272, 471, 285, 489, 305);endShape();beginShape();vertex(288, 322);bezierVertex(305, 297, 327, 294, 348, 311);endShape();strokeWeight(0);ellipse(325, 326, 46);ellipse(310, 335, 21);//左眼睛strokeWeight(0);fill(177, 120, 49);ellipse(333, 343, 11);ellipse(324, 343, 13);strokeWeight(4);fill(99, 30, 0);beginShape();vertex(343, 307);bezierVertex(351, 317, 351, 337, 337, 350);endShape();fill(254, 224, 178);beginShape();vertex(300, 346);bezierVertex(318, 342, 335, 348, 347, 357);endShape();fill(99, 30, 0);beginShape();vertex(302, 344);bezierVertex(299, 330, 299, 322, 304, 305);endShape();//内部fill(177, 120, 49);strokeWeight(0);beginShape();vertex(305, 344);bezierVertex(315, 324, 338, 323, 342, 340);endShape();ellipse(333, 338, 16);fill(255);ellipse(310,317,7);//右眼睛fill(99, 30, 0);strokeWeight(4);beginShape();vertex(436, 284);bezierVertex(418, 303, 419, 325, 434, 344);bezierVertex(449, 349, 463, 348, 482, 340);bezierVertex(487, 320, 489, 304, 468, 287);endShape();//内部fill(177, 120, 49);strokeWeight(0);beginShape();vertex(440, 344);bezierVertex(445, 320, 469, 314, 483, 317);endShape();ellipse(466, 331, 25);ellipse(447, 339, 10);ellipse(452, 339, 10);ellipse(479, 323, 12);beginShape();vertex(440, 343);bezierVertex(455, 347, 470, 344, 479, 334);endShape();beginShape();vertex(471, 342);bezierVertex(480, 341, 490, 330, 483, 316);endShape();fill(255);ellipse(431,306,8);//嘴巴strokeWeight(2);beginShape();fill(200, 82, 47);if (mouseX <= 371) {if (mouseY <= 374){fill(200, 82, 47);vertex(371 - (371 - mouseX) / 25, 374);bezierVertex(377, 350, 397, 369, 396, 378);bezierVertex(385, 384 + (mouseY - 377) / 15, 377, 377 + (mouseY - 377) /
15, 371 - (371 - mouseX) / 25, 375);endShape();}else{fill(200, 82, 47);vertex(371 - (371 - mouseX) / 25, 374);bezierVertex(377, 350, 397, 369, 396, 378);bezierVertex(385, 384 + (mouseY - 377) / 15, 370, 377 + (mouseY - 377) /
15, 371 - (371 - mouseX) / 25 , 375);endShape();//牙齿beginShape();fill(255);vertex(375, 367);bezierVertex(380, 372, 383, 372, 391, 367);endShape();}}else{if (mouseY <= 374) {fill(200, 82, 47);vertex(371, 374);bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);bezierVertex(385, 382 + (mouseY - 377) / 20, 377, 377 + (mouseY - 377) /
20, 371, 375);endShape();}else {fill(200, 82, 47);vertex(371, 374 );bezierVertex(377, 350, 397, 369, 396 + (mouseX - 371) / 100, 378);bezierVertex(388, 382 + (mouseY - 377) / 20, 370, 377 + (mouseY - 377) /
20, 371, 375);endShape();//牙齿beginShape();fill(255);vertex(375, 367);bezierVertex(380, 372, 383, 372, 391, 367);endShape();}}//beginShape();//fill(255);//vertex(375, 367);//bezierVertex(380, 372, 383, 372, 391, 367);//endShape();strokeWeight(4);//头发下半部分fill(134, 73, 19);//头发颜色line(200, 236, 228, 240);beginShape();vertex(228, 240);bezierVertex(209, 280, 234, 326, 273, 340);bezierVertex(266, 326, 262, 314, 265, 296);endShape();beginShape();vertex(262, 315);bezierVertex(277, 356, 292, 349, 287, 309);endShape();beginShape();vertex(278, 277);bezierVertex(231, 330, 289, 329, 327, 272);bezierVertex(292, 305, 315, 355, 412, 244);bezierVertex(361, 322, 452, 314, 491, 236);bezierVertex(485, 329, 526, 328, 538, 255);bezierVertex(557, 299, 568, 278, 554, 235);endShape();//衣服strokeWeight(4);fill(108,106,103);beginShape();vertex(487, 379);bezierVertex(548, 402, 608, 587, 559, 568);bezierVertex(564, 623, 481, 610, 420, 639);endShape();//脸上腮红strokeWeight(0);fill(241, 153, 108);ellipse(307, 359, 30, 20);fill(255);ellipse(315, 355, 4);fill(241, 153, 108);ellipse(479, 354, 35, 25);fill(255);ellipse(488, 346, 4);//熊/兔子if (mouseButton == LEFT){strokeWeight(4);//外圈头fill(255);beginShape();vertex(279, 357);bezierVertex(230, 270, 210, 350, 248, 429);bezierVertex(115, 698, 663, 675, 475, 430);bezierVertex(510, 280, 450, 300, 410, 397);bezierVertex(369, 404, 281, 405, 278, 356);endShape();//兔子耳朵内侧strokeWeight(0);fill(229, 137, 152);beginShape();vertex(260, 415);bezierVertex(227, 330, 267, 330, 284, 398);endShape();beginShape();vertex(425, 405);bezierVertex(465, 310, 490, 320, 460, 420);endShape();//两只眼睛strokeWeight(4);fill(0);ellipse(300, 492, 13, 16);ellipse(348, 496, 13, 16);fill(229, 137, 152);strokeWeight(3);//兔子鼻子嘴巴fill(0);ellipse(319, 524, 25, 18);line(318, 533, 317, 545);fill(192, 115, 112);beginShape();vertex(290, 540);bezierVertex(312, 540, 326, 542, 345, 545);bezierVertex(345, 590, 290, 650, 290, 540);endShape();//兔子腮红strokeWeight(0);fill(199,145,161);ellipse(385, 534, 45, 22);ellipse(261, 524, 40, 20);}else{strokeWeight(4);fill(117, 52, 21);beginShape();vertex(279, 357);bezierVertex(235, 345, 206, 415, 248, 429);bezierVertex(115, 698, 663, 675, 485, 430);bezierVertex(511, 369, 433, 327, 410, 397);bezierVertex(369, 404, 281, 405, 278, 356);endShape();fill(89, 21, 4);beginShape();vertex(260, 415);bezierVertex(229, 397, 267, 361, 284, 398);endShape();beginShape();vertex(425, 411);bezierVertex(434, 372, 479, 380, 465, 430);endShape();fill(0);ellipse(294, 492, 13, 16);ellipse(363, 493, 13, 16);fill(249, 218, 190);strokeWeight(3);//ellipse(320, 541, 50, 60);beginShape();vertex(317, 492);bezierVertex(285, 505, 283, 546, 297, 566);bezierVertex(312, 593, 350, 588, 358, 559);bezierVertex(368, 530, 348, 486, 317, 492);endShape();beginShape();fill(0);vertex(306, 521);bezierVertex(313, 517, 323, 516, 335, 523);bezierVertex(337, 530, 330, 530, 317, 533);bezierVertex(314, 530, 303, 528, 306, 521);endShape();line(318, 533, 317, 551);line(317, 551, 308, 558);line(317, 551, 327, 559);}//衣服beginShape();strokeWeight(4);fill(108, 106, 103);vertex(500, 404);bezierVertex(489, 434, 470, 447, 447, 457);bezierVertex(445, 470, 458, 492, 458, 492);bezierVertex(490, 492, 521, 480, 535, 461);endShape();//衣服深色strokeWeight(0);fill(36, 41, 33);beginShape();vertex(484, 435);bezierVertex(470, 444, 461, 454, 447, 457);bezierVertex(450, 470, 450, 477, 459, 490);bezierVertex(481, 489, 482, 490, 498, 483);endShape();beginShape();vertex(520, 496);bezierVertex(523, 509, 524, 528, 518, 546);bezierVertex(553, 561, 538, 564, 570, 568);bezierVertex(584, 539, 568, 517, 566, 496);endShape();strokeWeight(4);fill(254, 224, 178);beginShape();vertex(446, 464);bezierVertex(423, 466, 397, 488, 377, 492);bezierVertex(350, 502, 361, 529, 390, 512);bezierVertex(414, 506, 439, 501, 455, 491);endShape();beginShape();vertex(240, 449);bezierVertex(223, 460, 218, 468, 225, 487);endShape();beginShape();vertex(239, 451);bezierVertex(253, 468, 251, 487, 225, 486);endShape();//鞋子fill(255);strokeWeight(0);ellipse(276, 606, 20);strokeWeight(4);beginShape();vertex(412, 587);bezierVertex(390, 599, 395, 630, 413, 638);endShape();beginShape();vertex(411, 587);bezierVertex(430, 590, 445, 644, 413, 638);endShape();beginShape();vertex(412, 587);bezierVertex(420, 603, 424, 625, 420, 630);endShape();strokeWeight(0);ellipse(278, 593, 30);ellipse(268, 580, 17);ellipse(289, 604, 20);strokeWeight(4);beginShape();vertex(261, 569);bezierVertex(260, 593, 262, 594, 272, 619);endShape();beginShape();vertex(261, 569);bezierVertex(268, 568, 283, 587, 282, 598);endShape();beginShape();vertex(272, 574);bezierVertex(291, 582, 299, 595, 304, 610);endShape();line(272, 619, 304, 610);//衣服深色strokeWeight(4);fill(42, 39, 31);line(520, 547, 558, 568);//头上高光strokeWeight(0);fill(255);ellipse(269, 182, 20);beginShape();vertex(275, 167);bezierVertex(289, 121, 328, 95, 341, 95);bezierVertex(400, 78, 387, 106, 361, 108);bezierVertex(316, 120, 290, 153, 282, 167);endShape();//鹿角strokeWeight(0);fill(246,204,37);var t = cos(millis() / 60) ;beginShape();vertex(551, 151);bezierVertex(750 + 10 * t, 120 + 40 * t, 697 + 50 * t, 54, 572 + 5 * t,
138 + 5 * t);bezierVertex(618 + 10 * t, 98 + 20 * t, 599 + 10 * t, 60 + 10 * t, 552,
151);endShape();beginShape();vertex(268, 101);bezierVertex(86 - 10 * t, 72 + 40 * t, 180 - 50 * t, 29, 258 - 10 * t,
90 + 2 * t);bezierVertex(202 - 10 * t, 49 + 20 * t, 258 - 10 * t, -3 + 10 * t, 268 ,
101);endShape();}用到函数：
1、贝塞尔曲线：bezierVertex()
beginShape();
vertex(288, 322);
bezierVertex(305, 297, 327, 294, 348, 311);
endShape();2、画圆/椭圆：
ellipse(324,343, 13);
ellipse(385,534, 45, 22);3、画直线：
line(272, 619, 304, 610);4、使用时间：
var t = cos(millis() / 60) ;几个动态和交互：
1、晃动的鹿角：主要使用时间，用cos将时间变为周期函数，从而鹿角周期运动。
//鹿角
strokeWeight(0);
fill(246,204,37);
var t = cos(millis() / 60) ;
beginShape();
vertex(551, 151);
bezierVertex(750 + 10 * t, 120 + 40 * t, 697 + 50 * t, 54, 572 + 5 * t,
138 + 5 * t);
bezierVertex(618 + 10 * t, 98 + 20 * t, 599 + 10 * t, 60 + 10 * t, 552,
151);
endShape();
beginShape();
vertex(268, 101);
bezierVertex(86 - 10 * t, 72 + 40 * t, 180 - 50 * t, 29, 258 - 10 * t,
90 + 2 * t);
bezierVertex(202 - 10 * t, 49 + 20 * t, 258 - 10 * t, -3 + 10 * t, 268 ,
101);
endShape();
2、随着鼠标变大小的嘴巴，牙齿也在变化哦！
//嘴巴strokeWeight(2);beginShape();fill(200, 82, 47);if (mouseX <=
371) {if (mouseY <= 374){fill(200, 82, 47);vertex(371 - (371 - mouseX) / 25,
374);bezierVertex(377, 350, 397, 369,
396, 378);bezierVertex(385, 384 + (mouseY - 377) / 15,
377, 377 + (mouseY - 377) / 15, 371 - (371 - mouseX) / 25, 375);endShape();}else{fill(200, 82, 47);vertex(371 - (371 - mouseX) / 25,
374);bezierVertex(377, 350, 397, 369, 396,
378);bezierVertex(385, 384 + (mouseY -
377) / 15, 370, 377 + (mouseY - 377) / 15, 371 - (371 - mouseX) / 25 , 375);endShape();//牙齿beginShape();fill(255);vertex(375, 367);bezierVertex(380, 372, 383, 372,
391, 367);endShape();}}else{if (mouseY <= 374) {fill(200, 82, 47);vertex(371, 374);bezierVertex(377, 350, 397, 369,
396 + (mouseX - 371) / 100, 378);bezierVertex(385, 382 + (mouseY -
377) / 20, 377, 377 + (mouseY - 377) / 20, 371, 375);endShape()}else {fill(200, 82, 47);vertex(371, 374 );bezierVertex(377, 350, 397, 369,
396 + (mouseX - 371) / 100, 378);bezierVertex(388, 382 + (mouseY -
377) / 20, 370, 377 + (mouseY - 377) / 20, 371, 375);endShape();//牙齿beginShape();fill(255);vertex(375, 367);bezierVertex(380, 372, 383, 372,
391, 367);endShape();}}
3、点击鼠标左键，布朗熊变可妮兔，再点击其他键变回布朗熊。
代码太长，上面有，就不重复贴了。
p5.js之Q版人物绘制相关推荐
- 【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像 来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧 我的实验过程: 手 ...
- q版地图制作软件_Flash动画的图形元件实例-Q版人物侧面行走
对于刚入门者而言,学会了基本图形的绘制之后,如何应用软件的各种动画补间功能,制作出具有表现力的动画,就需要更进一阶的知识技能了:那么,设计制作一个卡通人物的行走效果,如何从没有头绪的任务到变成有通用公 ...
- 动漫Q版人物头部怎么画？
虽然看起来简洁却不简单,同样要求准确的构图和精准的结构,面部是人物的主要视点,通过这一部分能够表现出人物的情绪和性格,想要准确的画出动漫人物的头部,就要先了解人体头部骨骼的结构,今天和小编一起来了解一 ...
- flash人物原地走路_Flash动画的图形元件实例-Q版人物侧面行走
对于刚入门者而言,学会了基本图形的绘制之后,如何应用软件的各种动画补间功能,制作出具有表现力的动画,就需要更进一阶的知识技能了:那么,设计制作一个卡通人物的行走效果,如何从没有头绪的任务到变成有通用公 ...
- 新手怎么画动漫Q版人物？教你如何画出比别人灵动的Q版人物！
如何画出比别人灵动的Q版人物?怎样才能画好Q版人物动作?画好Q版人物动作有哪些技巧?想必这些问题都是绘画初学者们比较伤脑筋的问题,那么到底怎样才能画好动漫Q版人物动作呢?今天灵猫课堂老师就在网络上收集 ...
- Q版人物绘画教程|怎么画萌萌的Q版角色
Q版人物绘画教程|怎么画萌萌的Q版角色,发一些Q版教程,有miku啊(๑°3°๑) 如果你的基础太薄弱,找不到绘画练习与学习的方向,一直停滞有各种系统的精品绘画学习课程,而且超级便宜,还有老师辅导学习 ...
- 绘画教程：教你画4头身Q版人物！
4头身Q版人物基本相当于正常头身比例的小孩子体型,但是从表情.动态.服饰上还是能够看出属于Q版角色. 4头身人物的体型可以画得较为写实,膝盖在腰部至脚底1/2的位置,小腿比大腿长一些能体现出人物的修长 ...
- 绘画学习遇到Q版人物不会画怎么办？那你看看这个！！！
Q版人物怎样画?怎样才能画好Q版人物?漫画中的Q版人物怎样画?学习绘画难吗?怎样才能学好绘画?想必这些都是绘画初学者们经常在想的问题吧,想要创造出一个Q版人物,但是却不知道怎样画? 那么今日收集整理了 ...
- p5.js创意编程——Q版人像绘制
目录 主要函数介绍 贝塞尔曲线 Shape frameRate 完整代码 实现效果 主要函数介绍 贝塞尔曲线 如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
- 在Q版人物设计时忌讳复杂的语言
一 般来说,Q版角色因为迷你的身高,不可能做太过复杂的动作,因此他们的动态往往是比较典型的标志性动作.换一种说法就是一般Q版角色所展示的动势往往是一 个运动的最终结果,而不像其他漫画角色那样用很多微妙 ...
最新文章
- JavaScript与TypeScript总结
- 六个大坑，把“伟大的产品”秒成了渣
- C#中将表示颜色的string转换成Color
- QT Creator应用程序开发——QT程序设计基本知识
- 文件系统应用笔记之一：FatFS在STM32F4上的移植
- [学习总结]6、Android异步消息处理机制完全解析，带你从源码的角度彻底理解
- 【ArcGIS|空间分析|网络分析】3 使用网络数据集查找最佳路径
- php string to xml,php 字符串如何转换成xml
- 2020年“泰迪杯”数据分析职业技能大赛A 题优秀报告：教育平台的线上课程智能推荐策略
- Word中如何输入花体数学字符
- LA4487 加权并查集
- 一个专业搬砖人的幻想：全国实现旬休制度
- 几个系统级崩溃问题和h5加载页面崩溃问题及解决方案
- ubuntu18.04无法安装最新显卡驱动解决办法
- Redis学习之srem命令
- Raft 一致性算法论文
- UVA 1647 Computer Transformation
- android锁屏软件开发,Android一键锁屏开发全过程
- 欧几里得距离转换（EDT）算法
- RTP H264 NAL