Speed graph for fusion keyframes

Is there a way to access a keyframe speed graph view in the fusion spline editor like you can in AfterEffects?

I know you can get similar results if you know how the speed graph translates to the value graph but it's easier for me when I work in terms of speed.

Can you explain what this is for those of us who have never seen AE? I'm more than willing to try and help, but not by learning AE first to find out what you're talking about.

Let's say you have an item on screen and you want to keyframe its X position from point A to point B. This is something you can do in both fusion and AE with the default linear interpolation. In fusion you can open the spline editor and change the interpolation and make it ease in and out for example.

Fusion spline editor for x-position change

Fusion Position change.png (23.31 KiB) Viewed 904 times

This is something you can also do in AE but in AE you have the ability to switch to the speed graph view and basically control the velocity of the motion in between keyframes. My question is whether or not this is possible in Fusion.

AE graph editor for x-position

AE X position change.png (20.69 KiB) Viewed 904 times

AE graph editor for the velocity of the x-position change

AE X speed change.png (17.62 KiB) Viewed 904 times

I have attached images to try to explain what I'm talking about.

Can you explain what this is for those of us who have never seen AE? I'm more than willing to try and help, but not by learning AE first to find out what you're talking about.

There is no speed graph built-in to Fusion, although I know it's something that's been requested a few times. It's possible to construct your own, though. Here's a proof-of-concept:

Code: Select all

{
   Tools = ordered() {
      CustomTool1 = Custom {
         CtrlWZoom = false,
         CustomData = {
            Settings = {
               [1] = {
                  Tools = ordered() {
                     CustomTool1 = Custom {
                        Inputs = {
                           LUTIn3 = Input {
                              SourceOp = "CustomTool1LUTIn3",
                              Source = "Value"
                           },
                           LUTIn1 = Input {
                              SourceOp = "CustomTool1LUTIn1",
                              Source = "Value"
                           },
                           Image1 = Input {
                              SourceOp = "TimeSpeed1",
                              Source = "Output"
                           },
                           Image2 = Input {
                              SourceOp = "ChangeDepth1_1",
                              Source = "Output"
                           },
                           LUTIn4 = Input {
                              SourceOp = "CustomTool1LUTIn4",
                              Source = "Value"
                           },
                           LUTIn2 = Input {
                              SourceOp = "CustomTool1LUTIn2",
                              Source = "Value"
                           }
                        },
                        Name = "CustomTool1",
                        CtrlWZoom = false,
                        ViewInfo = OperatorInfo { Pos = { 550, 181.5 } },
                        CustomData = {
                        }
                     },
                     CustomTool1LUTIn1 = LUTBezier {
                        Name = "CustomTool1LUTIn1",
                        NameSet = true,
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        SplineColor = { Green = 0, Blue = 0, Red = 204 }
                     },
                     CustomTool1LUTIn2 = LUTBezier {
                        Name = "CustomTool1LUTIn2",
                        NameSet = true,
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        SplineColor = { Green = 204, Blue = 0, Red = 0 }
                     },
                     CustomTool1LUTIn3 = LUTBezier {
                        Name = "CustomTool1LUTIn3",
                        NameSet = true,
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        SplineColor = { Green = 0, Blue = 204, Red = 0 }
                     },
                     CustomTool1LUTIn4 = LUTBezier {
                        Name = "CustomTool1LUTIn4",
                        NameSet = true,
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        SplineColor = { Green = 204, Blue = 204, Red = 204 }
                     }
                  }
               },
               [2] = {
                  Tools = ordered() {
                     CustomTool1 = Custom {
                        Inputs = {
                           LUTIn3 = Input {
                              SourceOp = "CustomTool1LUTIn3",
                              Source = "Value"
                           },
                           LUTIn4 = Input {
                              SourceOp = "CustomTool1LUTIn4",
                              Source = "Value"
                           },
                           Image2 = Input {
                              SourceOp = "ChangeDepth1_1",
                              Source = "Output"
                           },
                           RedExpression = Input { Value = "c1-c2" },
                           GreenExpression = Input { Value = "c1-c2" },
                           LUTIn1 = Input {
                              SourceOp = "CustomTool1LUTIn1",
                              Source = "Value"
                           },
                           Image1 = Input {
                              SourceOp = "TimeSpeed1",
                              Source = "Output"
                           },
                           BlueExpression = Input { Value = "c1-c2" },
                           LUTIn2 = Input {
                              SourceOp = "CustomTool1LUTIn2",
                              Source = "Value"
                           }
                        },
                        CtrlWZoom = false,
                        ViewInfo = OperatorInfo { Pos = { 550, 181.5 } },
                        CustomData = {
                        }
                     },
                     CustomTool1LUTIn1 = LUTBezier {
                        SplineColor = { Green = 0, Blue = 0, Red = 204 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn2 = LUTBezier {
                        SplineColor = { Green = 204, Blue = 0, Red = 0 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn3 = LUTBezier {
                        SplineColor = { Green = 0, Blue = 204, Red = 0 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn4 = LUTBezier {
                        SplineColor = { Green = 204, Blue = 204, Red = 204 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     }
                  }
               },
               [3] = {
                  Tools = ordered() {
                     CustomTool1 = Custom {
                        Inputs = {
                           LUTIn3 = Input {
                              SourceOp = "CustomTool1LUTIn3",
                              Source = "Value"
                           },
                           LUTIn4 = Input {
                              SourceOp = "CustomTool1LUTIn4",
                              Source = "Value"
                           },
                           Image2 = Input {
                              SourceOp = "ChangeDepth1_1",
                              Source = "Output"
                           },
                           RedExpression = Input { Value = "c1+c2" },
                           GreenExpression = Input { Value = "c1+c2" },
                           LUTIn1 = Input {
                              SourceOp = "CustomTool1LUTIn1",
                              Source = "Value"
                           },
                           Image1 = Input {
                              SourceOp = "TimeSpeed1",
                              Source = "Output"
                           },
                           BlueExpression = Input { Value = "c1+c2" },
                           LUTIn2 = Input {
                              SourceOp = "CustomTool1LUTIn2",
                              Source = "Value"
                           }
                        },
                        CtrlWZoom = false,
                        ViewInfo = OperatorInfo { Pos = { 550, 181.5 } },
                        CustomData = {
                        }
                     },
                     CustomTool1LUTIn1 = LUTBezier {
                        SplineColor = { Green = 0, Blue = 0, Red = 204 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn2 = LUTBezier {
                        SplineColor = { Green = 204, Blue = 0, Red = 0 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn3 = LUTBezier {
                        SplineColor = { Green = 0, Blue = 204, Red = 0 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     },
                     CustomTool1LUTIn4 = LUTBezier {
                        SplineColor = { Green = 204, Blue = 204, Red = 204 },
                        KeyColorSplines = {
                           [0] = {
                              [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
                              [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
                           }
                        },
                        NameSet = true
                     }
                  }
               },
            }
         },
         Inputs = {
            NumberIn1 = Input {
               Value = 0.593803997404439,
               Expression = "Transform1.Center.X",
            },
            NumberIn2 = Input { Expression = "self:GetValue(\"NumberIn1\", time+0.5)-self:GetValue(\"NumberIn1\", time-0.5)", },
            LUTIn1 = Input {
               SourceOp = "CustomTool1LUTIn1",
               Source = "Value",
            },
            LUTIn2 = Input {
               SourceOp = "CustomTool1LUTIn2",
               Source = "Value",
            },
            LUTIn3 = Input {
               SourceOp = "CustomTool1LUTIn3",
               Source = "Value",
            },
            LUTIn4 = Input {
               SourceOp = "CustomTool1LUTIn4",
               Source = "Value",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 495, 82.5 } },
      },
      CustomTool1LUTIn1 = LUTBezier {
         KeyColorSplines = {
            [0] = {
               [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
               [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
            }
         },
         SplineColor = { Red = 204, Green = 0, Blue = 0 },
         NameSet = true,
      },
      CustomTool1LUTIn2 = LUTBezier {
         KeyColorSplines = {
            [0] = {
               [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
               [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
            }
         },
         SplineColor = { Red = 0, Green = 204, Blue = 0 },
         NameSet = true,
      },
      CustomTool1LUTIn3 = LUTBezier {
         KeyColorSplines = {
            [0] = {
               [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
               [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
            }
         },
         SplineColor = { Red = 0, Green = 0, Blue = 204 },
         NameSet = true,
      },
      CustomTool1LUTIn4 = LUTBezier {
         KeyColorSplines = {
            [0] = {
               [0] = { 0, RH = { 0.333333333333333, 0.333333333333333 }, Flags = { Linear = true } },
               [1] = { 1, LH = { 0.666666666666667, 0.666666666666667 }, Flags = { Linear = true } }
            }
         },
         SplineColor = { Red = 204, Green = 204, Blue = 204 },
         NameSet = true,
      },
      Transform1 = Transform {
         Inputs = {
            Center = Input {
               SourceOp = "XYPath1",
               Source = "Value",
            },
            Size = Input {
               SourceOp = "Transform1Size",
               Source = "Value",
            },
            Input = Input {
               SourceOp = "Background1",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 495, 115.5 } },
      },
      XYPath1 = XYPath {
         ShowKeyPoints = false,
         DrawMode = "ModifyOnly",
         Inputs = {
            X = Input {
               SourceOp = "XYPath1X",
               Source = "Value",
            },
            Y = Input {
               SourceOp = "XYPath1Y",
               Source = "Value",
            },
         },
      },
      XYPath1X = BezierSpline {
         SplineColor = { Red = 255, Green = 0, Blue = 0 },
         NameSet = true,
         KeyFrames = {
            [1000] = { 0.5, RH = { 1017.33333333333, 0.5 }, Flags = { Linear = true } },
            [1052] = { 0.74331450094162, LH = { 1034.66666666667, 0.74331450094162 } }
         }
      },
      XYPath1Y = BezierSpline {
         SplineColor = { Red = 0, Green = 255, Blue = 0 },
         NameSet = true,
         KeyFrames = {
            [1000] = { 0.5, RH = { 1017.33333333333, 0.5 }, Flags = { Linear = true } },
            [1052] = { 0.229437229437229, LH = { 1034.66666666667, 0.229437229437229 } }
         }
      },
      Transform1Size = BezierSpline {
         SplineColor = { Red = 225, Green = 0, Blue = 225 },
         NameSet = true,
         KeyFrames = {
            [1007] = { 1, RH = { 1009.66666666667, 1.19533333333333 }, Flags = { Linear = true } },
            [1015] = { 1.586, LH = { 1012.33333333333, 1.39066666666667 }, Flags = { Linear = true } }
         }
      },
      Background1 = Background {
         Inputs = {
            GlobalIn = Input { Value = 1000, },
            GlobalOut = Input { Value = 1139, },
            Width = Input { Value = 4448, },
            Height = Input { Value = 3096, },
            PixelAspect = Input { Value = { 2, 1 }, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
         },
         ViewInfo = OperatorInfo { Pos = { 330, 115.5 } },
      }
   }
}


If you look at the CustomTool's Number In 2 in the Spline view, you'll see that it's showing you the speed graph for Transform1's Center.X parameter.

For some reason, I couldn't seem to GetValue() from Center.X directly; I had to put it into Number In 1 first, then read it from there. The expression on Number In 2 is a simple way to get the first derivative of an animated input: Sample the value at half a frame before and after the frame you're on, and subtract one from the other, and you'll get the slope at that frame.

I'm sure it would be possible to make an easy-to-use script to quickly choose parameters for the Speed Graph. I don't have the time right now to make it myself, but perhaps some other enterprising TD could devote a couple of hours to it.

I am imagining a toolscript that scans across animated parameters on the tool and presents a list to the user. You'd pick the input you want a graph for from the list, and the script would create a CustomTool like the one above with the expressions set up. You could even rename the speed graph's slider with the script so it would show up in the Spline view as "speed - Center.X" or something of the sort.