Drawing Transforms: A Unifying Interaction Primitive to Procedurally Manipulate Graphics across Style, Space, and Time

Interactive Data Visualization3D Modeling & AnimationUI/UX DesignersProduct DesignersVisual Artists & Designers

Document Title

Drawing Transforms: A Unifying Interaction Primitive to Procedurally Manipulate Graphics across Style, Space, and Time

Document Information

  • Subject Area: Human-Computer Interaction (HCI), Computational Design, Procedural Art
  • Keywords: Creative Support Tools, Direct Manipulation, Procedural Art, Animation, Graphical User Interface, Vector Drawing, Data Visualization

Research Background and Problem

  • Problems and Challenges:

    • Current programming tools (e.g., programming languages) are highly expressive computationally but often do not support direct manipulation for artists in their creative processes.
    • Direct manipulation tools offer limited programmatic expressiveness and are constrained by predefined behaviors and inputs, lacking generality.
    • Procedural direct manipulation systems across different domains lack a unified approach, making them difficult to integrate or extend, such as combining procedural layouts and animations.
    • There is a need for a flexible method that allows users to define procedural relationships themselves while supporting broad cross-domain applications.
  • Research Significance: Enhancing the efficiency and flexibility of design workflows and visual creation, enabling artists to quickly experiment, edit, and adjust in image design, animation production, and motion graphics generation.

  • Research Motivation:

    • Support intuitive creation and control of projects using geometric inputs, as an alternative to complex symbolic programming methods.
    • Transform drawing into a method for defining programmatic behaviors, promoting procedural expression in visual creation.

Solution

  • Methods and Techniques:

    • Introduced "Drawing Transforms (DTs)," a novel interaction primitive for defining procedural transformations through direct manipulation of vector inputs.
    • DTs enable users to control the style, spatial, and temporal properties of target graphics by drawing vector shapes.
    • Inspired by existing research on using geometric inputs to specify programmatic behaviors, while extending flexibility for cross-domain applications.
  • Innovations:

    • Supports interpreting arbitrary geometric inputs as procedural transformations.
    • Allows low-level programmatic expressions (e.g., custom constraints, distributions).
    • Broad cross-domain applicability: covering static graphic outputs, animation generation, particle systems, and more.
    • Achieves flexible input-output geometric associations through "parameterization," "attribute mapping," and "behavior patterns."
  • Implementation Steps and Key Techniques:

    1. Geometric Parameterization: Segmenting input geometry and computing numerical values to drive transformations of target graphics.
    2. Attribute Mapping: Controlling target graphic properties such as position, color, shape, and time.
    3. Transformation Modes: Includes absolute and relative modes, defining whether attributes are set directly or transformed relative to initial values.
    4. Behavior Operations: Defining how multiple elements respond to input geometry, such as interpolation, alternation, or random behaviors.
    5. Triggers and Events: Defining trigger conditions and response functions (e.g., animation events).

Research Outcomes

  • Specific Results:

    • Implemented DTs in the experimental animation system AMES.
    • Reproduced and extended functionalities of existing animation and graphic generation systems, including:
      1. Generating static and dynamic graphics using DTs, such as a twinkling star effect.
      2. Reproducing complex animation behaviors generated by symbolic programming tools (e.g., N-Gon animations) using DTs.
      3. Fully defining and controlling particle system behaviors (e.g., smoke and fireworks effects) with DTs.
  • Advantages Compared to Existing Solutions:

    • Unified functionalities of multiple procedural operation tools, supporting cross-domain visual design and animation.
    • Flexibility of various hand-drawn inputs, avoiding the steep learning curve of symbolic programming.
    • Enables artists to explore more creative possibilities through low-level control, such as custom particle systems and dynamic animations.
  • Experimental and Evaluation Results:

    • Demonstrated the expressive capabilities of DTs through a series of experimental demonstrations, achieving visual effects comparable to leading tools.
    • Expert artists interviewed evaluated DTs as effectively enhancing gesture and procedural support in existing tools (e.g., Photoshop and AfterEffects).
  • Limitations and Future Directions:

    • The current implementation does not support bidirectional editing (i.e., directly editing output to influence input), which could be explored in the future.
    • Further integration of automation with manual control is needed to reduce artists' workload.
    • Potential expansion to other domains, such as data visualization, interaction design, and parametric CAD tools.

Conclusion

Drawing Transforms (DTs) provide a universal procedural authoring tool, enabling artists to directly generate and manipulate procedural relationships using drawings and vector illustrations, thereby allowing flexible creation and control of works across style, space, and time dimensions. DTs have broad application potential in procedural art, animation, and interaction design, and could be extended to support design tasks in other domains.

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/papers/chi/95919/2023

AdRecommended

Learn AI Coding at CodeNow

open_in_newOpen DOI Link
DOI: https://doi.org/10.1145/3544548.3580642
At a Glance

Paper Snapshot

fact_check
dataset
Source
CHI
calendar_month
Year
2023
emoji_events
Award
No award tagged
group
Authors
3 authors
sell
Subtopics
Interactive Data Visualization, 3D Modeling & Animation
work
Professions
UI/UX Designers, Product Designers, Visual Artists & Designers
article
Content Status
Full text indexed
hub
Related Papers
1 related papers