ブラウザで動かせるボールプールをボールプールらしいカラーにしてみた

以前に作ったもののバリエーション。
色や形をボールプールらしくしたらコンテンツとして少し明確になった気がします。
こういうアピアランスって大切。

ブラウザからカメラを起動しています。
カメラに写る手の位置と「グー」「チョキ」「パー」をhandpose.jsで判定して、matter.jsのBodyを動かしてます。
上のgifではスムーズですが、手の位置とポーズの判定が少しギクシャクします。

どうやってmatter.jsのBodyにランダムな色を指定するのか考え込んでいましたが、p5.js側で指定すればいいことに気づくと、わりと簡単でした。

PCでご覧いただいた方が、わかりやすいかも。

ブラウザでボールプール(カラー版) | ballpool with handpose (color version) >>

【関連記事】
ブラウザでボールプールをつくってみた

Leave a Comment

2021年7月22日 Generative Design