p5.js实现矩形旋转动画：从静态绘制到动态效果

p5.js绘制旋转矩形概述

本文将演示如何使用p5.js库在网页中绘制一个持续旋转的正方形，供读者参考学习。

最终实现的视觉效果如下图所示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

画布初始化与样式设置

首先，我们需要初始化画布的尺寸。根据设计比例，画布大小应设置为5:3。

function setup() {
 createCanvas(500, 300);
}

接着，设定矩形的绘制模式以及边框线条的粗细程度。

function setup() {
 createCanvas(500, 300);
 rectMode(100);
 strokeWeight(4);
}

静态圆角矩形的绘制

在添加动画效果之前，我们先根据画布的坐标系统绘制出静态的图形。

关于颜色的RGB数值，可以通过Photoshop等工具的取色器获取。

绘制图形主要依赖于rect()函数。

仔细观察可以发现，图中的矩形实际上为圆角矩形。要在rect()函数中绘制圆角矩形，可以直接在参数中加入表示四个角圆弧半径的数值。以左侧第一个黑色矩形为例。

rect(77.5,122.5, 55, 55, [5], [5], [5], [5]);

方括号内的数值分别对应左上、右上、左下、右下四个角的圆角弧度。

经过上述修改后，静态图像的效果如下所示。

实现矩形旋转动画的核心逻辑

目前基本图形已经构建完成，接下来的任务是让图形动起来。这里需要引入几个关键的变换函数。

主要涉及translate()和rotate()两个函数。

我们首先使用translate()将旋转中心点移动到矩形的几何中心，然后调用rotate()使图像发生旋转。然而，直接这样做会发现整个图形围绕画布原点旋转，这并非我们想要的效果。因此，需要引入push()和pop()函数来保存和恢复绘图状态，从而将矩形的变换限制在其局部坐标系内。

push();
angle=angle+0.01;
let c=angle+PI;
translate(100,150);
rotate(c);
stroke(255,255,255);
fill(0,0,0);
rect(-22.5-22.5, 55, 55, [5], [5], [5], [5]);
pop();

运行代码后，左侧第一个矩形即可实现旋转效果。需要注意的是，rotate()函数参数中累加的数值（例如本例中的0.01）代表了旋转的速度。

如果需要实现反向旋转，只需将rotate()函数中的角度增量参数改为负数即可。

按照第一个矩形的逻辑，对另外三个矩形进行相应的代码修改，即可得到图中所示的整体旋转效果。

最终完成的动态效果如下所示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。