Path Morphing

Python Code

from dataclasses import replace

from vood.components import TextRenderer, TextState
from vood.components.renderer.path import PathRenderer
from vood.components.states.path import PathState
from vood.converter.converter_type import ConverterType
from vood import layouts
from vood.tat.logger import configure_logging
from vood.velements import VElement
from vood.vscene import VScene
from vood.vscene.vscene_exporter import VSceneExporter

configure_logging(level="INFO")

START_COLOR = "#FDBE02"
END_COLOR = "#AA0000"

START_PATH = "M -100,0 L 100,0"
END_PATH = "M -100,0 C -50,-100 50,100 100,0"

def main():

    # Create the scene
    scene = VScene(width=256, height=256, background="#000017")

    start_state = PathState(
        path_data=START_PATH,
        color=None,
        stroke_color=START_COLOR,
        stroke_width=4,
    )

    end_state = replace(
        start_state,
        stroke_color=END_COLOR,
        path_data=END_PATH,
    )

    # Create a text renderer for all numbers
    renderer = PathRenderer()

    element = VElement(
        renderer=renderer,
        states=[start_state, end_state],
    )

    # Add all elements to the scene
    scene.add_element(element)

    # Create the exporter
    exporter = VSceneExporter(
        scene=scene,
        converter=ConverterType.PLAYWRIGHT,
        output_dir="output/",
    )

    # Export to mp4
    exporter.to_mp4(
        filename="path_morphing",
        total_frames=60,
        framerate=30,
        width_px=512,
    )


if __name__ == "__main__":
    main()

Remarks

• Vood fully normalizes paths by converting all standard SVG commands (L, H, V, Q, T, S, A) into a sequence of absolute Cubic Bézier curves. This standardization enable morphing for a wider range of paths by making all segments the most generic curve type.

• Current Limitation: Successful interpolation still requires the two normalized paths to match exactly in command count and order.

• We are planing to integrate flubber.js as node package to enable arbitrary path morphing, which will allow morphing between paths with unequal segment counts and different structures. See the flubber.js github repository for details: https://github.com/veltman/flubber