Input video: pingpong
Output SVG motion program code
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 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