logo

image

p5.js

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

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

10本の指全てに強力な火炎系呪文を宿す!?某アニメの悪役が使うあの危険な禁呪よりも、さらに強力な…

開発中 visibility 71 thumb_up_alt 0 comment 0
image

Leap Motion での手の認識を利用したアート描画(p5.js の描画との組み合わせ)

Leap Motion で右手or左手or両手を認識した時に、それに合わせて右・左・正面のそれぞれの方向に加速…

開発中 visibility 66 thumb_up_alt 0 comment 0
image

【プロジェクション版】toio のランダムな軌跡で描かれるアート(+p5.js の描画)【試作-2】

ランダムな座標間を動く toio の軌跡を、専用マットの機能(絶対位置座標の取得)で取り出し、その軌…

開発中 visibility 93 thumb_up_alt 0 comment 0
image

toio のランダムな軌跡で描かれるアート(p5.js の描画との組み合わせ)【試作中】

ランダムに生成した座標間を動く toio の軌跡を、専用マットの機能(絶対位置座標の取得)で取り出し…

開発中 visibility 248 thumb_up_alt 0 comment 0
image

AI姿勢推定技術で身体を楽器にする「Skeleton Sequencer」

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

開発中 visibility 446 thumb_up_alt 4 comment 0
image

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

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

開発中 visibility 149 thumb_up_alt 0 comment 0
image

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

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

完成 visibility 323 thumb_up_alt 1 comment 0
image

上半身で演奏

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

完成 visibility 520 thumb_up_alt 3 comment 0
image

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

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

開発中 visibility 253 thumb_up_alt 1 comment 0
image

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

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

開発中 visibility 142 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 272 thumb_up_alt 0 comment 0
image

音トイ[teamJ] ゆるく音楽

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

完成 visibility 284 thumb_up_alt 0 comment 0
image

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

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

完成 visibility 742 thumb_up_alt 10 comment 0
image

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

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

開発中 visibility 81 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 97 thumb_up_alt 1 comment 0
image

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

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

開発中 visibility 154 thumb_up_alt 1 comment 0
image

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

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

開発中 visibility 173 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 43 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 43 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 87 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 97 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 39 thumb_up_alt 0 comment 0
image

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

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

完成 visibility 361 thumb_up_alt 6 comment 0
image

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

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

開発中 visibility 387 thumb_up_alt 0 comment 2
image

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

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

開発中 visibility 574 thumb_up_alt 1 comment 0
image

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

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

開発中 visibility 54 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 334 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 434 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 856 thumb_up_alt 1 comment 7
image

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

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

完成 visibility 580 thumb_up_alt 4 comment 0