Panel CHOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

※当サイトにはプロモーションリンクが含まれます。

Panel CHOP の UI パネル値取得を示す図

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
@maru6o6をフォロー

概要 📖 – 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 チャンネル

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

まる。
まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です!


パラメータ解説 ⚙️

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 とすると uhorizontal, vvertical に改名

Queue Overlapping Events .queue 📥

1 つのタイムスライス内で発生した複数イベントを取りこぼさずキューに保持するモード

Queue Overlapping Events .queue 📥
– 同一タイムスライス内に発生した複数のパネルイベントをキューに溜めて順次出力
wheelkey 等、瞬時値と 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
  1. Slider COMP を配置して垂直スライダーを作成
  2. Panel CHOP の Component に Slider COMP のパスを指定
  3. Select に v を入力してスライダー値だけをチャンネル化
  4. Math CHOP で 0〜1 を 0〜360 にスケールし Geometry COMP の rotate に Export

Example 2: マウス座標で描画位置をリアルタイム追従 🖱️

Container COMP → Panel CHOP (Select: u v inside) → Render TOP overlay
  1. 全画面 Container COMP に Panel CHOP を Component 参照
  2. Select に u v inside を指定しマウス座標とホバー状態を取得
  3. u, v を Math CHOP で画面座標系に変換
  4. Render TOP のオーバーレイ位置にバインドしてリアルタイム描画

Example 3: Button 連打を取りこぼさずカウント 🔘

Button COMP → Panel CHOP (queue=on, queuesize=64) → Count CHOP
  1. Button COMP の Panel CHOP で state をチャンネル化
  2. Queue Overlapping Events をオンにして 1 フレーム内の複数クリックも保持
  3. Queue Size を 64 に設定し高速連打にも耐える
  4. 後段 Count CHOP で立ち上がりエッジをカウント

Example 4: ホイール入力でカメラズーム 🎥

Container COMP → Panel CHOP (Select: wheel, queue=on) → Lag CHOP → Camera COMP
  1. Container COMP の wheel 値を Panel CHOP で取得
  2. Queue Overlapping Events を必ずオンにする(wheel は瞬時値)
  3. Lag CHOP で滑らかなズーム遷移に整形
  4. 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 🎯


Info CHOP情報 📊

Panel CHOPは Info CHOP による詳細情報取得に対応しています。

CHOP固有情報 🎚️

  • start: CHOPインターバルの開始(サンプル単位)
  • length: CHOPのサンプル数
  • sample_rate: フレーム毎秒のサンプルレート
  • num_channels: CHOPのチャンネル数
  • time_slice: タイムスライス有効時は1、無効時は0
  • export_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 をオンにしてフレーム間補間を有効化

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎


まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング&インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram:@malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました