Singapore Management UniversityInstitutional Knowledge at Singapore Management University

Research Collection School of Information Systems School of Information Systems

8-2012

Vignette: A Style Preserving Sketching Tool forPen-and-Ink Illustration with Texture SynthesisRubaiat Habib KaziNational University of Singapore

Takeo IgarashiUniversity of Tokyo

Shengdong ZhaoNational University of Singapore

Richard Christopher DAVISSingapore Management University, rcdavis@smu.edu.sg

Kenshi TakayamaUniversity of Tokyo

Follow this and additional works at: https://ink.library.smu.edu.sg/sis_research_all

Part of the Computer Sciences Commons

This Report is brought to you for free and open access by the School of Information Systems at Institutional Knowledge at Singapore ManagementUniversity. It has been accepted for inclusion in Research Collection School of Information Systems by an authorized administrator of InstitutionalKnowledge at Singapore Management University. For more information, please email libIR@smu.edu.sg.

CitationKazi, Rubaiat Habib; Igarashi, Takeo; Zhao, Shengdong; DAVIS, Richard Christopher; and Takayama, Kenshi. Vignette: A StylePreserving Sketching Tool for Pen-and-Ink Illustration with Texture Synthesis. (2012). Research Collection School of InformationSystems.Available at: https://ink.library.smu.edu.sg/sis_research_all/1

Copyright is held by the author / owner(s). SIGGRAPH 2012, Los Angeles, California, August 5 – 9, 2012. ISBN 978-1-4503-1435-0/12/0008

Vignette: A Style Preserving Sketching Tool for Pen-and-Ink Illustration with Texture Synthesis

Rubaiat Habib Kazi1,2, Takeo Igarashi1,3, Shengdong Zhao2, Richard C. Davis4, Kenshi Takayama3 1JST ERATO, IGARASHI Design Interface Project

3Information Systems, University of Tokyo 2CS, National University of Singapore

4SIS, Singapore Management University{rubaiat, zhaosd}@comp.nus.edu.sg, {takeo, kenshi84}@acm.org, rcdavis@smu.edu.sg

 1. Introduction Pen-and-ink illustrations take significant amounts of skill, artistry, and patience to create. Digital tools are widely used to accelerate the process; but they provide less artistic freedom and cannot easily capture illustrators’ personal style. Furthermore, these tools disrupt the traditional illustration workflow, because they are tedious and draw attention to dialog boxes and away from the illustration itself. We present Vignette, an interactive tool that facilitates texture creation in pen-and-ink illustrations in a natural way with built in texture synthesis capabilities. 2. Vignette: Workflow and Interaction Unlike existing systems, Vignette preserves illustrators’ workflow and style: users draw a fraction of a texture and use gestures to automatically fill regions with the texture with built in texture synthesis capabilities. Our system supports both 1D and 2D synthesis, along with stitching. Our system also has interactive refinement and editing capabilities to provide a higher level texture control, which helps artists achieve their desired vision. The interface and interaction design of Vignette was guided by the analysis of traditional pen-and-ink illustration workflow and resulting artifacts [1]. The following steps illustrate the typical drawing workflow in Vignette: Step-1: The user draws a small fragment of the target texture. Step-2: The user then selects a texture filling tool (Brush, Continuous hatching, or Flood fill) and gestures to specify how the texture should be filled in (Fig 1(a), 2(a) and 3(a)). The example strokes are automatically collected into a patch, while the direction and curvature of the gesture specify the reference orientation of this patch. The system then generates the rest of the texture from the example patch to fill up the region (Fig. 1(b), 2(b), 3(b)) using the underlying texture synthesis techniques. This gesture (red) unifies the definition and application of example texture, creating a fluid interaction for texture creation from examples. Step-3: After generating the textures, using the higher-level artistic controls, the user interactively refines the textures (Fig. 3(c)), tones, perspective view (Fig. 2(c)), sweep (Fig. 1(c)) and orientation of the texture to achieve desired results. 3. Conclusion Vignette is a practical tool that speeds up creating illustration while preserving natural workflow capturing artists’ personal style. Our evaluation with Vignette shows that even first-time users can create complex and expressive illustrations within minutes. References KAZI, R.H., IGARASHI, T., ZHAO, S., AND DAVIS, R.C. 2012.

Vignette: Interactive Texture Design and Manipulation with Freeform Gestures for Pen-and-Ink Illustration. In CHI (Proceedings of CHI 12), ACM.

Figure 1: Brush operation and editing the curve of a texture. (a) Example strokes and user gesture (red). (b) Brush tool generates a

texture from the example patch (inset). (c) User selects the curve editing tool and drags the mouse to sweep the curve. (d) New texture after the

editing. (e) Tone variation (decreased density).

Figure 3: Continuous hatching and perspective tilting of a texture. (a) Example strokes and user gesture. (b) Continuous hatching creates a

texture from the example patch. (c) User selects the tilt tool and creates a perspective tilt by dragging the mouse left. (d) Tone variation. (e) Tone

and stroke width variation.

Figure 4: Flood fill and texture editing. (a) Example strokes and user gesture. (b) The flood fill creates the textures. (c) Perspective tilting and editing the source patch (inset). (d) The texture is updated interactively.

(e) Tone variation.

Figure 2: This illustration took 13 minutes with Vignette complexly from scratch.