p5.js创意编程——动态图形临摹及拓展

观察图形动态

显而易见，这是一个小方块先分别进行在长、宽、高即，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