Sketcher

Overview

The canvas element of an HTML document is used to dyanmically create two-dimensional pictures for use in a web application or a web page. The pictures are created using low-level JavaScript function calls; the kind of function calls that are typical of any rendering library. Creating graphics for charts and logos is relatively straightforward using this technique; but sketching two-dimensional renderings of photographs is untenable for even simple digital images. This project seeks to create a software system that will accept a digital image as input and generate a JavaScript function to render a sketch of the image onto an HTML canvas.

Image Processing

Consider the flower shown in Figure 1. Our system will automatically accept this image as input and create a script that, when executed, will produce a sketch of the photograph. The system will need to perform a variety of image processing filters (conversion to grayscale, identification of edges, computation of lines and stroke-widths).

Code Generation

Once the image has been processed and analyzed, the system will then automatically generate a script to render the sketch onto a canvas. The script should be configurable for cases involving a) optimizing running time b) creating sketches with different visual styles and c) generating color or grayscale output.


                function render(canvas) {
                    var context = canvas.getContext('2d');
                    context.strokeStyle = '#ff0000';
                    ...
                }

Figure 2 : Automatic code generation.

Code Excecution

Once the script has been generated, it can be used in a web page to render the sketch onto an HTML element. The expected output is shown in Figure 3.

References

Yamamoto, S.; Xiaoyang Mo; Imamiya, A. Enhanced LIC pencil filter.
Gao, Xingyu; Zhou, Jingye; Chen, Zhenyu; Chen, Yiqiang. Automatic Extraction of Pencil Sketch for 2D Images. 2010