Close

Slit-scan Images in JavaScript

This is the tool I used to create the slit-scan images in my Slit-scan Renders of Videos in JavaScript blog post.

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


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


Instructions

This tool has been tested in Google Chrome 43 and Internet Explorer 11 on Windows 8.1, but will likely work in other browsers and operating systems as well. If you encounter any problems, please contact me, leave a comment, or file an issue on GitHub!

By default, it is loading a memorable (and rather low resolution) scene from The Simpsons. If your web browser supports loading local video files, you can use a video of your choice, preferably in HD quality. I used the free ClipConverter web site to create MP4 files from YouTube videos.

Press the play button on the video to initiate the rendering of the output image. You can adjust the width of the scanning slit and set whether it is stationary or moving. You can also adjust the width of the strip that is written to the output. The remaining settings should be self-explanatory.

If you are loading a video from your computer and know its frame rate, you can enter it and click the Calculate button to compute the optimal width of the output image. Otherwise use a manual size that works for you. In Google Chrome you can right-click and download the generated image after the video has finished recording.


Input Options:
Slit Width (pixels):
1
Slide slit position over time
Output Options:
Slit Stretch (pixel):
1
Image Width (pixels):
FPS
Image Height (pixels):
Use video height

Tips & Tricks

Try moving the scanner slit while the video is playing in order to achieve effects similar to the ones shown in Levin’s gallery, or change the Slit Width and Slit Stretch values to create periodic snapshots or abstract art:


Technical Notes

There is currently no good way to retrieve the frame rate and number of frames from an HTML5 video element. The length of a frame during playback is generally adjusted by the web browser to match the refresh rate of the screen. It is therefore not possible to predetermine the total number of frames rendered, so that the desired pixel width of the generated output image must be provided by the user.

The pointer-events CSS property is not supported in all browsers, so I use it in combination with pep.js to prevent the gizmo overlay from stealing input from the video player controls. It requires jQuery.

HTML5 input sliders are also not supported in all browsers yet. I used the html5slider.js polyfill for compatibility with older web browsers.

Finally, a small hack was required to properly update the slit stretch knob in WebKit based browsers.


Related Resources