Chenchen Zheng

04 / Creative computing · interactive mathematical art

Math Lens

Independent designer and developer

August 2026 – Present

Ongoing project · functioning interactive prototype

  • Python / Streamlit
  • Mathematical visualization
  • Interaction design
  • Canvas / JavaScript

How can mathematical representations become ways of seeing, interpreting, and interacting with images?

One architectural demonstration image shown as Original, Voronoi color regions, and colored Delaunay triangulation.
Actual Math Lens outputs / Original → Voronoi → Triangulation. The default lenses use their own sampling settings; these panels are not a strict same-site dual comparison.

Chenchen Zheng · genuine application captures. The architecture and colored-glass source images are AI-generated demonstration inputs; the lens outputs and interface recordings are computed by the actual application.

01 / The idea

A representation changes what becomes visible.

Turning mathematical representations into ways of seeing and exploring.

I designed and implemented adjustable Voronoi and triangulation lenses, then built Layer Reveal to let people inspect the computation beneath the finished image.

For people exploring images as visual material, a fixed filter conceals the choices that produce its appearance. Math Lens makes those choices part of creative practice: Voronoi emphasizes regions and color; Delaunay triangulation emphasizes connections and structure.

02 / Exploring the image

Turn visual intentions into adjustable decisions.

Genuine paired results and controls: Detailed/Structure at 15% abstraction, 75% detail, 85% structure; Abstract/Tone at 85%, 35%, 0%. Both use mean region color and seed 10.
Source-refined comparison of actual controls and results. Several settings change together; this is not an isolated parameter experiment. Inspect controls at full size

Voronoi: detail, distribution, color

Move Structure vs Tone toward Structure: cells tend to concentrate around stronger image contours. Toward Tone, broader dark and bright variations have more influence. The control changes where cell sites are sampled by blending Sobel edge strength with centered-SVD tonal variation.

Abstraction moves from many small cells toward fewer large ones. Detail Emphasis concentrates sampling around image features. Color can come from a region’s mean or its seed.

A fixed pattern seed makes exploration reproducible; Regenerate Pattern deliberately changes the realization. Semantic control labels connect a visual intention to algorithm parameters.

Triangulation: structure and regularity

Structural Resolution changes site count; Regularity controls Lloyd relaxation. Mesh Explorer separates edge color from RGB-channel edge width, so connections can carry image information while interiors remain white.

Actual Mesh Explorer comparison: monochrome triangle connections and connections colored from the local image, both with white interiors.
Actual Mesh Explorer / monochrome and Local Image Color. Color belongs to the connections, not filled triangles.

03 / Making mathematics inspectable

Look beneath the image, one brush pass at a time.

  1. Feature extraction

    Centered-SVD tone and Sobel edges inform Voronoi density; triangulation uses Sobel structure.

  2. Sampling

    Adaptive sites; triangulation optionally relaxes them with Lloyd iterations.

  3. Geometry

    Nearest-site Voronoi regions or Delaunay triangle connectivity.

  4. Visual output

    Regional color, colored triangles, or inspectable mesh encodings.

0:12 silent recording

Brush passes expose mesh, computational stages, and the original image.

Recorded interaction · independent Math Lens implementation

Layer Reveal is a local exploration

Each brush pass descends one stage: Final → Mesh → Relaxed Points → Lloyd → Initial Points → Original. Different regions can retain different depths, letting a viewer compare the finished image with the structures that generated it.

Start/Resume, Pause, brush size, Preview Final, and Reset support deliberate inspection. The original app also offers S/Q when the canvas has focus; the portfolio shows a recording of that interaction.

Make inspection responsive

Python prepares six image layers. A custom Canvas/JavaScript component maintains a local depth map and composites them without rerunning triangulation for each brush movement. Pausing preserves the explored state; Preview Final temporarily returns to the result.

04 / My contribution

From mathematical process to an interaction people can inspect.

I independently developed Math Lens: the representation logic, Python pipelines, Streamlit interface, semantic controls, process views, Layer Reveal, and visual experiments. The work combines numerical implementation with decisions about what a viewer can see and change.

Voronoi diagrams, Delaunay triangulation, Sobel edges, and SVD are established methods. My Voronoi sampling and regional rendering are source-informed adaptations, drawing on Yue Sun and collaborators’ Voronoi/Delaunay notebook, Math+Code+Art’s Voronoi Photo Mosaic tutorial, and its sampling and rendering helpers. I adapted and integrated these foundations into Math Lens; my independent work includes the control interface, visualization workflow, and Layer Reveal. I do not claim invention of the underlying mathematics.

05 / Outcome & future direction

A working instrument for visual exploration.

The functioning prototype supports adjustable lenses, reproducible settings, process inspection, and local Layer Reveal. These are implemented outcomes; no learning gains or representative usability results have been established.

The design lesson is that an explanation can be spatial and exploratory. Revealing structure is useful only if people can relate it to the image and retain control of what they inspect.

I would next evaluate how viewers interpret sampling and intermediate layers. Additional mathematical lenses, including possible TSP-based line drawing, remain future directions. AR is a future direction, not an implemented feature.