WebSocket Architecture: How to Send Data From TouchDesigner to cables.gl

In this tutorial, we will learn how to send data from TouchDesigner to manipulate data right into the browser. Let’s see how.

In the previous tutorials, we learned what is WebSocket and how to use this technology to send data from our smartphones to TouchDesigner. Today we will dive into the opposite way. We will create a patch to send data from TouchDesigner straight to the browser.

Since learning is beautiful, we will include a new guest: cables.gl.

What is cables.gl?

It is a JavaScript node-based browser environment, that allows users to create interactive visual web content without coding. All the functions are encapsulated into nodes – just like Touch Designer components – that are connected through inputs and outputs.

Sounds nice? Yes, it is, so let’s get started.

WebSocket Architecture: the TouchDesigner Patch

First, let’s imagine we want to control our lovely installation through three sliders in Touch Designer that send rotation data to cables.gl.

So, we create three slider components and connect the output of each slider to a Math CHOP, to map the range from 0 to 1 to 0 to 360 (degrees). Then we connect each Math CHOP to a Null CHOP.

Next, we create a DAT Table to store the upcoming values from the Null CHOPs.

Then we create an Execute DAT to create a list from the table, convert it to a JSON format and send data through WebSocket to our cables.gl patch.

Here is the full code:

# me - this DAT
# 
# frame - the current frame
# state - True if the timeline is paused
# 
# Make sure the corresponding toggle is enabled in the Execute DAT.

import json

def onStart():
	return

def onCreate():
	return

def onExit():
	return

def onFrameStart(frame):

	# Get the table DAT
	table = op('table1')
	
	# Initialize a list to hold the table data
	data_list = []
	
	# Loop through the rows of the table, excluding the first row
	for row in table.rows()[1:]:
	    row_data = {}
	    for col in range(len(row)):
	        row_data[table[0, col].val] = row[col].val  # Use column names from the first row
	    data_list.append(row_data)
	
	# Convert the list to JSON format
	json_data = json.dumps(data_list)
	
	# Remove the square brackets
	json_data = json_data[1:-1]
	
	# Send the JSON data through WebSockets
	websocket = op('websocket1')
	websocket.sendText(json_data)
	return

def onFrameEnd(frame):
	return

def onPlayStateChange(state):
	return

def onDeviceChange():
	return

def onProjectPreSave():
	return

def onProjectPostSave():
	return

Let’s analyze it:

• First, we import the json package
• Then we get the table DAT
• We initialize a list to hold the table data
• We loop through the rows of the table, excluding the first row
• We convert the list to JSON format and remove the square brackets
• Finally, we send the JSON data through WebSocket

As in the previous tutorials, we create a WebSocket DAT. Remember to insert your own Network Address.

Send Data From Touch Designer to cables.gl

The first thing to do, of course, is opening our browser and the cables.gl website.

I created an open and simple patch you can copy and paste and freely use.

First, on top we have a WebSocket node. In the Input parameter you have to insert the URL of your WebSocket server.

Next, we connect the WebSocket node string output to a Parse Object string node, that parses a string to a JSON object.

We will therefore be able to retrieve the X, Y and Z coordinates from Touch Designer via the ObjectGetNumber node. We connect these three nodes to the output of the Parse Object string node, select the three keys (values, valueY and valueZ) and connect a Number node to each ObjectGetNumber node.

We are now ready to have our data parsed from TouchDesigner sliders to cables.gl.

In this tutorial we want to focus on the networking/protocol side, so you will be in charge of the creative side. That’s why we will use our data just to manipulate the X, Y and Z rotation of a simple cube. Cables.gl offers an incredible plethora of resources to create stunning visuals, so sky is the limit!

To display our cube, we create a MainLoop node – that acts as a sort of renderer for the whole patch – connect it to a simple shader (LambertMaterial), connect the shader to a Transform node and control the X, Y and Z rotation by connecting the three Number nodes to the respective Transform node inputs.

Finally, we connect the output of the Transform node to a Cube node and that’s all. Now, if we move the sliders in Touch Designer, we will be able to rotate the cube in cables.gl.

Download the TouchDesigner patch

Wrap Up

As you can see, WebSocket is a powerful protocol to establish communication between different environments. By implementing WebSocket both in Touch Designer and in browser scripting such as cables.gl, new opportunities arise for engaging and interactive installations.