logo

profile

Yosuke Toyota

@youtoy

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

  • facebook
  • twitter
  • github
  • qiita
  • youtube
image

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

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

開発中 visibility 57 thumb_up_alt 0 comment 0
image

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

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

完成 visibility 89 thumb_up_alt 0 comment 0
image

#toio + #toioDo でダイソーのマスコットキーホルダー 1台(or 2台)を走らせてみる

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

開発中 visibility 162 thumb_up_alt 3 comment 0
image

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

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

完成 visibility 180 thumb_up_alt 2 comment 0
image

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

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

開発中 visibility 61 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 75 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 47 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 35 thumb_up_alt 0 comment 0
image

p5.js でグローエフェクトと伴う図形の描画アニメーション(イージングで動きに変化をつける)

p5.js で作ったグローエフェクト(ブラーフィルターと合成を活用した方法)と anime.js によるイージ…

開発中 visibility 40 thumb_up_alt 0 comment 0
image

特定の組み合わせで面白い見え方:「五・十二芒星のパス上を動く 1〜16個の球体のアニメーション」

「五芒星・十二芒星のパス上を動く、1〜16個の球体のアニメーション」を p5.js の標準機能で作りまし…

開発中 visibility 36 thumb_up_alt 0 comment 0
image

「五芒星〜十芒星のパス上を動く 8個の球体のアニメーション」を p5.js で実装

「五芒星〜十芒星のパス上を動く 8個の球体のアニメーション」を p5.js の標準機能のみで作りました…

開発中 visibility 68 thumb_up_alt 0 comment 0
image

七芒星の上を動く複数の 3D球体のアニメーション【p5.js の標準機能のみを利用】

「七芒星の上を動く、複数の 3D球体のアニメーション」を p5.js の標準機能のみで作りました。動いて…

開発中 visibility 60 thumb_up_alt 0 comment 0
image

p5.js で動画とカメラ映像の合成を試す(海の動画素材との色合いを調整)

p5.js を使って、海の動画とカメラ映像とを合成してみました(海の動画とカメラ映像の色合いが違った…

開発中 visibility 61 thumb_up_alt 0 comment 0
image

p5.js で画像とカメラ映像の合成を試す(窓ガラスと雨の水滴の写真素材を使って)

Photoshop の本で見かけた「曇りガラスと別の画像を合成する方法」を、p5.js の処理に置きかえて試し…

開発中 visibility 82 thumb_up_alt 0 comment 0
image

p5.js で VFX: Canvas の filter(hue-rotate) で色違いの炎を作る

CanvasRenderingContext2D.filter の hue-rotate() で色相の値を変化させて、映像エフェクト用の赤い…

開発中 visibility 75 thumb_up_alt 0 comment 0
image

【光学迷彩・透明マント的エフェクト(両手版)】p5.js と MediaPipe Hands で実装

「両手の親指と人差し指で囲まれた領域は、人の後ろの背景が見える」という光学迷彩・透明マント的な…

開発中 visibility 281 thumb_up_alt 0 comment 0
image

多方向に光が拡散するテキスト用エフェクトを作ってみた: p5.js で実装した画像処理

元々、ブラーフィルタと p5.js での画像合成を組み合わせてグローエフェクトを試作していたものがあ…

開発中 visibility 67 thumb_up_alt 0 comment 0
image

光る軌跡でパーティクル発光: ブラーフィルターと合成処理を使った p5.js でのグローエフェクト

p5.js を使った描画処理で、ブラーフィルターと合成処理を組み合わせたグローエフェクトを試作してい…

開発中 visibility 64 thumb_up_alt 0 comment 0
image

【指先付近のみに焦点があうカメラ映像】p5.js と MediaPipe Hands で実装

人差し指の先を起点に、その周りだけ焦点が合う(その点から遠いとブラーフィルタのぼかしが強くなる…

開発中 visibility 86 thumb_up_alt 0 comment 0
image

p5.js と OpenCV.js(画像処理)の組み合わせ: エッジ検出と線分検出をお試し

p5.js でカメラ映像取得・描画処理を行う構成で、画像処理部分に OpenCV.js を使ってみるテストで、C…

開発中 visibility 262 thumb_up_alt 0 comment 0
image

p5.js の描画と 100円ショップの透明下敷きで擬似ホログラム(ペッパーズ・ゴーストの仕組みで)

擬似ホログラムなどとも紹介されたりする「ペッパーズ・ゴースト」という視覚トリックを用いた仕組み…

開発中 visibility 174 thumb_up_alt 2 comment 0
image

【2本の指で作る小さな透明マント的エフェクト】p5.js と MediaPipe Hands で実装

親指と人差し指で囲まれた領域は、人の後ろの背景が見えるという、透明マント的なエフェクトをカメラ…

開発中 visibility 487 thumb_up_alt 1 comment 0
image

【VFX】空間を燃やしたり手から稲妻を出したり:ブラウザ上で動く p5.js 実装のアプリ

After Effects などでの VFX用に配布されてる素材データを使い、ブラウザ上で動く p5.js 実装の処理…

開発中 visibility 234 thumb_up_alt 1 comment 0
image

手からレーザー光線: ブラウザ上で動く p5.js を使ったアプリ

Effekseer というオープンソースのエフェクト作成ソフトの公式サンプルを活用して、p5.js を使った映…

開発中 visibility 97 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 188 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 80 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 142 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 367 thumb_up_alt 0 comment 0
image

LINE で IoT(テキストベースのプログラミングは使わず開発)

LINE アプリのリッチメニューを操作と、M5Stack系のデバイスを連携させる仕組みを、ビジュアルプログ…

開発中 visibility 550 thumb_up_alt 0 comment 0
image

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

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

開発中 visibility 160 thumb_up_alt 0 comment 0