Here’s my tutorial on how to do this in Synfig. I’m open to any and all constructive criticism or other feedback. If you like it enough, I’d be honored to see it published on the wiki.

Suppose you wish to work in Synfig with numbers on a graph. It could be a graph that already exists and you simply trace over it or perhaps you wish to make your own graph simply because you don’t want to muck about with waypoints and would rather work directly with splines to produce a graph of, say, displacement versus time. Synfig appears to have no way of doing this directly, but with a little effort, you can produce animations with arbitrary functions underlying the process.

For simplicity, I’l work with this graph.

It has just three vertices, making this process especially easy. I’m not including x- and y-axes, but they could easily be incorporated.

Before we begin, let me try to illustrate exactly what we’re trying to accomplish. It will also motivate the later solution. I’ll draw a straight horizontal line directly beneath the existing graph, then make two identical circles and link the origin of one to each spline. Finally, I’ll export and connect their “Amount” parameters under “Origin” so that they move together. The result looks like this:

In the above image, the “Amount” for the two circle origins was set to zero, putting them both at the left end of their respective splines. No problem so far. Bad things happen, however, when we change the “Amount” parameter:

In the above graph, I’ve set “Amount” to 0.7. The top circle on our graph is lagging behind the circle that moves uniformly from left to right. This is a nuisance in the graph I’ve drawn but can be devastating in a graph with more vertical parts. We’d instead like these two circles to move together; when I pick a value on the x-axis, I should be able to read off the corresponding value on the y-axis (not some nearby value).

Optional step 0: Duplicate your graph. If you’d like an untainted copy of your graph, now’s your chance to make one. If you just want to use your graph to output values, this may not be necessary.

Step 1: Scale it down. Select one of the copies of your graph and the scale tool. Make sure “Lock Aspect Ratio” is unchecked because we only wish to scale it vertically. Select all handles and scale it down until it is nearly flat.

Step 2: Make a circle and link it to your flattened spline. (It doesn’t have to be a circle, it could be almost anything.) Select the circle tool, draw a circle, then select both the circle and flattened graph layers. Click the circle’s origin handle, then right-click the spline and select “Link to spline”.

Step 3: Export the “Amount” parameter. Select only the circle’s layer and open up the “Origin” parameter. Right-click “Amount” and click “Export value”. Give it a descriptive name like “Graph position x”. Because the “Amount” parameter is based on spline length and the graph has been flattened, the parameter now varies almost linearly with the horizontal position. For full disclosure, there will still be a minor discrepancy between the amount and the horizontal position on the graph and there will be a loss of precision, but since Synfig uses double-precision values, these issues will be almost inconsequential.

Step 4: Insert a text box. Like the circle we drew earlier, this could actually be anything with a real parameter associated with it (so… anything). I’ll work with a text box so we can view the output. Convert the “Text” parameter to “Real string”, then convert the “Real” parameter within to “Vector Y”. Export your circle’s origin parameter then connect it to the “Vector” input to “Vector Y”. Optionally, you can create a second text box corresponding to the horizontal position, although I suggest working with the “Amount” parameter instead of connecting text to the circle’s origin. Export the “Real” parameter as the y value.

At this point, we’re basically done. You now have control over the “Amount” parameter and in response, the y value you exported varies correspondingly. To illustrate that this works properly, I’ll create a circle that traces over our original graph.

Step 5: Make a new circle. Convert its “Origin” parameter to “Composite”. Convert both its “X-Axis” and “Y-Axis” parameters to “Add” and then connect the “Link” parameter under “X-Axis” to the “Amount” you exported earlier and connect the “Link” parameter under “Y-Axis” to the “y value” you exported earlier. At this point, the circle follows the motion of the other circle linked directly to the spline, but it follows a much smaller path. We’ll need to scale it up. Adjust the “Scalar” and “Addition” parameters for both your “X-Axis” and “Y-Axis” (I suggest working with “Scalar” first). This requires a lot of guessing and checking, but you should eventually get an acceptable result. Alternatively, you should be able to deduce what values are required based on the extrema and the affine transformation from one set of coordinates to another. I just haven’t bothered to do it.

Here’s a screenshot of the finished product:

Note that the circle on the flattened spline is almost directly above the circle following the original spline. There’s some discrepancy on the left end, but that’s because I accidentally scaled the spline horizontally a bit. It really does follow the curve quite nicely.

As a more impressive example, here’s what I’ve come up with for a real-world project, involving the index of refraction of water:

The middle circle follows the flattened graph down the middle (its layer is hidden). Note that the two circles are perfectly aligned vertically.

I’ve attached the file to this post so you can see how everything is linked up. One nifty feature about this file is that all of the vertices and tangents of the original graph are linked to the vertices and tangents of the flattened graph. This means you can alter the graph to your liking, provided it has no more than 32 vertices. (You can do more than 32 vertices, you’ll just have to link them up as I did.) I also computed the coefficients for the x- and y-coordinates of the dot that follows the original graph and these values should be within the precision of the canvas. I’ll be happy to share that procedure for anyone who’s interested.

And here’s a linkto the same tutorial entirely at Imgur.

Index of refraction of water.sifz (8.46 KB)