Align nodes when they are created

View original issue on GitHub  ·  Variant 3

Aligning Newly Created Nodes in TouchDesigner

This article explores the challenge of automatically aligning newly created nodes within the TouchDesigner visual programming environment. The goal is to streamline workflow by ensuring that when a new node is added to a network, it's positioned in a visually sensible location relative to existing nodes, rather than being placed arbitrarily.

The Problem: Manual Node Arrangement

In TouchDesigner, manually arranging nodes is a common task. While the software offers tools for manual alignment, the process can become tedious, especially in complex networks with numerous interconnected nodes. The issue arises when new nodes are created; they often appear in a default location that requires the user to manually drag and align them. This disrupts the creative flow and adds unnecessary overhead to the network development process.

Root Cause: Lack of Automatic Layout Logic

The core issue lies in the absence of built-in logic to automatically determine the optimal placement of newly created nodes. TouchDesigner, by design, prioritizes flexibility and user control. While this allows for highly customized network layouts, it also means that the system doesn't inherently "know" where a new node should go to maintain visual coherence. The default behavior is simply to place the node at a predetermined location, often near the center of the network or the mouse cursor's position at the time of creation. This default placement lacks awareness of existing node positions and connections.

Solution: Scripting Automatic Alignment

While TouchDesigner doesn't offer a native solution, scripting provides a powerful way to automate node alignment. A Python script can be triggered upon node creation to intelligently position the new node based on the location of its connected nodes. Here's a basic example:


import touchdesigner as td

def align_new_node(node):
  """
  Aligns a newly created node relative to its input connections.
  """
  inputs = node.inputs
  if not inputs:
    return  # No inputs, nothing to align to

  # Calculate the average position of the input nodes
  x_sum = 0
  y_sum = 0
  count = 0
  for input_conn in inputs:
    connected_node = input_conn.owner
    x_sum += connected_node.x
    y_sum += connected_node.y
    count += 1

  average_x = x_sum / count
  average_y = y_sum / count

  # Position the new node slightly offset from the average
  node.x = average_x + 100  # Offset by 100 pixels in X
  node.y = average_y

This script iterates through the new node's inputs, calculates the average position of the connected nodes, and then positions the new node slightly offset from that average. This simple approach can significantly improve workflow. To implement the script, you can use a DAT Execute operator that triggers when a new node is created within a specific network.


# DAT Execute script (onCreate)

import touchdesigner as td

new_node = op(args[0]) #The node that was just created

align_new_node(new_node)

Place a DAT Execute inside the network you want to apply this behavior to. Set the DAT Execute's "Execute On" parameter to "Node Create". In the DAT Execute's script, use the above code. This will call the align_new_node function whenever a new node is created in the network.

Practical Tips and Considerations

By implementing automatic node alignment, you can significantly reduce the time spent manually arranging nodes, leading to a more efficient and enjoyable TouchDesigner workflow. This scripting approach offers a flexible and customizable solution to a common challenge in visual programming.