|
続・覚書
別の視点での計算方法も導けたので載せておきます。
正三角形△を考えます。
一辺の長さをαとすると、各張点の座標が次のように表されます。
左下：(0, 0)
右下：(α, 0)
上：（α/2, α(√3)/2）
そして、原点から各頂点へ延びるベクトルvecAとvecBを考えます。
そのまんまですが、各ベクトルの成分は次の通りです。
vecA = (α, 0)
vecB = （α/2, α(√3)/2）
次に、正三角形の右上の辺のどこかにある点Xを考えます。
X = (x, y)です。
ここで点XはRGBと関連付けることができ、
(x, y) = (R - G/2 - B/2, G(√3)/2 - B(√3)/2) と代入できます。
見た目が複雑になるので最後に代入します。
また、vecXを考えます。成分は単純に以下の通りです。
vecX = (x, y)
ここまでで、vecA, vecB, vecXが出てきました。
vecAとvecBに着目します。
-vecAは三角形の右下の頂点から原点を指すベクトル、vecBは原点から上の頂点を指すベクトルです。
よって vecB-vecA は右上の辺を指すベクトルです。
同様に考えて、vecX-vecAは右上の辺の途中までを指すベクトルです。
ベクトルvecX-vecAをk倍するとvecB-vecAになるため、以下の等式が成り立ちます。
vecB-vecA = k(vecX-vecA)
この等式を、x成分、y成分に分けて考えます。
簡単なy成分から考えます。
ベクトルのy成分の値を代入すると以下のように計算できます。
α(√3)/2 - 0 = k(y - 0)
k = α(√3)/(2y)
次にx成分を考えます。
α/2 - α = k(x - α)
左辺を計算しつつ、y成分の計算で求まったkを代入します。
-α/2 = α(√3)(x - α)/2y
(右辺) = (α/2)(√3)(x - α)/y
-1 = (√3)(x - α)/y
-y/(√3) = x - α
α = x + y/(√3)
少し長かったですが、(x, y)によりαが求まりました。
ようやく、xとyに次のRGBの値を代入します。
∵(x, y) = (R - G/2 - B/2, G(√3)/2 - B(√3)/2)
α = R - G/2 - B/2 + (G(√3)/2 - B(√3)/2)/(√3)
α = R - G/2 - B/2 + G/2 - B/2
α = R - B
よって三角形の一辺の長さαは、R - Bで表されることが分かりました。
三角形の右上の辺の部分的な長さ|vecX-vecA|も計算してみます。
|vecX-vecA|^2 = (x-α)^2 + y^2
|vecX-vecA|^2 = (R - G/2 - B/2 - (R - B))^2 + (G(√3)/2 - B(√3)/2)^2
|vecX-vecA|^2 = (-G/2 + B/2)^2 + (√3)/2)^2(G - B)^2
|vecX-vecA|^2 = (-1/2)^2(G - B)^2 + 3/4(G - B)^2
|vecX-vecA|^2 = (G - B)^2
|vecX-vecA| = G - B
G-Bと求まりました。
よって、辺の比を計算したければ(G - B)/(R - B)を計算すればよいことが分かります。
同様に色相は60*(G - B)/(R - B)で計算できます。
ベクトルのパターン(三角形)を変えれば、他の角度における計算も証明できそうです。
【2021/05/17 23:30】
URL | kdrs #- [ 編集]
覚書
読ませていただきました。
内容が難しいため理解に時間を要しましたが、こちらの記事による図解解説が無ければさらに時間がかかっていたと思います。
以下は覚書として、コメントを残しておきます。
(x, y) = (R - G/2 - G/2, G(√3)/2 - B(√3)/2)で表されるため、これをベクトル表現にします。
vecP = (x, y)
R成分のベクトルをvecR = (R, 0)
G成分のベクトルをvecG = (-G/2, G(√3)/2)
B成分のベクトルをvecB = (-B/2, B(√3)/2)
すると、vecP = R*vecR + G*vecG + B*vecB となります。
各ベクトルの大きさは、倍率であるR, G, Bによります。内積で計算すれば分かります。
|vecR| = R, |vecG| = G, |vecB| = B
ここで、この記事の 「R、G、Bの大きさがR≧G≧Bの場合」の下にある、黄色い点線の三角形が描かれた画像に注目します。
まず、右側にある2つの小さめの三角形の一辺が|vecB| = Bであることが分かります。三角形はすべて正三角形なので、小さい三角形の全ての辺の長さはBです。
そうすると、内側にある大きい三角形の一辺の長さが|vecR| - |vecB| = R-B と求まります。これも正三角形なので全ての辺の長さは同じ。
分母をR-Bにすることが決まります。
次に、vecGが、内側の正三角形の右上の辺と平行であることに着目します。
同時にvecGから延びるvecBを回転させvecGと逆行するように配置してみます。すると|vecG| - |vecB| = G-B の計算が、内側の三角形の辺の部分的な長さになることがわかります。
よって、分子にG-Bを持ってくることで、(G-B)/(R-B)の計算が辺の比を表します。
辺の比が角度の比にもなるので、60*(G-B)/(R-B)により色相が求まります。
【2021/05/17 22:25】
URL | kdrs #- [ 編集]
【2020/09/09 00:01】
URL | Akira #- [ 編集]
【彩度Sの求め方】
彩度Sを求める際は、maxとminしか考慮に入れないので、例えば、RがmaxでBがminの場合、（mid？の)Gの値がmax～minの値ならば、Sの値は変わりませんね。つまり、RGBからHSLに変換した値を再びRGBに戻そうとしても（計算誤差は無視しても）正確には元に戻らないということですね。正確に元に戻すには、midも含めた彩度Sを計算する必要があるのではないでしょうか。
色相の公式について
Atan（逆正接関数）を利用する場合は、偏角を得ますので、色相は角度になります。
ラジアン（角度は円周の長さに対する弧の長さの比）を考えれば、色相は円周の比とも言えます。
それに対して、Maxで3つに場合分けをした場合は、60度ずつの正三角形内での弦の比になっていますね。
逆正接関数法：弧の比（偏角）
→場合分け法：弦の比（比例配分） に近似しているみたいです。
色相をH’＝（Med－Min）/（Max－Min）と定義すれば、公式を1本にできます。
Max＝R，Min＝B：H＝H’
Max＝G，Min＝B：H＝120－H’
Max＝G，Min＝R：H＝H’－120
Max＝B，Min＝R：H＝240－H’
Max＝B，Min＝G：H＝H’－240
Max＝R，Min＝G：H＝360－H’
【2016/04/08 13:34】
URL | PSP #mQop/nM. [ 編集]
Re: タイトルなし
どうもありがとうございます(^o^)
私自身が分かっていなかったので、私なりの理解で書いてみました。
【2016/03/19 12:37】
URL | Akira #- [ 編集]
【2016/03/19 12:31】
URL | PSP #- [ 編集]
回答ありがとうございます！！
ちゃんと、書いてありますね。
お手数をおかけしました。
もう一度計算しなおします。
とてもよくわかるサイトで大変勉強になりました。
現在、色に関する仕事をしていまして、
RGBで指定された色を、
分かりやすく並べることができないか苦心しています。
HLSがWordで使われているので利用することになりました。
感謝しております(*^_^*)
また、今後も参考にさせてください。
【2013/03/30 10:05】
URL | 紫 #SFo5/nok [ 編集]
Re: タイトルなし
分かりづらくて申し訳ありません。
ＨＳＶの計算方法の最初の部分には書いてあるのですが、ＨＬＳの計算の部分でもＲ，Ｇ，Ｂの値を０～１になるように、それぞれ２５５で割ってからImax、Iminを計算して下さい。
以上、よろしくお願い致します。
【2013/03/29 23:03】
URL | Akira #- [ 編集]
すみません、
２－２５５－１９２
でしたね。
どちらにしても
２から３ケタの数字を引くんですから、
マイナスになっちゃいます。
困っています
よろしくお願いします。
<m(__)m>
【2013/03/29 22:40】
URL | 紫 #SFo5/nok [ 編集]
こんにちは。もし見ていてくださったら教えてください。
今RGBからHLS値に変換する式をエクセルで立てています。
H値とL値はなんとかできました。
でもS値が、どうしてもマイナスになってしまいます。
よく式を見てみると
彩度S = (Imax - Imin) / (２ - Imax - Imin)
こちらの分母は、普通マイナスになりますよね？
たとえば、Webカラーのピンクは
255,192,203
ですから、2-192-203はマイナスになります。
なにが間違っていますか？
H値とL値はだいたい280以下の３ケタに変換されるのですが
Sだけできません。
もし分かりましたら、教えてください。
【2013/03/29 22:31】
URL | 紫 #SFo5/nok [ 編集]
|
