Anthropicの生成AI、Claude 3.5 Sonnet + Artifactsに以下のプロンプトを投げた。
p5.jsで作るメディア・アート作品の要件定義書を作ってください。インタラクティブでダイナミック、かつオーディオ・ビジュアルでソーシャルな作品とします。コンセプチュアルな作品背景を含めた説明文とイカしたタイトルも合わせてお願いします。そして、その要件定義書に従ってWEBブラウザで実行できるようにプログラム・コードを含むindex.htmlを作成してください。
その結果は以下の通り。
「Sonic Bloom: デジタル共生庭園」要件定義書
1. コンセプト
「Sonic Bloom: デジタル共生庭園」は、人間とテクノロジー、自然と人工の調和を探求するインタラクティブなメディア・アート作品です。この作品は、デジタル空間内に生態系のメタファーを創造し、観客の参加によって成長し、変化していく仮想の庭園を表現します。
音と映像が融合したこの体験は、私たちの行動が環境に与える影響を視覚化し、集団的な創造性と責任の重要性を強調します。「Sonic Bloom」は、技術を通じて自然との新たな関係性を模索し、デジタル時代における共生の可能性を示唆します。
2. 技術要件
2.1 開発環境
- 言語: JavaScript
- ライブラリ: p5.js、p5.sound.js
- 開発ツール: Visual Studio Code、ローカルサーバー（Live Server等）
2.2 ビジュアル要素
- キャンバスサイズ: フルスクリーン（ウィンドウサイズに応じて調整）
- 色彩: 自然をイメージした有機的な色彩パレット（緑、青、茶、etc.）
- 形状: フラクタル、パーティクル、流体シミュレーションを組み合わせた抽象的な植物の表現
2.3 オーディオ要素
- Webオーディオ APIを使用した動的なサウンド生成
- 環境音（風、水、鳥の鳴き声等）のサンプリングと加工
- インタラクションに応じた音程、音量、エフェクトの変調
2.4 インタラクション
- マウス/タッチ操作: 画面上の要素と直接インタラクト
- マイク入力: 音声による作品への影響
- カメラ入力: 動きや色の検出による環境への反応
2.5 ソーシャル要素
- WebSocketを使用したリアルタイムの多人数参加機能
- 個々のアクションが全体に影響を与えるシステム
- 参加者間のビジュアル・オーディオ要素の共有と相互作用
3. 実装詳細
3.1 ビジュアル生成
- パーティクルシステムを使用した植物の成長シミュレーション
- ノイズ関数を利用した有機的な動きの表現
- 色彩の動的変化によるムードや状態の表現
3.2 サウンドデザイン
- 周波数分析と合成による独自の音響生成
- 空間音響技術を用いた3D音響効果の実装
- ビジュアル要素と連動した音響パラメータの制御
3.3 データ構造
- 植物オブジェクトの階層構造（根、茎、葉、花等）
- 参加者データの管理（位置、行動履歴、影響力等）
- 環境パラメータ（光、水、養分等）のシミュレーション
3.4 最適化
- フレームレート管理による安定したパフォーマンス
- オブジェクトプーリングによるメモリ使用の効率化
- Web Workersを使用した複雑な計算の非同期処理
4. ユーザーエクスペリエンス
- 直感的なインターフェース: 説明なしで操作可能なデザイン
- フィードバック: ユーザーのアクションに対する即時的かつ明確な反応
- 没入感: 視覚と聴覚の調和による強い没入体験の創出
- 発見性: 長期的な関与を促す隠れた要素や進化するコンテンツ
5. 展示要件
- 大型スクリーンまたはプロジェクター（4K解像度推奨）
- 高品質スピーカーシステム（5.1chサラウンド以上）
- タッチスクリーンまたはモーションセンサー for インタラクション
- 高性能コンピューター（GPU搭載推奨）
- 安定したインターネット接続（ソーシャル機能用）
6. 今後の展開
- 機械学習による作品の進化と適応
- VR/AR版の開発によるさらなる没入体験の提供
- 環境データの実時間連携による現実世界との接続
- コミュニティ機能の拡張（作品の共同編集、保存機能等）
この要件定義書は、「Sonic Bloom: デジタル共生庭園」プロジェクトの基本的な方向性と技術的要件を概説しています。実際の開発過程で詳細な仕様や追加機能が決定されることを前提としています。
この
index.htmlファイルは、「Sonic Bloom: デジタル共生庭園」プロジェクトの基本的な実装を含んでいます。以下に主な特徴を説明します：
- ビジュアル要素:
- パーティクルシステムを使用して、動的に変化する抽象的な植物や生命体を表現しています。
- 色彩はHSB色空間を使用し、自然な色調を生成しています。
- オーディオ要素:
- マイク入力を使用して、環境音を取り込みます。
- FFT（高速フーリエ変換）を用いて音声を解析し、ビジュアルに反映させています。
- インタラクション:
- マウスの動きに反応して新しいパーティクルを生成します。
- マイク入力の音量に応じてパーティクルのサイズが変化します。
- レスポンシブデザイン:
- ウィンドウサイズの変更に対応し、常にフルスクリーンで表示されます。
この実装は、要件定義書の基本的な要素を含んでいますが、より複雑な機能（例：ソーシャル要素、高度な音響効果）は含まれていません。これらの機能を追加するには、さらなる開発が必要です。
プロジェクトを発展させるための次のステップとしては以下が考えられます：
- より複雑なパーティクル相互作用の実装
- 高度な音響処理と3D音響効果の追加
- WebSocketを使用した多人数参加機能の実装
- より洗練されたビジュアルデザインの適用
このコードをブラウザで実行すると、動的に変化するパーティクルのアニメーションが表示され、マウスの動きとマイク入力に反応します。さらなる機能の追加や改良について、具体的な要望があればお知らせください。
生成された作品では漆黒の画面から水泡のような色とりどりの円が浮かび上がる。マウス・ポインタのホーバーで新しい追加され、音に反応して円の大きさが変わる。インラインや実行環境によって制約があるので、MacのSafariなどでWEBページを確認するのが良いだろう。
以上は、ただ一度のプロンプトで生成されている。今朝起き掛けに思いついて取り組んだ。プロンプトの作成に4分、テキストとコードの生成に1分、合計5分間で完了した。もっともその後の実行確認や本記事の作成に1時間ほどかかっている。
