Close

Slit-scan Videos in JavaScript

This is the tool I used to create the slit-scan videos in my Slit-scan Renders of Videos with JavaScript blog post. It generates time based snapshots for every possible slit position and saves them as a series of PNG images.

You can find the full source code of this script on its GitHub project page.


If you would like to create static slit-scan images instead of videos, check out the Slit-scan Images in JavaScript tool!


Words of Warning

Depending on the dimensions and length of your video, as well as the desired size of the output images, this tool may generate an enormous amount of data in the hundreds of megabytes or even gigabytes. It is possible that your browser will freeze up or crash.

After several conversions you may also have to restart your computer if video decoding no longer works properly (experienced on Windows 8.1). The tool computes an estimated output data size based on your settings. I suggest that you keep that number as small as possible.

Use at your own risk! I am not responsible for any damages or data loss.


Instructions

This tool requires a recent version of Google Chrome and has been tested on Windows 8.1. It may work in Firefox and Opera. If you encounter any problems, please contact me, leave a comment, or file an issue on GitHub!

I put the script together rather quickly, and it still has some glitches and usability issues, which I will hopefully be able to fix soon.

First select a video file from your computer. Videos with smaller dimensions (480p or less) and lower frame rates (30 FPS or less) are preferred in order to keep the output data size small.

You can set the Start Time and End Time for the recording to further reduce the data size. The number of seconds times the Frame Rate determines the width of the output images in pixels. The longer you record, the wider the images will be, unless you manually override the Image Width setting. The total number of images generated is equal to the width of the source video (in pixels).

Try starting with smaller settings first, i.e. 50 seconds at 10 FPS on a 480p video, then work your way up and see how high your web browser can go. I have not been able to record more than a few hundred megabytes at a time.

Once the recording is complete, your browser will automatically download (a possibly large number of) generated frame images to your Downloads directory. This may take a few seconds and occasionally crashes.

You can then use a video processing utility like VirtualDub to create an AVI video from the individual frames. A video converter like Handbrake will let you convert it to MP4 and other container formats.


Recording Options:
Start Time:
End Time:
Window Position:
Window Width (pixels):
1
Output Options:
Image Width (pixels):
FPS
Image Height (pixels):
Use video height
Estimated data size: 0.0 MB

Technical Notes

The automatic image download feature in this script requires the download attribute in HTML anchors, which is not supported in Internet Explorer and Safari at this time.

The script uses a single pass over the video to generate the individual slit-scan frames, which are stored in an array of canvases. Unlike the other tool for static slit-scan images, this one does not actually play the video in real-time, but seeks to individual frames based on the provided frame rate.

There is probably room for optimizations here – pull requests are welcome!