Published in


New TouchOSC Tutorial #2: Elements Introduction

TouchOSC have 13 elements to let you custom performance interface.

All the elements are full RGBA colour control, so you can choose whatever you want.


Box is just a simple shape with no behavior. It can be used to create decorative elements and backgrounds.

Or it could be moved and positioned using messages and script.

Output Value: No Output


Button have 3 kinds of behavior

  • Momentary — A push button
  • Toggle Release — A toggle button, toggle on release
  • Toggle Press — A toggle button, toggle on press

Also, can change shape, colour, and outline style.

Output Value: Float (On is 1, Off is 0)

This image shows what’s different between Outline Mode “Full” & “Edges”.


A single-line text display.

Can setup font, alignment, colour & length of chars.

Label cannot be an editable field in performance mode.

Output Value: No Output


A multi-line text display.

Can setup font, horizontal alignment & colour.

(No length of chars setting & vertical alignment)

Text cannot be an editable field in performance mode.

Output Value: No Output

Fader (Slider)

A slider control, only one dimension control.

5 main parameters:

  • Cursor
  • Bar
  • Centered
  • Response
  • Grid

Output Value: Float (from 0 to 1)

XY (2D Slider)

Two dimension control.

It’s similar with Fader but in 2 dimension.

Also have parameters Cursor, Lines (Bar), Response & Grid. And two more parameters:

  • Lock X
  • Lock Y

Output Value: Float x 2 (from 0 to 1). X & Y

Radial (Knob)

Like a knob, rotary slider control.


  • Inverted
  • Centered
  • Response
  • Grid

Output Value: Float (from 0 to 1)


Like a full circle knob, circular control.


  • Cursor
  • Response
  • Grid

Output Value: Float (from 0 to 1)


A circular XY control.

Pretty similar with XY, but the data outputs are:

  • Distance from center
  • Angle

Output Value: Float x 2 (from 0 to 1). One is the distance from the center, another is about the rotation angle.


Radio buttons set. Can only select one button at the same time.

Only 2 parameters:

  • Steps — How many buttons
  • Type

In the Type have 2 options

  • Select — Default, select one each time.
  • Meter — Make it visually like slider, highlight all values up to active one.

Output Value: Integer. (from 0 to X)


Just a group, a simple container can put the elements inside.

Also, you can create a group by selecting the elements & Ctrl/Command + G.

Double click can go inside the group and edit elements inside.

Output Value: No Output


Like group has tabs.

It contains tabs, and only showing the group when it is active.

You can add more pages in the panel

Output Value: Integer. (from 0 to X)


It’s a useful container for quickly creating multiple same elements.

Can choose any type of elements, and setting up the number of row * column.

Also, if needed you can ungroup this to get the individual elements out.

Output Value: According to the elements





Just some the tips and tutorials on my creating journey. I think you will find something useful. 😉 Instagram: TouchDesigner Snippet & Works:

Recommended from Medium

Wk 4 — Art Activity — Architecture & Urban Planning Application A/B Testing for Bookmarks

Why The ‘Fail Fast’ Mantra Will Kill Your Business

Pernilla Johansson: Electrolux’s design path from human-centric products to humanity-centric…

Can you guess the gender pay gap in these big tech companies ? Probability Not.

Why Game Artists Fail Their Interviews

The difference between UX Design and UI Design: the difference explained with eating a piece of…

Data Trust, by Design: Principles, Patterns and Practices (Part 2 — Up front Terms and Conditions)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Partical Weng

Partical Weng

A person love new things and extremely futurism.

More from Medium

Creating a Simple Search Bar

Transferring Windows Server roles, Part III setup the new Server

Creating admin dashboards using the rails_admin gem

Reliance Digital Clone (Part II)