p5.js绘制创意自画像


Posted in Javascript onNovember 04, 2019

本文实例为大家分享了p5.js绘制自画像的具体代码,供大家参考,具体内容如下

绘制结果

p5.js绘制创意自画像

人物头上的呆毛会一直运动,鼠标出现在画面上时左上角会有一个小猫咪头随着鼠标移动,而且人物的眼睛也会一直看向小猫的方向

代码介绍

整个图全部由贝塞尔曲线,直线和圆组成
贝塞尔曲线的代码结构大概就是

beginShape();
vertex(180,600);//曲线起点
bezierVertex(180,600,300,100,420,600); //第一个控制点坐标,第二个控制点坐标,终点坐标
endShape(CLOSE);

控制点我完全是凭感觉找的,先写一个大概的位置,然后再慢慢调整坐标;

可以先在最后添加一行显示当前鼠标坐标的辅助代码

text(mouseX+" "+mouseY,mouseX,mouseY);

这样找点会方便很多;

然后就是反复用贝塞尔曲线,由于它是填充图形,所以要注意覆盖关系,先画头发,然后再身体,脸等等一层层往上;

动态的部分就是添加了两根会动的呆毛,设置时间,让它周期性左右摇摆

var t=millis()/500;
 
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,245,204);
 beginShape();
 vertex(300,70);
 bezierVertex(260+20*abs(sin(t)),60,275+20*abs(sin(t)),50,270+20*abs(sin(t)),30);
 bezierVertex(280+20*abs(sin(t)),50,275+20*abs(sin(t)),60,300,70);
 endShape(CLOSE);
 beginShape();
 vertex(300,70);
 bezierVertex(310+20*abs(sin(t)),60,315+20*abs(sin(t)),50,320+20*abs(sin(t)),40);
 endShape(CLOSE);//呆毛

小猫原本是在衣服上不会动的

p5.js绘制创意自画像

因为要做交互,想不出来还能做什么,所以把所有坐标都改成了跟mouseX,mouseY相关的变量;
然后把眼睛高光的圆心坐标也改成了会随鼠标点移动的变量:

var t1=(mouseX-300)/300*4.5;
var t2=(mouseY-235)/365*4.5;
fill(255);
noStroke();
ellipse(253+t1,235+t2,5,10);
ellipse(353+t1,235+t2,5,10);//眼睛高光

总结

这次试验总体难度不算大,就是要一直计算调整坐标非常麻烦,所以也只能画出这种笔画非常少的简笔画,再复杂写实一点可能会比较困难,其实代码大部分都是重复的,只用改一下坐标就可以了,总的来说做起来还是很有趣的。

完整代码

function setup(){
 createCanvas(600,600);
 }
 
function draw(){
 background(249,234,239);
 fill(255);
 
 drawgirl();
 drawcat();
 
 // text(mouseX+" "+mouseY,mouseX,mouseY);
}

function drawgirl(){
 
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,243,187);
 beginShape();
 vertex(130,600);
 bezierVertex(-50,470,230,470,80,350);
 bezierVertex(20,290,100,260,135,220);
 bezierVertex(180,150,150,70,300,60);
 bezierVertex(450,70,420,150,465,220);
 bezierVertex(500,260,580,290,520,350);
 bezierVertex(370,470,650,470,470,600);
 endShape();//头发


 fill(197,235,255);
 stroke(252,235,160);
 beginShape();
 vertex(180,600);
 bezierVertex(180,600,300,100,420,600); 
 endShape(CLOSE);//身体
 
 
 fill(255);
 stroke(244,206,200);
 beginShape();
 vertex(180,220);
 bezierVertex(180,400,290,300,290,380);
 bezierVertex(290,410,310,410,310,380);
 bezierVertex(310,300,420,400,420,220);
 bezierVertex(420,220,330,200,300,130);
 bezierVertex(270,200,180,220,180,220);
 endShape(CLOSE);//脸


 beginShape()
 vertex(179,223);
 bezierVertex(150,225,150,250,181,258);
 endShape(CLOSE);
 beginShape()
 vertex(421,223);
 bezierVertex(450,225,450,250,419,258);
 endShape(CLOSE);//耳朵
 
 
 noFill();
 stroke(254,219,126);
 beginShape();
 vertex(420,220);
 bezierVertex(420,220,330,200,300,130);
 bezierVertex(270,200,180,220,180,220);
 bezierVertex(180,220,270,200,300,130);
 bezierVertex(330,200,420,220,420,220);
 endShape(CLOSE);//发际线


 stroke(227,156,160);
 strokeWeight(3);
 beginShape();
 vertex(230,210)
 bezierVertex(245,200,260,200,270,210);
 bezierVertex(260,200,245,200,230,210);
 endShape(CLOSE);
 beginShape();
 vertex(370,210);
 bezierVertex(355,200,340,200,330,210);
 bezierVertex(340,200,355,200,370,210);
 endShape(CLOSE);//眉毛
 
 
 stroke(227,109,115);
 beginShape();
 vertex(290,300);
 bezierVertex(295,310,305,310,310,300);
 endShape();//嘴巴


 fill(0);
 ellipse(250,240,15,25);
 ellipse(350,240,15,25);//眼睛
 
 
 var t1=(mouseX-300)/300*4.5;
 var t2=(mouseY-235)/365*4.5;
 fill(255);
 noStroke();
 ellipse(253+t1,235+t2,5,10);
 ellipse(353+t1,235+t2,5,10);//眼睛高光


 noStroke();
 fill(254,221,224);
 ellipse(230,280,25,25);
 ellipse(370,280,25,25);//腮红


 var t=millis()/500;
 stroke(254,219,126);
 strokeWeight(2);
 fill(255,245,204);
 beginShape();
 vertex(300,70);
 bezierVertex(260+20*abs(sin(t)),60,275+20*abs(sin(t)),50,270+20*abs(sin(t)),30);
 bezierVertex(280+20*abs(sin(t)),50,275+20*abs(sin(t)),60,300,70);
 endShape(CLOSE);
 beginShape();
 vertex(300,70);
 bezierVertex(310+20*abs(sin(t)),60,315+20*abs(sin(t)),50,320+20*abs(sin(t)),40);
 endShape(CLOSE);//呆毛
 }


function drawcat(){
 
 stroke(191,126,120);
 fill(254,211,179);
 beginShape();
 vertex(mouseX-48,mouseY-33);
 bezierVertex(mouseX-50,mouseY-45,mouseX-50,mouseY-60,mouseX-31,mouseY-49);
 endShape(CLOSE);
 beginShape();
 vertex(mouseX+8,mouseY-33);
 bezierVertex(mouseX+10,mouseY-45,mouseX+10,mouseY-60,mouseX-9,mouseY-49);
 endShape(CLOSE);//猫耳朵
 
  fill(255);
 ellipse(mouseX-20,mouseY-20,60,55);//猫猫头
 
 
 noStroke();
 fill(254,211,179);
 beginShape();
 vertex(mouseX-50,mouseY-20);
 bezierVertex(mouseX-30,mouseY-20,mouseX-20,mouseY-30,mouseX-20,mouseY-40);
 bezierVertex(mouseX-20,mouseY-30,mouseX-10,mouseY-20,mouseX+10,mouseY-20);
 bezierVertex(mouseX+10,mouseY-60,mouseX-50,mouseY-60,mouseX-50,mouseY-20);
 endShape(CLOSE);
 stroke(191,126,120);
 beginShape();
 vertex(mouseX+10,mouseY-20);
 bezierVertex(mouseX+10,mouseY-60,mouseX-50,mouseY-60,mouseX-50,mouseY-20);
 bezierVertex(mouseX-50,mouseY-60,mouseX+10,mouseY-60,mouseX+10,mouseY-20);
 endShape(CLOSE);//头上黄色部分的毛


 stroke(191,126,120);
 fill(191,126,120);
 ellipse(mouseX-35,mouseY-27,5,10);
 ellipse(mouseX-5,mouseY-27,5,10);//眼睛
 ellipse(mouseX-20,mouseY-22,4,2);//鼻子
 
 
 noFill();
 beginShape();
 vertex(mouseX-28,mouseY-14);
 bezierVertex(mouseX-24,mouseY-13,mouseX-22,mouseY-14,mouseX-20,mouseY-15);
 bezierVertex(mouseX-18,mouseY-13,mouseX-16,mouseY-13,mouseX-12,mouseY-14);
 endShape();//嘴巴
 
 
 stroke(191,126,120);
 line(mouseX-50,mouseY-20,mouseX-43,mouseY-19);
 line(mouseX-48,mouseY-11,mouseX-42,mouseY-14);
 line(mouseX+10,mouseY-20,mouseX+3,mouseY-19);
 line(mouseX+8,mouseY-11,mouseX+2,mouseY-14);//胡子
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
js的对象与函数详解
Jan 21 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
Laravel下生成验证码的类
2017/11/15 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
深入浅析python with语句简介
2018/04/11 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python实现矩阵打印
2019/03/02 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python多线程thread及模块使用实例
2020/04/28 Python
python小白学习包管理器pip安装
2020/06/09 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
妇联主席先进事迹
2014/05/18 职场文书
2014年施工员工作总结
2014/11/18 职场文书
老公保证书怎么写
2015/02/26 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
刑事附带民事代理词
2015/05/25 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python