はじめに
明けましておめでとうございます。今年もよろしくおねがいします。
本題
ml5.js(bodySegmentation)の習作として「Mask Drift ML5」というサイトを公開しました。
(スマホなどからでも体験できますが、PC環境推奨です。)

年明けからp5.js web editorでちまちま作ってたものをほとんどそのまま、codexにWebサイト化してもらった感じです。
表現制作の"楽しい"の部分だけ自分でやって、それを世に公開するまでのセットアップやパラメータ調整のUI画面(Tweakpaneを採用)などはAI任せです。これ自体、良いのか悪いのか。
とはいえ、これで作れる画像は結構気に入っています。
サイトにはMidjourneyで生成したサンプル画像を20枚ほど用意しています。また、PNG / JPG(5MB以下)であればご自身の画像もアップして加工することもできます。
ギャラリー




調整できるパラメータもなかなか凝っている自負があり、中でも2つお気に入りを紹介します。
1つは「Tile Scale(end)」というパラメータです。セルのサイズが寿命に応じてスケールします。

ちなみに、人のシルエットが検出できるということは人以外の領域に限定してエフェクトをかけることも当然できます。

(「春」「すみれの花束をつけたベルト・モリゾ」エドゥアール・マネ)
もう1つは「Snap to Grid」、デフォルトではONですが、これをOFFに切り替えるだけでだいぶ違った見え方になります。




他にもパラメータはたくさん用意してあります。
同じ写真でも、ちょっと設定を変えるだけで全然違うものが出来上がったりします。
GitHubのREADMEに日本語で各パラメータの意味も説明しています。

自分で遊んでても楽しいです。ぜひあなたも遊んでみてください。
SNSに投稿する際はメンションくれると嬉しいです。(強制ではありません。)
また、バグや要望機能などあればご連絡ください。
さいごに
ml5のbodySegmentationは人物と背景を切り分けるのをメインのユースケースとして考えているようで、人物以外のものの検知はできません。
人物検知も大人数や後ろ姿とかの画像になると解析がうまくできないケースがあります。
この条件下でも十分楽しいですが、人物に限らずもっといろんなものを”うねうね”できたほうが遊びの幅がぐんと広がるはずです。
と言うことで改良版というわけではないですが、実は、MediaPipe(YOLO11)とp5.jsを組み合わせて車や花といった人物以外のオブジェクトのセグメンテーションも取れるバージョンを準備中です。
そちらも、出来たら公開します。
おたのしみに。