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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
js 代码优化点滴记录
Feb 19 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
PHP MSSQL 存储过程的方法
2008/12/24 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
javascript实现表单验证
2016/01/29 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
简单了解python关系(比较)运算符
2019/07/08 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
EJB的几种类型
2012/08/15 面试题
海洋科学专业求职信
2014/08/10 职场文书
化工见习报告范文
2014/10/31 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
工程质量保证书
2015/05/09 职场文书
签证工作证明模板
2015/06/15 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL