Most editing apps give you a slider and hide what it does. I wanted one that shows the formula, so a beginner can see why an edit looks the way it does.
So I built Math Canvas: a photo and video editor that runs in your browser, in one HTML file. No sign-in and no uploads. Your files stay on your device.
Try it: https://www.cube3.in
Code (MIT): https://github.com/boya16573-design/Cube3.in
What it shows
Pick a layer and open the Check tab. You see the equations behind the look, for example how contrast works on linear light, or how a vignette fades toward the corners. You also get a quality test for your photo or video: resolution, sharpness, noise, exposure, colour balance and text contrast. When something fails, it shows the exact number and a one-tap fix.
Three details I enjoyed building
- Colour maths in linear light. Pixel values in a normal image are gamma-encoded, so averaging two pixels directly gives the wrong brightness. Averaging a black and a white pixel gives 128, but physically the result is closer to 188. Math Canvas converts to linear light with the exact sRGB formulas, does the blur, sharpen, glow and brightness maths there, and converts back.
- Lanczos resizing for exports. When you export at a larger size, photos are shrunk with a Lanczos-3 filter, again in linear light, instead of the browser's default.
- Frame-by-frame video export. The video exporter uses WebCodecs. It seeks each video to the exact time, draws the frame, encodes it, and writes the file, so no frames are dropped. Audio is mixed offline. It reports "420 of 420 frames rendered, 0 dropped". There's also a "Measure export error" button. It renders the preview and the real export, shrinks the export, and shows the RMSE and PSNR between them. In my tests the numbers came out around 47 to 52 dB, which means the two look the same. More maths It also draws graphs with derivatives and integrals, surfaces z = f(x, y), curves defined by F(x, y) = 0, and vector fields with divergence and curl. What it is not It doesn't use AI to make images. The "realistic scenes" and manga looks come from equations, so they are stylised, not photographs. MP4 export isn't tested in every browser. If it fails, it falls back to WebM. Heavy blur on a 4K image can be slow on older phones. Help wanted It's one file with no build step, which makes it easy to read and change. There are issues for new templates, graph presets, small-phone layout and testing MP4 in Safari and Firefox. Pull requests are welcome: see CONTRIBUTING.md in the repo. I'd love to hear what you think, and what bugs you find on your phone or browser.
Top comments (0)