用P5.js绘制一个看着鼠标的章鱼哥

本文利用P5.js库,详细介绍了如何创建一个跟随鼠标移动的章鱼哥形象,包括其组成部分的绘制,如头、脸、嘴、眼睛和眼珠等,并提供了相关代码实现。

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

用P5.js绘制一个看着鼠标的章鱼哥

用P5.js绘制一个看着鼠标的章鱼哥。

章鱼哥组成

头为椭圆
脸为方块
嘴为用椭圆遮住大半部分的圆,再由圆装饰
眼为椭圆
眼珠为方块
皱纹为半椭圆

代码

function setup() {
   
  createCanvas(400, 400);
}

function draw() {
   
  background(103,204,212);
  
  //x,y用来移动眼珠
  x=(mouseX-200)/40;
  y=(mouseY-200)/40;
  
  //脸
  fill(173,217,202)
  noStroke();
  ellipse(200,150,150,100);
  rect(170,165,60,80);
  ellipse(200,290,150,150);
  
  //遮挡
  fill(103,204,212);
  noStroke();
  ellipse(200
要利用p5.js绘制一个创意自画像,并添加动画效果和鼠标交互,你需要掌握一系列的图形绘制和动画编程技术。以下是详细的步骤和代码示例,帮助你完成这一项目。 参考资源链接:[使用p5.js创作动态自画像教程](https://wenku.csdn.net/doc/6qoqvsuiq2?spm=1055.2569.3001.10343) 首先,确保你熟悉p5.js的基础知识,包括如何设置画布、使用颜色和绘制基本形状。然后,你可以开始学习如何使用贝塞尔曲线来绘制复杂形状,这是创建自画像的关键。 贝塞尔曲线由一系列控制点定义,你可以使用`bezierVertex()`函数来添加控制点。例如,绘制面部轮廓时,你需要定义合适的控制点来形成平滑的曲线。建议先绘制静态的自画像,然后再添加动画和交互功能。 要实现动画效果,比如让自画像的眼睛跟随鼠标移动,你可以使用`mouseX`和`mouseY`变量来更新眼睛的位置。此外,利用`sin()`和`cos()`函数可以创建波浪效果或摇头动作,这通常涉及到时间`t`变量,它会随着时间变化而产生周期性变化。 在添加鼠标交互时,你可以通过监听`mousePressed()`、`mouseReleased()`或`mouseClicked()`等事件,来触发特定的动画或者行为。例如,用户点击自画像时,可以随机改变自画像的一部分颜色或形状,从而与用户互动。 在编程的过程中,注意合理使用`setup()`和`draw()`函数。`setup()`函数用于初始化环境,例如设定画布大小和背景颜色;而`draw()`函数则是用来绘制每一帧,循环调用使动画持续进行。 最后,建议查阅《使用p5.js创作动态自画像教程》,这本书能够为你提供从基础到高级的完整指导,帮助你将理论知识应用到实际项目中,创建出令人印象深刻的创意自画像。 参考资源链接:[使用p5.js创作动态自画像教程](https://wenku.csdn.net/doc/6qoqvsuiq2?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值