face

Back to All Results

Motion Vectorization

Input video: face

Output SVG motion program code

Output SVG motion program

Motion Program Transformation

Spatial Motion Adjustment

Motion textures

Input SVG motion program

MPTransformer(P, args):
  // Set background color.
  setAppearance("bg", args.background)

  // OBJECT SELECTOR: Query for the red semicircle.
  selObjs = objSelector(P, propQuery, "color", "green", [0, P.endFrm])

  // OBJECT TRANSFORMER: Change the appearance to the year.
  changeAppearanceObjTransformer(selObjs, args.year, [0, P.endFrm])
  
  // Repeat obj selection and obj transformation for banner and animal.
  selObjs = objSelector(P, propQuery, "color", "yellow", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.banner, [0, P.endFrm])
  selObjs = objSelector(P, propQuery, "color", "white", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.zodiac, [0, P.endFrm])

  // OBJECT SELECTOR: Query for the gray curve.
  selObjs = objSelector(P, propQuery, "color", "gray", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.characters, 
                                          [0, P.endFrm])

  // OBJECT TRANSFORMER: Apply an oscillating scale.
  function pulse(t, [sx, sy]):
    return [sx + 0.5 * sin(t / 10), sy + 0.5 * sin(t / 10)] 
  motionTexObjTransformer(selObjs, pulse, args.pulseArgs, [0,P.endFrm]) 

  // OBJECT SELECTOR: Query for the blue circle.
  selObjs = objSelector(P, propQuery, "color", "blue", [0, P.endFrm])
  // OBJECT TRANSFORMER: Remove the object.
  removeObj(selObjs, [0, P.endFrm])

Motion program transformer code. Here we demonstrate that how an input SVG can be programmatically personalized to the Chinese zodiac. In this particular example, we transformed the input to Year of the Rabbit theme with changeAppearanceObjTransformer. We also added motion textures with motionTexObjTransformer on the Chinese characters that means "Happy New Year".

Output SVG motion program

Input SVG motion program

MPTransformer(P, args):
  // Set background color.
  setAppearance("bg", args.background)

  // OBJECT SELECTOR: Query for the red semicircle.
  selObjs = objSelector(P, propQuery, "color", "blue", [0, P.endFrm])

  // OBJECT TRANSFORMER: Change the appearance to the year.
  changeAppearanceObjTransformer(selObjs, args.year, [0, P.endFrm])
  
  // Repeat obj selection and obj transformation for banner and animal.
  selObjs = objSelector(P, propQuery, "color", "yellow", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.banner, [0, P.endFrm])
  selObjs = objSelector(P, propQuery, "color", "white", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.zodiac, [0, P.endFrm])

  // OBJECT SELECTOR: Query for the gray curve.
  selObjs = objSelector(P, propQuery, "color", "gray", [0, P.endFrm])
  changeAppearanceObjTransformer(selObjs, args.characters, 
                                          [0, P.endFrm])

  // OBJECT TRANSFORMER: Apply an oscillating scale.
  function pulse(t, [sx, sy]):
    return [sx + 0.5 * sin(t / 10), sy + 0.5 * sin(t / 10)] 
  motionTexObjTransformer(selObjs, pulse, args.pulseArgs, [0,P.endFrm]) 

  // OBJECT SELECTOR: Query for the blue circle.
  selObjs = objSelector(P, propQuery, "color", "blue", [0, P.endFrm])
  // OBJECT TRANSFORMER: Remove the object.
  removeObj(selObjs, [0, P.endFrm])

Motion program transformer code. In this example, we reuse the program transformation above to transform the input to Year of the Dragon theme. New background colors and appearances can be specified within the program args.

Output SVG motion program

Test row

Output SVG motion program

Output SVG motion program

Output SVG motion program

Test row

Output SVG motion program

Output SVG motion program

Output SVG motion program

Test row

Output SVG motion program

Output SVG motion program

Output SVG motion program

Test row

Output SVG motion program

Output SVG motion program

Output SVG motion program