时间戳

首页 > 解决方案 > 正方形内的多种颜色变化（填充）（P5.js）

javascript - 正方形内的多种颜色变化（填充）（P5.js）

问题描述

我正在尝试扩展我的导师用来介绍 P5.js 的示例，因此我想尝试每次（在正方形内）将颜色更改为我在循环中预设的颜色，而不是随机设置。

我已经尝试改变一些事情，比如添加第二行填充（在 (rect (sx, ry, w, squareDim) ;) 上方），但到目前为止它保持不变，从蓝色到黑色并重复。

例如，我想让它从蓝色变为红色、橙色和紫色，然后再变回黑色（开始）

任何输入或可能的建议将不胜感激！！:)

var squareDim = 500;
var colourlapse;
var rx = 50;
var ry = 50;
var inc = 0.009;


function setup() {
    frameRate(49);
    //put setup code here
    createCanvas(700, 700);

    colourlapse = 0.0;

}

function draw() {
    // put drawing code here

    var w = colourlapse * squareDim;
    var sx;
    sx = rx;

    if (inc > 0) {
        sx = rx
    } else {

        sx = rx + squareDim - w;
    }

    background(255);
    stroke(255);
    fill(0);
    rect(rx, ry, squareDim, squareDim);
    fill(0, 0, 255);
    rect(sx, ry, w, squareDim);

    colourlapse += inc;
    if (colourlapse >= 1) {
        colourlapse = 1;
        inc *= -1;
    } else if (colourlapse <= 0) {
        colourlapse = 0;
        inc *= -1;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

标签： javascriptprocessingp5.js

解决方案

您必须定义一个颜色列表和 2 个包含当前颜色索引的变量：

let colors = [[0, 0, 0], [0, 0, 255], [0, 255, 0], [255, 0, 0]]
let cur_col1 = 1;
let cur_col2 = 0;

每当线条到达区域的开始或结束时，颜色的索引就会增加。使用模运算符将索引限制在颜色数组的范围内：

fill(...colors[cur_col1 % colors.length]);

第一个矩形w的宽度是 ，第二个矩形的宽度是squareDim-w。第二个矩形的起始 x 坐标是第一个矩形的结束
( rx + w) 或区域的开始 ( rx)：

var sx1 = (inc > 0) ? rx : rx + squareDim - w;
var sx2 = (inc > 0) ? rx + w : rx;

请参阅示例：

var rectWidth = 500;
var rectHeight = 300;
var colourlapse;
var rx = 50;
var ry = 50;
var inc = 0.009;


let colors = [[0, 0, 0], [0, 0, 255], [0, 255, 0], [255, 0, 0]]
let cur_col1 = 1;
let cur_col2 = 0;

function setup() {
    frameRate(49);
    createCanvas(700, 700);
    colourlapse = 0.0;
}

function draw() {
    var w = colourlapse * rectWidth;
    
    var sx1 = (inc > 0) ? rx : rx + rectWidth - w;
    var sx2 = (inc > 0) ? rx + w : rx;

    background(0);
    stroke(255);
   
    fill(0);
    fill(...colors[cur_col1 % colors.length]);
    rect(sx1, ry, w, rectHeight);
    fill(...colors[cur_col2 % colors.length]);
    rect(sx2, ry, rectWidth-w, rectHeight);

    colourlapse += inc;
    if (colourlapse >= 1) {
        colourlapse = 1;
        inc *= -1;
        cur_col2 += 2;
    } else if (colourlapse <= 0) {
        colourlapse = 0;
        inc *= -1;
        cur_col1 += 2;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

推荐阅读