Question

我正在尝试迭代RGB值，以获得连续的彩色印版。通常，要迭代3个值并全部获取它们，就像二进制一样：

但我有一个主要问题。我们需要让他们的订单不断地看起来如此，例如，我越过红色，而不是橙色，而不是黄色，绿色等。

我应该使用什么算法或伪代码来按顺序获取它们？

请参阅此图片，颜色应如何： enter image description here

Answer 1

从255 0 0开始，然后将g向上计数到255 255 0，然后将红色倒计数到0 255 0，然后将蓝色倒计数到0 255 255，然后将绿色倒计数到0 0 225，然后向上计数红色到255 0 255，然后倒计时蓝色为255 0 0。

我喜欢这种配色方案：D

Answer 2

从HSB或HSL值开始，然后将它们转换为RGB。

当您选择亮度（B）和饱和度（S）时，您可以通过连续更改Hue（H）的值来获得所需的颜色

如果你谷歌，你会找到进行转换的公式

Answer 3

您需要的是颜色的线性插值，以实现从一种颜色到另一种颜色的平滑过渡。我会给你一个简单的训练来理解所涉及的数学。

红色=（1,0,0）

黄色=（1,1,0）（正好位于红色和黄色之间）

绿色=（0,1,0）

首先从红色到黄色进行插值。由于x和z保持不变，因此内插的唯一组件是y。平滑度取决于您从一个极端到另一个极端的停止次数。假设我们采取停止= 4

+------------+------------+
|Red         |(1, 0, 0)   |
+------------+------------+
|            |(1, 0.2, 0) |
+            +------------+
|            |(1, 0.4, 0) |
+  Yellowish +------------+
|     Red    |(1, 0.6, 0) |
+            +------------+
|            |(1, 0.8, 0) |
+------------+------------+
|Yellow      |(1, 1, 0)   |
+------------+------------+
|            |(0.8, 1, 0) |
+            +------------+
|            |(0.6, 1, 0) |
+ Yellowish  +------------+
|   Green    |(0.4, 1, 0) |
+            +------------+
|            |(0.2, 1, 0) |
+------------+------------+
|Green       |(0, 1, 0)   |
+------------+------------+

如果你从Red -> Yellow -> Green -> Cyan -> Blue -> Magenta进行插值，你会得到一条线，其中一条极端为红色，另一条为洋红色。

现在要创建您在问题中发布的HSV wheel，需要进行径向和轴向插值。

Hue （或实际颜色）是径向内插的，即基于角度。这里的平滑度（停止）将基于角度而不是距离。

+-------+-------+
|Angle° |Colour |
+-------+-------+
|0/360  |Red    |
+-------+-------+
|60     |Yellow |
+-------+-------+
|120    |Green  |
+-------+-------+
|180    |Cyan   |
+-------+-------+
|240    |Blue   |
+-------+-------+
|300    |Magenta|
+-------+-------+

饱和度（鲜艳度）径向插值，即基于点距中心的距离。中心是纯白色，而圆周上的点是纯色。

因此，从中心到圆周的角度为0°的线将从中心的白色（1,1,1）开始，并在圆周处以纯红色（1,0,0）结束。对其他角度也一样（直到你回到360/0°）并且你得到你发布的轮子;它实际上是来自更大（HSV）圆柱体的圆盘，其垂直轴将插入亮度（维基百科上面链接的优秀文章中的图片）。

请参阅下面的代码，了解HSV车轮的实时渲染。

         // REFERENCES
         // http://stackoverflow.com/q/10373695
         // http://stackoverflow.com/a/7541756
         // http://tutorials.jenkov.com/html5-canvas/gradients.html
         // Computer Graphics: From Pixels to Programmable Graphics
         // Hardware by Alexey Boreskov, Evgeniy Shikin

         // from rgb_hsv_lerp workout
         function hsv2rgb(h) {
             var s = 1, v = 1;
             while(h < 0) h += 360;
             while(h >= 360) h -= 360;
             h /= 60;
             var i = Math.floor(h);
             var f = h - i;
             var p = v * (1 - s);
             var q = v * (1 - (s * f));
             var t = v * (1 - (s * (1 - f)));
             rgb = [];
             switch(i) {
                 case 0: rgb[0] = v; rgb[1] = t; rgb[2] = p; break;
                 case 1: rgb[0] = q; rgb[1] = v; rgb[2] = p; break;
                 case 2: rgb[0] = p; rgb[1] = v; rgb[2] = t; break;
                 case 3: rgb[0] = p; rgb[1] = q; rgb[2] = v; break;
                 case 4: rgb[0] = t; rgb[1] = p; rgb[2] = v; break;
                 case 5: rgb[0] = v; rgb[1] = p; rgb[2] = q; break;
             }
             return "rgb(" + Math.floor(255 * rgb[0]) + ","
                           + Math.floor(255 * rgb[1]) + ","
                           + Math.floor(255 * rgb[2]) + ")";
         }

         function plot(ctx, x, y, hue) {
             var cx = 0, cy = 0;
             var xs = [x, -y, -x,  y];
             var ys = [y,  x, -y, -x];

             for (var i = 0; i < 4; ++i) {
                 // linear gradient from start to end of line
                 var grad = ctx.createLinearGradient(0, 0, xs[i], ys[i]);
                 grad.addColorStop(0, "white");
                 // the canvas coordinate system has Y ↓ while math coordinate
                 // has Y ↑, so flip hue too to match standard HSV wheel
                 grad.addColorStop(1, hsv2rgb(-(hue + (90 * i))));
                 ctx.strokeStyle = grad;
                 ctx.beginPath();
                 ctx.moveTo(cx, cy);
                 ctx.lineTo(xs[i], ys[i]);
                 ctx.stroke();
             }
         }

         function draw() {
             var can = document.getElementById('canvas1');
             var ctx = can.getContext('2d');
             var r = can.clientWidth / 2;

             ctx.translate(r, r);
             ctx.lineWidth = 2;

             var x = r, y = 0;
             plot(ctx, x, y, 0);
             // divide 45° by number of iterations to get iteration delta
             // y starts at 0, iteration ends when y = x i.e. x = y = r / √2
             var hue_delta = 45 / Math.floor(r / Math.sqrt(2));
             // Bresenham's circle drawing algorithm, reference book cited above
             var d = 1.25 - r;
             while (x > y) {
               ++y;
                 if (d < 0)
                     d += (2 * y) + 3;
                 else {
                     d += 2 * (y - x) + 5;
                     --x;
                 }
                 var hue = y * hue_delta;
                 plot(ctx, x, y, hue);
                 plot(ctx, y, x, 90 - hue);
             }
             ctx.translate(-r, -r);
         }

    <body onload="draw()">
        <h1>HSV Colour Wheel</h1>
        <canvas id="canvas1" width="300" height="300" />
    </body>

迭代迭代RGB？

3 个答案: