Skip to content
Python Central Hub

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 — setupsetup, drawdraw, and the usual bare calls) inside a p5p5 code block. Add titletitle, descdesc, and heightheight 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)); }
```
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
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 frameCountframeCount:

sketch Sine field p5.js
Three waves in Python blue and amber, animated over time.

mermaid diagrams

A mermaidmermaid block renders a themed diagram. Add titletitle and descdesc for the panel header and caption.

diagram How Python runs your code mermaid
Your source becomes bytecode, then the virtual machine executes it — the loop every program follows.
diagram A request through Flask mermaid
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
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

If this helped you, consider buying me a coffee ☕

Buy me a coffee

Was this page helpful?

Let us know how we did