Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2019-02-15

色を色々・・・

| 09:07

 色を色々してみようと思ったら、なんかRGB命令がエラーになっちゃう~・・・と思っていたら、どうやらv1非互換のようです。

 v1では、「R,G,B(0-255)を指定してカラーコード(なでしこ用$RRGGBB)を返す」
 v3では、「HTML用のカラーコードを返すRGB(R,G,B)で各値は0-255」

 とゆうことになってる。これは、似ているようで返り値が大違い。

 なでしこ1で「$」は16進数の記号なので、数値で返ってきていました。

色=RGB(255,255,255)
色を表示

 なでしこ1で実行すると、「16777215」。

 カラーコードが欲しい時には、HEXしてやればいいだけなんだけど、Rが0~15だった時に困っちゃうんだよね。文字列ゼロ埋めは効かないし何気にめんどーだった。(・・・と思ったら、v3では文字列ゼロ埋め出来た!)

 なでしこ3では、なんとふつーに「#ffffff」のカラーコードが返ってきます。

 特にv3では、HTMLCSSでカラーコードを使いたい場面が多いから便利~♪


 シカシ、色を色々するに当たっては、数値が欲しい場合が多いことも事実~。

 なでしこ3の16進数の記号は「0x」なので、「#」を「0x」に置換してやれば良いかと思ったら単なる文字列になってしまった(りゃそうだ;)

 でも、整数変換したらふつーにできました☆

色=「#FFFFFF」
色=色の「#」を「0x」に置換。
色=色を整数変換。
色を表示

 よきかなよきかな♪


 でっ、実際のところ色を色々するために、まずやりたいことはむしろRGBの逆で、16進のカラーコードから、RとGとBに分解するコトなんだよね。

 なにゆえの命令は無いのだろう。(R,G,B)で指定する方が世の中の主流なのか?

 ワタシは、色を指定するといえば16進コードなんだけど・・・

 ででで、こんな感じ?

#HTMLの16進カラーコード(#RRGGBB)を256色表示(R,G,B)に分解。
●(色を|色の)RGB分解
 分色とは変数。分色=配列。
 色=色の「#」を「0x」に置換。
 色=色を整数変換。
 数を2から0まで繰り返す
  分色[数]=色%256。
  色=(色-分色[数])/256
 ここまで。
 分色で戻るここまで。

 初めは、カラーコードを文字列として三分割して、それぞれ数値化しようと思ってたけど、ひらめいて256で割っていけばいい・・・とゆうことに気が付いたのでこうなりました。(行数的には、さほど変わらんw)


 こうして分解したRとGとBを使ってやろうとしていたのは、RGBからHSLに変換することでした。

 輝度とか彩度とか使うと、単色グラデーションを作るのが、簡単なんだよねー☆

 まあ、単にグラデーションを表示するだけなら、CSSだけで簡単に出来るんですが。

 はじめ、HSVとHSBとHSLのコトがよく分かってなくて、ムダにHSBの変換方法を調べまくってしまったヽ(;´Д`)ノ

 ちなみに、HSVとHSBは同じ物で、HSLは別物でした;;;

 CSSで直接指定出来るのは、HSLです。

 しかも、呼び方の違う明度B(V)と輝度Lの部分だけでなく、同じ名称の彩度Sの出し方も違うっていうね!(でも色相Hは同じ)


 ここのが一番分かりやすくて、よく分かりました!

https://www.peko-step.com/tool/hslrgb.html

 でっ、こんな感じ?

# RGB(#RRGGBB)→HSL(H,S,L)
# H=0~360。S,L=0~100。
●(色を|色の)HSL変換
  Hとは変数。Sとは変数。Lとは変数。Maxとは変数。Minとは変数。Rとは変数。Gとは変数。Bとは変数。
  色=色のRGB分解。R=色[0]。G=色[1]。B=色[2]。
  Max=色の配列最大値。Min=色の配列最小値。
  もし、(R=G)かつ(G=B)ならば、H=0。
  違えばもし、Max=Rならば、H=60*((G-B)/(Max-Min))。
  違えばもし、Max=Gならば、H=60*((B-R)/(Max-Min))+120。
  違えばもし、Max=Bならば、H=60*((R-G)/(Max-Min))+240。
  もし、H<0ならば、H=H+360。
  H=Hを四捨五入。
  L=(Max+Min)/2。
  もし、L<128ならば、S=(Max-Min)/(Max+Min)
  違えばもし、(Max=255)かつ(Min=255)ならば、S=0。
  違えば、S=(Max-Min)/(510-Max-Min)
  S=S*100を1で小数点四捨五入。
  L=L/255*100を1で小数点四捨五入。
  [H,S,L]で戻るここまで。

 ・・・と思ったら、なでしこ3には配列最大値も、配列最小値も、小数点四捨五入も無いじゃーん( ;∀;)


 こんな感じか・・・?

●(Aの)配列最大値
 数とは変数。最大値とは変数。Cとは変数=0。
  Aを反復
    数=対象整数変換。
    もし、C=0ならば、
     最大値=数。
    違えば、
     もし、数>最大値ならば、最大値=数。
    ここまで。
    C=C+1。
  ここまで。
  最大値で戻るここまで。

●(Aの)配列最小値
 数とは変数。最小値とは変数。Cとは変数=0。
  Aを反復
    数=対象整数変換。
    もし、C=0ならば、
     最小値=数。
    違えば、
     もし、数<最小値ならば、最小値=数。
    ここまで。
    C=C+1。
  ここまで。
  最小値で戻るここまで。

●(数をAで)小数点四捨五入
  数=数*(10^A)
  数=数を四捨五入。
  数=数/(10^A)
  数で戻る
ここまで。

 なでしこ1は、こういう便利機能が色々あるのが良かったですけれどもねー。

 そういえば、いつかのマイナビの連載で、小数点で四捨五入する方法が説明されてたような(?)

 教育用に主眼を置いた場合、こうゆうちょっと考えたら出来る的なコトは、自分で考えられるようになった方が良いとゆうことなのか、それとも単にまだ、こういった細かい部分にまでは手が及ばぬとゆうことなのか。

 でも、最初の頃は完全に便利機能頼みだったし、それを何から何まで自分で考えなきゃならんとすると、どうしてよいか分からずやる気無くしてただろうから、特に表をどうこうする的な命令なんかは、1と同じに使えるようになるといいなあ。


 それはさておき、一応逆もできるようにして・・・

# HSL(H,S,L)→RGB(R,G,B)
●HSL2RGB(H,S,L)
  Maxとは変数。Minとは変数。Rとは変数。Gとは変数。Bとは変数。
  もし、L<50ならば、
    Max=2.55*(L+L*(S/100))。Min=2.55*(L-L*(S/100))
  違えば、
    Max=2.55*(L+(100-L)*(S/100))。Min=2.55*(L-(100-L)*(S/100))
  ここまで。
  もし、(0≦H)かつ(H<60)ならば、
   R=Max。G=(H/60)*(Max-Min)+Min。B=Min。
  違えばもし、(60≦H)かつ(H<120)ならば、
   R=((120-H)/60)*(Max-Min)+Min。G=Max。B=Min。
  違えばもし、(120≦H)かつ(H<180)ならば、
   R=Min。G=Max。B=((H-120)/60)*(Max-Min)+Min。
  違えばもし、(180≦H)かつ(H<240)ならば、
   R=Min。G=((240-H)/60)*(Max-Min)+Min。B=Max。
  違えばもし、(240≦H)かつ(H<300)ならば、
   R=((H-240)/60)*(Max-Min)+Min。G=Min。B=Max。
  違えばもし、(300≦H)かつ(H<360)ならば、
   R=Max。G=Min。B=((360-H)/60)*(Max-Min)+Min。
  ここまで。
  R=Rを四捨五入。G=Gを四捨五入。B=Bを四捨五入。
  [R,G,B]で戻るここまで。

 でもこれは、相互変換を繰り返すと完全に元には戻らないそうです。

 出来る色の数が異なる上に、四捨五入とかしてるんだから、ある種当然ですがw


 ででで、わりとありがちな、色を作ったり相互変換したり出来るヤツ。

http://snowdrops.starfree.jp/nako3/RGB_HSL.html

 別にこれを作ろうとしてたわけでは無く、単に特定の色を輝度グラデーションした中色が取りたかっただけなんだけどさー。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20190215