AI coding agent を使った講座の作例集

各作例はブラウザだけで動く静的アプリです。リンク先でそのまま操作できます。

• 01 FM Step Sequencer 概要紹介 & みどころ 2 オペレータ FM 音源と 16 ステップまでのシーケンサーを、ラック機材風 UI で操作する音楽作例です。ノブ、LED、オクターブ切り替え、Web Audio API による即時発音が見どころです。 基本操作 Play/Stop または Space で再生します。マトリクスをクリックして音を置き、ノブで BPM、ステップ数、FM 音色、ADSR を調整します。A/W/S/E... の PC キーで演奏、Z/X でオクターブを切り替えます。
• 02 Procedural Magic Circle 概要紹介 & みどころ 儀式、錬成陣、魔術回路の 3 系統を切り替えられるプロシージャル魔法陣ジェネレータです。発光、床面反射、発動演出、URL 共有による再現性が見どころです。 基本操作 Style、Complexity、Glow、Palette を調整し、Randomize や Regenerate で生成します。Activate で発動演出を再生し、Details から seed、対称性、リング数、記号密度、アニメーション速度を細かく変更できます。
• 03 Gray-Scott Reaction Diffusion 概要紹介 & みどころ Gray-Scott 型の反応拡散モデルをリアルタイムに観察する計算機です。feed/kill などの数値を動かすと、分裂、縞、珊瑚状、カオス状の模様が変化していきます。 基本操作 Run/Stop で計算を制御し、プリセットを選んで模様の傾向を切り替えます。スライダーで feed、kill、拡散係数、計算ステップ数を調整し、キャンバスをドラッグして V 成分を注入します。
• 04 Sudoku 概要紹介 & みどころ 一意解の 9x9 数独を生成して遊べるプレイヤーです。人間が実際に使う解法技法に基づいた難易度設定、候補メモ、論理ヒント、進行状況の自動保存、Light/Dark と多言語切り替えを備えています。作者自身がストレスなく遊べる操作体系を採用しています。 基本操作 マスを選んで入力します。正解入力は Shift + 数字キー、右ボタンを押しながら数字キー、または数字パッドの右クリックです。メモ入力は Shift なしの数字キー、右ボタンなしの数字キー、または数字パッドの左クリックです。Hint で次の論理手を確認できます。
• 05 Cyber Maze 概要紹介 & みどころ 3D のサイバー迷路を生成し、探索、最短経路、ゴール演出、振り返り表示までを 30 秒の撮影シーケンスとして見せる作例です。three.js のカメラワークと発光演出が見どころです。 基本操作 Rec または Space で撮影シーケンスを開始します。Gen で迷路を再生成し、Auto、Walk、View で自動撮影、手動探索、振り返り表示を切り替えます。9x9、15x15、21x21 で迷路サイズを変更できます。
• 06 Neon Drift 概要紹介 & みどころ 敵を自動攻撃し、撃破報酬を SIGNAL CACHE に蓄えて光片で確定する、全 15 ウェーブのサバイバルアクションです。速度を保つほど強くなる DRIFT、5 種類の武器を軸にしたビルドと進化、3 ウェーブごとに戦い方が変わるボスを、Canvas 2D のネオン表現で楽しめます。 基本操作 矢印キー、WASD、ゲームコントローラの左スティック、または画面のドラッグで移動し、攻撃は自動で行います。敵を倒して報酬を溜め、光片 10 個を回収すると次のウェーブへ進みます。Space で一時停止、Q でレベルアップ候補を 1 ランにつき 1 回だけ再抽選できます。