ANDY ZHANG
The Directory 00:00:00
← The directory
HTML · Math · macOS

Desmos Bezier Renderer

Transforms images into Desmos art using Canny edge detection and Potrace to create parametric Bézier curves. Optimized for macOS.

Source ↗Live demo ↗

Desmos Bézier Renderer turns image edges into parametric curves for the Desmos graphing calculator

Open the live renderer · Run locally · See the pipeline

Turn an image into a set of parametric Bézier expressions and draw the result inside Desmos. The renderer combines OpenCV edge detection, Potrace vectorization, a small Flask API, and the Desmos calculator API.

A source illustration beside its blue curve rendering on a Desmos coordinate grid

From pixels to equations

uploaded image
     ↓
grayscale + Canny edges
     ↓
Potrace line and cubic segments
     ↓
parametric LaTeX expressions
     ↓
Desmos calculator

Each traced line segment becomes a linear interpolation. Each smooth segment becomes a cubic Bézier curve:

B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃

The browser sends an image to POST /render, receives the generated expressions and source dimensions, then loads the expressions into the embedded calculator.

Try it

  1. Open the live renderer.
  2. Choose or drop an image.
  3. Render it and let the calculator draw the traced outline.

High-contrast line art produces the clearest result. Detailed images can generate many expressions and take longer to display.

Run it locally

Requirements

  • Python 3.12 or newer
  • Potrace and libagg

On macOS:

brew install potrace libagg

Then install and start the app:

git clone https://github.com/ChinesePrince07/DesmosBezierRenderer-mac.git
cd DesmosBezierRenderer-mac
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python backend.py

Open http://127.0.0.1:5001/calculator.

API

Route Method Purpose
/calculator GET Render the upload interface and embedded calculator
/render POST Accept an image under the file form field and return expressions
/health GET Return {"status":"ok"}
/ GET Redirect to the calculator

A successful render response has this shape:

{
  "result": [
    {
      "id": "expr-1",
      "latex": "((1-t)...,(1-t)...)",
      "color": "#2464b4",
      "secret": true
    }
  ],
  "width": 800,
  "height": 800
}

Project map

backend.py          Flask routes and image-to-expression pipeline
frontend/index.html Upload interface and Desmos integration
test_backend.py     Health, render, and invalid-upload coverage
github/figures.png  Source-to-result example

Test

pytest

The render test draws a known square, submits it as an in-memory PNG, and checks that tracing returns a non-trivial expression set.

Credits

This macOS-focused implementation is based on Junferno/DesmosBezierRenderer. It uses the Desmos calculator API for graph rendering.

License

GPL-3.0