
某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(かもしれない)Webアプリ V3になる?
10本の指全てに強力な火炎系呪文を宿す!?某アニメの悪役が使うあの危険な禁呪よりも、さらに強力な…

Leap Motion での手の認識を利用したアート描画(p5.js の描画との組み合わせ)
Leap Motion で右手or左手or両手を認識した時に、それに合わせて右・左・正面のそれぞれの方向に加速…

【プロジェクション版】toio のランダムな軌跡で描かれるアート(+p5.js の描画)【試作-2】
ランダムな座標間を動く toio の軌跡を、専用マットの機能(絶対位置座標の取得)で取り出し、その軌…

toio のランダムな軌跡で描かれるアート(p5.js の描画との組み合わせ)【試作中】
ランダムに生成した座標間を動く toio の軌跡を、専用マットの機能(絶対位置座標の取得)で取り出し…

AI姿勢推定技術で身体を楽器にする「Skeleton Sequencer」
姿勢推定技術で身体を楽器にするアプリです。2010年頃に3Dセンサ(Kinect)とPCを組み合わせて実現し…

パワーポイントのウィンドウをブラウザで取り込んで手の動きなどで操る
mediaDevices.getDisplayMedia、MediaPipe Hands、p5.js を組み合わせて、ブラウザでのパワポウィン…

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

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

MediaPipe Hands で認識した指の位置・本数で LEDテープの点灯位置・色を変化させる
カメラにうつした特定の指を伸ばして左右に動かすと、それに連動してフルカラーLED上で特定の色で LE…

p5.js のキャンバスにパワポの画面を取り込む(Screen Capture API を活用)
「MediaDevices.getDisplayMedia() / Screen Capture API」を p5.js と組み合わせ、パワポアプリのプ…

両手の動きで音を奏でる(p5.js + MediaPipe Hands + Sonic Pi 等)
乱数を使って生成している音源と、カメラ映像中の両手の動きを検出して作った情報とを組み合わせて、…

音トイ[teamJ] ゆるく音楽
toioを使って楽しい楽器を作りました

某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(気がするかもしれない)Webアプリ V2
5本の指全てに強力な火炎系呪文を宿す、某アニメの悪役が使うあの危険な禁呪があなたの手に!?このW…

ジェスチャーで空中に浮いた UI を操ってるっぽい感じの見た目にしようとする最初の一歩
空中に浮いた UI を操ってるっぽい感じのことをやりたいな、と思って、とりあえず JavaScript(ライ…

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

虹彩や目・口の位置検出を使ったバーチャルキャラクター的なものをブラウザ上で動かしてみる
以前からある顔のキーポイント検出ができる画像認識の仕組みに、新しく虹彩の位置検出が加わったとい…

p5.js で WebAR を試す(ARマーカー上への重畳描画、複数マーカーやマーカーの回転を利用)
p5.js で WebAR を試したもので、p5.js による描画を ARマーカー上に重畳させてみたり、複数のマーカ…

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

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

ブラウザ上で「物理演算エンジン」と「2台の異なるデバイスの画面を仮想的につなげる仕組み」の組み合わせ
JavaScript の物理演算エンジン Matter.js+p5-matter と p5.js、MQTT を組み合わせて、異なる 2つの…

JavaScript で「物理演算+手の画像認識+物理演算」を組み合わせた仕組みを試す
JavaScriptライブラリの Matter.js・Handtrack.js・p5.js を組み合わせて、物理演算と画像認識を組み…

2台のスマホの画面が仮想的につながったり動的につながる方向が切り替わる
p5.js による描画のプログラムと MQTT によるリアルタイム通信を組み合わせて、2つのスマホの画面が…

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

p5.js で猫のイラストの VTuber(MediaPipe Holistic との組み合わせ)
目・口をそれぞれ開いている・閉じているイラストの表示を切り替えたりすることで VTuber 的なことが…

p5.js で猫のイラストの VTuber(まだ途中段階 ver.2)
イラスト4枚を切り替えたり動かしたりすることで VTuber 的なことができる、という話を聞いたのをき…

p5.js を使った現実世界のデジタルズーム(リアルタイムなカメラ映像をズーム)
ブラウザで表示されているカメラ映像の一部をデジタルズームしてみる仕組みのテストです。

6台の toio で追いかけっこ( p5.js 用ライブラリ「p5.toio」を使った実装 )
先頭の toio を 2台目の toio が追いかけ、2台目を3台目が...、という仕組みで 6台の toio で追いか…

MediaPipe Selfie Segmentation でバーチャル背景的なことなど!
人物と背景の分離が行える MediaPipe Selfie Segmentation の JavaScript版に手を加え(p5.js を併用…

某アニメの悪役が使う「とっておきの手品」っぽい呪文が使えた気になる(かもしれない)Webアプリ
5本の指全てに強力な火炎系呪文を宿す、某アニメの悪役が使うあの呪文を、使える気になるかもしれな…

変身ポーズメーカー[動画アップしました]
赤ずきんちゃんにオオカミの魔の手が・・・!あなたも正義のヒーローに変身だ!