Scan Processor is a sketchy image processor inspired by the Rutt/Etra Scan Processor for p5js.

The library contains a set of simple tools facilitating the generation of "Scan Processor"-like images.

The main guidelines of the library are to maintain the code in a compact form, easy to modify, hack and rework.

Scan Processor is a part of the Tetoki! project and is developed thanks to substantial help and cooperation with the WRO Art Center and HAT Research Center.

link to statically hosted file:

Download current Scan Processor release (v. 0.21a, 09.04.2019) with examples.

The Rutt/Etra Scan Processor is a real-time system which electronically alters the deflection signals that generate the television raster. Developed in the early 1970's in New York by Steve Rutt and Bill Etra, this analog scan processor loosely resembled the Scanimate, but was simplified in operation and offered at a lower cost. Steve Rutt manufactured the unit, while Bill Etra refined the scan processor concept, placing an emphasis on external voltage control of the processing modules. It's principle of operation is to intercept the sweep signals of a black and white video monitor and modulate these signals with analog control voltages. The voltage control directly modifies the sweep waveforms and is more predictable than other magnetic versions such as gluing or winding additional yokes onto the necks of black and white monitors. Images are "re-scanned" by avideo camera facing the modulated display monitor for combina- tion with other video signals and final recording to video tape.

The Rutt/Etra Scan Processor was widely used by artists (eg. Steina & Woody Vasulka created their classic "Scan Processor Studies" (1978) - a series of experiments based on the possibilities and unique features of the device.

The specific nature of the image obtained with the device (the image was often converted to a 3D-looking form consisting of pleated lines with horizontal orientation) has been recognized so far, and the device has been subjected to a whole range of expansions and emulations also in the digital domain. In addition, some modern techniques of 3D image generation (eg. bump mapping) use similar concepts (using texture content to move the vertices of objects apparently).

This library re-emphasize the basic aesthetics of the original Rutt/Etra Scan Processor, adding some possibilities and variations possible in the digital environment.


NOTE: Not all web browsers allow the use of a video camera (eg built into a laptop or connected via USB). This is not related to the construction of the Scan Processor library, or even with p5js, but with the browser manufacturer's treatment of security. Sometimes this is related to the operating system (eg iOS in some cases blocks access to the camera), sometimes with security settings or certificates. Some of these settings can be changed, but generally not all browsers work with cameras. Currently the best browser on macOS, Windows and Linux to test p5js sketches hosted locally or loaded from a webserver and using video camera (and the Scan Processor library) is Mozilla Firefox

Basics of image processing with the Scan Processor library:

Scan Processor and still images

Scan Processor and video camera



The main library pseudo-class. You must create an object derived from this class to use the library. The constructor does not require any parameters:
var sp = new ScanProcessor();


A function that converts images into 3D meshes. It can be used in a version with one or three parameters. The function returns a two-dimensional array containing vertices (3-elements arrays containing normalized x, y abd z coordinates of the vertex).
[ScanProcessor instance].convert(_img);
[ScanProcessor instance].convert(_img, _w, _h);

If it is used version with one parameter, the function assumes that the resolution of generated mesh should be equal to the resolution of the converted image. In the version with three parameters, we can determine the resolution of meshes regardless of the source image resolution (usually the resolution of created mesh will of course be lower than the converted image).


A function that displays meshes (typically produced by the convert function) in various ways. The function takes two-dimensional array containing vertices (from a certain point of view it is therefore a three-dimensional array, because each vertex has 3 coordinates) and displays them in a way depending on the given parameters:
[ScanProcessor instance].draw(_arr2d, _dst, _mode, _x, _y, _z, _w, _h, _d);
_arr2d - array of vertex data to draw;
_dst - destination, usually WEBGL canvas;
_mode - drawing style (use one of following ScanProcessor pseudo-constans: [ScanProcessor instance].HORIZONTAL_LINES, [ScanProcessor instance].VERTICAL_LINES, [ScanProcessor instance].GRID, [ScanProcessor instance].HORIZONTAL_CURVES, [ScanProcessor instance].VERTICAL_CURVES - via the _mode parameter you can also pass to the functionman image which will be used as a texture streched on the mesh);
_x, _y, _z - position of the mesh in 3d space (the point determines, roughly, position of the center of the mesh);
_w, _h, _d - width, height, and depth of the mesh.


write to: contact | at | tetoki | dot | eu

Creative Commons License
Scan Processor by PaweĊ‚ Janicki is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at