Designing Video-Based Interactive Instructions

One, Two, ...
b ^Refinement

θ = -45°, δ ≠ 0 θ = 0°, δ ≠ 0


d Stroboscopic Effect
^δright-hand^{≠ 0, δ}left-hand, knee^{= 0}
θ = 0°, δ ≠ 0
θ = 45°, δ ≠ 0
θ = 0°, δ ≠ 0

θ = 0°, ρ = 30%, n = 3
θ = 0°, δ ≠ 0, ρ = 100%, n = 2
θ = 0°, ρ = 100%, n = 3
θ = 0°, δ ≠ 0, ρ = 100%, n = 2

Figure 8.2: DemoDraw’s authoring interfaces and results: (a) multi-modal Demonstration Interface to capture motion, verify results, and re-perform portions if needed; (b) conventional Refinement Interface for refinement and exploring other visualization styles; (c-d) examples of illustration styles (annotated with camera viewing angle θ, motion arrow offsets δ, stroboscopic overlap ratio ρ, and numbers of intermediate frames n).

adjusted, camera angles moved, and alternate visualization styles explored in a mouse-driven GUI Refinement Interface (see Figure 8.5a). A three-part evaluation with 14 participants shows that DemoDraw’s illustrations are effective and amateur authors can use the Demonstration Interface and Refinement Interface to proficiently create motion illustrations with various levels of complexity.

DemoDraw integrates physical demonstration and authoring into one interactive workflow. Our work is the first to generate human movement illustrations by demonstration, refinement, and editing as an iterative process. Our work includes the following specific contributions:

• 
  An approach to generate human movement illustrations by direct physical demonstration and interactive rendering.
  
• 
  Multi-modal interaction techniques to record, review, retake, and refine demonstration se- quences.
  
• 
  Methods to automatically analyze 3D motion data with speech to generate step-by-step annotated illustrations.
  

2.