Sketch Chat — AIと対話しながらp5.jsを書くクリエイティブコーディング環境
「3Dの球体を10個並べて回転」「もっと速く」「背景を白に」——チャットで指示すると、AIがp5.jsのコードを生成・修正し、その場で描画される。Sketch Chatは、コードエディタを主役に据えつつ、AIを補助チャットとして横に置いたクリエイティブコーディング環境です。クリエイティブコーディングやプログラミングの入門を助けるツールとして開発しています。
文章で指示すると絵がその場に立ち上がり、出てきたコードはそのまま自分で読み書きして仕上げられる。Sketch Chatは、その行き来を気軽に楽しめるクリエイティブコーディング環境です。
主役はあくまでコードエディタ(source of truth)です。チャットは生成・修正の提案と質問回答を担い、提案されたコードは自動では反映されず、「適用」ボタンを押して初めてエディタに取り込まれます。AIに全部を任せて結果だけを受け取るのではなく、人がコードを読み、選び、育てるための道具として設計しています。作ったものがその場で絵として動くので、初学者がコードと結果を結びつけながら学べることを狙っています。
できること
- チャットに自然言語で指示するとp5.jsコードが生成され、キャンバスに即座に描画される。「もっと速く」「背景を白に」のような修正指示にも追従する
- コードエディタで直接書き足し・書き換えができ、補完や公式リファレンス参照など、書くための機能を備える
「ORBIT(廃棄物データ可視化システム)」で育てた「チャット × コンテンツ操作」の仕組みを土台に、p5.jsのクリエイティブコーディングへ応用した実験的なプロジェクトです。今後はワークショップなどでの活用も視野に、現在も開発を続けています。
- CategoryEducation & Community
- Teamumt
