だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ:Processing > p5.js


ぜひチェックしてください!
▼▼▼
* 2021 Artworks - Recto VRso 2021
* 2021 Artworks: "Another World" - Recto VRso 2021
このエントリーをはてなブックマークに追加


ツイートにも書きましたが社会勉強のために作品を登録してみました。
ぜひチェックしてください〜!
▼▼▼
https://www.hicetnunc.xyz/objkt/10998
このエントリーをはてなブックマークに追加




というわけで愛とまごころでi18nに取り組みました。
OSS活動みたいにみんなでgit経由でわっしょいわっしょいするのはやったことなかったので、
お役に立ててよかったです。

OpenProcessingのEdit Profileから利用言語が変更できるみたいなのでぜひ試してみてください。
プロフィールページも色々変わってるので設定見直すと面白いかも
▼▼▼
OpenProcessing

openprocessing.org_user_13276__view=activity (1)
このエントリーをはてなブックマークに追加


Handsfree.js が今アツいです。
Handsfree.jsはハンドトラッキング(2D/3D)、フェイストラッキング、ボディトラッキングが簡単に扱えるJavaScriptライブラリです。
CDNからサクッと読み込んで利用できます。npmからでも可能。
TensorFlowやMediaPipeなどの機械学習系推定ツールを簡単に利用できるイメージです。
最初に触った時は「えっ、webカメラだけでこんなに自由に色々できるの…?」とかなりびっくりしました。
特にトップページにある手のピンチ動作でブラウザをスクロールできるのには度肝を抜かれました。
デモの埋め込み場所も含めておしゃれすぎる…。
他のデモも面白いのでぜひ体験していただきたいです。

本記事では、冒頭で紹介した作品のようにp5.jsと連動して動かす方法を紹介していきます。
トライする内容は両手トラッキング(2D)です。
現状、ml5.jsでは片手のみのトラッキングですがHandsfree.jsは4本までいけるそうです。
あと読み込みもHandsfree.jsの方が速い印象です。
すごいぞHandsfree.js!

基本の使い方


まずはp5.js抜きの基本の使い方はこんな感じです。
CDNからjsライブラリとcssファイルを読み込みます。
このcssファイルがwebカメラの映像を自動で左右反転してくれる優れものなんですよね…気がきいてる!!
jsコード中、showDebug: true にすることでwebカメラからの映像を表示しています。


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



p5.jsと連動させる


CDNからp5.jsも読み込み、連動させていきます。
webカメラからの映像はp5.js側で読み込み、p5.jsのお作法で左右反転させます。
Handsfreeの呼び出しはsetup関数内から行っています。


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



いい感じに連携できました!
手の頂点に円を描画し、各指の先端を色分けしてみました。
Mar-10-2021 00-16-42



今まで片手トラッキングだけしか挑戦してなかったので両手トラッキングめちゃくちゃワクワクしてます!!
しかも簡単に導入できるのが本当にありがたいですね…。
何か面白いものが作れるといいな〜

Handsfree.jsとp5.js連携するのめちゃくちゃ楽しいのでぜひ挑戦してみてください!
このエントリーをはてなブックマークに追加



というわけで本記事ではキラキラ✨ゆめかわいい🦄銀河のメイキングを書いていきます!
(なお、デイリーコーディング用のコードから少し手を入れました)

イメージはこんな感じ↓ですね。
ゆめかわいい 銀河 - Google 検索
こちらの描き方を参考にコーディングしました。
Tutorial - How to Draw a Galaxy by Sugary-Stardust on DeviantArt

ステップごとに様子がわかりやすいようにrandomSeed()を入れていますが、実際には入れなくてokです。

まずは適当なにょろにょろ線を描いていきます。
ランダムな太さの線でランダムな頂点位置のcurveVertexを描きます。


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



にょろにょろ線を増やします。


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



ちょっとおさまりが良すぎるので線がキャンバスからはみ出すように修正します。


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



ゆめかわいいカラーセットを用意して背景色と線の色をランダムに設定します。


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



ここが最大のポイント!
がっつりぼかします。
コイツが噂の禁断の果実です🍎


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



異なるぼかし具合の白い点々を上から重ねます。
ラメとお星さまのイメージです🌟


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



できあがりです!!
キャンバスの大きさや星の個数を調整したらこんな感じになります。
ダウンロード - 2021-02-26T234516.462
ぼかしがこれだけがっつり入れられて、しかも実行速度そんなに遅くないっていうのはホントありがたいですね!
ぜひゆめかわいい銀河描いてみてください〜🌟🦄🎀💜✨
このエントリーをはてなブックマークに追加

↑このページのトップヘ