使用p5.js创作动态自画像-CSDN博客

本文链接：https://blog.csdn.net/Yuasin18/article/details/102703403

这篇博客展示了作者如何利用p5.js实现动态自画像，包括背景颜色随鼠标点击变化，眼睛颜色与半径动态调整，以及牙齿长度跟随滚轮滚动变化。作者在过程中提到了坐标定位的挑战，通过Matlab辅助获取精确坐标，并学习了p5.js的事件响应函数。

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

p5.js动态自画像

成果展示
- 背景变色
- 眼睛放光与牙齿长短变换
过程
代码展示
总结

成果展示

背景变色

在这里插入图片描述

效果为鼠标左键点击后改变背景颜色，背景共有红绿蓝（RGB）三种颜色。

眼睛放光与牙齿长短变换

在这里插入图片描述
可以看到眼睛是由好几个不同颜色的同心半圆构成的，当鼠标移动时，同心半圆的半径由小变大，直到当前圆的半径等于外圈圆最开始的半径，而颜色此时也是相应在变化的，代码如下。

  fill(150+eyesColor/2,50+eyesColor,50+eyesColor);//红变白
  arc(225, 280, 80+eyesValue, 80+eyesValue,0, PI , CHORD);
  arc(365, 280, 80+eyesValue, 80+eyesValue,0, PI , CHORD);

function mouseMoved(){
   
  //眼睛的大小和颜色设置为20次（帧）一循环
  if(eyesValue<20)
  eyesValue = eyesValue + 1;
  else
    eyesValue = 0;
  if(eyesColor<200)
  eyesColor = eyesColor+10;
  else
    eyesColor = 0;
}

眼睛中圆的半径与颜色的变化是同步的，都是每20帧循环变化一次，当内圈圆顶替掉外圈后，内圈的颜色也刚好变成原来外圈圆的颜色（红变白、绿变红、蓝变红、黑变蓝）

至于牙齿，当鼠标滚轮滚动时牙齿长度会变化，滚轮向上滚动则牙齿向上变化，向下滚动就向下变化。牙齿可以向下一直变长，但是却不能向上太长，动态图中的长度已经是向上的极限。因为考虑到使用滚轮的时候懒得再移动鼠标了，所以滚轮滚动时眼睛的变化也一起变，当滚轮滚动的同时移动鼠标就是眼睛变化的速度快一些而已。

function mouseWheel(event) {
   
  //鼠标滚轮滚动时眼睛和牙齿一起变换
  if(teeth<-45&&event.delta<0)//牙齿不能向上太长
    ;
    else{
   
  if(event.delta>0)
  teeth = teeth+4;
  else
    teeth = teeth -4;
  //重新刷新背景，防止变换的牙齿在背景上留下痕迹
  if(backgroundColor%3==1)
    background(150,50,50);
  else if(backgroundColor%3==2)
    background(50,150,50);
  else 
    background(50,50,150);  
    }
    //眼睛的大小和颜色设置为20次（帧）一循环
  if(eyesValue<20)
  eyesValue = eyesValue + 1;
  else
    eyesValue = 0;
  if