Interface Layout
The editor consists of two main sections split by a draggable separator:Factory (Left Panel)
Design custom variables, functions, and objects that can be reused throughout your project. The Factory runs once before the Playground starts, similar to the
setup() function in p5.js.Key Concepts
Sequential Execution
Unlike most node-based visual programming languages (like Grasshopper or Max), b5 has a grid system where position matters. Blocks execute from left to right, and line by line from top to bottom - just like text-based code.Live Coding
Changes to your code are reflected immediately in the viewer. The Playground runs continuously at 60 frames per second, giving you instant visual feedback as you build.Component Structure
Your projects are built from three main components:- Blocks: Represent functions, values, or operations
- Nodes: Input and output connection points on blocks
- Wires: Connect nodes to pass data between blocks
Data flows from top (outputs) to bottom (inputs) via wires. One output can feed multiple inputs, but each input can only have one data source.
Resizable Panels
The separator between Factory and Playground can be dragged to resize the panels. This lets you adjust the workspace based on whether you’re:- Defining custom blocks in the Factory
- Building your main program in the Playground
- Focusing on the live preview in the Viewer
Folding the Factory
Click the fold icon to collapse the Factory panel entirely, giving you more space for the Playground. Click again to restore the Factory to its previous size.Next Steps
Playground
Learn about the main code canvas that runs at 60 FPS
Factory
Create custom variables, functions, and objects
Block Search
Add blocks quickly with double-click search
Viewer
Control your live preview canvas