Repository navigation
visual programming
Home > Basics of visual programming
< Previous: Nodes | Next: How the node graph works >
New to node graphs? Start here - what visual programming is, and why Locus uses it for pattern design.
Half of Locus is a node graph: a workspace where you build a design by connecting small boxes with wires instead of writing code. If you've never used one before, this page is the gentle introduction. Nothing here assumes you can program.
You make a result by wiring together small steps - each box does one job, and a wire carries the result of one box into the next.
That's it. There's no code to type and no syntax to remember. You place the pieces you want and draw connections between them, and the finished chain is your program.
Three words cover almost everything:
- A node is a box that does one job: make a number, draw a circle, rotate a shape, gather things into a list. It has inputs on its left and outputs on its right.
- A wire carries a value from one node's output into another node's input. Data flows left to right, from the sources you set up toward the finished result.
- The whole arrangement is a node graph: your recipe. It reads like a little assembly line: raw values enter on the left, and each node along the way transforms them until the finished geometry comes out the right.
Because the flow only ever goes forward - nothing loops back on itself - you can always follow a design by reading it from its sources toward its result.
A whole design in four boxes, read left to right: the Repeat slider sets how many copies, the Square is the motif, Array repeats it into a grid, and Pattern shows the result. Change the slider and the grid redraws.
The node graph is always running. There's no "run" button and no waiting: change a value anywhere and everything that depends on it recomputes instantly. Drag a slider and the pattern it drives redraws as you watch.
Tip
If you've used a spreadsheet, you already know the core idea. A cell that adds up other cells updates the moment you change one of them - you edit the inputs, and the results follow. A node graph is the same principle, drawn as boxes and wires instead of a grid.
Pattern design is repetition with variation, and that's exactly what a node graph is good at. Wire one motif into a symmetry node and you get the whole repeating field; put a slider on the count and you can dial from four copies to four hundred, watching it update the whole time. You describe the rule, and the node graph produces every instance of it - so exploring a design becomes a matter of nudging a few values rather than redrawing anything.
This is why Locus pairs the node graph with the hand-drawing side. You typically draw a motif by construction and then repeat and vary it in the node graph - the drawing is the pure shape, the node graph is the machine that multiplies it. See Core concepts for how the two halves fit together.
- How the node graph works: nodes, sockets, wires, and live evaluation in more detail
- Sockets & wires: how color and thickness tell you what a wire carries
- Adding & connecting nodes: placing nodes and wiring them fast
- Your first pattern: a short end-to-end walkthrough
< Previous: Nodes | Next: How the node graph works >