Back to All Results

giftbox1

Back to All Results

Motion Vectorization

Input video: giftbox1

Output SVG motion program code

Output SVG motion program

Motion Program Transformation

Retiming

Animating on 2s, 3s, Ns

Input SVG motion program

MPTransformer(P, args):
  // Change background appearance.
  setAppearance(“bg”, "gradientSky.png")

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

  // OBJECT TRANSFORMER: Change the appearance to 
  // a distorted clock.
  changeAppearanceObjTransformer(selObjs, "clock.png", [0, P.endFrm])

  // OBJECT TRANSFORMER: Animate the original 
  // video on 3s.
  animOnNsObjTransformer(selObjs, 3, [0, P.endFrm]):

Motion program transformer code. Here we change the appearances of the background and the red ball to look like the painting "The Persistence of Memory", using changeAppearanceObjTransformer. Then we transformed the motion of the clock to animating on 3s with animOnNsObjTransformer.

Output SVG motion program

Spatial Motion Adjustment

Motion textures

Input SVG motion program

MPTransformer(P, args):
  // Change background color.
  setAppearance(“bg”, "greenBg.png")

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

  // OBJECT TRANSFORMER: Change appearances to bubbles
  bubbleImgs = ["bubble.png", ..., "bubble.png"]
  changeAppearanceObjTransformer(selObjs, bubbleImgs, 
                                       [0, P.endFrm])

  // Create lots of bubbles.
  newObjs = {}
  for each obj in selObjs:
      repeat N times:
        // copy() duplicates an object in the 
        // SVG motion program.
        newObjs.insert(copy(obj))

  // OBJECT SELECTOR: Find all bubbles.
  selObjs = objSelector(P, propQuery, "appearance", 
                        "bubble.png", [0, P.endFrm])

  // Modify motions of new bubbles.
  // OBJECT TRANSFORMER: Make bubbles wobble.
  function wobbleFn(t, [x, amp, freq]):
      return x[t] + amp * sin(freq * t)
  motionTexObjTransformer(selObjs, wobbleFn, 
                  args.wobbleFnArgs, [0, P.endFrm])

  // OBJECT TRANSFORMER: randomly scale bubbles 
  // to different sizes.
  for each obj in newObjs:
      // randomly scale objs to different sizes
      function scaleFn(t, [s, scaleFactor]):
          return s[t] * randFloat()
      adjLocalMotion(obj, scaleFn, [obj.startFrm, 
                                    obj.endFrm])

      // Apply motion adjustment to vary bubble paths.
      function translateXFn(t, [x]):
          return x[t] + t^4 + randFloat()
      adjGlobalMotion(obj, translateXFn,[obj.startFrm, obj.endFrm])

      function translateYFn(t, [y]):
          return y[t] + randFloat()
      adjGlobalMotion(obj, translateYFn,[obj.startFrm, obj.endFrm])

  // OBJECT TRANSFORMER: Retime  the entire timeline 
  // randomly so the bubbles move at different speeds.
  linearRetimeObjTransformer(selObjs, randFloat(0.5, 1), [frmA, frmB])

  // OBJECT TRANSFORMER: Release bubbles at different times. 
  // freezeFrame(obj, frm, dur) holds a frame for a duration.
  for each obj in newObjs:
      duration = randomInt(24, 96)
      freezeFrame(obj, 0, duration)

Motion program transformer code. Here we first use changeAppearanceObjTransformer to change the appearance of the red ball to a bubble and duplicate it many times. Wobbling motions are then added to the bubbles by using motionTexObjTransformer. We then uniformly and randomly scale the bubbles to different sizes. The path of the bubbles are then bent and offset randomly so that they start from different positions and move to different directions. In the time domain, we stretch and shrink the timeline of each bubble randomly with linearRetimeObjTransformer so each moves at a different speed. Finally, each timeline is padded with a random value so the bubbles start to move at different times.

Output SVG motion program