如何使背景以彩虹风格平滑地改变颜色？

Question

我正在使用P5.js库，并且希望使画布的背景平滑且连续地以彩虹样式更改颜色。

我该怎么做？提前谢谢

类似这样的东西

Answer 1

您可以使用HSB colorMode。这样，您可以使用0到360之间的数字（例如，在色轮上指定度数）来基本上在色轮中“循环”。使用此想法，您可以在画布上绘制许多矩形，范围从画布的顶部到底部（由inc指定的矩形量）。每个矩形都有特定的颜色。 因此，连接所有这些矩形将使您能够创建类似渐变的效果。

通过不断为您的颜色提供偏移（并将其限制在范围内或限制在0到360之间），您可以在色轮之间循环。

请参见下面的代码：

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

let cOffset = 0;
function draw() {
    const inc = height/100;
    colorMode(HSB);

    for(let y = 0; y < height; y += inc) {
        let h = y / height * 360;
        fill(abs(h-cOffset)%360, 100, 100);
        noStroke();
        rect(0, y-inc, width, y);
    }

    cOffset += 5;
}

在此处查看工作版本：

https://editor.p5js.org/NickParsons/sketches/1xfjY-ZoE