Interactive Visualizations

Text explains an idea. A running sketch lets the reader poke at it. Python Central Hub ships two ways to show, not just tell: p5.js for live, interactive canvases and mermaid for diagrams — both themed to match the site and both authored with a plain fenced code block.

p5.js sketches

Write an ordinary p5 sketch (global style — setup, draw, and the usual bare calls) inside a p5 code block. Add title, desc, and height to the fence for a labelled panel. Each sketch gets Pause and Restart controls, runs only when it scrolls into view, and holds still for readers who prefer reduced motion.

text

```p5 title="Bouncing balls" desc="Click to drop another." height="340"
let balls = [];
function setup() { createCanvas(600, 340); noStroke(); }
function draw() {
  background(13, 17, 23);
  for (const b of balls) { /* … update + render … */ }
}
function mousePressed() { balls.push(makeBall(mouseX, mouseY)); }
```

Here it is for real — click the canvas to drop another ball:

sketch Bouncing balls p5.js Pause Restart

Gravity, walls, and a little bounce. Click anywhere on the canvas to drop another ball.

A calmer one — three sine waves in the Python palette, drifting on frameCount:

sketch Sine field p5.js Pause Restart

Three waves in Python blue and amber, animated over time.

mermaid diagrams

A mermaid block renders a themed diagram. Add title and desc for the panel header and caption.

diagram How Python runs your code mermaid

  flowchart LR
  A[".py source"] --> B["Compile"]
  B --> C[".pyc bytecode"]
  C --> D["Python VM"]
  D --> E["Output"]

Your source becomes bytecode, then the virtual machine executes it — the loop every program follows.

diagram A request through Flask mermaid

  sequenceDiagram
  participant U as Browser
  participant F as Flask
  participant V as View
  U->>F: GET /home
  F->>V: match route
  V-->>F: render template
  F-->>U: HTML response

What happens between a click and a rendered page.

Code blocks

Ordinary fenced blocks are framed the same way, with highlighted lines called out by a blue rail — handy for pointing at the line that matters:

gravity.py

def step(ball):
    ball.vy += GRAVITY        # accelerate downward
    ball.y += ball.vy         # move
    if ball.y > FLOOR:        # hit the floor?
        ball.vy *= -0.8       # bounce, losing energy
    return ball