Processing p5js卡通人物交互

1.运行视频

processing p5js 卡通交互

2.设计说明

1.全局变量声明：您在代码开头声明了一系列全局变量，用于存储颜色、坐标、直径等信息。这些变量将在后续的绘图中使用。

2.setup() 函数：这是Processing中的一个特殊函数，用于设置画布的大小和初始背景颜色。在这里，您设置了一个1500x1500像素的画布，并将背景设置为白色。

3.drawStar() 函数：这个函数用于绘制一组星星。它在画布上使用rect()函数绘制了一系列黄色和金色的矩形来表示星星。

4.draw() 函数：这是主要的绘图函数，它在每一帧中被调用。在这里，您进行了以下操作：

5.通过translate()函数使角色跟随鼠标移动，实现互动效果。
设置背景颜色为浅粉色。
调用drawStar()函数绘制星星。

6.使用随机数生成颜色、直径和坐标信息，然后绘制两个椭圆形状，表示角色的胳膊。
绘制身体、胳膊、脚等部分，并根据isLeft变量控制左右脚的显示。

7.绘制蝴蝶结，并调用drawFace()函数绘制角色的脸部特征。
drawFace() 函数：这个函数用于绘制角色的脸部特征，包括嘴巴、眼睛、眼镜、眼睛的高光、眼皮、腮红等。这些特征的位置和形状可以根据鼠标的移动而改变，增加了互动性。

8.keyPressed() 函数：这个函数用于响应键盘按键事件。在这里，根据按键 'z'、'x'、'c' 的不同，您切换了左右脚的显示和嘴巴是否吐舌头的状态。