Based on the Paper »Stippling of 2D Scalar Fields« by Görtler et al.
The paper »Stippling of 2D Scalar Fields« describes a technique used to represent 2-dimensional data using stipples. It is based on the Linde-Buzo-Gray algorithm and extends it with more control over the result, such as the emulation of contours.
The algorithm starts with taking two-dimensional data and assigning density values to it. This output can then be preprocessed fo contour enhancing techniques also described in the paper. The Linde- Buzo-Gray algorithm is then applied, which consists of splitting, moving, or deleting stipples until a set change threshold is reached. The resulting stipples are then displayed.
The paper also describes ways in which contours can be emulated, such as restricted stippling and mach-banding. Both outputs require an additional preprocessing stage.
Additionally, the shapes can be varied (squared or circle stipples) as well as the color. In our implementation the color is directly sourced from the input file.
The output of the different settings is as follows: left to right: default, restricted, machbanding, colored, squared, same-size stipples
We implemented the stippling algorithm with D3.js and Javascript. Rendering is taken care of via simple shaders and WebGL. The preprocessing was done in Python and with array-blur.js. The documentation was created with JSDoc. Preprocessed data is stored in Base64 and there is no need for a dedicated webserver to run the application.
SETTINGS: It let's you either upload your own data in an image file format, or use one of 10+ preloaded datasets.
RENDER SETTINGS: Contains real time adjustments to the render output. We included a contrast slider, to adjust the rendered dot-size for the image. Based on the Gestalt principles in the paper, we implemented the function to display the dots either as a circle or a square.
STIPPLING SETTINGS:This input section let's you control the contour emulation method, as well as the desired dot-size variation and whether it is a colored output or not (if color data is available). These adjustments make a recomputation of the output necessary.