p5.js创意绘图(2)自画像

利用p5.js画一幅自画像，效果如下：

1.按下键盘“M”(music)键，音乐停止播放；再次按下“M”键，音乐重新开始播放。
2.按下键盘“S”(shape)键，眼睛形状改变。一共有两种形状：死鱼眼和星星眼。

3.按下键盘“C”(Color)键，眼睛颜色会改变。死鱼眼有黑色和红色两种颜色，星星眼有黑色和黄色两种颜色。

4.眼睛会眨动。点击鼠标左键，眼睛停止眨动；再次点击鼠标左键，眼睛重新开始眨动。

5.死鱼眼状态下，按住鼠标右键，眼睛会随鼠标移动而移动。

下面进行代码讲解。
一、眼睛
（一）死鱼眼
先画一个圆形，再在圆形和眉毛之间接矩形。因为圆形可能会跑到眉毛上，所以眉毛上要画一个肤色的矩形盖住。

//眼睛1(死鱼眼)
function drawEye1(dx,dy)
{//画眼睛圆形部分stroke(0);strokeWeight(4);ellipse(width/2-60+dx,160+dy,50,50);ellipse(width/2+60+dx,160+dy,50,50);//画眼睛矩形部分noStroke();rect(width/2-60-25+dx,160,50,dy);rect(width/2+60-25+dx,160,50,dy);//画眼睛矩形部分的边框stroke(0);strokeWeight(4);line(width/2-60-25+dx,160,width/2-60-25+dx,160+dy);line(width/2-60-25+dx+50,160,width/2-60-25+dx+50,160+dy);line(width/2+60-25+dx,160,width/2+60-25+dx,160+dy);line(width/2+60-25+dx+50,160,width/2+60-25+dx+50,160+dy);//盖住在眉毛上的部分noStroke();fill(210,180,140);rect(width/2-100-5,160-55,200+10,58);
}

（二）星星眼
先画一个矩形，再在四角各画一个肤色的四分之一椭圆。

function drawEye2(percent)
{var dx=32;var dy=38;//左眼noStroke();rect(width/2-60-dx*percent,198-dy*percent,2*dx*percent,2*dy*percent);//盖住多余的矩形stroke(0);strokeWeight(4);fill(210,180,140);arc(width/2-60-dx*percent-1,198-dy*percent-1,2*dx*percent+2,2*dy*percent+2,0,HALF_PI);arc(width/2-60-dx*percent+2*dx*percent+1,198-dy*percent-1,2*dx*percent+2,2*dy*percent+2,HALF_PI,2*HALF_PI);arc(width/2-60-dx*percent+2*dx*percent+1,198-dy*percent+2*dy*percent+1,2*dx*percent+2,2*dy*percent+2,2*HALF_PI,3*HALF_PI);arc(width/2-60-dx*percent-1,198-dy*percent+2*dy*percent+1,2*dx*percent+2,2*dy*percent+2,3*HALF_PI,4*HALF_PI);//右眼noStroke();rect(width/2+60-dx*percent,198-dy*percent,2*dx*percent,2*dy*percent);//盖住多余的矩形stroke(0);strokeWeight(4);fill(210,180,140);arc(width/2+60-dx*percent-1,198-dy*percent-1,2*dx*percent+2,2*dy*percent+2,0,HALF_PI);arc(width/2+60-dx*percent+2*dx*percent+1,198-dy*percent-1,2*dx*percent+2,2*dy*percent+2,HALF_PI,2*HALF_PI);arc(width/2+60-dx*percent+2*dx*percent+1,198-dy*percent+2*dy*percent+1,2*dx*percent+2,2*dy*percent+2,2*HALF_PI,3*HALF_PI);arc(width/2+60-dx*percent-1,198-dy*percent+2*dy*percent+1,2*dx*percent+2,2*dy*percent+2,3*HALF_PI,4*HALF_PI);
}

（三）眼睛随鼠标移动
为了防止眼睛移动到眉毛外，有两种方案：
1.规定鼠标横坐标在一定范围内时，眼睛随鼠标移动；若鼠标横坐标超过这一范围，眼睛位于位移最大处。

mx=mouseX-200;
if(abs(mx)>=14)
{if(mx<0)mx=-14;elsemx=14;
}

2.利用map()函数，将鼠标横坐标映射到眼睛位移范围。

map(x,a1,a2,b1,b2);

map()函数:将变量x的值从a1-a2映射到b1-b2。可用直线来理解：
因为不知道屏幕大小为多少，所以设置若鼠标移动到画布外，则眼睛不移动。

if(mouseX<=width)//width:画布的宽mx=map(mouseX,0,width,-14,14);

二、刘海
绘制不规则图形区域：以beginShape();为开头，一直到endShape();为结束，往数组vertex里加点x1,x2,…,xn，可以绘制x1->x2->…->xn->x1的不规则封闭图形。

beginShape();for(var i=0;i<vec1[0].length;i++){vertex(vec1[0][i],vec1[1][i]);}endShape();

三、鼠标、键盘事件
（一）点击左键
鼠标点击会触发函数mouseClicked()。在该函数中添加点击左键时的操作。

//左键控制眼睛是否眨眼
function mouseClicked()//点击鼠标
{if(mouseButton==LEFT)//点击的是鼠标左键flag=!flag;
}

（二）按住右键
鼠标点击会令变量mouseIsPressed的值变成true。添加被按住的是右键时的操作。

//右键按住时眼睛才移动
if(mouseIsPressed)//鼠标被按住
{if(mouseButton==RIGHT)//被按住的是右键{...}
}

（三）按下键盘
键盘按下会触发函数keyPressed()。在该函数中添加按下某些按键时的操作。

function keyPressed()//按下了键盘
{switch(keyCode)//判断被按下了哪个键{case 67://C(color),眼睛颜色colorFlag=!(colorFlag);break;case 83://S(shape),眼睛形状eyeFlag=!(eyeFlag);break;case 77://M(music),音乐musicFlag=!(musicFlag);if(song.isPlaying())song.stop();elsesong.loop();break;}
}

四、其余部分
利用绘制基本几何形状的ellipse()、line()、rect()函数绘制便可。需要注意的是，脸、头发、眼镜、耳朵一定要按顺序绘制，这样才能有眼镜戴在耳朵上，并且挡住头发的效果。

五、背景
（注：因为有音乐，所以只有在Microsoft Edge才能打开。其他浏览器需要加载插件。）
背景光柱的高度及光点个数随音乐而变化。

（1）初始化音乐资源

var song, fft;
function preload()//预加载
{soundFormats('ogg', 'mp3');song = loadSound('xxx.mp3');
}function setup()
{...song.loop();//循环播放fft = new p5.FFT();fft.setInput(song);//导入音乐
}

注：loop()为循环播放，若为play()则只会播放一遍。
（2）背景跟随音乐变化
利用analyze()获取音乐信息至变量spectrum，spectrum.length为音乐音阶个数，spectrum[i]为各音阶的音量大小。

//音乐背景
function drawMusic()
{var x,y,i;var spectrum=fft.analyze();colorMode(HSB,spectrum.length);//将颜色模式调为HSB模式下的自定义索引值模式noStroke();//光柱for (i=0; i<spectrum.length; i+=2){fill(i,spectrum.length,spectrum.length);rect(i, height-spectrum[i], 3, spectrum[i]);}//光点for (i=0; i<spectrum.length; i+=2){x=Math.random()*width;//产生随机数y=Math.random()*height;fill(i,spectrum.length,spectrum.length);ellipse(x, y, spectrum[i]/10,spectrum[i]/10)}colorMode(RGB);//将颜色模式变回RGB模式
}

(参考资料：P5js–声音可视化)
为了使光柱和光点消失时有渐出的效果，背景颜色要设置一定的透明度。

background(255,255,255,30);//R,G,B,A(透明度)

总结
p5.js真的很有趣，可以把许多有趣的想法变为现实！

p5.js创意绘图(2)自画像相关推荐

p5.js创意绘图(1)动态图形
利用p5.js临摹一幅动态图形. 原图分析看起来像是两个葫芦在转圈,其实每个圆点并没有旋转,只是在以图形中心为原点的射线上来回移动.长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍,且 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
互动媒体技术——基于p5.js创作一幅自画像
文章目录 1.实验主题 2.实验要求 3.实验结果 4.实验步骤总结 1.实验主题基于p5.js创作一幅自画像. 2.实验要求编程语言与工具:编程可以用p5,processing,若想用其他语言 ...
P5.js创意编程之自我介绍
P5.js创意编程之自我介绍构思作为一个树莓人,熬夜修仙就是条必走之路那就画个修仙老头??? 先画草图吧敲代码环节就像图上那样,无非就算各种坐标过程超级繁琐就直接粘代码了 functio ...
p5.js创意编程——Q版人像绘制
目录主要函数介绍贝塞尔曲线 Shape frameRate 完整代码实现效果主要函数介绍贝塞尔曲线如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
“码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女关于第一点还是比较好实现的,就是外 ...
p5.js 光速入门中文教程
本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法. 本文会涉及到的内容包括: 项目搭建 p5.js 基础2D图形 ...
p5.js简易实现 apple watch 三色表盘
apple watch原图欣赏莫名其妙的好看有不! 于是我就想着用js写写看,能否简单的实现这个效果,于是就真的实现了一个很简单(简陋)的效果. 图片预览一下: p5.js 想要实现上述的简单效果用 ...
超炫酷｜一堂课带你入门 p5.js 数字艺术新世界！
一提起程序员,人们往往会脑补出一副双肩包.格子衫.脱发的画面,同时将程序员和「不修边幅.毫无美感」等糟糕的词汇联系了起来-- 但事实真的如此吗? 事实是: 我们不脱发程序员的脱发比例是各行业中较低的 ...

p5.js创意绘图(2)自画像

p5.js创意绘图(2)自画像相关推荐

最新文章

热门文章