编码片段：将问题置于上下文

Question

编码片段：将问题置于上下文

下面，我使用p5.js库编写了一个小片段，其中滑块控制画布上显示的条形数。每个条形的颜色是通过将被着色的条的数量乘以255 /（条的总数 - 1）来确定的，因此，无论条数是多少，第一个都将是黑色的最后一个总是略微灰白色（中间有灰度）。

快速注意：最后一个是灰白色，所以我可以在白色背景下看到它。

在此处运行代码段：

function setup() {
  createCanvas(200,200);
}

function draw() {
  background(255);
  numberOfBars = document.getElementById("barSlider").value;
  for (var i = 0; i < numberOfBars; i++) {
    noStroke();
    var spaceInterval = width / numberOfBars;
    fill(i*(240/(numberOfBars-1)))
    rect(i * spaceInterval, 0, spaceInterval, (i + 1)  * spaceInterval);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head>
  </head>
  <body>
    <input type="range" min="2" max="100" value="10" id="barSlider">
  </body>
 </html>

问题

因此，上面的代码片段在(0, 0, 0)和(240, 240, 240)的RGB颜色值之间从开始到结束转换 - 无论显示的条形数量如何。

现在，如果我有两个随机生成的对象，它们保存两种RGB颜色的数据，如下所示：

startColor = {
    r: floor(random(255)),
    g: floor(random(255)),
    b: floor(random(255))
}
endColor = {
    r: floor(random(255)),
    g: floor(random(255)),
    b: floor(random(255))
}

如果上述代码段在0到240之间转换，我怎么能 在这些内容之间平滑过渡？我一直在玩，没有我运行的代码似乎产生了一系列条形，其中第一个条形的颜色和结束条的颜色甚至远远类似于startColor和{{的真实值1}}变量。

感谢阅读。如果不够清楚，请在下面评论任何问题。

Answer 1

谢谢你，Lukas，我指的是原帖，答案很有帮助。

我找到了愿意使用P5.js库的所有人的解决方案。首先，定义两种您希望在以下之间转换的RGB颜色：

var startColor = color(
    floor(random(255)),
    floor(random(255)),
    floor(random(255))
);
var endColor = color(
    floor(random(255)),
    floor(random(255)),
    floor(random(255))
);

接下来，定义在两者之间转换的颜色：

var col = lerpColor(startColor, endColor, LEVEL);

LEVEL是一个小数，范围从0到1，其中0表示col = startColor，1表示col = endColor，两个颜色之间的任何转换都是。

将col应用于图纸：

fill(col)
// draw rect, ellipse, etc...

和

stroke(col)
// draw line

详细了解here。

Answer 2

可能是Javascript Color Animation

的副本

检查那里的答案。 http://jsfiddle.net/At3Zm/

lerp = function(a, b, u) {
    return (1 - u) * a + u * b;
};

fade = function(element, property, start, end, duration) {
    var interval = 10;
    var steps = duration / interval;
    var step_u = 1.0 / steps;
    var u = 0.0;
    var theInterval = setInterval(function() {
        if (u >= 1.0) {
            clearInterval(theInterval);
        }
        var r = Math.round(lerp(start.r, end.r, u));
        var g = Math.round(lerp(start.g, end.g, u));
        var b = Math.round(lerp(start.b, end.b, u));
        var colorname = 'rgb(' + r + ',' + g + ',' + b + ')';
        el.style.setProperty(property, colorname);
        u += step_u;
    }, interval);
};

如何在Javascript中的两种RGB颜色之间进行转换？

编码片段：将问题置于上下文

问题

2 个答案: