Desmos Bezier Renderer

A simple image/video to Desmos graph converter run locally. Rotoscopes images using Canny and Potrace edge detection as Bezier curves on Desmos Graphing Calculator.

Setup

This guide won't work out of the box on Windows. The easiest way to do this on Windows is to download WSL to run all the commands below. You can find it produces under the `\\wsl$\Ubuntu-20.04\home` path on your PC.

Install dependencies

sudo apt update
sudo apt install git python3-dev python3-pip build-essential libagg-dev libpotrace-dev pkg-config

Clone repository

git clone https://github.com/kevinjycui/DesmosBezierRenderer.git
cd DesmosBezierRenderer

Install requirements

python3 -m venv env
. env/bin/activate
pip3 install -r requirements.txt

Replace the images in the frames directory with your own and name each image frame%d.png where %d represents the frame-number starting from 1. To render just a single image, add a single image named frame1.png in the directory. Works best with 360p to 480p resolution (may have to lower the resolution further with more complex frames).

mkdir frames
...

Settings

Constants in the backend.py file can be changed to optimise or customise your render via command-line arguments.

$ python backend.py -h
backend.py -f <source> -e <extension> -c <colour> -b -d -l -g --static --block=<block size> --maxpblock=<max expressions per block>

	-h	Get help

-Render options

	-f <source>	The directory from which the frames are stored (e.g. frames)
	-e <extension>	The extension of the frame files (e.g. png)
	-c <colour>	The colour of the lines to be drawn (e.g. #2464b4)
	-b		Reduce number of lines with bilateral filter for simpler renders
	-d		Download rendered frames automatically (only available if rendering quick.html)
	-l		Reduce number of lines with L2 gradient for quicker renders
	-g		Hide the grid in the background of the graph (only available if rendering quick.html)

-Optimisational options

	--static					Use a static number of expressions per request block
	--block=<block size>				The number of frames per block in dynamic blocks
	--maxpblock=<maximum expressions per block>	The maximum number of expressions per block in static blocks

You can use the optimisational options to change the number of expressions the backend will send to the frontend per call (too much will cause a memory error, too little could kill the backend with too many requests). Note that a "block" refers to what is passed from the backend to the frontend per HTTP request. These only really matter if you are rendering a video.

Use python3 backend.py -h to see the above help message. Run without any command-line arguments to create a rendering with the same settings as seen in this video.

Running the command

Run backend (This may take a while depending on the size and complexity of the frames). It should eventually show that the server is running on localhost:5000.

python3 backend.py

The following is an example of the output

$ python3 backend.py 
Desmos Bezier Renderer
Junferno 2021
https://github.com/kevinjycui/DesmosBezierRenderer
-----------------------------
Processing 513 frames... Please wait for processing to finish before running on frontend

--> Processing complete in 4.4 seconds

 * Serving Flask app "backend" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Load index.html into a web browser and put f=1 into the first formula in the formula window. The image should start rendering or the video should start playing at a slow rate.

Alternatively, you can load quick.html for a quicker rendering with more consistent rendering time per frame that also allows for the use of the automatic download (-d) and gridline removal (-g) options. This however will also lower the quality, cause frames to disappear immediately after rendering, and will not show equations in the left sidebar. The renders seen in the video this video use index.html whereas this video uses quick.html.

wqiiqw / desmosbezierrenderer Goto Github PK