Как плавно изменить цвет фона в стиле радуги? - PullRequest
Новая
       12

Как плавно изменить цвет фона в стиле радуги?

0 голосов
/ 12 марта 2019

Я использую библиотеку P5.js и хочу, чтобы фон холста менял цвет в стиле радуги плавно и непрерывно.

Как я могу это сделать?Большое спасибо заранее

Как-то так

enter image description here

1 Ответ

3 голосов
/ 12 марта 2019

Вы можете использовать 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

...