ABSTRACT
We present Kitty, a sketch-based tool for authoring dynamic and interactive illustrations. Artists can sketch animated drawings and textures to convey the living phenomena, and specify the functional relationship between its entities to characterize the dynamic behavior of systems and environments. An underlying graph model, customizable through sketching, captures the functional relationships between the visual, spatial, temporal or quantitative parameters of its entities. As the viewer interacts with the resulting dynamic interactive illustration, the parameters of the drawing change accordingly, depicting the dynamics and chain of causal effects within a scene. The generality of this framework makes our tool applicable for a variety of purposes, including technical illustrations, scientific explanation, infographics, medical illustrations, children's e-books, cartoon strips and beyond. A user study demonstrates the ease of usage, variety of applications, artistic expressiveness and creative possibilities of our tool.
Supplemental Material
- Baecker, R.M. (1969) Picture-Driven Animation. AFIPS Spring Joint Computer Conference, 273--288. Google ScholarDigital Library
- Bostock, M., Ogievetsky, V., & Heer, J. (2011). D³ datadriven documents. Visualization and Computer Graphics, IEEE Transactions on, 17(12), 2301--2309. Google ScholarDigital Library
- Davis, R. C., Colwell, B., & Landay, J. A. (2008). Ksketch: a 'kinetic' sketch pad for novice animators. ACM CHI, 413--422. Google ScholarDigital Library
- Fruchterman, T. M., & Reingold, E. M. (1991). Graph drawing by force-directed placement. Software: Practice and experience, 21(11), 1129--1164. Google ScholarDigital Library
- Heer, J., Card, S.K., Landay, J.A. (2005). prefuse: a toolkit for interactive information visualization. ACM CHI, 421--430. Google ScholarDigital Library
- Igarashi, T., Moscovich, T., & Hughes, J. F. (2005). Asrigid-as-possible shape manipulation. ACM Trans. on Graphics 24(3): 1134--1141. Google ScholarDigital Library
- Kazi, R. H., Chevalier, F., Grossman, T., Zhao, S. & Fitzmaurice, G. (2014) Draco: Bringing Life to Illustrations with Kinetic Textures. ACM CHI, 351--360. Google ScholarDigital Library
- Landay, J. A. & Myers, B.A. (2001). Sketching Interfaces: Toward More Human Interface Design.Computer 34(3):56--64. Google ScholarDigital Library
- LaViola, J. J., & Zeleznik, R. C. (2007). MathPad 2: a system for the creation and exploration of mathematical sketches. SIGGRAPH courses. Google ScholarDigital Library
- Lee, B., Kazi, R. H., & Smith, G. (2013). SketchStory: Telling more engaging stories with data through freeform sketching. IEEE TVCG, 19(12), 2416--2425. Google ScholarDigital Library
- Lowe, R. (2003). Animation and learning: selective processing of information in dynamic graphics. Learning and instruction, 13(2), 157--176.Google Scholar
- Miller, T., & Stasko, J. (2001). The InfoCanvas: information conveyance through personalized, expressive art. ACM CHI Extended Abstracts. 305--306. Google ScholarDigital Library
- Mitra, N. J., Yang, Y. L., Yan, D. M., Li, W., & Agrawala, M. (2010). Illustrating how mechanical assemblies work. ACM Trans, on Graphics, 29(4), 58. Google ScholarDigital Library
- Moscovich, T. (2001). Animation sketching: An approach to accessible animation. Master's Thesis, CS Department, Brown University.Google Scholar
- Newman, M. W., Lin, J., Hong, J. I., & Landay, J. A. (2003). DENIM: An informal web site design tool inspired by observations of practice. Human-Computer Interaction, 18(3), 259--324. Google ScholarDigital Library
- Ngo, T., Cutrell, D., Dana, J., Donald, B., Loeb, L., & Zhu, S. (2000). Accessible animation and customizable graphics via simplicial configuration modeling. ACM SIGGRAPH, 403--410. Google ScholarDigital Library
- Ramachandran, V.S., & Blakeslee, S. (1998). Phantoms of the brain: Probing the mysteries of the human mind.Google Scholar
- Resnick, M., Maloney, J., Monroy-Hernández, A., Rusk, N., Eastmond, E., Brennan, K., & Kafai, Y. (2009). Scratch: programming for all. Communications of the ACM, 52(11), 60--67. Google ScholarDigital Library
- Roam, D. (2008). The back of the napkin.Google Scholar
- Scott, J., & Davis, R. (2013, October). Physink: sketching physical behavior. ACM UIST adjunct. 9--10. Google ScholarDigital Library
- Suwa, M., & Tversky, B. (2002). External representations contribute to the dynamic construction of ideas. Diagrammatic representation and inference. 341--343. Google ScholarDigital Library
- Tversky, B., Heiser, J., Mackenzie, R., Lozano, S., & Morrison, J. (2008). Enriching animations. Learning with animation, 304--356.Google Scholar
- Vainio, T., Hakkarainen, K., & Levonen, J. (2005). Visualizing complex medical phenomena for medical students. ACM CHI. 1857--1860. Google ScholarDigital Library
- Victor, B. (2009). Drawing Dynamic Visualizations. CUSE.Google Scholar
- Zhu, B., Iwata, M., Haraguchi, R., Ashihara, T., Umetani, N., Igarashi, T., & Nakazawa, K. (2011). Sketch-based dynamic illustration of fluid systems. ACM Trans. on Graphics, 30(6), 134. Google ScholarDigital Library
- Zongker, D.E., & Salesin, D. (2003). On creating animated presentations. ACM SIGGRAPH, 298--308. Google ScholarDigital Library
Index Terms
- Kitty: sketching dynamic and interactive illustrations
Recommendations
Energy-Brushes: Interactive Tools for Illustrating Stylized Elemental Dynamics
UIST '16: Proceedings of the 29th Annual Symposium on User Interface Software and TechnologyDynamic effects such as waves, splashes, fire, smoke, and explosions are an integral part of stylized animations. However, such dynamics are challenging to produce, as manually sketching key-frames requires significant effort and artistic expertise ...
Reconstruction of Scene from Multiple Sketches
UIST '16 Adjunct: Adjunct Proceedings of the 29th Annual ACM Symposium on User Interface Software and TechnologyThis paper discusses the feasibility of extension of expressive style with multiple 3D sketches drawn by a sketching tool that enables its users to draw and paint on 3D structured surfaces. Users of our proposed system take a picture of target objects ...
Sketching user experiences tutorial: stories, strategies, surfaces
ITS '13: Proceedings of the 2013 ACM international conference on Interactive tabletops and surfacesPaper-pencil sketches are a valuable tool during different stages of experience design in human-computer interaction. This hands-on tutorial will demonstrate how to integrate sketching into researchers' and interaction designers' everyday practice -- ...
Comments