logo

profile

Yosuke Toyota

@youtoy

プライベートでの活動で、ビジュアルプログラミング・IoT・ロボットトイを扱う技術コミュニティ等を単独・共同で複数主催したり、技術系イベント等で登壇をしたりしています。そして、ガジェットが大好きで頻繁に購入しています。また、普段の勤務先は通信会社の研究所です。

  • facebook
  • twitter
  • github
  • qiita
  • youtube
image

【2023年 正月🎍】トラの画像が粒子状になりウサギの画像に変化:p5.js・PixiJS で実装

JavaScript を使ったアニメーションで、2023年のお正月ネタ🎍 を作ってみました(描画ライブラリの…

開発中 visibility 174 thumb_up_alt 0 comment 0
image

「画像とテキストが細かく分解されて霧散する」という演出を p5.js で作成【試作版】

「画像とテキストが細かく分解されて霧散する」という見た目の演出を、 p5.js を利用した描画で作っ…

開発中 visibility 172 thumb_up_alt 0 comment 0
image

「テキストが細かく分解されて飛び散る(またはその逆)」という演出を p5.js で作成【試作版】

「テキストが細かく分解されて飛び散る」という見た目の演出を、 p5.js を利用した描画で作ってみる…

開発中 visibility 301 thumb_up_alt 2 comment 4
image

DualShock 4 と p5.js の組み合わせ(gamecontroller.js を利用)

DualShock 4 での操作と p5.js Web Editor上での描画を組み合わせました(Gamepad API用のライブラリ…

開発中 visibility 81 thumb_up_alt 0 comment 0
image

Scratch とハーフミラーで作る手作りスマートミラー(まだ着手してみたばかりの段階)

ハーフミラーを使ったスマートミラー的な作品を見かけることがありますが、それをいつか作ってみたい…

開発中 visibility 75 thumb_up_alt 0 comment 0
image

p5.js とハーフミラーで作る手作りスマートミラー(まだ着手してみたばかりの段階)

ハーフミラーを使ったスマートミラー的な作品を見かけることがありますが、それをいつか作ってみたい…

開発中 visibility 92 thumb_up_alt 0 comment 0
image

セリアで買った水晶のオブジェの下で LEDキャンドルを光らせてみる

セリアで見かけた水晶のオブジェの下で LEDキャンドルを光らせて、その光る色を変えてみたというもの…

開発中 visibility 55 thumb_up_alt 0 comment 0
image

M5Paper を使った名札(画像転送は UIFlow、3Dプリンタでストラップホール付ケースも)

M5Paper で名札を作り、とあるイベントで使ってみました。デバイスへの画像転送・表示切替に UIFlow …

開発中 visibility 176 thumb_up_alt 2 comment 0
image

カメラ映像の注目してほしい箇所に、視線を集められるかもしれないやつを Scratch で作った!

Scratch を使って作った、カメラ映像上にマンガの「集中線」を表示させられるものです。放射上にひろ…

開発中 visibility 42 thumb_up_alt 0 comment 0
image

カメラ映像の注目してほしい箇所に、視線を集められるかもしれないやつを p5.js で作った!

p5.js を使ってカメラ映像上にマンガで用いられる表現の「集中線」を表示させられるものです。放射上…

開発中 visibility 87 thumb_up_alt 0 comment 0
image

OBS のブレンドモードを使ったお手軽 VFX

OBS の 27.2 から、画像編集ソフトなどで行える「加算・減算・乗算・比較などのブレンドモードの処理…

開発中 visibility 92 thumb_up_alt 0 comment 0
image

すごく恐ろしいものの片鱗を味わったときの強い驚きを画面上で伝えられるかもしれない Scratch作品

すごく恐ろしいものの片鱗を味わったときに出るかもしれないセリフを使い、カメラ映像上で強い驚きを…

開発中 visibility 51 thumb_up_alt 1 comment 0
image

すごく恐ろしいものの片鱗を味わったときの強い驚きをカメラ映像上で伝えられるかもしれない Webアプリ

すごく恐ろしいものの片鱗を味わったときに出るかもしれないセリフを使い、カメラ映像上で強い驚きを…

開発中 visibility 80 thumb_up_alt 0 comment 0
image

ブラウザでの音声認識結果を物理演算を適用して落下させてみるテスト

p5js(描画) + Matter.js(物理演算)+ p5.speech(Web Speech API のラッパー)の組み合わせで、…

開発中 visibility 59 thumb_up_alt 2 comment 0
image

顔がうつるのをとにかく邪魔する 🎃 の有効期限を 2ヶ月延長してみた(🎃 ⇒ 🎅🏻)

思いついたので勢いで作ってみたというもので、顔の上のキーポイント検出ができる Stretch3 の Facem…

開発中 visibility 72 thumb_up_alt 0 comment 0
image

顔がうつるのをとにかく邪魔する 🎃(Stretch3・Facemesh2Scratch で開発)

思いついたので勢いで作ってみたというもので、顔の上のキーポイント検出ができる Stretch3 の Facem…

開発中 visibility 185 thumb_up_alt 0 comment 0
image

ハロウィン仕様のアニメーションを Webフォントと p5.js で作ってみた(色付けバージョン)

とあるイベントでのハンズオンで、 CSSアニメーションを用いたハロウィン仕様のアニメーションを作っ…

開発中 visibility 51 thumb_up_alt 0 comment 0
image

ハロウィン仕様のモノクロのアニメーションを Webフォントと p5.js で作ってみた

とあるイベントでのハンズオンで、 CSSアニメーションを用いたハロウィン仕様のアニメーションを作っ…

開発中 visibility 178 thumb_up_alt 0 comment 0
image

p5.js で複数の円をランダムに動かす(大きさ依存で複数のパターンがある緩急のついた動き)

p5.js で複数の円をランダムに動かしているのですが、その動く速さは大きさに依存していて、なおかつ…

開発中 visibility 82 thumb_up_alt 0 comment 0
image

Scratchキャットが分身の術で敵の攻撃を避ける

p5.js で作成していた仕組みを Scratch で実装しようとした際に、実装ミスで偶然できたものに、少し…

開発中 visibility 54 thumb_up_alt 0 comment 0
image

p5.js で描画した円の横方向の動きと LEDテープの点灯した LED の移動を連動させる試作

micro:bit につないだ LEDテープの点灯位置を、p5.js側の円の横方向の座標と連動させました。Web Ser…

開発中 visibility 132 thumb_up_alt 0 comment 0
image

obniz と MESH をシンプルに連携させてみる(ボタンブロックの操作結果をディスプレイに表示)

obniz が MESH に対応したので、まずは簡単な動作テストも兼ねてボタンブロックとの組み合わせを試し…

開発中 visibility 190 thumb_up_alt 1 comment 0
image

toio + toioDo を使ってセリアで買ったハロウィングッズのカボチャ・お化けを走らせてみる

セリアで売っていたハロウィングッズのカボチャ・お化けが、toio と組み合わせて走らせるのにちょう…

開発中 visibility 172 thumb_up_alt 0 comment 0
image

【Spresense でお手軽 IoTカメラ】obniz を活用してインターネット越しの操作を実現

Spresense のカメラボードを使って作った、カメラ撮影ができる仕組みを、obniz を組み合わせることで…

完成 visibility 196 thumb_up_alt 0 comment 0
image

toio と toio Do でマスコットキーホルダーを手軽に走らせる

ダイソーで売っていたマスコットキーホルダーが、toio と組み合わせるのにちょうど良いサイズ感だっ…

完成 visibility 569 thumb_up_alt 9 comment 0
image

自分で操作しておもちゃの刀を光らせる(デバイス:toio・ATOM Lite、実装:UIFlow)

以前作っていた、ダイソーで売っているおもちゃの刀を光らせる作品の別バージョンで、刀を光らせる色…

完成 visibility 302 thumb_up_alt 2 comment 0
image

SVGフィルタを使った溶けるようなエフェクトとパス上を動く複数の球体のアニメーション +3D の動き

五〜十二芒星のパス上を動く複数の球体に、SVGフィルターの溶けるようなエフェクトを適用したり、3D…

開発中 visibility 87 thumb_up_alt 0 comment 0
image

SVGフィルタを使った溶けるようなエフェクトを 3D空間上のオブジェクトに適用したアニメーション

SVGフィルタを使った溶けるようなエフェクト(feGaussianBlur・feColorMatrix の組み合わせ)を、3D…

開発中 visibility 129 thumb_up_alt 0 comment 0
image

SVGフィルタを使った溶けるようなエフェクトとパス上を動く複数の球体のアニメーションの組み合わせ

五〜十二芒星のパス上を動く複数の球体に、SVGフィルターの溶けるようなエフェクト(feGaussianBlur…

開発中 visibility 65 thumb_up_alt 0 comment 0
image

動く 3D の立方体にグローエフェクトを適用してみる(p5.js での実装)

p5.js で実装したグローエフェクト(ブラーフィルターと合成を活用した方法)を、WEBGLモードで描画…

開発中 visibility 58 thumb_up_alt 0 comment 0