This script aims to convert an image or a set of frames into a CSS file, packed in only a single div element, without using clip-path or canvas elements.
For images:
python execution.py IMAGE_PATHFor directories of frames (use ffmpeg to convert a video into frames first):
python execution.py -directory DIRECTORY_PATH [-fps FPS] [-thumbnail THUMBNAIL] - -fps: number of frames per second
- -thumbnail: the frame index that will be shown as thumbnail.
- -sample: {disk,threshold} Sampling method for candidate points. Default: threshold
- -process: {approx-canny,edge-entropy} Pre-processing method to use. Default: approx-canny
- -rate: Desired ratio of sample points to pixels. Default: 0.03
- -blur: Blur radius for approximate canny. Default: 2
- -threshold: Threshold for threshold sampling. Default: 0.02
- -max-points: Max number of sample points. Default: 5000
- -seed: Seed for random number generation.
- --debug: Enable debugging.
- --time: Display timer for each section.
- -thumbnail: Frame number to pick thumbnail.
- -edge-angle: Extra angle around the cone to fill up gaps in the output. Default: 0.025
- -rounding: Round CSS gradients to max decimal places. Default: 3
- Triangulate the image with help of PyTri. Each triangle's color is based on the color of its centroid.
- For each triangle, split it into 2 halves with a horizontal cut. This creates 2 triangles, both of which have exactly 2 points having the same y-coordinate, which is necessary for conic-gradients to work.
- Convert mini-triangles created from step 4 into conic gradients.
- Added extra angle parameters and enlarged bounding box to minimize gaps between triangles due to browser rounding problems.
- Triangulation of polygons is incredibly space-intensive. A simple image as in the demo can take up thousands of triangles, corresponding to megabytes of data. (however, it will not crash the browser if the maximum number of sample points remains under 15000)
- Details are not as well-preserved as directly using polygons.
- Videos have very low FPS even running on as few as 300 sample points, and only work on Firefox. Google Chrome and Chromium rendering engines are extremely horrible at tackling one-div animations.
- There are gaps forming between the triangles that need to be eliminated by using edge-angle, which makes the rendering of triangles less accurate.
- This script is inspired by Junferno's CSS generator. Visit kevinjycui/css-video
- Triangulation of images is done using the PyTri library, which is custom-retrofitted for conversion into CSS. Visit PyTri