This extension provides a way to convert P5.js sketches into Lottie file animations, streamlining the workflow for developers and designers who wish to integrate P5.js animations into web and mobile applications using the lightweight and scalable Lottie format.
Please note that the user interface for the conversion process is facilitated by this extension. However, the underlying conversion functionality is powered by a separate package, which can be found at p5js-to-lottie.
Features
P5.js to Lottie Conversion: Convert your P5.js sketches into Lottie animations with a simple command.
Live Preview: Preview the converted Lottie animation within Visual Studio Code.
Easy Integration: Export Lottie JSON files ready to be used in your web or mobile applications.
Getting Started
Installation: Search for "P5.js to Lottie" in the Visual Studio Code Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS) and click Install.
Open a P5.js Sketch: Open any .js file that contains your P5.js sketch code.
Convert and Preview: Use the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS) and type "P5.js to Lottie: Preview p5.js Sketch", then press Enter. A preview of the Lottie animation will be displayed alongside your code.
Extension Settings
All settings can be configured directly on the extension UI:
levi218.p5js-to-lottie.autoRefresh: Auto refresh the preview when the sketch is saved. This setting is enabled by default.
Type: boolean
Default: true
levi218.p5js-to-lottie.settingsCollapse: Collapse the settings section in the preview pane. This setting is disabled by default.
Type: boolean
Default: false
levi218.p5js-to-lottie.lottieFileDuration: Set the duration of the Lottie file in seconds. Adjust this setting based on the length of your animation.
Type: number
Default: 5
levi218.p5js-to-lottie.defaultTab: Choose the tab to open the preview in. This can be useful if you prefer to have the preview in a specific position.
