Experiments

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.

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. The full source code is available on GitHub. If you encounter any problems, please contact me or file an issue!

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.

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:

Tool

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

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