# Bouncing Balls

Properties, velocity, and screen-edge collision.

```{raw} html
<a class="example-run-button" href="../demos/features_getting_started_bouncing_ball.html">▶ Run in browser</a>

```

**Tags:** `getting_started`

Spawn colourful balls that bounce off screen edges. Demonstrates the
`Property` descriptor for editor-visible values and basic frame-by-frame
movement with `on_process()`.


## What You Will Learn

- **Property** -- Declare editor-visible properties with validation ranges
- **on_process(dt)** -- Per-frame update callback with delta time
- **position** -- Move nodes by updating `self.position` each frame
- **add_child()** -- Build a scene tree dynamically in `on_ready()`
- **draw_circle()** -- Render filled circles

## How It Works

`Ball` declares `radius` and `speed` as `Property` descriptors with value
ranges. In `__init__`, a random velocity vector is created. Each frame,
`on_process(dt)` advances the ball's position and reflects velocity when the
ball hits a screen edge.

`BouncingBalls` is the root node that spawns 8 `Ball` children in `on_ready()`,
placing them at random positions. The parent also draws a title and ball
count via `draw_text()`.

## Source

```{literalinclude} ../../examples/features/getting_started/bouncing_ball.py
:language: python
:linenos:
```