Skip to main content
The Playground is your main code canvas where blocks are executed continuously at 60 frames per second by default. It’s similar to the draw() function in p5.js.

​
How It Works

The Playground executes blocks sequentially:
1

Left to Right

Blocks on the same line execute from left to right
2

Top to Bottom

After completing a line, execution moves to the next line down
3

60 FPS Loop

The entire canvas runs 60 times per second for smooth animations
This sequential execution is what makes b5 unique among node-based programming languages. Position matters!

​
Canvas Specifications

{
  maxLineCount: 199,     // Maximum vertical lines
  maxBlockCount: 12,     // Maximum blocks per line
  frameRate: 60          // Frames per second
}
The Playground can hold up to 199 lines with 12 blocks per line, giving you plenty of space for complex programs.

​
Adding Blocks

There are several ways to add blocks to the Playground:

​
Effect Blocks

Effect blocks modify the behavior of other blocks through their contextual relationships, rather than through wire connections.
Effect blocks like fill, stroke, and scale affect blocks that come after them in the execution order - just like in p5.js.

​
Visualizing Effect Scope

When you select an effect block, the background grid cells change color to show its effective range. This visual feedback helps you understand which blocks are influenced by the effect. Unlike text-based languages where the drawing context is hidden, b5 makes these relationships explicit and visible.

​
Navigation Controls

​
Panning the Canvas

Click and hold on any empty block room, then drag to pan around the canvas. This lets you navigate large programs that extend beyond the visible area.
The canvas remembers your pan position, so you can work on different sections of your code without losing your place.

​
Zooming

Scroll on the canvas to zoom in and out:
  • Zoom range: 0.5x to 2x
  • Scroll up: Zoom in
  • Scroll down: Zoom out
The zoom level is smoothly interpolated and saved with your canvas style.

​
Scrolling

Hold modifier keys while scrolling to navigate instead of zoom:
  • Shift + Scroll: Scroll horizontally
  • Cmd/Ctrl + Scroll: Scroll vertically

​
Grid System

The Playground uses a grid system with:
  • Line numbers: Displayed on the left edge
  • Block alphabets: Displayed along the top edge
  • Block rooms: Grid cells where blocks can be placed

​
Background Colors

Block rooms can display different background colors based on:
  • Color effect blocks (when selected)
  • The scope of effect blocks
  • Visual feedback for dragging and dropping

​
Live Execution

The Playground continuously executes at 60 FPS, which means:
  • Changes are immediately reflected in the Viewer
  • Animations run smoothly
  • Interactive programs respond in real-time
You can pause execution from the Viewer controls without stopping the editor. This is useful for inspecting specific frames or debugging.

​
Working with the Viewer

The Playground’s output is displayed in the Viewer, which can be:
  • Paused and resumed
  • Refreshed to restart from the beginning
  • Minimized to the corner for more workspace
  • Captured as a PNG image
See Viewer for complete controls.

​
Canvas State

The canvas maintains several types of state:
  • Position: Left and top offsets from panning
  • Scale: Current zoom level (0.5x to 2x)
  • Blocks: All blocks and their data
  • Line styles: Modified drawing styles per line
This state is automatically saved to your session and included when you save your project.

​
Next Steps

Block Search

Learn how to quickly add blocks

Navigation

Master mouse and keyboard controls