23
スペクトラル・カラー範囲に均等に広がるRGBカラーの範囲を作るにはどうしますか？本当の虹のように見えるように。ペイント・ミー・ア・レインボー
A
答えて
16
代わりにHSLを使用してください：明るさと彩度を固定し、色相を0から360まで変えてからRGBに変換してください。
HSLは人が知覚する色を表します。 RGBは、それらが機械によって使用されるときにそれらを記述する。だから、実際にRGBを使って視覚的に気に入っていることは本当にできません。
18
HSV color spaceを使用して、色相のディメンションを横断することができます。
1
- レッド（ウェブカラー）（16進数：＃1 FF0000）（RGB：255、0、0）
- オレンジ（カラーホイールオレンジ）（16進数：＃1 FF7F00）（RGB：255 、127,0）
- 黄色（網掛け）（Hex：＃FFFF00）（RGB：255,255,0）
- グリーン（X11）（HTML/CSS "Lime"）（カラーホイール緑色）（Hex：＃00FF00）（RGB：0,255,0）
- 青（網掛け）（Hex：＃0000FF）（RGB：0,0,255）
- インディゴ（電気インディゴ）（16進数：＃1 6600FF）（RGB：102、0、255）
- バイオレット（エレクトリックバイオレット）（16進数：＃1 8B00FF）（RGB：139、0、255）
各色の間で線形補間を行います。
7
最も単純なアプローチは、このシーケンスで各連続対の間（RGB）で線形補間を行うことである。
#ff0000赤色#ffff00黄色#00ff00緑色#00ffffシアン#0000ff青#ff00ffマゼンタバック 赤へ
#ff0000
これは、あなたHSVまたはHSLにおける色相値をスイープとしてほとんど同じ結果を得るが、あなたはRGBで直接作業することができますする必要があります。補間ごとに1つのコンポーネントだけが変更されるため、作業が簡単になります。ここでは、Pythonの実装があります：
def rainbow():
r, g, b = 255, 0, 0
for g in range(256):
yield r, g, b
for r in range(255, -1, -1):
yield r, g, b
for b in range(256):
yield r, g, b
for g in range(255, -1, -1):
yield r, g, b
for r in range(256):
yield r, g, b
for b in range(255, -1, -1):
yield r, g, b
+0
小さな問題の1つは、虹は赤色ではなく紫色で終わることです。 – Annan
+0
真。この問題は、HSLおよびHSVソリューションにも存在します。 –
1
このクラスは、PHPでそれを行うだろう、あなたは虹にしたい色の数と$列プロパティはRRGGBB 16進コードの配列が含まれていますコンストラクタを渡します。
class color
{
public $sequence = array();
/**
* constructor fills $sequence with a list of colours as long as the $count param
*/
public function __construct($count, $s = .5, $l = .5)
{
for($h = 0; $h <= .85; $h += .85/$count) //.85 is pretty much in the middle of the violet spectrum
{
$this->sequence[] = color::hexHSLtoRGB($h, $s, $l);
}
}
/**
* from https://stackoverflow.com/questions/3597417/php-hsv-to-rgb-formula-comprehension#3642787
*/
public static function HSLtoRGB($h, $s, $l)
{
$r = $l;
$g = $l;
$b = $l;
$v = ($l <= 0.5) ? ($l * (1.0 + $s)) : (l + $s - l * $s);
if ($v > 0){
$m;
$sv;
$sextant;
$fract;
$vsf;
$mid1;
$mid2;
$m = $l + $l - $v;
$sv = ($v - $m)/$v;
$h *= 6.0;
$sextant = floor($h);
$fract = $h - $sextant;
$vsf = $v * $sv * $fract;
$mid1 = $m + $vsf;
$mid2 = $v - $vsf;
switch ($sextant)
{
case 0:
$r = $v;
$g = $mid1;
$b = $m;
break;
case 1:
$r = $mid2;
$g = $v;
$b = $m;
break;
case 2:
$r = $m;
$g = $v;
$b = $mid1;
break;
case 3:
$r = $m;
$g = $mid2;
$b = $v;
break;
case 4:
$r = $mid1;
$g = $m;
$b = $v;
break;
case 5:
$r = $v;
$g = $m;
$b = $mid2;
break;
}
}
return array('r' => floor($r * 255.0),
'g' => floor($g * 255.0),
'b' => floor($b * 255.0)
);
}
//return a hex code from hsv values
public static function hexHSLtoRGB($h, $s, $l)
{
$rgb = self::HSLtoRGB($h, $s, $l);
$hex = base_convert($rgb['r'], 10, 16) . base_convert($rgb['g'], 10, 16) . base_convert($rgb['b'], 10, 16);
return $hex;
}
}
：
$c = new color(100);
foreach($c->sequence as $col)
print "<div style='background-color:#$col'>$col</div>\n";
私は唯一のクラスにこれをパッケージングするためのクレジットを主張し、元の関数は、この記事で見つかりました： PHP HSV to RGB formula comprehension
-1
私はJavaScriptとHTML5でプログラムで虹を描くことができます。
Iは、RGBの勾配（255,0,0）する - > RGB（255,255,0） - > RGB（0,255,0） - > RGB（0,255,255） - > RGB（0、 0,255）→rgb（255,0,255）である。
私はRainbowVis-JSライブラリ（グラデーションを一緒につなぐ）を使ってグラデーションに沿って16進数のカラー値を計算します。 アークの形状をHTML5 Canvasで描画し、色をループします。
<!DOCTYPE html>
<html>
<head>
<script src="rainbowvis.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var RAINBOW_WIDTH = 60;
var RAINBOW_RADIUS = 130;
// Library class
var rainbow = new Rainbow();
rainbow.setNumberRange(1, RAINBOW_WIDTH);
rainbow.setSpectrum(
'FF0000', 'FFFF00', '00FF00',
'00FFFF', '0000FF', 'FF00FF'
);
// Canvas
var canvas = document.getElementById('MyCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 1;
for (var i = 1; i <= RAINBOW_WIDTH; i++) {
context.beginPath();
context.arc(canvas.width/2, canvas.width/2, RAINBOW_RADIUS - i+1,
Math.PI, 0, false);
context.strokeStyle = '#' + rainbow.colourAt(i); // Library function
context.stroke();
}
};
</script>
<canvas id="MyCanvas" width="300" height="300">
<p>Rainbow arc example. Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>
0
私はそれはかなり古い質問ですが、ここではほとんどのプログラミング言語での使用が容易であるべきで、私のシンプルで理解しやすいソリューションです知っています。 ステップとwhichStepを独自の値で置き換えます。
int steps = 1280;
int stepChange = 1280/steps;
int change = stepChange * whichStep;
int r=0, g=0, b=0;
if (change < 256)
{
r = 255;
g += change;
}
else if (change < 512)
{
r = 511 - change;
g = 255;
}
else if (change < 768)
{
g = 255;
b = change-512;
}
else if (change < 1024)
{
g = 1023 - change;
b = 255;
}
else
{
r = change - 1024;
b = 255;
}
0
他の解決策では、多量のコードと条件付き分岐が必要となり、GPUには適していません。私は最近、GLSLの次の魔法のような簡単な式に着きました。 OpenCLでは本質的に同じです：
vec3 HueToRGB(float hue) {
vec3 h = vec3(hue, hue + 1.0/3.0, hue + 2.0/3.0);
return clamp(6.0 * abs(h - floor(h) - 0.5) - 1.0, 0.0, 1.0);
}
これは、リニアRGBで指定された色相値に対応する虹色を与えます。画像で使用する、のsRGBに変換し、乗算ここ
255によってC++のバージョンがある：
float clamp(float value, float low, float high) {
return value < low ? low : (value > high ? high : value);
}
void HueToRGB(float hue, float *rgb) {
rgb[0] = hue;
rgb[1] = hue + 1.f/3.f;
rgb[2] = hue + 2.f/3.f;
for (unsigned i = 0; i < 3; ++i) {
rgb[i] = clamp(6.0f * fabsf(rgb[i] - floorf(rgb[i]) - 0.5f) - 1.f, 0.f, 1.f);
}
}
そのR、G、Bのそれぞれのグラフ色相値の関数における座標は、周期的な三角関数のクランプされた値であり、これは鋸歯状関数の絶対値として得ることができる。x - floor(x)。
関連する問題
- 1. ::リメンバー・ミー
- 2. ARM Cortex M3のint64_tアトミック
- 3. 翻訳例外はア・ラ・
- 4. JMFコンポーネントのペイント
- 5. Javaでのペイント
- 6. JLayeredPaneとペイント
- 7. BasicTabbedPaneUIペイントhtmlテキスト
- 8. ペイントのAndroid-onResume（）
- 9. ペイント画像
- 10. AndroidペイントsetShadowLayer（）はペイントの色を無視します
- 11. ペイント（またはペイント）でjpanelを使用する方法
- 12. Windows 7のSMSおよびコールログにアクセスする
- 13. Javascriptでの図形のペイント
- 14. Qtペイントの永続性
- 15. android、appペイントの仕方
- 16. JPanelグラフィックスのクリアと再ペイント？
- 17. 上のiphoneペイント/イベントのオーバーレイ
- 18. JList変更後のJDialogペイント
- 19. Javaパネルでペイントしない
- 20. Delphi：リスト表示のペイント列
- 21. JTableの行をペイントする
- 22. JPanelのは、ペイントしない
- 23. カスタムJScrollBarをペイントする
- 24. コンポーネントをビットマップにペイントする
- 25. Jythonのピクセルをペイントする
- 26. アプレットがペイントされない
- 27. ListView not OnClickListenerから再ペイント
- 28. リメンバー・ミーは、ボックスのフォーム認証</p> <p>のうち、シオマネキ
- 29. 別の1つのウィジェットを別のペイントにペイントする際の問題
- 30. GetAdornerLayerは、コントロールとそのアダプターの同じレイヤーを返しますか？
色空間が線形補間であるか？ ;） –
もちろんRGBです。 ＃FF0000＃FFFF00＃00FF00＃00FFFF＃0000FF＃FF00FF＃FF0000の線形補間の場合は、この点を取ることができます。私はガラスの華麗なRGB照明を作るときに "虹色"のintepolationsを取った –
エレクトリックバイオレットの代わりに鮮やかなバイオレットで終了する方が良いですか？ – Annan