p5.js(ver 1.5.0)において、ある色Aとある色Bが同じかどうかチェックしたいとします。
試しに下記のようなコードを書いてみると、想定とは異なる結果になっています。


See the Pen
p5_colorCheck by reona396 (@reona396)
on CodePen.



colorAとcolorBはどちらも同じ色(color(0))なので等価のはずですが、
結果として「等価でない」扱いになってしまっています。

というわけで、色の等価チェックはこんな感じに書くといいみたいです。


See the Pen
p5_colorCheck2 by reona396 (@reona396)
on CodePen.



toString()で文字列として比較しちゃえばいいんですね。

color型の中身をコンソールにそのまま出力するとこんな感じです。

.toString()をつけるとこんな感じにしてくれます。比較しやすくなって便利ですね。


get()と合わせてインタラクティブなサンプルを作ってみました。
カーソルが「@」の文字に当たっているかどうかを判定します。
イライラ棒的な遊び方ができそうです。


See the Pen
p5_colorCheck3 by reona396 (@reona396)
on CodePen.



カーソルのある地点の色をget()で取得し、その色が文字色と同じかどうかをチェックしています。
2つの色が等価であればカーソルは文字に触れいているということになります。
実際に試してみた様子↓


参考 :
p5.js Web Editor | Comparing Pixel Color Information