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

最新推荐文章于 2023-01-26 21:39:43 发布

lepaipai

最新推荐文章于 2023-01-26 21:39:43 发布

阅读量1.5k

点赞数 2

分类专栏： p5.js 文章标签： p5.js

本文链接：https://blog.csdn.net/lepaipai/article/details/102832086

版权

本文介绍如何利用p5.js库创作一个交互式的自画像，包括音乐控制、眼睛形状变换、颜色变化、眨眼及随鼠标移动等功能。详细讲述了代码实现，包括眼睛、刘海、鼠标键盘事件处理及背景音乐与视觉效果的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用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,

最低0.47元/天解锁文章