Nodes

Nodes are the building blocks of your visuals. Each node performs a specific function — generating shapes, processing data, applying effects, or outputting values.

In this chapter we will dive deeper into how Nodalin handles nodes, their state, and their connections.

Node Structure

• Nodes in Nodalin are circular.

• Input connections appear as arrows pointing towards the top or left side of a node.

• Output connections extend from the bottom or right side of a node.

This layout makes graphs flow naturally to the right, bottom, or a combination of both.

What are Node Properties?

Properties are the settings that control how a node behaves. Each property has a name and a value. You can set properties manually, or animate them in real time by connecting other nodes as inputs.

In the example above, the Triangle node has 5 input connections. Each connection line displays a label: outline, strokeWidth, Side, y and rot . They denote which property they are currently connected to.

Connection lines automatically adjust their curve and orientation as you move nodes around.

Why Circular?

Nodes in Nodalin are circular and don’t expose their properties as visible input slots. Unlike most node-based systems, this design keeps the graph clean, readable, and visually consistent — every node remains the same size.

Instead of placing rows of input pins around each node, Nodalin uses a simpler, more streamlined way to work with properties.

Properties are managed internally and can be controlled in two ways:

1. Directly, through the node’s context menu — ideal for manual tweaking and fine control.

2. Via connections, by linking other nodes that drive those properties.

This reduces visual clutter, removes unnecessary noise, and makes iteration faster while building your graph.

How Connections Work

Nodalin uses automatic property assignment, allowing you to connect nodes without manual configuration.

When you connect a node, Nodalin checks its output type and assigns it to the first compatible property on the target node.

In the example below:

• A Number node connects to the Square's side property

• A second Number node connects to x (horizontal position) property

• A Color node (automatically) connects to the Square's color property

You might be wondering, “How do I adjust a node's properties?” — and that’s exactly what we’ll cover in the next chapters!