HSV.JavaScript

HSVは色相で決める色。Hに0°から360°の値を与えると、それに応じたRGBの値を返却する関数。0°と360°では同じ結果となる。

一般的にSとVには1.0を渡して使う。Vに与える値を大きくすると明るくなる。

ランダム関数を使ってHの値を作るとカラフルな色になる。ノイズ関数を使ってHに与えると再現性のある(何回再生しても同じ絵になる)ルックを作ることができる。

code:HSV.javascript

// hsv to rgb

// easy to use, H : 0.0 - 360.0, S : around 1.0, V : around 1.0

// THREE.js HSV code sample

// let col3 = hsv(noise() * 36.0, 1.0, 1.0);

// new THREE.Color(col30/255.0, col31/255.0, col32/255.0);

function hsv(H, S, V){

let C = V * S;

let Hp = H / 60.;

let X = C * (1. - Math.abs(Hp % 2. - 1.));

let R, G, B;

if (0 <= Hp && Hp < 1) {R,G,B=C,X,0};

if (1 <= Hp && Hp < 2) {R,G,B=X,C,0};

if (2 <= Hp && Hp < 3) {R,G,B=0,C,X};

if (3 <= Hp && Hp < 4) {R,G,B=0,X,C};

if (4 <= Hp && Hp < 5) {R,G,B=X,0,C};

if (5 <= Hp && Hp < 6) {R,G,B=C,0,X};

let m = V - C;

R = Math.floor(R * 255.);

G = Math.floor(G * 255.);

B = Math.floor(B * 255.);

return R ,G, B;

}