观察图形动态
显而易见,这是一个小方块先分别进行在长、宽、高即,x,y,z轴上的放大,然后旋转的同时进行等比例缩小回原来的大小。
所需函数
根据以上观察到的结果,仔细参考一下p5.js的Reference便能够轻松地找到所需要用到的一些p5.js自带的函数。
代码实现
一些需要注意的点
// 每次绘制方块都需覆盖一次背景色以覆盖之前的正方体
background(0);
// 添加材质,使得每个面看上去颜色不同增强立体感
normalMaterial();
// 绘制时倾斜少许角度以呈现正方体的立体感
rotateX(-PI / 9);
rotateY(PI / 4);
// 无边框
noStroke();
// 需使用scale()函数,而不能直接对正方体的参数进行改变,
// 如若这样,则会使得正方体的单个面进行平移而其他面不动,
// 从而破坏了原来正方体的形状。
scale(L, W, H);
全部代码
let boxL = 1; // 控制正方体的长
let boxW = 1; // 控制正方体的宽
let boxH = 1; // 控制正方体的高
let boxS = 2; // 控制正方体的整体大小
let fr = 60; // FPS
function setup() {
createCanvas(400, 400, WEBGL);
background(0);
frameRate(fr); // 设置 FPS
}
function