Grid

Creates a grid layout with configurable rows, columns, and spacing. Can be used as a standalone visual grid or as an instancing source to distribute shapes across grid positions. Automatically switches between CPU and GPU rendering for optimal performance.
rows
Number of rows
number
columns
Number of columns
number
spacingX
Horizontal spacing
number
spacingY
Vertical spacing
number
x
Horizontal position
number
y
Vertical position
number
rot
Grid rotation
number
color
Grid line color
color
strokeWidth
Grid line width
number
origin
Center point of the shape. Defaults to (0, 0). Changing it moves the shape’s pivot without affecting its x and y position.
point
zindex
Controls which element appears on top when elements overlap; higher values sit above lower ones.
number
instance
Instancing target
figure
instanceIndex
Displays the instance with the given index number
number
instanceMatrix
Select multiple instances by comma-separated indices, e.g. 5, 10, 3, 16
text
Example Projects
Synthetic Aetherin In this simple graph, some of the Grid nodes properties are driven by a couple of Wave nodes, creating this hypnotic visual.
Tesser Polyra Using a Grid node with a single column and a few rows.
Instancing Sardins The last two examples demonstrates how the Grid node is capable of working in nested instancing scenarios. For example in "Instancing Sardins", an instancing group of 12 circle instances (Circle Triangle Square), is instantiated for each grid vertex, creating a swarm of digital sardins). Each group carries a set of effects (Chromatic and Trail). This is a 14 by 14 grid, therefore 14 x 14 x 12 = 2352 instances are processed on each frame!

Last updated