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

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

概要 📖 – 円や多角形を生成する

Circle TOPは、円・楕円・多角形・Arc をスタイル付きでレンダリングし、入力と任意のブレンドモードで合成できる生成 TOPです。Radius / Center / Rotate / Fill / Border / Softness / Arc Angles / Polygon Sides といったパラメータで形状とスタイルを細かく制御でき、Comp Over Input をオンにすれば入力 TOP と 45 種以上のブレンドモードで合成できます。

主な用途 🎯

HUD・UI 用の円形マスクやインジケータの生成
Glow / ブルーム素材としてのソフトサークル (Softness で輪郭ぼかし)
多角形 (Polygon オン) による三角形・六角形などの正多角形生成
Arc Angles を使った扇形・ローディング進捗バー・ドーナツ形状の作成
パーティクル UV やライト形状のマスクテクスチャ生成

データフロー 🔄

入力 (任意): 1 枚の TOP テクスチャ (input1)
 ↓
Circle / Polygon / Arc を指定パラメータで描画
 ↓
Comp Over Input オン時は入力と Operation で指定した方式で合成
 ↓
出力: 形状描画済テクスチャ

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Circle Page ⚙️

Radius `.radius` 📏

円・多角形の半径 (X / Y) を指定します。多角形 (Polygon オン) の場合は X 半径のみが使用されます:

Radius X (radiusx): 横方向の半径
Radius Y (radiusy): 縦方向の半径。X と異なる値にすると楕円になる

Radius Unit `.radiusunit` 📐

Radius の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位 (解像度に対する絶対値)
Fraction (0-1)	`.fraction`	解像度に対する 0〜1 の比率 (例: 0.5 で半分)
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比を考慮した 0〜1 の比率

Rotate `.rotate` 🔄

形状全体を指定角度で回転します。多角形や Arc の見た目を調整するのに使います:

Rotate (rotate): 回転角度 (度単位)。正値で時計回り

Center `.center` 🎯

形状の中心座標。(0, 0) がキャンバス中央です:

Center X (centerx): 中心の X 座標
Center Y (centery): 中心の Y 座標

Center Unit `.centerunit` 📐

Center の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比 (-0.5 〜 0.5 を画面端とする)
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Justify Horizontal `.justifyh` ↔️

水平方向のアラインメント

項目	内部名	説明
Left	`.left`	キャンバス左端寄せ
Center	`.center`	中央寄せ
Right	`.right`	右端寄せ

Justify Vertical `.justifyv` ↕️

垂直方向のアラインメント

項目	内部名	説明
Bottom	`.bottom`	下端寄せ
Center	`.center`	中央寄せ
Top	`.top`	上端寄せ

Fill Color `.fillcolor` 🎨

形状の塗りつぶし色 (RGB) と Alpha を指定します:

Fill Color R / G / B (fillcolorr / fillcolorg / fillcolorb): 塗りつぶしの赤・緑・青成分 (0〜1)
Fill Alpha (fillalpha): 塗りつぶしのアルファ値 (0=透明, 1=不透明)

Border Color `.border` 🖍️

ボーダー (縁取り) の色 (RGB) と Alpha を指定します。Border Width が 0 の時は描画されません:

Border R / G / B (borderr / borderg / borderb): ボーダーの赤・緑・青成分 (0〜1)
Border Alpha (borderalpha): ボーダーのアルファ値

Background Color `.bgcolor` 🟫

形状の外側 (背景) の色と Alpha を指定します:

Background R / G / B (bgcolorr / bgcolorg / bgcolorb): 背景の赤・緑・青成分 (0〜1)
Background Alpha (bgalpha): 背景のアルファ値 (0 にすると形状以外が透明になる)

Multiply RGB by Alpha `.multrgbbyalpha` ✖️

オンにすると RGB 値を Alpha 値で事前乗算 (premultiplied alpha) して出力します。Over 合成等で正しい結果を得るために使います:

Multiply RGB by Alpha (multrgbbyalpha): Premultiplied Alpha の有効化トグル

Border Width `.borderwidth` 📐

ボーダー (縁取り) の幅を指定します。0 で非表示:

Border Width (borderwidth): ボーダーの幅 (単位は Border Width Unit 次第)

Border Width Unit `.borderwidthunit` 📐

Border Width の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Border Offset `.borderoffset` 📏

ボーダーが Radius を超えてはみ出す比率を 0〜1 で指定します。実効的に半径が radius + borderoffset * borderwidth になります:

Border Offset (borderoffset): 0 でボーダーが内側、1 で完全に外側に伸びる

Arc Angles `.arcangle` 🌗

開始角度 (beginarcangle) から終了角度 (endarcangle) までの領域を時計回りに 非描画 にします。残った領域だけが Arc (扇形・ドーナツ片) として描画されます:

Begin Arc Angle (beginarcangle): 非描画開始角度 (度)
End Arc Angle (endarcangle): 非描画終了角度 (度)

Anti-Alias `.antialias` ✨

オンにすると形状の輪郭にアンチエイリアシングが適用され、ジャギーが軽減されます:

Anti-Alias (antialias): エッジのスムーズ化トグル

Softness `.softness` 🌫️

形状エッジと背景色をブレンドする量を指定します。値が大きいほど輪郭がぼやけ、glow / 光の球のような表現になります:

Softness (softness): ぼかし量 (単位は Softness Unit 次第)

Softness Unit `.softnessunit` 📐

Softness の単位

項目	内部名	説明
Pixels	`.pixels`	ピクセル単位
Fraction (0-1)	`.fraction`	解像度比
Fraction Aspect (0-1)	`.fractionaspect`	アスペクト比考慮の比率

Polygon `.ispolygon` 🔷

オンにすると円ではなく多角形 (Polygon) を描画します。辺の数は Sides で指定:

Polygon (ispolygon): 多角形描画モードへの切替トグル

Sides `.sides` 🔺

Polygon オン時に使用される辺の数。3 で三角形、4 で正方形、6 で六角形…と任意の正多角形を生成:

Sides (sides): 辺の数 (整数)

Output Page 📤

Comp Over Input `.compoverinput` 🔀

オンにすると入力 TOP と Circle の描画結果を Operation で指定した方式で合成します。オフだと Circle 単独の出力になります:

Comp Over Input (compoverinput): 入力と合成するかのトグル

Operation `.operand` 🎨

合成演算 (ブレンドモード)

項目	内部名	説明
Add	`.add`	`input1.rgba + input2.rgba`
Atop	`.atop`	`(input1.rgba * input2.a) + (input2.rgba * (1.0 - input1.a))`
Average	`.average`	`(input1.rgba + input2.rgba) / 2`
Brightest	`.brightest`	明度が高いほうのピクセルを採用
Burn Color	`.burncolor`	Color Burn 合成 (彩度の高い焼き込み)
Burn Linear	`.burnlinear`	Linear Burn 合成 (リニア空間での焼き込み)
Chroma Difference	`.chromadifference`	クロマ差分合成
Color	`.color`	Color ブレンドモード (色相+彩度を上に重ねる)
Darker Color	`.darkercolor`	より暗い色を採用
Difference	`.difference`	`abs(input1.rgb - input2.rgb)`、Alpha は常に 1.0
Dimmest	`.dimmest`	より暗いピクセルを採用
Divide	`.divide`	`input1.rgba / input2.rgba`
Dodge	`.dodge`	覆い焼き合成
Exclude	`.exclude`	除外合成
Freeze	`.freeze`	Freeze 合成
Glow	`.glow`	Glow 合成
Hard Light	`.hardlight`	ハードライト合成
Hard Mix	`.hardmix`	ハードミックス合成
Heat	`.heat`	Heat 合成
Hue	`.hue`	Hue ブレンドモード (色相のみ重ねる)
Inside	`.inside`	`input1.rgba * clamp(input2.a, 0, 1)`
Inside Luminance	`.insideluminance`	輝度を使った Inside 合成
Inverse	`.inverse`	Inverse 合成
Lighter Color	`.lightercolor`	より明るい色を採用
Luminance Difference	`.luminancedifference`	輝度差分合成
Maximum	`.maximum`	各チャンネルの最大値を採用
Minimum	`.minimum`	各チャンネルの最小値を採用
Multiply	`.multiply`	乗算合成
Negate	`.negate`	ネガティブ合成
Outside	`.outside`	`input1.rgba * (1.0 - input2.a)`
Outside Luminance	`.outsideluminance`	輝度を使った Outside 合成
Over	`.over`	`(input2.rgba * (1.0 - input1.a)) + input1.rgba`
Overlay	`.overlay`	オーバーレイ合成
Pinlight	`.pinlight`	ピンライト合成
Reflect	`.reflect`	Reflect 合成
Screen	`.screen`	`1.0 - ((1.0 - input1.rgba) * (1.0 - input2.rgba))`
Soft Light	`.softlight`	ソフトライト合成
Linear Light	`.linearlight`	リニアライト合成
Stencil Luminance	`.stencilluminance`	輝度ステンシル合成
Subtract	`.subtract`	`input1.rgba - input2.rgba`
Subtractive	`.subtractive`	Subtractive 合成
Under	`.under`	`(input1.rgba * (1.0 - input2.a)) + input2.rgba`
Vivid Light	`.vividlight`	ビビッドライト合成
Xor	`.xor`	`(input1.rgba * (1.0 - input2.a)) + (input2.rgba * (1.0 - input1.a))`
Y Film	`.yfilm`	Y Film 合成
Z Film	`.zfilm`	Z Film 合成

Swap Order `.swaporder` 🔁

オンにすると input1 と input2 の合成順序を入れ替えます (Over 等の非可換演算で結果が変わる):

Swap Order (swaporder): Input1 と Input2 の役割を反転

Common Page 🔧

Output Resolution `.outputresolution` 🖼️

出力解像度の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の解像度をそのまま継承
Eighth	`.eighth`	入力解像度の 1/8
Quarter	`.quarter`	入力解像度の 1/4
Half	`.half`	入力解像度の 1/2
2X	`.2x`	入力解像度の 2 倍
4X	`.4x`	入力解像度の 4 倍
8X	`.8x`	入力解像度の 8 倍
Fit Resolution	`.fit`	指定解像度に縦横比を保持して収める
Limit Resolution	`.limit`	指定解像度を上限としてクランプ
Custom Resolution	`.custom`	`Resolution` パラメータで任意指定

Resolution `.resolution` 📐

カスタム解像度の幅・高さ指定 (Output Resolution = Custom 等の時のみ有効):

Resolution W: 出力幅 (ピクセル単位)。Output Resolution が Custom Resolution / Fit Resolution / Limit Resolution の時に有効
Resolution H: 出力高 (ピクセル単位)。同上

Resolution Menu `.resmenu` 📋

よく使う解像度プリセットのドロップダウン:

Resolution Menu: NTSC / PAL / HDTV 720 / HDTV 1080 / 4K UHD 等のプリセットから選択すると Resolution W / Resolution H が自動セットされる

Use Global Res Multiplier `.resmult` 🔢

プロジェクト全体の解像度倍率の適用:

Use Global Res Multiplier: Project Settings の Global Resolution Multiplier をこの TOP に適用するかどうか。プロトタイプを低解像度で動かしつつ最終出力で一括フル解像度化する運用に便利

Output Aspect `.outputaspect` 📏

出力アスペクト比の決定方式

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のアスペクトを継承 (伝播事故の元、非推奨)
Resolution	`.resolution`	解像度から自動導出 (推奨デフォルト)
Custom Aspect	`.custom`	`Aspect1` / `Aspect2` で手動指定

Aspect `.aspect` 📐

カスタムアスペクト比の指定 (Output Aspect = Custom Aspect の時のみ有効):

Aspect1: 横方向アスペクト値 (Output Aspect = Custom Aspect の時のみ有効)
Aspect2: 縦方向アスペクト値 (同上)

Input Smoothness `.inputfiltertype` 🎚️

入力テクスチャのサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセルアート向け、ジャギーが残る)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小時のモアレ抑制、わずかにコスト高)

Fill Viewer `.fillmode` 🖥️

ビューア内でのテクスチャの収め方

項目	内部名	説明
Use Input	`.useinput`	入力 TOP の Fill Viewer 設定を継承
Fill	`.fill`	ビューアいっぱいに引き伸ばす (アスペクト無視)
Fit Horizontal	`.width`	横幅に合わせて収める (上下に余白)
Fit Vertical	`.height`	縦幅に合わせて収める (左右に余白)
Fit Best	`.best`	アスペクト保持で内側に収まる最大サイズ
Fit Outside	`.outside`	アスペクト保持で外側まで覆う最小サイズ (はみ出しあり)
Native Resolution	`.nativeres`	テクスチャのネイティブ解像度のまま等倍表示

Viewer Smoothness `.filtertype` 🎛️

ビューア表示時のサンプリング方式

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセルサンプリング (ピクセル単位での確認向け)
Interpolate Pixels	`.linear`	バイリニア補間 (滑らか、デフォルト)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (縮小ビュー時のモアレ抑制)

Passes `.npasses` 🔁

オペレータの反復実行回数:

Passes: TOP の処理を何パス繰り返すかの整数値。前回パスの結果が次回パスの入力になる。ブラー反復やフィードバック処理に利用

Channel Mask `.chanmask` 🎨

処理対象のチャンネルマスク (R/G/B/A 個別トグル):

Channel Mask: R / G / B / A 各チャンネルのオン/オフトグル。オフのチャンネルは TOP の処理を受けず入力値がそのまま通過

Pixel Format `.format` 🎨

出力テクスチャのピクセルフォーマット (ビット深度・チャンネル構成)

項目	内部名	説明
Use Input	`.useinput`	入力 TOP のフォーマットを継承
8-bit fixed (RGBA)	`.rgba8fixed`	標準 8 ビット固定小数 RGBA (デフォルト、軽量)
sRGB 8-bit fixed (RGBA)	`.srgba8fixed`	sRGB ガンマ補正済 8 ビット RGBA
16-bit float (RGBA)	`.rgba16float`	16 ビット浮動小数 RGBA (HDR・中間処理向け)
32-bit float (RGBA)	`.rgba32float`	32 ビット浮動小数 RGBA (最高精度、メモリ大)
10-bit RGB with 2-bit Alpha	`.rgb10a2fixed`	10-10-10-2 ビット固定小数 (バンディング抑制)
16-bit fixed (RGBA)	`.rgba16fixed`	16 ビット固定小数 RGBA
11-bit float (RGB)	`.rgb11float`	11-11-10 ビット浮動小数 RGB (アルファなし、HDR 軽量)
16-bit float (RGB)	`.rgb16float`	16 ビット浮動小数 RGB (アルファなし)
32-bit float (RGB)	`.rgb32float`	32 ビット浮動小数 RGB (アルファなし)
8-bit fixed (Mono)	`.mono8fixed`	8 ビット固定小数モノクロ
16-bit fixed (Mono)	`.mono16fixed`	16 ビット固定小数モノクロ
16-bit float (Mono)	`.mono16float`	16 ビット浮動小数モノクロ
32-bit float (Mono)	`.mono32float`	32 ビット浮動小数モノクロ
8-bit fixed (RG)	`.rg8fixed`	8 ビット固定小数 R+G 2 チャンネル
16-bit fixed (RG)	`.rg16fixed`	16 ビット固定小数 R+G
16-bit float (RG)	`.rg16float`	16 ビット浮動小数 R+G
32-bit float (RG)	`.rg32float`	32 ビット浮動小数 R+G
8-bit fixed (A)	`.a8fixed`	8 ビット固定小数アルファ単体
16-bit fixed (A)	`.a16fixed`	16 ビット固定小数アルファ単体
16-bit float (A)	`.a16float`	16 ビット浮動小数アルファ単体
32-bit float (A)	`.a32float`	32 ビット浮動小数アルファ単体
8-bit fixed (Mono+Alpha)	`.monoalpha8fixed`	8 ビット固定小数モノクロ+アルファ
16-bit fixed (Mono+Alpha)	`.monoalpha16fixed`	16 ビット固定小数モノクロ+アルファ
16-bit float (Mono+Alpha)	`.monoalpha16float`	16 ビット浮動小数モノクロ+アルファ
32-bit float (Mono+Alpha)	`.monoalpha32float`	32 ビット浮動小数モノクロ+アルファ

実践アイデア 💡

Example 1: ソフトサークルで光の球を描く ✨

Circle TOP (Softness 大, Fill 白) → Bloom TOP → Composite TOP

Circle TOP に大きな Softness を設定すると、輪郭がふんわりぼかされた光の球状テクスチャが得られます。Glow / ブルーム素材として直接使ったり、後段の Bloom TOP でさらに発光感を強化したりできます。

Circle TOP を作成し、Fill Color を白 (1, 1, 1) に設定
Background Alpha を 0 にして背景を透明化
Softness を 0.3〜0.5 (Fraction) に設定し、輪郭をぼかす
Pixel Format を 16-bit float (RGBA) 以上にして HDR 値を保持
後段に Composite TOP の Add や Screen で他レイヤと合成

Example 2: Arc Angles でローディング進捗リング ⏳

Constant CHOP (進捗 0〜360) → Circle TOP endarcangle → Render output

Arc Angles を使うと開始角と終了角の間が 非描画 になるため、進捗バーやドーナツ型インジケータを 1 枚の Circle TOP で作れます。Constant CHOP の値を endarcangle にエクスポートすれば、アニメーションする進捗リングが完成します。

Circle TOP を作成し、Border Width を 20 px、Border Alpha を 1 に設定
Fill Alpha を 0 にして内側を透明化 (リング状にする)
Begin Arc Angle を 0、End Arc Angle をアニメーション値にエクスポート
Constant CHOP の chan1 を 0 → 360 でアニメーションさせ endarcangle にバインド
Anti-Alias をオンにしてエッジを滑らかに

Example 3: 多角形 (Polygon) で六角形タイルマスク 🔷

Circle TOP (Polygon オン, Sides=6) → Tile TOP → Composite TOP

Polygon をオンにすると Sides の値で任意の正多角形が描画されます。六角形を生成して Tile TOP で繰り返せば、ハニカム状のマスクパターンが得られます。

Circle TOP を作成し、Polygon をオンに
Sides を 6 に設定 (三角形なら 3、八角形なら 8)
Rotate で多角形の向きを調整
Radius をタイル単位サイズに合わせて調整
後段に Tile TOP を配置し、グリッド状に複製

Info CHOP情報 📊

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

TOP固有情報 🖼️

resx: TOP の出力解像度 X (ピクセル単位)
resy: TOP の出力解像度 Y (ピクセル単位)
aspectx: アスペクト比 X
aspecty: アスペクト比 Y
depth: 3D テクスチャ / テクスチャ配列の深度 (2D テクスチャでは 1)
gpu_memory_used: TOP が消費している GPU メモリ量 (MB 単位)

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

代表的な取得チャンネル 📊

resolution_x / resolution_y: 出力テクスチャの幅・高さ (ピクセル)
aspectx / aspecty: 出力テクスチャのアスペクト比 (横 / 縦)
depth: ピクセルフォーマットのビット深度 (8 / 10 / 16 / 32)
num_components: 出力チャンネル数 (1=Mono / 2=Mono+Alpha or RG / 3=RGB / 4=RGBA)
gpu_mem_used: GPU メモリ使用量 (バイト)、最適化判断の指標

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: Circle が表示されない / 真っ黒になる
✅ Solution:

Fill Alpha が 0 になっていないか確認
Background Alpha が 1 のままだと背景に隠れている場合があるため、必要に応じて 0 に
Radius が極端に小さい (0 付近) になっていないか確認
Output Aspect を Resolution に固定し、上流からのアスペクト伝播事故を遮断

❌ Problem: 円が楕円に歪む
✅ Solution:

Radius X と Radius Y が同値か確認
Radius Unit を Fraction Aspect (0-1) に切替えるとアスペクト比が考慮される
Common Page の Output Aspect を Resolution に固定 (上流のアスペクト伝播事故を遮断)
Output Resolution を Custom Resolution + 1:1 の解像度 (例: 1024×1024) に固定

❌ Problem: ボーダーが表示されない
✅ Solution:

Border Width が 0 になっていないか確認
Border Alpha が 0 になっていないか確認
Border Width Unit が Fraction のままで実効値が極小になっていないか確認、Pixels に切替えて試す
Border Offset が極端な値だと半径からはみ出して切れている可能性があるため 0〜1 の範囲で調整

❌ Problem: Arc (扇形) が想定と逆方向に切れる
✅ Solution:

Arc Angles は beginarcangle から endarcangle までを時計回りに 非描画 にする仕様。残したい領域ではなく消したい領域を指定する
0 が真上、90 が右、180 が真下、270 が左 (時計回り)。座標系を確認して角度を再設定
進捗リングを作る場合は endarcangle を 360 から逆算してアニメーションする
Rotate で形状全体を回転させて開始位置を調整

❌ Problem: エッジがギザギザでアンチエイリアスが効かない
✅ Solution:

Anti-Alias がオンになっているか確認
Softness をわずかに上げて (0.001〜0.01) 輪郭を 1px 程度ぼかすとジャギーが目立たなくなる
Output Resolution を高めに設定し、後段で縮小するスーパサンプリング戦略を取る
Common Page の Input Smoothness を Interpolate Pixels に変更

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 円や多角形を生成する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Circle Page ⚙️

Radius .radius 📏

Radius Unit .radiusunit 📐

Rotate .rotate 🔄

Center .center 🎯

Center Unit .centerunit 📐

Justify Horizontal .justifyh ↔️

Justify Vertical .justifyv ↕️

Fill Color .fillcolor 🎨

Border Color .border 🖍️

Background Color .bgcolor 🟫

Multiply RGB by Alpha .multrgbbyalpha ✖️

Border Width .borderwidth 📐

Border Width Unit .borderwidthunit 📐

Border Offset .borderoffset 📏

Arc Angles .arcangle 🌗

Anti-Alias .antialias ✨

Softness .softness 🌫️

Softness Unit .softnessunit 📐

Polygon .ispolygon 🔷

Sides .sides 🔺