各種カラーピッカーの実装、パレット数の増加

管理人のワロタロです。

本日、Ver. 0.1.2を公開しました。 今回は主な変更は、各種カラーピッカーの実装です。 また、使い方のページも最新のバージョンに合わせて更新しました。

各種カラーピッカーの実装

今まではHSL風のグリッド一本だったカラーピッカーを拡充し、HSVホイール、HSLグリッド、中間色、簡易光学モデルの４つを切り替えられる形で刷新しました。

HSVホイール

定番のHSVホイールです。

HSLグリッド

HSL色空間のグリッドです。彩度の高い色を一発で指定できるのが利点です。前のバージョンはマス目が細かすぎたので粗くしました。

中間色

これはオリジナルのカラーピッカーです。名前の通り、中間色を選びやすくすることを目的として考えてみたものです。

例えば夕焼け空のようにオレンジ色から青に向かって変化するグラデーションを作るときには、途中に彩度が低いほぼ灰色の色を経由して色を変化させていく必要があります。そういう場合にはHSVやHSLのホイールでは直感的に色を選びづらいため、なにか良い方法はないかなーと思っていました。

最近は色空間がたくさん増えているので、使えるものがないか探しました。近年CSSで使えるようになったOKLchやOKLabやHWB、さらにOKHSV、OKHSL、HCYなんてのもあるらしいですが、個人的にはどうもお絵描きには微妙な感じがします。境界線が見えるのが気になったり、色相によって選べる面積が違ったりします。

参考：Interactive color picker comparison

結局はHSVが一番単純で使いやすい（主観）ので、HSVをベースに試行錯誤した結果、今回の形になりました。ちなみにこのカラーピッカーは色空間ではなく、色相と彩度のHSV円をぼかした画像を表示しているだけのものです。そのため色の値とピッカー上の表示は基本的に一致しないのですが、実用上はそれほど問題にならないのではないかと思います。

なお、まだ本格的に使ってみていないので、便利かどうかは分かりません（笑）

簡易光学モデル

今回の更新の目玉です。

これは、

• メインライト光
• リムライト光
• 球の素材色
• 床面の素材色

の４つの色をもとに、簡易な光学的な計算をして球の陰影をシミュレーションしています。下のように素材の色や光の組み合わせしだいで色々な目的、シーンを表現できます。

シミュレーションと書きましたが、３ＤＣＧソフトで光の影響度を決める画像を事前に作っておいて、各色と掛け算したものを合計しているだけです。ですから球をキューブに変えるとか光の角度を変えるとかいったことはできないのですが、計算は高速です。

このピッカーもどれだけ役に立つかは未知数ですが、大雑把に色を決めていくにはかなり便利だと思います。唯一の問題は、アプリ本体の表現力がこのカラーピッカーを活かせるほどまだ無いということです（ぉぃ

近況

気まぐれでカラーピッカーに先に手を出したところハマってしまい、画像ファイルレイヤーはまだ実装できていません…自分があまり使わないからというのもあるんですが。

今後はそれをやるのと、線画とブラシ塗りの表現力の向上、使いやすさの向上をしたいと考えています。そこはかなりの大工事になりそうで震えてます。

その後はおそらくグラデーション機能の実装になると思います。そこまで行ければ、かなりの絵が描けるアプリになるはずです。

頑張れ！自分！

その他の更新

• 使い方のページの更新
• 編集モード時に各種のレイヤーを選択する操作をしてもレイヤーパネルが更新されない問題の修正
• パレット設定パネルでHSVのスライダで彩度を０か最高にしたとき色相が０になる問題の修正（色相を維持するよう修正）
• パレットをドラッグ＆ドロップして値をコピーできるよう実装
• 色設定パネルのブラシプレビューを削除（画面を広く使うため）
• その他細かな問題の修正