太陽を召喚する能力を得た気分になれる Webアプリ(Babylon.js + p5.js で実装)

© CC BY 4+ visibility231
© CC BY 4+
visibility231

Babylon.js の Particle Helper を使った描画を p5.js の WEBGLモードのキャンバスに描画し、p5.js側で揺れを含む動きやカメラ画像を加える構成で試作した作品です

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

ツール

システム構成

ブラウザのキャンバスに描画を行う際に便利な、描画ライブラリの p5.js と Babylon.js を組み合わせて使ってみました。

p5.js の 2D描画と、Babylon.js の簡単にパーティクルシステムを扱える「パーティクルヘルパー」を組み合わせてみています(Babylon.js の描画は、p5.js の WEBGLモードのオフスクリーンキャンバスに描画しており、それを p5.js のメインキャンバス上で扱っています)。

ストーリー

Babylon.js のパーティクルシステムを試していた流れと、p5.js を使った色々な試作をしていた流れがあり、それらが合流して合わさった形やったものです。

また、クリエイティブコーディング系のイベント「GENUARY」の作品としても投稿してみました(イベント詳細は、関連リンクの中の Qiita の記事をご参照ください)。

メンバー
  • user
    Yosuke Toyota @youtoy

関連リンク

同じニオイがする作品
  • event AMAZing Button アメージング・ボタン
  • event スポーツイベントの思い出アプリ
  • event 某アニメの悪役が使う「とっておきの手品」っぽい禁呪が使える(気がするかもしれない)Webアプリ V2
  • event toio地球儀

Proto lovers ♥
user

作品を登録しよう

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

close

目次


Proto lovers ♥
user