はじめに
初めまして。この記事をご覧いただきありがとうございます。
3 月某日、いつも通りボケっと YouTube を見ていると「おにまい」の色相について考察されている動画に出会いました。
この動画では「おにまい」のシーンを HSL 色空間から分析し、アニメ制作者の意図を読み解こうとしています。
これを見て「自分もやってみたい!!」と思ったので、Three.jsの勉強としてクローン風アプリを作ることにしました。
HSL 色空間とは色を Hue(色相、何色か)、Saturation(彩度、鮮やかさ)、Lightness(明度、明るさ)の 3 要素で表現したもののことです。 https://en.wikipedia.org/wiki/HSL_and_HSV
作成物の動作
実際に動かしてみるとしたのような形です。Clouflare Pagesの制限に引っかからないよう調整していたらだいぶ見にくいgifになってしまいました。
素晴らしい絵は以下からお借りしました。ありがとうございます。
出典: 川瀬巴水版画集 1 (https://rnavi.ndl.go.jp/imagebank/data/post.html)
使用技術
-
画面描画
- React
- Three.js
Reactを使いたかったのでラッパーであるreact-three/fiberを介して使用しています
-
ホスティング
制作前の構想
最低限の仕様として以下のことを想定していました。
- ファイルダイアログから画像を入力できる
- 入力画像を描画しクリック、あるいはマウスオーバーで画像の色を取得できる
- 画像から取得した色が HSL 色空間に表示できる
今回はThree.jsの勉強という意味合いが強かったので、HSL 色空間を表示するコンポーネントから制作をはじめました。
意識したこと
GitHubのイシュー機能を使ってタスクを分解することをなるべく意識しながら作業をしていました。
普段個人で何か作成するときは、とりあえずガンガン書いて後から考えることが多くありましたが、今回は初めに必要な機能を脳内でタスクにしてから作業を開始したので沼にはまることが少なかったように思います。
ついでに見積りと実績もなるべく書くようにしていたので、いかに自分の体感がガバガバか改めて認識する機会になりました。
見積りと実績が乖離している例
- 見積り 1h
- 実績 2.5h
さすがに 1h 以内の誤差に収めたいですね…
よかったこと
やりたいと思ったことをやれる喜びを再認識した
仕事だからではなく、自分がやりたいと思ったことをだんだんゴールに近づけていく楽しさやうれしさを改めて感じることができました。
テストの安心感を知った
以前 VOICEVOX にコントリビュートした際には、テストが用意されていたので自分の変更が致命的な破壊を起こしていないことへの安心感がありました。
そのため、一応今回は特に重要度の高かった HSL <—> RGB 変換のような部分のテストを書いてあります。
実際ここはWikipediaに書いてある内容のコピーなのですが、数学よわよわな私にとってかなり不安なところだったので書いてよかったと思っています。
https://github.com/tunamaguro/3d-color-picker/blob/main/src/coord/index.ts
悪かったこと
作るのが遅すぎた
私の制作速度が遅すぎて、もともとの動画の作者の方がすでに WEB 番を作成、公開されていました…
これが WEB で利用できなかったので作ろうと思ったのですが、アプリの存在意義が完全に消失してしまいました orz。
css の知識がなさすぎる
普段のレイアウトをMUIのようなライブラリに頼って、通常のcss(sass)をほぼほぼ書いていなかったので毎回プロパティを検索していました。
地力を高めるためにライブラリに頼らずcssを精進します。
最後に
改めて自分が作ったものを見ると改善点しかないアプリだと思います。ですが、こうして書くことで初めてわかることも多くあったので、 それを今後の実装に活かしていきたいと思います。
最後まで駄文をお読みくださりありがとうございました。