Finite Clause

RGBとHSV(HSB)を相互変換するライブラリを書いた話

モチベーション

いまサイトのTODOにもなっている、Generative DesignのProcessingで書かれたサンプルコードを、
HTML5のAPIで実装するという試みをしている。 最初に考えたのはp5jsを使うということだった。
ただ、p5jsが個人的に使いづらかった、というのも普段npmでインストールしたモジュールを、
requireすることでjsファイル内にインポートして使うことが多い。
p5jsもそれができなくはないのだが、わりとグローバルに展開することを前提としているように見えたのと、
公式のドキュメントが、初見で必要としてる情報を探しづらかった。

そういうこともあり、とりあえず純粋にHTML5CanvasのAPIを使って実装するに至った。
が、ここで問題が出てきた。
p5jsだったから存在していたhsbというカラーフォーマットは、標準のCanvasAPIには存在しないようだった。
Canvasで表現できそうなのはrgb(a)のみのようで、サンプルコードをそのまま実装するのが難しかった。
とはいえ、なるべく忠実に書きたいと思って自分で書いてみた。

最初の一歩

まずはp5jsの中をのぞいてみた。すると、コンバータが書かれてたのでそれをそのまま実装すればよいのだが、
ちょっと欲がでてもうちょっと詳しく調べていた。
いろいろなサイトを読んで、結果としては、wikipediaとその他の方法を少しずつかいつまんでその通りに実装してみた。

最初に作ったプロトタイプをCodePenにあげた。

RGB2HSV

See the Pen RGB2HSV by Yu Kato (@katsew) on CodePen.

HSV2RGB

See the Pen HSV2RGB by Yu Kato (@katsew) on CodePen.

ライブラリ化

プロトタイプとしてはまぁまぁ動いてるように見えた、が、
ちゃんとしたテストを書いて仕様を満たしていること残しておきたいと思ったので、
ライブラリ化することにした。

自作のyeoman-generatorを使って、ライブラリを書きやすくしておいた甲斐もあり、結構すんなりできた。

作ったものはnpmにあげておいた。

color2color - npm

今回の学び

数式に慣れること

これはwikipediaにお世話になりながら学ぶことはできる。
ただ、wikipediaの情報の信頼度などもあるので、本当に正しいのかは
未だに確証が持てないが、少なくともライブラリのテストは通った。
とにかく数式・数学記号がわからないと、実装できるものも実装できない。
今回の件で、多少ながら数式に対する苦手意識を減らせたように思う。
今後も続けていきたい。

プロトタイプとスニペットのすみ分け

このサイトの話になってしまうが、プロトタイプまでいくと、
行数的にサイト上にpre, code要素などを使って書くと見通しが悪そうだった。
小さなスニペットであれば問題ないが、プロトタイプまでやるなら
CodePenに上げたほうが、書きやすいし公開しやすい。

おわりに

以下は、私が最初に実装したGenerative DesignのP.1.0だ。

See the Pen GD - P.1.0 by Yu Kato (@katsew) on CodePen.

いま見ても、イマイチきれいに書けていない…
時間のあるときに、今回作ったものを使ってもう一度書きなおすつもりだ。

参考文献

http://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately

http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

http://codeburrito.com/hsv-to-rgb-color-palette-for-javascript-canvas/

http://voqn.blogspot.jp/2010/05/canvas-hsvhlsjavascript.html

https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93