ProtoPedia
profile

Yosuke Toyota

@youtoy
image

ルーレットコントローラー 2台を同時にブラウザで扱う: Web HID API + p5.js

人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画を、ブラウザ上の JavaScript のみでやってみつつ、それを 2台同時にやってみたものです

開発中 visibility 16 thumb_up_alt 0 comment 0
image

ルーレットコントローラーをブラウザで扱う:Web HID API で取得して p5.js で可視化

人生ゲーム for Nintendo Switch専用ルーレットコントローラーの数字の取得と描画をブラウザ上の JavaScript のみでやってみた、というものです(数字の取得は Web HID)

開発中 visibility 36 thumb_up_alt 1 comment 0
image

MacBook の画面の開閉を可視化:Web HID API で取得して p5.js で可視化する

X で見た MacBook のパネルのヒンジの角度を Macアプリで使うという作品について、コードを見たら HID で取得する実装のようだったので、ブラウザの Web HID API で使ってみました

開発中 visibility 47 thumb_up_alt 0 comment 0
image

M5 GraviTimer: 回転させて/傾けて使う自動開始のタイマー【M5Stack】

M5Stack Core2 の底面・上面・片側の側面を地面に置くと、その時のデバイスの向きによって、異なる規定の時間でのカウントダウンが自動で始まるタイマーです

完成 visibility 151 thumb_up_alt 1 comment 0
image

サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示

サオコン・100均の空気ポンプ・toio・パーティクル描画を組み合わせた体験型展示です

開発中 visibility 99 thumb_up_alt 0 comment 0
image

サオコン・太鼓型コントローラー・100均の空気ポンプの入力に反応するパーティクル:p5.jsでの描画

サオコンや太鼓の達人用コントローラー、100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画しています。

開発中 visibility 169 thumb_up_alt 1 comment 0
image

サオコン + Joy-Con を Scratch と連動させてみた(ブラウザの拡張機能自作による)

Nintendo Switch の釣りゲーム用のコントローラー「サオコン(+ Joy-Con)」を、Scratch と連動させてみました。実現方法は、ブラウザの拡張機能の自作です。

開発中 visibility 116 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day21「枠線などの線だけでの描画」をルーレット型デバイスで

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、21日目のお題「枠線などの線だけでの描画」の作品として投稿したものです

完成 visibility 139 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day29「思いきりカラフルに」をリングコンで

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、29日目のお題「思いきりカラフルに」の作品として投稿したものです

完成 visibility 121 thumb_up_alt 0 comment 0
image

サオコン + Joy-Con を p5.js の描画と連動させてみた:Gamepad API を利用

サオコン + Joy-Con を p5.js の描画と連動させてみた試作です。Gamepad API を利用してブラウザとの連動を実現しています。

開発中 visibility 164 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day17「梅雨をコードで表現」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、17日目のお題「梅雨をコードで表現」の作品として投稿したものです

完成 visibility 149 thumb_up_alt 1 comment 2
image

【2025年】 minacoding Day6「架空の生き物」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、6日目のお題「架空の生き物」の作品として投稿したものです

完成 visibility 131 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day5「朝一番にコードを描く」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、5日目のお題「朝一番にコードを描く」の作品として投稿したものです

完成 visibility 95 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day4「ランダムを使ったコード」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、4日目のお題「ランダムを使ったコード」の作品として投稿したものです

完成 visibility 95 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day2「自分なりのケーキ」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、2日目のお題「自分なりのケーキ」の作品として投稿したものです

完成 visibility 99 thumb_up_alt 0 comment 0
image

【2025年】 minacoding Day1「円だけを使った描画」を p5js で作る

毎日設定されているお題にそって作品を作る minacoding というイベントの 2025年版で、1日目のお題「円だけを使った描画」の作品として投稿したものです

完成 visibility 151 thumb_up_alt 2 comment 0
image

太鼓型のコントローラーの入力に反応する輝くパーティクル(p5.jsでの描画) 【試作版】

太鼓の達人用コントローラーや100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画していて、作品展示に向けて試作していたものです。

開発中 visibility 220 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーでインタラクティブなパーティクル:円状に拡がるアニメーション描画

p5.js のカスタムシェーダーでインタラクティブなパーティクルの描画を作ったものです。中心から円状に拡がるアニメーションをシェーダーで描きました。

開発中 visibility 215 thumb_up_alt 0 comment 0
image

p5.js のカスタムシェーダーでインタラクティブな光るパーティクル・拡がる円のエフェクト描画

p5.js のカスタムシェーダーでインタラクティブな光るパーティクルの描画を作っていたのですが、そこに馴染むように拡がる円のエフェクトをシェーダーでの描画に加えてみました

開発中 visibility 235 thumb_up_alt 0 comment 0
image

太鼓型のコントローラーや100均の空気ポンプでの入力に反応する輝くパーティクル(p5.jsでの描画)

太鼓の達人用コントローラーや100均の空気ポンプでの入力に反応する輝くパーティクルです。パーティクルはp5.jsで描画しています。

開発中 visibility 392 thumb_up_alt 1 comment 0
image

p5.js のカスタムシェーダーでインタラクティブな光るパーティクル描画

p5.js のカスタムシェーダーを使った光るパーティクル描画で、キー操作で一部のパーティクルが外方向に跳ねるような動きをしたり、マウスカーソルを左右に動かすと軌跡が変わったりします

開発中 visibility 394 thumb_up_alt 0 comment 0
image

Seeed SenseCAP Watcher で人を検出したら LINEアプリに通知

Seeedさんの「SenseCAP Watcher W1-A」と、そのデバイス用の Node-RED のノードを組み合わせ、さらに LINE用ノードを使って「人検出 ⇒ アプリ通知」という仕組みを作成

開発中 visibility 187 thumb_up_alt 1 comment 0
image

ビジュアルプログラミングと振動するガジェットで楽しむ科学実験遊び

子どもが学びを得つつ楽しめる「科学実験遊び」。その科学実験の部分に、ビジュアルプログラミング・ガジェットの要素をコラボさせてみた試みです。

完成 visibility 549 thumb_up_alt 14 comment 0
image

100均の空気ポンプや太鼓型のコントローラーで toio を動かす(ブラウザでの処理)

小さなロボットの toio を、ブラウザ経由で制御する際に、100均の空気ポンプや太鼓型のコントローラーによる物理的入力を toio を動かすきっかけに使います

完成 visibility 464 thumb_up_alt 1 comment 0
image

太鼓の達人用コントローラーを叩くほど自分の姿が透明になっていく...

太鼓の達人用コントローラーを叩くほど、自分の姿がだんだんと透明になっていく...という作品を作りました(ふちを叩くと、透明になりかけた/透明になった姿が元通りになります)

開発中 visibility 146 thumb_up_alt 0 comment 0
image

p5.js でシェーダーを使った画像フィルターと何かの外枠を作って Webカメラ映像と組み合わせる

p5.js でシェーダーを使った画像フィルター(シェーダーの処理は自前で実装)と、何かの外枠を作って、それらを Webカメラ映像と組み合わせてみた作品です

完成 visibility 332 thumb_up_alt 2 comment 2
image

フィットネスアシスタントガジェット - Fitness Assistant Gadget

ずっと座ったままで作業を続けるのは良くない! ということで、その問題を解消するための仕組みを M5Stack系デバイスと Chromecast の組み合わせで試作してみました

完成 visibility 229 thumb_up_alt 4 comment 0
image

100均で売っている空気が吹き出るアイテムを入力インターフェースにする(マイクを利用)

100均で売っている「空気ポンプ」や「ピコピコハンマー」の空気の吹き出し口にマイクをあて、それらを入力インターフェースにする、というお試しです

開発中 visibility 460 thumb_up_alt 2 comment 0
image

Nintendo Switch の Joy-Con の傾きと Babylon.js の描画との連動

Nintendo Switch の Joy-Con の傾きを WebHID API で取得して、それを Babylon.js の球の高さと連動させてみた、という簡単なテストです

開発中 visibility 135 thumb_up_alt 0 comment 0
image

Nintendo Switch の Joy-Con の傾きを p5.js の描画と連動させる

Nintendo Switch の Joy-Con の傾きを WebHID API で取得して、それを p5.js の線の描画の向きと連動させてみた、という簡単なテストです

開発中 visibility 168 thumb_up_alt 0 comment 0