Back to All Results

avokiddo

Back to All Results

Motion Vectorization

Input video: avokiddo

Output SVG motion program code

Output SVG motion program

SVG motion program code (uncorrected tracking)

SVG motion program (uncorrected tracking)

Motion Program Transformation

Retiming

Linear time stretch/shrink

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for all shapes with the "all" propType.
    // No matchCriteria is needed, hence an empty array [].
    selObjs = objSelector(P, propQuery, "all", [], [0, P.endFrm])

    // OBJECT TRANSFORMER: Linearly stretch out the video 
    // by a factor of 2.
    linearRetimeObjTransformer(selObjs, 2, [0, P.endFrm])

Motion program transformer code. Here we slow down the input SVG by a factor of 2 with linearRetimeObjTransformer. Notice that the input SVG contains motions animated on 3s, and thus slowing it down makes those held frames more obvious.

Output SVG motion program

Animating on 2s, 3s, Ns

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for all shapes with the "all" propType.
    // No matchCriteria is needed, hence an empty array [].
    selObjs, selObjsInfo = objSelector(P, propQuery, "all", 
                                       [], [0, P.endFrm])

    // OBJECT TRANSFORMER: First, remove held frames.
    removeHeldFramesObjTransformer(selObjs, selObjsInfo, [0, P.endFrm])

    // OBJECT SELECTOR: Query for the three decorative objects (yellow
    // triangle, green cross, and pink square) by looking for shapes
    // that are not blue and are bigger than 80 pixels on either side.
    decorObjs = objSelector(P, propQuery, ["color", "size"], 
                               [[!"blue"], [80, 80]], [0, P.endFrm])

    // Select all shapes other than the three decorative objects.
    letterObjs = {}
    for obj in selObjs:
      if obj not in decorObjs:
        letterObjs.insert(obj)

    // OBJECT TRANSFORMER: Animating on 6s for decorative objects,
    // and animating on 3s for other shapes.
    animOnNsObjTransformer(decorObjs, 6, [0, P.endFrm])
    animOnNsObjTransformer(letterObjs, 3, [0, P.endFrm])

Motion program transformer code. Here we first remove held frames with removeHeldFramesObjTransformer, as shown in the example below. We then animate the "avokiddo" letters on 3s and the three decorative shapes (yellow triangle, green cross, and pink square) on 6s by using animOnNsObjTransformer.

Output SVG motion program

Removing held frames

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for all shapes with the "all" propType.
    // No matchCriteria is needed, hence an empty array [].
    selObjs, selObjsInfo = objSelector(P, propQuery, "all", 
                                       [], [0, P.endFrm])

    // OBJECT TRANSFORMER: Remove held frames.
    removeHeldFramesObjTransformer(selObjs, selObjsInfo, [0, P.endFrm])

Motion program transformer code. Here we remove the held frames in the input SVG to smooth out the animation with removeHeldFramesObjTransformer.

Output SVG motion program