ProcessingでRGB色空間とHSB色空間（HSV色空間）の相互変換

ブログ投稿のテストを兼ねて、RGB色空間とHSB色空間（HSV色空間）を相互変換するプログラムをProcessingで作ってみました。

ほんとはProcessing.js上で実行させたかったのですが、controlP5ライブラリがjavascriptに対応していないっぽくて断念・・・。

動作例

 

GUIとしてスライダを実装しています。スライダを操作すると、値に応じて背景の色が変化します。

左3つのスライダがRGB色空間、右3つのスライダがHSB色空間に対応しています。
一方の色空間のスライダを調節すると、もう一方の色空間の各値も自動的に変換されるようになっています。

Processingの実装上HSB色空間としていますが、HSV色空間と同じみたいですね。

実行環境

• Processing 3.0.1
• ライブラリとして、controlP5を使用しました。

http://www.sojamo.de/libraries/controlP5/

実装

controlP5

ProcessingのGUIライブラリとしてよく使われているcontrolP5を使って、スライダを作ってみました。

Slider

以下のようにしてスライダを作ることができます。 

import controlP5.*;
ControlP5 cp5　= new ControlP5(this);

cp5.addSlider(name)
   .setPosition(posX,posY)
   .setSize(sizeX,sizeY)
   .setRange(0,rangeMax)
   .setValue(initValue)//スライダの数値を設定
   .setNumberOfTickMarks(tickMark)//スライダの目盛数
;

また、sliderの名前と同じ名前のメソッドを定義することで、sliderが操作されたときにそのメソッドを呼び出すようになっています。

例えば、以下のredメソッドは、redという名前のスライダを操作したときに呼び出されます。
引数valueは呼び出されたときのスライダの数値です。

void red(float value){//スライダredを操作したときに呼び出される
}

ただ、マウスポインタでGUIを動かすときだけでなく、
slider.setValue()のようなメソッドを実行する時にも上記のメソッドが実行されてしまう仕様のようです。

RGB色空間とHSB色空間の変換

RGBとHSBの相互変換できるメソッドがあったので、java.awt.Colorを用いました。

https://docs.oracle.com/javase/7/docs/api/java/awt/Color.html

HSBからRGBへの変換は以下の通り。

public static int HSBtoRGB(float hue,
           float saturation,
           float brightness)

引数hue,saturation,brightnessの値は0.0-1.0を取ります。

一方、RGBからHSBへの変換は以下。

public static float[] RGBtoHSB(int r,
               int g,
               int b,
               float[] hsbvals)

引数r,g,bの値は0-255を取ります。
うーん、ややこしい。。。

そのまま計算式を突っ込むよりも少ないコードで書けるので、今回は仕方なく使うことに。

全体のソースコード

スライダが操作されたときに、背景色clrにスライダの値を入れ、且つもう一方の色空間に値を変換するようにしました。
draw()メソッド内で、もう一方の色空間の値をsliderに反映させています。