Repolode
投稿する
JohnHeibel

JohnHeibel/ClaudeAnimationBase

p5.jsとp5.brushを使い、ガイドに沿ってClaudeで手描き風のキャラクターアニメーションを作るスターターキット。

GitHub で見る
スター
1,283
フォーク
129
未解決の Issue
7
最終コミット
25 日前

これは何？

Claude Animation Baseは、p5.jsとp5.brushをベースに、Claudeで手描き風のカートゥーンアニメーションを制作するためのスターターキットです。キャラクターのClawdに加え、視点、感情、目、口、帽子、エモート、ダンスのライブラリや、描画、タイミング、動き、カメラ、紙の質感を扱うヘルパーが含まれています。

Claude Codeなどのコーディングエージェントを中心にワークフローが進みます。シーンを指示すると、モデルがANIMATION_GUIDE.mdを読み、ショットの絵コンテを作成し、p5.jsで実装したうえで、コンタクトシートで確認してMP4に書き出します。ガイドでは、テキストを入れないこと、ショット間にトランジションを付けること、ブラシのストロークと揺れる線画によるフラットな2D表現などのルールが定められています。

レンダリングは、Chromeを操作するNode.jsスクリプトを使ってヘッドレスで実行し、動画の生成にはffmpegを使います。専用GPUがない環境では水彩風の塗りに時間がかかります。また、ソフトウェアWebGL用のフラグや、NVIDIA GPUを搭載したヘッドレスLinuxマシン向けのフラグも用意されています。

主な機能

  • 01視点、31種類の感情、目、口、帽子、ダンスを備えたキャラクターClawd
  • 02アニメーション制作時にClaudeが従うルールとワークフローを記したガイドファイル
  • 03ブラシ描画、タイミング、動き、カメラ、紙の質感を扱うヘルパー
  • 04コンタクトシート、フレーム一覧、静止画、MP4を生成するヘッドレスレンダラー
  • 05シーンをスクラブ再生できるブラウザスタジオページ

ユースケース

  • コーディングエージェントにテキストで指示して、手描き風の短いカートゥーン動画を生成する
  • AIモデルへのプロンプトで、ショットごとに絵コンテ作成とアニメーションのコーディングを行う実験をする
  • 同じp5.jsベースを使って、新しいキャラクターや感情、衣装に差し替える

トピック

#p5js#animation#claude#generative-art#creative-coding#video-rendering#ai-agent

よくある質問

ClaudeAnimationBase とは？
p5.jsとp5.brushを使い、ガイドに沿ってClaudeで手描き風のキャラクターアニメーションを作るスターターキット。 Claude Animation Baseは、p5.jsとp5.brushをベースに、Claudeで手描き風のカートゥーンアニメーションを制作するためのスターターキットです。キャラクターのClawdに加え、視点、感情、目、口、帽子、エモート、ダンスのライブラリや、描画、タイミング、動き、カメラ、紙の質感を扱うヘルパーが含まれています。
ClaudeAnimationBase は無料で使えますか？ライセンスは？
ClaudeAnimationBase は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
ClaudeAnimationBase は今もメンテナンスされていますか？
活発にメンテナンス中。ClaudeAnimationBase の最終コミットは 2026年9月24日 です。
ClaudeAnimationBase は何に使えますか？
コーディングエージェントにテキストで指示して、手描き風の短いカートゥーン動画を生成する AIモデルへのプロンプトで、ショットごとに絵コンテ作成とアニメーションのコーディングを行う実験をする 同じp5.jsベースを使って、新しいキャラクターや感情、衣装に差し替える
ClaudeAnimationBase はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/JohnHeibel/ClaudeAnimationBase

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト