如何在p5.js中实现彩色匀速旋转花朵与花瓣独立填色

现有基础代码 #

当前可绘制带白色圆心的静态8瓣花朵的基础代码如下：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  petals();
  noStroke(); // 花朵中心为白色圆形
  fill(255);
  ellipse(200, 200, 130, 130);

  function petals() {
    push()
      translate(200, 200);
      rotate(radians(90));
      noStroke();
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
    pop()
  }
}

依赖的p5.js库引入代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

问题原因 #

• 花瓣同色问题：如果没有在每一个ellipse()花瓣绘制语句前单独设置fill()，所有花瓣会沿用最后一次定义的填充色，导致颜色统一；逐行重复编写绘制语句的写法，也不利于单独给每片花瓣绑定对应颜色。
• 静态无旋转问题：代码中所有rotate()传入的都是固定常量值，没有随帧更新的动态角度变量，因此画面不会产生旋转动画。

修改方案 #

• 彩虹色花瓣实现：提前定义长度为8的彩虹色数组，通过循环批量绘制8片花瓣，每绘制一片前从数组中取对应颜色设置填充值即可。
• 匀速旋转实现：在全局定义旋转角度变量，draw()函数每执行一帧就给角度变量累加固定值，将该动态变量作为花瓣组的整体旋转角度传入，即可实现匀速旋转效果，调整累加的数值大小可以控制旋转速度。

修改后完整代码 #

// 全局旋转角度变量
let rotation = 0;
// 8片花瓣对应的8种彩虹色
const petalColors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3', '#FF1493'];

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  petals();
  // 绘制中心白色圆心
  noStroke();
  fill(255);
  ellipse(200, 200, 130, 130);
  // 每帧累加旋转角度，数值越大旋转速度越快
  rotation += radians(0.8);
}

function petals() {
  push();
  translate(200, 200);
  // 传入动态角度实现整体旋转
  rotate(rotation);
  noStroke();
  // 循环绘制8片花瓣，替换重复代码
  for(let i = 0; i < 8; i++) {
    rotate(radians(45));
    // 每片花瓣单独设置填充色
    fill(petalColors[i]);
    ellipse(100, 0, 250, 60);
  }
  pop();
}

注：如果需要调整旋转方向，把角度累加的+改成-即可；如果需要调整花瓣配色，直接修改petalColors数组内的色值即可。

内容的提问来源于stack exchange，提问作者rose