Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/peilingjiang/b5/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

Color blocks in b5 are effect blocks - they affect subsequent drawing blocks through contextual relationships rather than wire connections. When selected, the grid highlights their effective range.

​
Color Pickers

Color picker blocks provide a visual interface for selecting colors using hex values with alpha.

​
fillPicker

Sets the fill color for shapes using a visual color picker.
​
color
hex color
required
Hex color value with alpha channel (format: #RRGGBBaa)
Example: 
{
  "name": "fillPicker",
  "source": "original",
  "inlineData": ["#bd10e0ff"]
}
This sets a purple fill color with full opacity. The color picker appears directly in the block for easy visual selection. From the Bounce Ball example: 
Line 5:
  [strokePicker: #4a90e2ff]  // Blue stroke
  [fillRGBA] <- dynamic R, G from position
  [circle] <- affected by both stroke and fill

​
strokePicker

Sets the stroke (outline) color for shapes using a visual color picker.
​
color
hex color
required
Hex color value with alpha channel (format: #RRGGBBaa)
Example: 
{
  "name": "strokePicker",
  "source": "original",
  "inlineData": ["#4a90e2ff"]
}
From the Physics example: 
Line 2: [strokePicker: #ffffffff]  // White stroke
Line 3: [fillPicker: #4a4a4aff]    // Dark gray fill
Line 4: [matter_box] <- drawn with white outline and dark fill

​
backgroundPicker

Sets the canvas background color using a visual color picker.
​
color
hex color
required
Hex color value with alpha channel (format: #RRGGBBaa)
Example: 
{
  "name": "backgroundPicker",
  "source": "original",
  "inlineData": ["#9b9b9bff"]
}

​
RGBA Color Blocks

RGBA blocks allow programmatic color control using separate red, green, blue, and alpha values.

​
fillRGBA

Sets the fill color using RGBA values (0-255 for each channel).
​
red
number
required
Red channel value (0-255)
​
green
number
required
Green channel value (0-255)
​
blue
number
required
Blue channel value (0-255)
​
alpha
number
Alpha/opacity value (0-255, optional)
Example: From the Bounce Ball example, mapping position to color: 
{
  "name": "fillRGBA",
  "source": "original",
  "input": {
    "0": ["3", "1", "0"],  // x position -> red
    "1": ["3", "3", "0"],  // y position -> green
    "2": null,              // blue defaults to 0
    "3": null               // alpha defaults to 255
  }
}
This creates a dynamic color effect where:
  • Red increases as the circle moves right
  • Green increases as the circle moves down
  • Creates a gradient effect based on position

​
strokeRGBA

Sets the stroke color using RGBA values.
​
red
number
required
Red channel value (0-255)
​
green
number
required
Green channel value (0-255)
​
blue
number
required
Blue channel value (0-255)
​
alpha
number
Alpha/opacity value (0-255, optional)
Example: From the Line Drawing example’s randomRGB function: 
{
  "name": "strokeRGBA",
  "source": "original",
  "input": {
    "0": ["2", "1", "0"],  // random red
    "1": ["2", "1", "1"],  // random green
    "2": ["2", "1", "2"],  // random blue
    "3": null               // full opacity
  }
}
The randomRGB function generates random values between 170-220 for each channel when the mouse is pressed.

​
background

Sets the background color using RGBA values.
​
red
number
required
Red channel value (0-255)
​
green
number
required
Green channel value (0-255)
​
blue
number
required
Blue channel value (0-255)
​
alpha
number
Alpha/opacity value (0-255, optional)
Example: From the Line Drawing example’s blackBG function: 
Function: blackBG
  Line 0: [number: 0] -> R, G, B inputs
          [number: 20] -> alpha input
  Line 1: [background] <- (0, 0, 0, 20)
Using a low alpha value (20) creates a trail effect as previous frames fade gradually.

​
Color Effects and Scope

Color effect blocks affect all shapes drawn after them in the execution order: 
Line 0: [fillPicker: red]
        [circle] <- filled with red
        
Line 1: [fillPicker: blue]
        [circle] <- filled with blue
        [rect] <- also filled with blue
Visual Feedback: When you select a color effect block, the grid cells in its effective range change color. This helps you see which shapes will be affected.

​
Common Color Patterns

​
Pattern 1: Static Colors

Line 0: [fillPicker: #bd10e0ff]    // Purple fill
        [strokePicker: #000000ff]   // Black stroke
Line 1: [circle] <- purple with black outline

​
Pattern 2: Dynamic Colors

Line 0: [mouse] -> x, y
Line 1: [fillRGBA] <- x as red, y as green, 128 as blue
        [circle] <- color changes with mouse position

​
Pattern 3: Random Colors on Interaction

Function: randomRGB
  Input: trigger (bool)
  Output: R, G, B values (random 170-220)
  
Playground:
  Line 0: [mouseIsPressed] -> trigger
  Line 1: [randomRGB] <- trigger, outputs R, G, B
  Line 2: [strokeRGBA] <- R, G, B from randomRGB
          [lineXY] <- drawn with random color

​
Pattern 4: Fade Effect Background

Function: fadeBackground
  [number: 0] -> R, G, B
  [number: 10] -> very low alpha
  [background] <- (0, 0, 0, 10)
  
Playground:
  Line 0: [fadeBackground] <- called every frame
  Line 1: [circle] <- previous circles fade over time

​
Color Value Ranges

RGB Values: All color channels (red, green, blue) accept values from 0-255
  • 0 = minimum (no color)
  • 255 = maximum (full color)
  • Mix RGB values to create any color
Alpha Values: The alpha channel controls opacity
  • 0 = fully transparent (invisible)
  • 255 = fully opaque (solid)
  • Values in between create transparency effects
Hex Colors: Format is #RRGGBBaa
  • RR = red (00-ff)
  • GG = green (00-ff)
  • BB = blue (00-ff)
  • aa = alpha (00-ff)
  • Example: #ff0000ff is opaque red, #0000ff80 is half-transparent blue

​
Tips for Working with Colors

Color Pickers for Design: Use color picker blocks (fillPicker, strokePicker) when you want to choose colors visually during development.
RGBA for Animation: Use RGBA blocks when you want to programmatically control colors, such as mapping position to color or creating color animations.
Trail Effects: Use background with low alpha values at the start of your draw loop to create motion trail effects.
Effect Order Matters: Color blocks affect shapes that come AFTER them in execution order (left to right, top to bottom). Place color blocks before the shapes you want to color.

Build docs developers (and LLMs) love

Get started for freeTalk to us