[INCOMPLETE] Animation System

[skoriop]

Hi, I'm Karthik Prakash. Over the next few months, I will be working on building a timeline-based animation system for Graphite by extending the current node system and building a timeline panel for the same.

Synopsis

While Graphite is a powerful graphics editor, it currently only supports static graphics. However, thanks to the power of the underlying node system, we can extend it to build an animation system, which would be a major step forward in enhancing Graphite’s features.

This project will expand the existing node system by adding time-based input nodes, which will be used when evaluating the node graph every frame, and add a timeline panel that will allow users to create, modify and play animations.

Benefits

Adding an animation system to Graphite would give digital artists the ability to leverage the powerful node system for animating their artwork. It would also begin to realize its vision as a versatile content creation suite supporting motion graphics.

Deliverables

• Time-varying versions of input nodes (‘animation channels’)
• Time-based render evaluation of the node graph
• A new timeline panel with keyframe indicators and other common timeline features
• An animation curve panel that will allow fine-grained editing of time-varying parameters

[skoriop]

Week 1

I spent most of this week working on making an Animatable Number node for an f64 animation channel and integrating the animation-related parameters into the existing codebase (mainly the parts involving the node graph executor).

While the initial plan was to store these parameters in the Footprint (which is then passed to the node graph during execution), this would have needed a major refactoring of the existing codebase to make it work with the type system. Instead, these parameters will be stored in the RenderConfig struct, which is a part of the EditorApi that is exposed to the animation channels.

The main changes so far are:

• Adding the Animatable Number node along with a barebones UI for testing
• Adding an AnimationMessageHandler that will handle messages related to animation playback
• Modifying the parameters passed into the node graph evaluation code to render based on the current animation time

Next Steps

• Work on fixing some bugs related to synchronizing the animation time between the playback system and the animation channels
• Finish the playback system by expanding the current frame rendering code to allow continuous animation

[skoriop]

Week 2

I spent most of this week implementing continuous animation playback by passing the AnimationConfig to the current WASM callback for requestAnimationFrame and making it trigger AnimationConfig::NextFrame messages with the correct delay. With that, we can now play animations in Graphite!

Here's a small demo (which is being controlled using keyboard shortcuts):

2024-06-06.13-27-09.mp4

I also fixed a few bugs in the frame rendering and added support for easing (using Bezier curves) in the backend.

Next Steps

• Work on getting my current PR (Add animation channels #1766) merged
• Start work on the animation timeline panel