【码绘】p5.js画Q版自画像
2024-05-10 16:52:54
【码绘】p5.js画Q版自画像
来自互动媒体作业的实验二，这次没有采用processing，而选择了p5.js，原因是用p5.js的在线编辑实时浏览比较方便。
先看一下最后的成果吧
我的实验过程：
- 手绘画自画像
当然是画个自画像啦！本人狼人杀爱好者，其实最喜欢玩的是预言家（不怕被狼刀的预言家！），不过总觉得预言家画起来可能没什么特征，最后选择了另一个趣味性角色——丘比特。
来自奥林匹斯星传
我尝试了一下，我觉得我不行，十分不行。
修改图片
好的，事情已经完成一半了！
按照自己的亚子把图片修改一下
- 编写程序
先讲一下各个部位的实现，最后会有完整的代码
创建背景
function setup() { //setup函数，每次程序开始运行时执行一次，用于初始化。createCanvas(640, 480);angleMode(DEGREES);
} 脸
//脸fill(255, 245, 238);ellipse(300, 150, 80, 85);
头发
//刘海中fill(253, 229, 93);beginShape();vertex(270, 110);vertex(290, 140);vertex(315, 135);vertex(310, 100);endShape(CLOSE);//刘海右1beginShape();vertex(300, 120);vertex(340, 140);vertex(330, 110);vertex(300, 100);endShape(CLOSE);//刘海左1beginShape();vertex(280, 110);vertex(280, 140);vertex(260, 120);endShape(CLOSE);//左侧头发beginShape();vertex(260, 115);vertex(240, 250);vertex(260, 270);vertex(270, 120);endShape(CLOSE);beginShape();vertex(246, 140);vertex(235, 220);vertex(260, 250);endShape(CLOSE);//右侧头发beginShape();vertex(354, 140);vertex(380, 250);vertex(350, 275);vertex(338, 185);vertex(330, 160);endShape(CLOSE);beginShape();vertex(260, 190);vertex(270, 210);vertex(275, 180);endShape(CLOSE);fill(253, 229, 93);beginShape();vertex(340, 130);vertex(320, 190);vertex(335, 190);vertex(350, 130);endShape(CLOSE);//挑染fill(255, 161, 61);beginShape();vertex(265, 140);vertex(255, 200);vertex(260, 210);vertex(270, 120);endShape(CLOSE);//挑染fill(255, 161, 61);beginShape();vertex(347, 140);vertex(330, 190);vertex(335, 190);vertex(350, 130);endShape(CLOSE);beginShape();vertex(280, 125);vertex(290, 140);vertex(295, 139);endShape(CLOSE);五官
//眼睛fill(54, 54, 54);//右眼ellipse(317, 150, 10, 15);arc(330, 143, 25, 25, 170,180);arc(330, 146, 25, 25, 170,180);//左眼ellipse(285, 150, 10, 15);arc(273, 143, 25, 25, 0,10);arc(273, 146, 25, 25, 0,10);//红晕fill(255, 195, 103);beginShape();vertex(280, 160);vertex(275, 168);vertex(276, 168);vertex(281, 160);endShape(CLOSE);beginShape();vertex(278, 160);vertex(273, 168);vertex(274, 168);vertex(279, 160);endShape(CLOSE);beginShape();vertex(276, 160);vertex(271, 168);vertex(272, 168);vertex(277, 160);endShape(CLOSE);beginShape();vertex(282, 160);vertex(277, 168);vertex(278, 168);vertex(283, 160);endShape(CLOSE);beginShape();vertex(284, 160);vertex(279, 168);vertex(280, 168);vertex(285, 160);endShape(CLOSE);beginShape();vertex(324, 160);vertex(319, 168);vertex(320, 168);vertex(325, 160);endShape(CLOSE);beginShape();vertex(322, 160);vertex(317, 168);vertex(318, 168);vertex(323, 160);endShape(CLOSE);beginShape();vertex(320, 160);vertex(315, 168);vertex(316, 168);vertex(321, 160);endShape(CLOSE);beginShape();vertex(318, 160);vertex(313, 168);vertex(314, 168);vertex(319, 160);endShape(CLOSE);beginShape();vertex(316, 160);vertex(311, 168);vertex(312, 168);vertex(317, 160);endShape(CLOSE);
四肢
//手fill(255, 245, 238);ellipse(278, 205, 45, 20);ellipse(300, 200, 20, 30);ellipse(355, 203, 45, 20);ellipse(385, 200, 20, 25);//左腿fill(255, 245, 238);beginShape();vertex(264, 275);vertex(268, 290);vertex(245, 330);vertex(260, 360);vertex(285, 290);vertex(283, 275);endShape(CLOSE);//右腿beginShape();vertex(310, 275);vertex(314, 290);vertex(291, 330);vertex(306, 360);vertex(331, 290);vertex(329, 275);endShape(CLOSE);光圈
//光圈stroke(255, 250, 165);strokeWeight(3);noFill();ellipse(300, 100, 80, 40);
衣服
//裙子fill(111, 87, 111);beginShape();vertex(270, 250);vertex(260, 275);vertex(335, 280);vertex(335, 250);endShape(CLOSE);//衣服fill(0, 0, 0);triangle(310, 120, 260, 250, 350, 250);
弓箭
//弓箭stroke(180,129,41);strokeWeight(2);fill(180,129,41); stroke(0); line(325,107,325,293); line(310,100,340,110); line(310,300,340,290); line(340,110,360,120); line(340,290,360,280); line(360,120,370,130);line(360,280,370,270);line(370,130,376,140);line(370,270,376,260);line(376,140,380,150);line(376,260,380,250);line(380,150,387,190);line(380,250,387,210);line(387,190,387,210); stroke(180,129,41);strokeWeight(4);fill(180,129,41); stroke(0); line(310,205,420,205);stroke(255,44,28); fill(255,44,28); triangle( 422, 203, 422, 207,424, 205);完整源代码
function setup() {// put setup code herecreateCanvas(640, 480);angleMode(DEGREES);}function draw() {background(89, 222, 173);strokeWeight(0);//左腿fill(255, 245, 238);beginShape();vertex(264, 275);vertex(268, 290);vertex(245, 330);vertex(260, 360);vertex(285, 290);vertex(283, 275);endShape(CLOSE);//右腿beginShape();vertex(310, 275);vertex(314, 290);vertex(291, 330);vertex(306, 360);vertex(331, 290);vertex(329, 275);endShape(CLOSE);//裙子fill(111, 87, 111);beginShape();vertex(270, 250);vertex(260, 275);vertex(335, 280);vertex(335, 250);endShape(CLOSE);//衣服fill(0, 0, 0);triangle(310, 120, 260, 250, 350, 250);//头发fill(253, 229, 93);ellipse(300, 150, 110, 110);//脸fill(255, 245, 238);ellipse(300, 150, 80, 85);//刘海中fill(253, 229, 93);beginShape();vertex(270, 110);vertex(290, 140);vertex(315, 135);vertex(310, 100);endShape(CLOSE);//刘海右1beginShape();vertex(300, 120);vertex(340, 140);vertex(330, 110);vertex(300, 100);endShape(CLOSE);//刘海左1beginShape();vertex(280, 110);vertex(280, 140);vertex(260, 120);endShape(CLOSE);//左侧头发beginShape();vertex(260, 115);vertex(240, 250);vertex(260, 270);vertex(270, 120);endShape(CLOSE);beginShape();vertex(246, 140);vertex(235, 220);vertex(260, 250);endShape(CLOSE);//右侧头发beginShape();vertex(354, 140);vertex(380, 250);vertex(350, 275);vertex(338, 185);vertex(330, 160);endShape(CLOSE);beginShape();vertex(260, 190);vertex(270, 210);vertex(275, 180);endShape(CLOSE);fill(253, 229, 93);beginShape();vertex(340, 130);vertex(320, 190);vertex(335, 190);vertex(350, 130);endShape(CLOSE);//挑染fill(255, 161, 61);beginShape();vertex(265, 140);vertex(255, 200);vertex(260, 210);vertex(270, 120);endShape(CLOSE);//挑染fill(255, 161, 61);beginShape();vertex(347, 140);vertex(330, 190);vertex(335, 190);vertex(350, 130);endShape(CLOSE);beginShape();vertex(280, 125);vertex(290, 140);vertex(295, 139);endShape(CLOSE);//眼睛fill(54, 54, 54);//右眼ellipse(317, 150, 10, 15);arc(330, 143, 25, 25, 170,180);arc(330, 146, 25, 25, 170,180);//左眼ellipse(285, 150, 10, 15);arc(273, 143, 25, 25, 0,10);arc(273, 146, 25, 25, 0,10);//红晕fill(255, 195, 103);beginShape();vertex(280, 160);vertex(275, 168);vertex(276, 168);vertex(281, 160);endShape(CLOSE);beginShape();vertex(278, 160);vertex(273, 168);vertex(274, 168);vertex(279, 160);endShape(CLOSE);beginShape();vertex(276, 160);vertex(271, 168);vertex(272, 168);vertex(277, 160);endShape(CLOSE);beginShape();vertex(282, 160);vertex(277, 168);vertex(278, 168);vertex(283, 160);endShape(CLOSE);beginShape();vertex(284, 160);vertex(279, 168);vertex(280, 168);vertex(285, 160);endShape(CLOSE);beginShape();vertex(324, 160);vertex(319, 168);vertex(320, 168);vertex(325, 160);endShape(CLOSE);beginShape();vertex(322, 160);vertex(317, 168);vertex(318, 168);vertex(323, 160);endShape(CLOSE);beginShape();vertex(320, 160);vertex(315, 168);vertex(316, 168);vertex(321, 160);endShape(CLOSE);beginShape();vertex(318, 160);vertex(313, 168);vertex(314, 168);vertex(319, 160);endShape(CLOSE);beginShape();vertex(316, 160);vertex(311, 168);vertex(312, 168);vertex(317, 160);endShape(CLOSE);//手fill(255, 245, 238);ellipse(278, 205, 45, 20);ellipse(300, 200, 20, 30);ellipse(355, 203, 45, 20);ellipse(385, 200, 20, 25);//光环stroke(255, 250, 165);strokeWeight(3);noFill();ellipse(300, 100, 80, 40);//弓箭stroke(180,129,41);strokeWeight(2);fill(180,129,41); stroke(0); line(325,107,325,293); line(310,100,340,110); line(310,300,340,290); line(340,110,360,120); line(340,290,360,280); line(360,120,370,130);line(360,280,370,270);line(370,130,376,140);line(370,270,376,260);line(376,140,380,150);line(376,260,380,250);line(380,150,387,190);line(380,250,387,210);line(387,190,387,210); stroke(180,129,41);strokeWeight(4);fill(180,129,41); stroke(0); line(310,205,420,205);stroke(255,44,28); fill(255,44,28); triangle( 422, 203, 422, 207,424, 205);
}参考资料：https://wow.techbrood.com/fiddle/42530
总结
最后实现的丘比特自画像当然和手绘差的很远，各种绘图函数掌握的也不是很ok,甚至连一条曲线都画不好。不过不得不承认课程是有趣的，每一次失败的线条，让我哭笑不得，画的丑是我的错，又无能为力，害！我真没用，总结完毕。
【码绘】p5.js画Q版自画像相关推荐
- 第一次码绘——P5.JS实现动态图片临摹
所临摹图片 临摹过程 首先 我们先仔细观察这张图片的静态图片,确定其图案 我这张图截的效果并不是很好,但也可以看出它是由不同数量的小圆组成一个大圆,那我们应该怎么处理呢?答案是一个个画就完事了(误), ...
- p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
- 使用p5.js画一幅创意自画像
使用p5.js画一幅创意自画像 使用p5.js画一幅创意自画像 用编程方式创作一幅介绍自己的图片,因为我很喜欢五月天,所以我的自画像就是展示我去看演唱会的样子,穿着五月天Logo的stayrealT恤 ...
- 互动媒体技术——基于p5.js创作一幅自画像
文章目录 1.实验主题 2.实验要求 3.实验结果 4.实验步骤 总结 1.实验主题 基于p5.js创作一幅自画像. 2.实验要求 编程语言与工具:编程可以用p5,processing,若想用其他语言 ...
- 使用p5.js画一幅简单的风车动态效果图
使用p5.js画一幅简单的动态风车图 因为大三互动媒体技术课程需要使用p5.js画图显示动态效果,并和自己手绘作品进行对比,查了查网上好像没有做风车相关的教程,就在这里简单介绍下吧. 工具 js编辑器 ...
- 如何画Q版角色？动漫Q版角色怎么设计？
Q版角色怎么设计?动漫Q版角色如何创作设计?有简单快捷的方式创造出一个Q版角色吗?相信很多刚刚学习的同学都想画一个萌哒哒的Q版角色呢,但是Q版角色应该怎么画呢?今天老师就从网络上收集整理了一些关于如何 ...
- “码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女 关于第一点还是比较好实现的,就是外 ...
- 码绘”与手绘比较——静态篇（码绘使用p5.js）
码绘图 手绘图 先大体说一下码绘图的实现吧 其实实现起来没什么技术难度,就是过程比较繁琐. 背景就是几个不同颜色,不同透明度的四边形和三角形,用quad()和triangle()两个函数搞定,就不贴代 ...
- Q版人物绘画教程|怎么画萌萌的Q版角色
Q版人物绘画教程|怎么画萌萌的Q版角色,发一些Q版教程,有miku啊(๑°3°๑) 如果你的基础太薄弱,找不到绘画练习与学习的方向,一直停滞有各种系统的精品绘画学习课程,而且超级便宜,还有老师辅导学习 ...
最新文章
- Set 和 Map 数据结构
- linux查看内存、cpu等硬件信息
- 4.6 explain 之 rows
- arcscene如何显示标注_CAD制图初学入门：CAD制图软件中如何添加多重标注？
- 根据浏览器navigator区分PC端还是移动端，区分操作系统，区分浏览器型号
- VS2010报错 error:LINK1123:转换到COF期间失败，文件无限或损坏
- ase支持 urp不_urp管线的自学hlsl之路 第一篇 序言
- Spring/SpringMVC在启动完成后执行方法
- maven命令上传jar、pom到Nexus
- matlab fprintf和disp,[转载]matlab中 fprintf 和disp的用法
- sequence和sequencer — UVM
- C语言正弦和余弦的值
- 模型数据处理之数据格式转换——SuperMap iDesktop
- 计算机怎么截音乐,电脑怎么剪辑音乐 怎样在电脑上剪辑歌曲
- MATLAB实现大家来找茬GUI程序
- eyoumailserver邮箱服务器与foxmail 邮箱客户端的使用和安装
- obs多推流地址_微信小程序直播电脑端OBS推流直播教程
- 耗时十个月的德国APS，教会我的学习方法
- 开运算和闭运算的作用
- uboot网络加载linux,DM8148 uboot 网络正常，Linux 起来后网络不通