Skip to main content

​
Overview

The bounce ball example is a foundational b5 project that demonstrates:
  • Creating animated graphics with the bounce block
  • Using custom functions to calculate boundaries
  • Interactive controls with sliders
  • Dynamic color mapping based on position
  • Real-time parameter adjustments
You can load this example directly in the b5 Editor from the Files menu at the top left corner.

​
Example Structure

The bounce ball example consists of two main sections:

Playground

The main animation loop that runs at 60 FPS, containing the bouncing ball logic

Factory

Custom definitions for the canvas variable and the boundaries function

​
Walkthrough

1

Define the Ball Radius

The example starts with a numberSlider block that controls the radius of the ball:
{
  "name": "numberSlider",
  "inlineData": [40, 0, 50, 5]
}
This slider has:
  • Default value: 40
  • Minimum: 0
  • Maximum: 50
  • Step: 5
The slider output is used in multiple places: the circle size and the boundary calculations.
2

Calculate Boundaries

The boundaries custom function takes the radius and calculates the movement limits:
{
  "name": "boundaries",
  "source": "custom",
  "input": { "0": ["0", "1", "0"] }
}
This function:
  • Takes the canvas size using canvasSize block
  • Adds radius to 0 for the lower boundary
  • Subtracts radius from width/height for upper boundaries
  • Ensures the ball stays completely visible within the canvas
The boundaries function uses basic math operations:
{
  "blocks": {
    "2": {
      "0": {
        "name": "add",
        "input": { "0": ["0", "0", "0"], "1": ["0", "2", "0"] }
      },
      "2": {
        "name": "subtract",
        "input": { "0": ["0", "3", "0"], "1": ["0", "2", "0"] }
      },
      "3": {
        "name": "subtract",
        "input": { "0": ["0", "3", "1"], "1": ["0", "2", "0"] }
      }
    }
  }
}
The function outputs three values:
  • Lower boundary (0 + radius)
  • Upper width boundary (width - radius)
  • Upper height boundary (height - radius)
3

Create Bouncing Animation

Two bounce blocks create the x and y animation:
{
  "name": "bounce",
  "input": {
    "0": ["1", "2", "0"],  // lower bound
    "1": ["1", "2", "1"],  // upper bound
    "2": ["1", "3", "0"]   // step size
  }
}
Each bounce block:
  • Takes minimum and maximum values from the boundaries function
  • Uses a step value of 7 (defined by a number block)
  • Automatically increments/decrements to create smooth motion
  • Reverses direction when hitting boundaries
4

Map Position to Color

The ball’s color changes based on its position using fillRGBA:
{
  "name": "fillRGBA",
  "input": {
    "0": ["3", "1", "0"],  // x position -> red
    "1": ["3", "3", "0"],  // y position -> green
    "2": null,              // blue (default)
    "3": null               // alpha (default)
  }
}
This creates a dynamic color effect where:
  • Red value corresponds to horizontal position
  • Green value corresponds to vertical position
  • Blue and alpha use default values
5

Draw the Circle

Finally, a circle block renders the ball:
{
  "name": "circle",
  "input": {
    "0": ["3", "1", "0"],  // x position
    "1": ["3", "3", "0"],  // y position
    "2": ["0", "1", "0"]   // radius from slider
  }
}
The circle is drawn at the bouncing x/y coordinates with the radius set by the slider.

​
Canvas Setup

The example includes a cnv variable in the Factory that creates a 500x300 canvas: 
{
  "name": "cnv",
  "type": "variable",
  "blocks": {
    "0": {
      "0": {
        "name": "number",
        "inlineData": [500]
      },
      "1": {
        "name": "numberSlider",
        "inlineData": [300, 0, 600, 100]
      }
    },
    "1": {
      "0": {
        "name": "createCanvas",
        "input": {
          "0": ["0", "0", "0"],
          "1": ["0", "1", "0"]
        }
      }
    }
  }
}
Variables in the Factory section run once before the Playground starts, similar to the setup() function in p5.js.

​
Key Concepts

The boundaries function demonstrates how to create reusable logic in b5:
  • Takes input parameters (radius)
  • Performs calculations
  • Returns multiple outputs
  • Can be used anywhere in the Playground
The strokePicker and fillRGBA blocks are effect blocks that set the drawing context for subsequent shapes:
{
  "name": "strokePicker",
  "inlineData": ["#4a90e2ff"]
}
These blocks don’t have wire connections but affect blocks that follow them in the execution order.
b5 executes blocks from left to right, line by line from top to bottom. The grid coordinates in the JSON reflect this:
  • Line “0” contains the radius slider and comments
  • Line “1” contains the boundaries function call
  • Line “3” contains the bounce blocks
  • Line “5” contains the drawing blocks

​
Experimentation Ideas

Change the Step Size

Modify the number block from 7 to different values to make the ball move faster or slower.

Add More Balls

Duplicate the circle drawing logic with different bounce blocks to create multiple bouncing balls.

Custom Colors

Experiment with the fillRGBA inputs to create different color mapping effects.

Trail Effect

Adjust the background settings to create motion trails as the ball moves.

​
Next Steps

Drawing Shapes

Learn about different shape blocks and styling options

Interactive Graphics

Explore mouse and keyboard input for interactive projects

Animations

Discover more animation techniques and patterns

Block Reference

Browse the complete block documentation