logo

image

p5.js

ツール : オープンデータ/オープンソース
image

パワーポイントのウィンドウをブラウザで取り込んで手の動きなどで操る

mediaDevices.getDisplayMedia、MediaPipe Hands、p5.js を組み合わせて、ブラウザでのパワポウィン…

開発中 visibility 53 thumb_up_alt 0 comment 0
image

p5.jsでオーディオスペクトラムアナライザ

p5.jsでつくったオーディオスペクトラムアナライザです

完成 visibility 217 thumb_up_alt 0 comment 0
image

上半身で演奏

体の座標に合わせて音が鳴るやつです。p5.jsでMediaPipe Pose使ってます。

完成 visibility 431 thumb_up_alt 2 comment 0
image

MediaPipe Hands で認識した指の位置・本数で LEDテープの点灯位置・色を変化させる

カメラにうつした特定の指を伸ばして左右に動かすと、それに連動してフルカラーLED上で特定の色で LE…

開発中 visibility 181 thumb_up_alt 1 comment 0
image

p5.js のキャンバスにパワポの画面を取り込む(Screen Capture API を活用)

「MediaDevices.getDisplayMedia() / Screen Capture API」を p5.js と組み合わせ、パワポアプリのプ…

開発中 visibility 72 thumb_up_alt 0 comment 0
image

両手の動きで音を奏でる(p5.js + MediaPipe Hands + Sonic Pi 等)

乱数を使って生成している音源と、カメラ映像中の両手の動きを検出して作った情報とを組み合わせて、…

開発中 visibility 223 thumb_up_alt 0 comment 0
image

音トイ[teamJ] ゆるく音楽

toioを使って楽しい楽器を作りました

完成 visibility 261 thumb_up_alt 0 comment 0
image

某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(気がするかもしれない)Webアプリ V2

5本の指全てに強力な火炎系呪文を宿す、某アニメの悪役が使うあの危険な禁呪があなたの手に!?このW…

完成 visibility 574 thumb_up_alt 10 comment 0
image

ジェスチャーで空中に浮いた UI を操ってるっぽい感じの見た目にしようとする最初の一歩

空中に浮いた UI を操ってるっぽい感じのことをやりたいな、と思って、とりあえず JavaScript(ライ…

開発中 visibility 67 thumb_up_alt 0 comment 0
image

3Dオブジェクトを手の動きで操る(p5.js + ml5.js)

p5.js の 3D空間内でのカメラ操作と ml5.js の Handpose を組み合わせて、3Dオブジェクトを手の動き…

開発中 visibility 67 thumb_up_alt 1 comment 0
image

虹彩や目・口の位置検出を使ったバーチャルキャラクター的なものをブラウザ上で動かしてみる

以前からある顔のキーポイント検出ができる画像認識の仕組みに、新しく虹彩の位置検出が加わったとい…

開発中 visibility 68 thumb_up_alt 1 comment 0
image

p5.js で WebAR を試す(ARマーカー上への重畳描画、複数マーカーやマーカーの回転を利用)

p5.js で WebAR を試したもので、p5.js による描画を ARマーカー上に重畳させてみたり、複数のマーカ…

開発中 visibility 60 thumb_up_alt 0 comment 0
image

p5.js の 2D描画で擬似3D を試す

p5.js の 2D描画で擬似3D を試してみたもので、3次元の座標(今回は奥行き方向の位置)に応じて大き…

開発中 visibility 31 thumb_up_alt 0 comment 0
image

p5.js で Tweenアニメーション(TweenJS との組み合わせ)

p5.js の 2D の描画で Tweenアニメーションを利用するため、ライブラリの TweenJS を組み合わせて動…

開発中 visibility 29 thumb_up_alt 0 comment 0
image

ブラウザ上で「物理演算エンジン」と「2台の異なるデバイスの画面を仮想的につなげる仕組み」の組み合わせ

JavaScript の物理演算エンジン Matter.js+p5-matter と p5.js、MQTT を組み合わせて、異なる 2つの…

開発中 visibility 53 thumb_up_alt 0 comment 0
image

JavaScript で「物理演算+手の画像認識+物理演算」を組み合わせた仕組みを試す

JavaScriptライブラリの Matter.js・Handtrack.js・p5.js を組み合わせて、物理演算と画像認識を組み…

開発中 visibility 54 thumb_up_alt 0 comment 0
image

2台のスマホの画面が仮想的につながったり動的につながる方向が切り替わる

p5.js による描画のプログラムと MQTT によるリアルタイム通信を組み合わせて、2つのスマホの画面が…

開発中 visibility 30 thumb_up_alt 0 comment 0
image

M5Stack Light Sword with Image Effects(光る剣とエフェクト)

ダイソーで売っているおもちゃの剣を光らせたり、剣を光らせる前に映像エフェクトをつけてみたりしま…

完成 visibility 281 thumb_up_alt 6 comment 0
image

p5.js で猫のイラストの VTuber(MediaPipe Holistic との組み合わせ)

目・口をそれぞれ開いている・閉じているイラストの表示を切り替えたりすることで VTuber 的なことが…

開発中 visibility 91 thumb_up_alt 0 comment 0
image

p5.js で猫のイラストの VTuber(まだ途中段階 ver.2)

イラスト4枚を切り替えたり動かしたりすることで VTuber 的なことができる、という話を聞いたのをき…

開発中 visibility 165 thumb_up_alt 0 comment 0
image

p5.js を使った現実世界のデジタルズーム(リアルタイムなカメラ映像をズーム)

ブラウザで表示されているカメラ映像の一部をデジタルズームしてみる仕組みのテストです。

開発中 visibility 45 thumb_up_alt 0 comment 0
image

6台の toio で追いかけっこ( p5.js 用ライブラリ「p5.toio」を使った実装 )

先頭の toio を 2台目の toio が追いかけ、2台目を3台目が...、という仕組みで 6台の toio で追いか…

開発中 visibility 188 thumb_up_alt 0 comment 0
image

MediaPipe Selfie Segmentation でバーチャル背景的なことなど!

人物と背景の分離が行える MediaPipe Selfie Segmentation の JavaScript版に手を加え(p5.js を併用…

開発中 visibility 259 thumb_up_alt 0 comment 0
image

某アニメの悪役が使う「とっておきの手品」っぽい呪文が使えた気になる(かもしれない)Webアプリ

5本の指全てに強力な火炎系呪文を宿す、某アニメの悪役が使うあの呪文を、使える気になるかもしれな…

開発中 visibility 644 thumb_up_alt 1 comment 7
image

変身ポーズメーカー[動画アップしました]

赤ずきんちゃんにオオカミの魔の手が・・・!あなたも正義のヒーローに変身だ!

完成 visibility 559 thumb_up_alt 4 comment 0
image

数字への愛を体で示してもらおう

数学好き・数字好きの人って案外多いと思うんですが、本気で数字が好きな人ってなかなかいないと思う…

完成 visibility 419 thumb_up_alt 3 comment 2
image

ウルトラソウルかニセモノソウルか判定してやろう

「そして輝く?」と言われたら。そう、ウルトラソウウゥッハアイィッッですよね。でもそのソウル、ち…

完成 visibility 731 thumb_up_alt 10 comment 3
image

遠隔人類補完計画

リモートワークで起こっているATフィールドを溶かしていくプロジェクト 今回はZoomなどのビデオ通話…

開発中 visibility 354 thumb_up_alt 3 comment 1