
概要 📖 – UI パネル値の取得とインタラクション制御
Panel CHOPは、参照した Component の panel values(u, v, state, lselect 等)をチャンネルとして取り出す CHOPです。GUI 部品の状態を CHOP ネットワークに引き込むための起点となり、Queue Overlapping Events によりホイールやキー入力のような瞬間値も取りこぼさず捕捉します。
主な用途 🎯
- UI コンポーネント(Button / Slider / Container 等)の状態をチャンネルとして取得
- マウス座標・クリック状態・ホバー状態のリアルタイム取得
- キーボード・ホイール等の瞬間的イベントの取りこぼし防止(Queue 機能)
- GUI 制御値のパラメータ Export への橋渡し
- インタラクティブインスタレーションのユーザー入力ハンドリング
データフロー 🔄
入力: 参照 Component(UI パネル)の panel values
↓
Select / Rename によるチャンネル選択・改名
↓
Queue Overlapping Events による瞬間イベント保持
↓
出力: パネル値の CHOP チャンネル
初心者の方は、以下日本語書籍も手元にあると安心です。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です!
パラメータ解説 ⚙️
Panel Page 📋
Component .component 🧩
参照する Component(UI パネル)のパス指定:
- Component パス: panel values を読み取る対象の Component の OP パス(例:
/project1/button1)
Select .select 🎯
チャンネル化する panel value の選択(パターン / ドロップダウン):
- Select 文字列: チャンネル化する panel value の名前を空白区切りで指定。
*ですべての panel value を選択 - ドロップダウン追加: 右側のドロップダウンメニューから個別の panel value(
u,v,state,lselect等)を選択して追加可能
Rename .rename 🔤
Select で選んだチャンネルのリネーム:
- Rename 文字列: Select 順に対応する新しいチャンネル名を空白区切りで指定。例: Select=
u vに対し Rename=horizontal verticalとするとu→horizontal,v→verticalに改名
Queue Overlapping Events .queue 📥
1 つのタイムスライス内で発生した複数イベントを取りこぼさずキューに保持するモード
Queue Overlapping Events .queue 📥
– 同一タイムスライス内に発生した複数のパネルイベントをキューに溜めて順次出力
– wheel や key 等、瞬時値と 0 を 1 タイムスライス内で行き来する panel value 向け
– オフ時はタイムスライス内の最後の値のみが採用され、瞬時イベントを取りこぼす可能性
Queue Size .queuesize 📦
Queue Overlapping Events のキュー深さ
Queue Size .queuesize 📦
– 同時保持できるイベント数の上限
– キュー満杯時は古いイベントから順に破棄される
– 高頻度イベント(マウスホイール連打等)では大きめに設定
Common Page 🔧
Time Slice .timeslice ⏱️
Time Slice モードの強制設定:
- オン: チャンネルを「タイムスライス」モードに強制
- タイムスライス: 前回のクックフレームから現在のクックフレームまでの時間
Scope .scope 🎯
影響を受けるチャンネルの絞り込み:
- Scope 文字列: 影響を受けるチャンネルを指定する文字列
- パターンマッチング:
*や[1-10]等のパターンが使用可能
Sample Rate Match .srselect ⚡
複数の入力 CHOP のサンプルレートが異なる場合の処理方法
| 項目 | 内部名 | 説明 |
|---|---|---|
| Resample At First Input’s Rate | .first |
最初の入力のレートで他をリサンプル |
| Resample At Maximum Rate | .max |
最高サンプルレートでリサンプル |
| Resample At Minimum Rate | .min |
最低サンプルレートでリサンプル |
| Error If Rates Differ | .err |
レート不一致でエラー |
Export Method .exportmethod 📤
CHOP チャンネルをパラメータに接続する方法
| 項目 | 内部名 | 説明 |
|---|---|---|
| DAT Table by Index | .datindex |
DAT テーブルのインデックスでチャンネルとパラメータを対応付け |
| DAT Table by Name | .datname |
DAT テーブルの行名でチャンネルとパラメータを対応付け |
| Channel Name is Path:Parameter | .autoname |
チャンネル名を `path:parameter` 形式で記述し直接対応付け |
Export Root .autoexportroot 🌳
Channel Name is Path:Parameter モード時のパス基点:
- Export Root パス:
autonameモードでチャンネル名のパス部分を相対化する基点 OP のパス
Export Table .exporttable 📋
DAT Table エクスポート方式での参照 DAT:
- Export Table DAT:
datindex/datnameモード時に参照する DAT のパス
Rename from .commonrenamefrom 🔤
リネーム対象チャンネルのパターン:
- Rename from パターン: リネーム対象とするチャンネル名のパターンマッチング文字列
Rename to .commonrenameto 🔁
リネーム後の置換パターン:
- Rename to パターン: Rename from にマッチしたチャンネルの新しい名前パターン (デフォルトはリネームなし)
実践アイデア 💡
Example 1: Slider UI で 3D オブジェクトを回転制御 🎚️
Slider COMP → Panel CHOP (Select: v) → Math CHOP (Range) → Geometry COMP rotate
- Slider COMP を配置して垂直スライダーを作成
- Panel CHOP の Component に Slider COMP のパスを指定
- Select に
vを入力してスライダー値だけをチャンネル化 - Math CHOP で 0〜1 を 0〜360 にスケールし Geometry COMP の rotate に Export
Example 2: マウス座標で描画位置をリアルタイム追従 🖱️
Container COMP → Panel CHOP (Select: u v inside) → Render TOP overlay
- 全画面 Container COMP に Panel CHOP を Component 参照
- Select に
u v insideを指定しマウス座標とホバー状態を取得 u,vを Math CHOP で画面座標系に変換- Render TOP のオーバーレイ位置にバインドしてリアルタイム描画
Example 3: Button 連打を取りこぼさずカウント 🔘
Button COMP → Panel CHOP (queue=on, queuesize=64) → Count CHOP
- Button COMP の Panel CHOP で
stateをチャンネル化 - Queue Overlapping Events をオンにして 1 フレーム内の複数クリックも保持
- Queue Size を 64 に設定し高速連打にも耐える
- 後段 Count CHOP で立ち上がりエッジをカウント
Example 4: ホイール入力でカメラズーム 🎥
Container COMP → Panel CHOP (Select: wheel, queue=on) → Lag CHOP → Camera COMP
- Container COMP の wheel 値を Panel CHOP で取得
- Queue Overlapping Events を必ずオンにする(wheel は瞬時値)
- Lag CHOP で滑らかなズーム遷移に整形
- Camera COMP の tz パラメータに Export してズーム制御
関連オペレータ 🔗
類似機能OP 🔍
- Panel Execute DAT — panel value 変化をスクリプトイベントとして受ける用途
- Mouse In CHOP — OS レベルのマウス座標を直接取得(UI パネル経由しない)
- Keyboard In CHOP — OS レベルのキーボード入力を直接取得
組み合わせ推奨OP 🔄
- Math CHOP — panel value(0〜1)を任意レンジにスケーリング
- Lag CHOP — UI 入力の急峻な変化を滑らかに整形
- Count CHOP — ボタン押下回数のカウント(state チャンネル)
- Logic CHOP — 複数ボタン状態を AND / OR で組合せ判定
- Trigger CHOP — Button state の立ち上がりで ADSR エンベロープを起動
- Filter CHOP — マウス座標などの細かなジッタを平滑化
前処理・後処理CHOP 🎯
- 前処理: Constant CHOP、Mouse In CHOP、Keyboard In CHOP
- 後処理: Math CHOP、Lag CHOP、Logic CHOP、Count CHOP、Filter CHOP、Select CHOP
Info CHOP情報 📊
Panel CHOPは Info CHOP による詳細情報取得に対応しています。
CHOP固有情報 🎚️
start: CHOPインターバルの開始(サンプル単位)length: CHOPのサンプル数sample_rate: フレーム毎秒のサンプルレートnum_channels: CHOPのチャンネル数time_slice: タイムスライス有効時は1、無効時は0export_sernum: Export接続の更新回数
汎用オペレータ情報 🔄
total_cooks: プロセス開始からのクック回数cook_time: 最後のクック時間(ミリ秒)cook_frame: 最後にクックされたフレーム番号warnings: 警告数errors: エラー数
トラブルシューティング ⚠️
よくある問題と解決策 🔧
❌ Problem: wheel や key イベントが反応しない / 取りこぼす
✅ Solution:
- Queue Overlapping Events をオンにする(wheel / key は同一タイムスライス内で瞬時に 0 へ戻るため)
- Queue Size を十分大きく設定(高頻度連打を想定する場合は 32〜128)
- Select 文字列に対象 panel value 名が正しく含まれているか確認
❌ Problem: 値が更新されない / 0 のままになる
✅ Solution:
- Component パラメータが参照する OP のパスが正しいか確認(typo / 削除済 COMP)
- 対象 Component が パネル系の Component (Button / Slider / Container 等)であること
- Select 文字列が
*または存在する panel value 名と一致しているか確認
❌ Problem: Rename で意図したチャンネル名にならない
✅ Solution:
- Rename は Select で選んだチャンネルと 同順・同個数 で並べる必要がある
- Select=
*の場合は Rename 順序が不定になるため、明示的にu v state等で順序を固定 - 後段で安定したチャンネル名を使いたい場合は Select CHOP でリネームし直す
❌ Problem: マウス座標のジッタが大きい
✅ Solution:
- 後段に Filter CHOP を入れて時間方向に平滑化
- Lag CHOP で立ち上がり / 立ち下がりを別 time constant に整形
- Time Slice をオンにしてフレーム間補間を有効化
参考資料 📚
その他 🔗
- TouchDesigner Wiki — CHOP 概要
- TouchDesigner Wiki — Category:CHOPs
- TouchDesigner Wiki ホーム
- TouchDesigner 公式 Forum
- Facebook — TouchDesigner Help Group

