Patchlight

入力・処理・出力のブロックをつなぎ、光・音・色の反応をブラウザだけで試せる、小さなワークショップ教材です。

コード公開

この作品

ボタンとあかりの端子をつなぎ、押すと部屋が明るくなるところから始める工房を作りました。条件・待ち時間・カウントを間に挟み、同じ入力の反応を変えながら仕組みを確かめられます。

ブロックの追加や配線の編集、取り消しとやり直しに対応し、作品はブラウザへの自動保存、JSON、共有リンクで持ち帰れます。描いた色は、編集可能な仕組みとは別にSVG画像として書き出せます。

流れを見る図の動きやスクロールで、流れを追えます。動きはオフです。工程を選んで読めます。

作品内のボタンや明るさを操作すると、信号がつないだ線を進みます。

条件・待ち時間・回数のブロックが、信号を通すか、いつ通すかを変えます。

通過した信号が明かりや音、描画の色となり、配線を変えた効果を確かめられます。

画面から独立したイベントエンジンを中心に、HTML・CSS・JavaScriptで実装しました。エンジンが信号を処理し、画面側が通知を受けて光を描き、音を合成し、紙に色を足します。端子はタッチとキーボードで操作できるボタンです。

配線を編集すると待機中の処理とカウントをリセットし、古い信号が新しい作品へ届かないようにします。一方、明るさスライダーは入力として扱い、動作中の状態を引き継ぎます。読み込み時には不正な設定や循環する接続を拒否します。

信号の順序、条件の境界、カウント、遅延と取消をエンジンで検査し、ブラウザでは接続操作から点灯、保存と読み込みまでを確認する自動テストを用意しました。配線を変えた後の動作や、明るさ入力がカウントを消さないことも検査対象です。

ブラウザ内で動く静的な教材としてまとめ、配布するファイルも参照先とハッシュを検査します。実機やアカウントの準備なしに、作例を動かして配線を変え、自分の仕組みとして持ち帰れます。

Sony MESH公式ではない独立実装で、公開仕様を一次資料として参照しています。独自のイベントモデルで学ぶ教材であり、実機通信や公式レシピとの互換性は対象外です。初めての利用者が仕組みを理解できるかの検証はこれからです。