PUFTER

© CC BY 4+ visibility154
© CC BY 4+
visibility154

音楽に連動した映像を簡単に作成できるWEBアプリケーションです。

link https://github.com/tokuyo109/pufter
動画
開発素材
システム構成
system image

アーキテクチャ : ECS(Entity Component System)

3DCG : THREE.js

JSONで管理しているデータをECSのエンティティに変換しています。 変換したデータをTHREE.jsを用いてレンダリングしています。

ストーリー

制作背景

既存の音楽サービスだけでなく、他の人も楽しめるような音楽の歌詞を含めた3Dアニメーションコンテンツを作りたいと考えました。また、1つの音楽によってオリジナリティーが出せる映像が出力されるような作品を作りたいと考えました。

実装した内容

音楽に連動する3Dアニメーションを簡単に作れるサービスを制作しました。作成したアニメーションはサービス上で共有することができ、共有されたアニメーションに対して、TextAliveに登録されている楽曲を指定することで、音楽を新しい側面から楽しむことができます。

アピールポイント

既存のアニメーションソフトでは、1つ1つ歌詞の発生位置や座標を決めなければなりませんが、このPUFTERでは自動で設定されるため基礎知識が不要で簡単にコンテンツを作成できます。また、既存の歌詞アニメーションサービスでは2Dのものがありますが、より立体的に歌詞アニメーションを表現し音楽を楽しむことができる3DのサービスはこのPUFTERが初めてです。

一番のこだわり

設計の面で、メンバーが日々作業しやすいような環境をつくることを意識しました。

こだわりを実装するために苦労・工夫した点

まずファイルの整理を意識しました。プロジェクトが進むにつれてファイルが増えていく中で、適切に分類し、誰でも簡単に必要なファイルを見つけられるように工夫しました。具体的には、GitHubを活用してバージョン管理を行い、日付ごとにブランチを分けて作業を進めるようにしました。これにより、複数のメンバーが同時に作業してもデータの衝突が起きにくくなり、スムーズな共同作業が可能になりました。また、FlaskのBlueprint機能を用いて、アプリケーションの構造をモジュール化しました。これにより、各機能が独立して開発でき、コードの利便性が向上しました。

今後の展望

アニメーションの数を増やし、作れる作品の幅を増やしたいと考えています。

メンバー
  • user
    HAL大阪07班 @oh02pufter

関連リンク

同じニオイがする作品
  • event CiirrCUS 2nd
  • event 作品マッチングSNS「Echose」
  • event 誇張しすぎた一般相対性理論
  • event Arrival 🚪 ChatGPTとノックでコミュニケーション

Proto lovers ♥
user

イベントまとめ

コンテストまとめ

作品を登録しよう

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

close

目次


Proto lovers ♥
user