pingpong

Back to All Results

Motion Vectorization

Input video: pingpong

Output SVG motion program code

Output SVG motion program

Motion Program Transformation

Retiming

Slow in/out easing

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for the P letters based 
    // on X positions. positionX and positionY refer 
    // to X and Y position and both range from 0 to 1.
    // objSelector returns objects whose positionX 
    // matches any number listed in the array [0.13]
    selObjs = objSelector(P, propQuery, "positionX", 
                              [0.13], [0, P.endFrm])

    // OBJECT TRANSFORMER: Apply a quadratic ease-in 
    // function to the moving Ps. The mathematical 
    // equation of this function can be found 
    // at https://easings.net/.
    function quadEaseIn(t):
      return t^2
    slowInOutObjTransformer(selObjs, quadEaseIn, 
                                      [0, P.endFrm])

Motion program transformer code. Here we apply a quadratic ease-in function to the moving "P"s with slowInOutObjTransformer. Notice how the "P"s gradually speed up at the beginning.

Output SVG motion program

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for the P letters based 
    // on X positions. positionX and positionY refer 
    // to X and Y position and both range from 0 to 1.
    // objSelector returns objects whose positionX 
    // matches any number listed in the array [0.13]
    selObjs = objSelector(P, propQuery, "positionX", 
                              [0.13], [0, P.endFrm])

    // OBJECT TRANSFORMER: Apply a cubic ease-out 
    // function to the moving Ps. The mathematical 
    // equation of this function can be found 
    // at https://easings.net/.
    function cubicEaseOut(t):
      return 1-(1-t)^3
    slowInOutObjTransformer(selObjs, cubicEaseOut, 
                                      [0, P.endFrm])

Motion program transformer code. Here we apply a cubic ease-out function to the moving "P"s with slowInOutObjTransformer. Notice how the "P"s gradually slow down at the end.

Output SVG motion program

Input SVG motion program

MPTransformer(P, args):
    // OBJECT SELECTOR: Query for the P letters based 
    // on X positions. positionX and positionY refer 
    // to X and Y position and both range from 0 to 1.
    // objSelector returns objects whose positionX 
    // matches any number listed in the array [0.13]
    selObjs = objSelector(P, propQuery, "positionX", 
                              [0.13], [0, P.endFrm])

    // OBJECT TRANSFORMER: Apply a quintic ease-in-out 
    // function to the moving Ps. The mathematical 
    // equation of this function can be found 
    // at https://easings.net/.
    function quinticEaseInOut(t):
      easedT = 0
      if t < 0.5:
        easedT = (2t)^5 / 2
      else:
        easedT = 1-(-2t+2)^5 / 2
      return easedT
    slowInOutObjTransformer(selObjs, quinticEaseInOut, 
                                      [0, P.endFrm])

Motion program transformer code. Here we apply a quintic ease-in-out function to the moving "P"s with slowInOutObjTransformer. Notice how the "P"s gradually speed up at the beginning and slow down at the end.

Output SVG motion program