FunGraph

中文 · English

FunGraph is a local, real-time 2D visualizer for Python functions. It keeps Python syntax as Python— including if, min, max, helper functions, imports, and multi-step code—while providing an interactive graphing interface inspired by tools such as Desmos and GeoGebra.

FunGraph 是一个在本机运行的 Python 函数实时 2D 可视化工具。它保留原生 Python 的 if、min、max、辅助函数、导入和多步代码，同时提供类似 Desmos 与 GeoGebra 的交互式函数绘图体验。

中文

为什么使用 FunGraph？

传统函数绘图工具通常要求把代码改写成数学表达式。FunGraph 直接读取 .py 文件，由常驻的本机 Python 进程执行和采样，因此更适合包含复杂逻辑、辅助函数与分步计算的函数。

主要功能：

• 选择 .py 文件后自动识别可视化函数。
• 自动为除 x 外的数值参数生成滑块和数值输入框。
• 滑块拖动时实时预览，松开后自动进行高精度采样。
• 参数范围可直接在网页中修改。
• 数值输入框在按 Enter 或失去焦点时才校验并应用。
• 支持平移、滚轮缩放、坐标网格和无限制的连续缩放。
• Main 函数中每次对 result 的赋值都可作为独立阶段显示。
• 使用常驻 Python worker、WebSocket、逐帧输入合并和分层 Canvas 保持交互流畅。
• 对零点、局部极值、跳变和锐角进行补充采样，并在屏幕空间简化近共线点。

环境要求

• Python 3.10 或更高版本
• Node.js ^18.0.0、^20.0.0 或 >=22.0.0
• npm
• 现代桌面浏览器

Windows 一键启动

克隆或下载项目后，双击根目录中的：

启动FunGraph.cmd

启动器会自动：

1. 查找可用的 Python 3 和 npm。
2. 在首次运行时安装前端依赖。
3. 启动本地服务。
4. 服务就绪后打开浏览器。

关闭启动窗口或按 Ctrl+C 即可停止服务。

也可以在 PowerShell 中运行：

git clone https://github.com/Don-Enone/FunGraph.git
cd FunGraph
.\Start-FunGraph.ps1

手动启动

PowerShell：

cd app
npm install
$env:FUNGRAPH_PYTHON = (Get-Command python).Source
npm run dev

Bash：

cd app
npm install
FUNGRAPH_PYTHON=python3 npm run dev

打开终端中显示的本地地址。初始页面为空，点击“选择 .py 文件”即可导入函数。

Python 文件约定

1. 需要绘图的顶层函数，其第一个参数必须命名为 x。
2. 其余参数应当是数值参数，它们会显示为滑块和输入框。
3. Main 默认显示，其它函数默认关闭。
4. Main 中对变量 result 的赋值和增量赋值会被识别为可选的分步结果。
5. 可以使用辅助函数、math、min、max、条件判断及其它正常的 Python 代码。

项目中的 pyfile/Template.py 是唯一随仓库发布的函数示例：

def Saturate(x):
    return max(0, min(1, x))

def SphereMask(x, Radius):
    distance = abs(x)
    return Saturate((Radius - distance) / max(Radius, 1e-5))

def T_Ramp(x, Thickness):
    thickness = 1 / max(Thickness, 1e-5)
    return Saturate(min(
        2 * thickness * (x - 0.5) + 1,
        -2 * thickness * (x - 0.5) + 1,
    ))

def Main(x, Radius, Offset, Thickness):
    result = SphereMask(x, Radius)
    result += Offset
    result = T_Ramp(result, Thickness)
    return result

安全说明

FunGraph 会使用本机 Python 直接执行所选择的源文件。Python 文件拥有与当前用户相同的系统权限，因此请只导入你信任的代码。

函数源文件通过本机回环地址传递给本地 Python worker；FunGraph 不需要把代码上传到第三方计算服务。

架构

React / Canvas UI
        ⇅ WebSocket
Vite local API bridge
        ⇅ JSON lines
Persistent Python worker

• app/src/：React 界面、参数控件与 Canvas 绘图。
• app/python_engine.py：Python 源码检查、编译、缓存与批量采样。
• app/vite.config.mjs：本地 API、WebSocket 和 Python worker 生命周期。
• pyfile/Template.py：最小函数示例。
• Start-FunGraph.ps1 / 启动FunGraph.cmd：Windows 一键启动器。

构建与测试

cd app
npm run build
npm run test:sites

许可证

本项目使用 MIT License 开源。

---

English

Why FunGraph?

Traditional graphing tools often require code to be rewritten as mathematical expressions. FunGraph reads a .py file directly and evaluates it in a persistent local Python process, making it suitable for functions with control flow, helper functions, imports, and multi-step calculations.

Highlights:

• Detects visualizable functions automatically after a .py file is selected.
• Creates sliders and numeric inputs for parameters other than x.
• Renders a low-latency preview while dragging and refines the curve after release.
• Lets users edit slider ranges directly in the interface.
• Validates numeric text inputs only on Enter or blur.
• Supports panning, wheel zooming, grids, axes, and continuous zoom without artificial limits.
• Exposes each assignment to result in Main as an optional intermediate stage.
• Uses a persistent Python worker, WebSocket transport, frame-coalesced input, and layered canvases.
• Refines zero crossings, local extrema, jumps, and sharp corners, then simplifies nearly collinear points in screen space.

Requirements

• Python 3.10 or newer
• Node.js ^18.0.0, ^20.0.0, or >=22.0.0
• npm
• A modern desktop browser

One-click launch on Windows

Clone or download the project, then double-click:

启动FunGraph.cmd

The launcher finds Python and npm, installs frontend dependencies on the first run, starts the local server, and opens the browser when the app is ready.

Close the launcher window or press Ctrl+C to stop the server.

You can also launch it from PowerShell:

git clone https://github.com/Don-Enone/FunGraph.git
cd FunGraph
.\Start-FunGraph.ps1

Manual setup

PowerShell:

cd app
npm install
$env:FUNGRAPH_PYTHON = (Get-Command python).Source
npm run dev

Bash:

cd app
npm install
FUNGRAPH_PYTHON=python3 npm run dev

Open the local URL printed by Vite. The initial workspace is empty; choose a .py file to import functions.

Python file conventions

1. The first parameter of every top-level function to be plotted must be named x.
2. Remaining parameters should be numeric; FunGraph exposes them as sliders and inputs.
3. Main is visible by default, while other functions start hidden.
4. Assignments and augmented assignments to result inside Main become optional intermediate stages.
5. Helper functions, math, min, max, conditionals, and ordinary Python code are supported.

pyfile/Template.py is the only function example included in the public repository.

Security

FunGraph executes the selected source file with the local Python interpreter. A Python file runs with the same operating-system permissions as the current user, so only import code you trust.

Source files are sent over the local loopback interface to the local Python worker. FunGraph does not require a third-party compute service.

Architecture

React / Canvas UI
        ⇅ WebSocket
Vite local API bridge
        ⇅ JSON lines
Persistent Python worker

• app/src/: React interface, parameter controls, and Canvas rendering.
• app/python_engine.py: source inspection, compilation, caching, and batched sampling.
• app/vite.config.mjs: local API, WebSocket transport, and Python worker lifecycle.
• pyfile/Template.py: minimal function example.
• Start-FunGraph.ps1 / 启动FunGraph.cmd: one-click Windows launcher.

Build and test

cd app
npm run build
npm run test:sites

License

This project is released under the MIT License.