用p5.js画一幅自画像

首先来看一下成品~

鼠标左键点击图像会出现动态背景，再点击又会消失，如下图：

这幅画没有太大的难度，唯一需要动脑筋的地方是繁琐的坐标计算和动态背景，人物的绘制主要是由三角形、四边形、椭圆构成的，下面是代码：

人物绘制代码：

function setup() {createCanvas(600, 550);
}
function draw() {background(173, 216 ,230);ellipse(300,250,50,260);ellipse(275,250,50,260);ellipse(247,265,50,250);ellipse(325,250,50,260);ellipse(353,265,50,250);//头fill(255,248, 220);ellipse(300,200,125,150);//高fill(255);ellipse(320,150,10,20);//腮红fill(255, 218, 185);ellipse(268,225,30,15);ellipse(334,225,30,15);//眼镜stroke(0);strokeWeight(3);noFill();ellipse(268,200,42,42);ellipse(332,200,42,42);line(289,200,311,200);line(247,200,235,195);line(353,200,365,195);//刘海noStroke();fill(40);arc(300, 178, 140,130, PI, 0);fill(255,248, 220);triangle(295,178,305,178,300,155);triangle(255,178,265,178,265,160);triangle(335,178,345,178,335,160);//眼睛fill(50);ellipse(268,200,30,27);ellipse(332,200,30,27);fill(255);ellipse(270,200,10,10);ellipse(334,200,10,10);//鼻子fill(238, 213, 183);ellipse(300,230,5,5);//嘴fill(50);arc(300, 245, 40,30, 0, PI,PIE);fill(255, 160 ,122);arc(300, 257, 25,23, PI, 0,PIE);arc(300, 257, 23,7, 0,PI,PIE);//脖子fill(255,248, 220);rect(285,270,30,15);//手quad(235,385,265,430,275,390,260,390);quad(365,385,335,430,305,390,340,390);//衣服fill(255, 255, 240);quad(285,285,255,290,230,385,265,395);quad(315,285,345,290,370,385,325,395);quad(285,285,250,430,350,430,315,285);  //裙子fill(50);quad(250,430,240,480,360,480,350,430);stroke(255);strokeWeight(5);line(243,465,357,465);//领带noStroke();fill(139, 121, 94);quad(285,285,295,300,305,300,315,285);quad(295,300,290,360,310,360,305,300);triangle(290,360,300,370,310,360);//腿fill(255,248, 220);rect(270,480,20,90);rect(310,480,20,90);//花朵ellipse(350,160,10,20)ellipse(350,140,10,20)ellipse(340,150,20,10)ellipse(360,150,20,10)fill(255, 218 ,185);ellipse(350,150,15,15);
}

介绍一下主要用到的函数：

stroke()——设置形状的外形线色，颜色用RGB定义
noStroke()——禁用形状的外形线色
quad(x1,y1,x2,y2,x3,y3,x4,y4)——绘制任意的四边形，四个坐标表示四个点
arc(x, y, w,h, start,stop)——绘制一个弧形

动态背景绘制代码：

var show=1;
var x=-30;
var y=-30;
var t=0;
function draw() {background(173, 216 ,230);if(show%2==0){for(var i=0;i<20;i++){for(var j=0;j<20;j++){fill(255,248, 220);ellipse(x+i*70+t,y+10+t+j*70,10,20)ellipse(x+i*70+t,y-10+t+j*70,10,20)ellipse(x-10+i*70+t,y+t+j*70,20,10)ellipse(x+10+i*70+t,y+t+j*70,20,10)fill(255, 218 ,185);ellipse(x+i*70+t,y+t+j*70,15,15);}t+=0.1;if(y+t+10>50)t=0;}}
}
function mouseReleased()
{show++；
}

这里用到了函数mouseReleased()——鼠标松开时响应
用于制作点击图像出现/消失动态背景的互动

小结

代码真的没什么好讲的，也没有运用到很难的数学知识，只是用简单的2D图形不断拼凑组合成的，用
了比较多的时间去计算坐标。

用p5.js画一幅自画像相关推荐

使用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编辑器 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
“码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女关于第一点还是比较好实现的,就是外 ...
p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
雪梨小白的“码绘”日常——p5.js自画像来喽！
这次需要完成互动媒体课程的第二项作业--利用p5.js绘制一幅表现自我的自画像,(雪梨是谁啊,那可是艺工交融的代表,骄傲的抬起快要睁不开的眼-),用三个字,那就是!!!我可以!!!(来啦!) 我觉得码 ...
p5.js 2.0绘制一幅动态图像
2.0 p5.js 绘制一幅动态图像 1.关于码绘实现动态图像的思考 2.明确作品类型 3.彩虹猫动画的实现 4.手绘和动态的思考 5.参考资料 1.关于码绘实现动态图像的思考上一次我们实现了用静态 ...
p5.js案例（二）：创意作品——USP消音版手枪模型
文章目录前言原图编程语言实现逻辑效果图完整代码前言根据老师的要求,创作一幅介绍自己的作品,可以是具象化地描绘形象,也可以是任何形式表现自己的兴趣.追求.特色.经历等. 由于最近比较喜欢 ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...

用p5.js画一幅自画像

用p5.js画一幅自画像

人物绘制代码：

介绍一下主要用到的函数：

动态背景绘制代码：

小结

用p5.js画一幅自画像相关推荐

最新文章

热门文章