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

© CC BY 4+ visibility1433
© CC BY 4+
visibility1433

イラスト4枚を切り替えたり動かしたりすることで VTuber 的なことができる、という話を聞いたのをきっかけに、猫のイラストを使って試しに作ってみているものです。

link https://www.youtube.com/watch?v=vAzeAhePNT8
動画
開発素材

ツール

システム構成

「目を開いている/閉じている、口を開けている/閉じている」というものの組み合わせ 4パターンのイラストを使い、その切り替えや動きを JavaScript のプログラム(p5.js を利用)で処理しています。

また、猫のイラストは以下のジェネレーターで作成しています。

●猫アイコン作成アプリ - CHARATねこメーカー -
 https://charat.me/nyanko/

ストーリー

以下のようなツイートをされていた レオナさん (@reona396 さん) が雑談用のTwitterスペースを開かれていた際に、少し仕組みについて話を聞けました。

https://twitter.com/reona396/status/1429789316855697410

以下のざっくりとした内容を聞いたので、猫のイラストのジェネレーターを探して、以下の動きを実装できそうな p5.js の処理を試しに書いてみて(+パラメータチューニング的なことをやってみつつ)、という感じで進めていきました。

  • イラストはジェネレーターを使って準備した
  • イラストは「目を開いている/閉じている、口を開けている/閉じている」というものの組み合わせ 4パターンがあれば良い
  • 体を少し揺らすような動きを入れると良い感じになる
メンバー
  • user
    Yosuke Toyota @youtoy

同じニオイがする作品
  • event 野良猫これくしょん by 野良猫に癒され隊
  • event Eyebrojector
  • event メッシュバッグとシン三種の神器
  • event toio地球儀

Proto lovers ♥
user

作品を登録しよう

モノづくりしている人に、つくった作品を見てもらえ、リアクションがもらえるかも?

close

目次


Proto lovers ♥
user