Playground Help

The drawvg playground lets you experiment with the interpreter of the drawvg filter for FFmpeg. You can run your scripts directly in the browser.

The playground does not send any data to any remote servers. Scripts can be stored in the browser, and can be shared via a URL that embeds the (gzipped) code.

The scripts are evaluated by a stripped version of the plugin, compiled into a WebAssembly module. However, most of the functionality from FFmpeg (like decoders, other filters, etc.) is not available.

The interface is composed of 3 panels:

• Editor
• Player
• Monitors

The panels can be resized by dragging the handlers between them.

Editor

The playground provides some basic features to simplify the creation of drawvg scripts. It is not intended to replicate a full-featured IDE, so the features are not as complete as they are in other environments.

Toolbar

The toolbar above the code gives access to many of the features of the playground:

The label in the middle only appears when a name is given in the Files dialog, or when an example is loaded.

Features

Changes on Selection

Some actions can be performed on selected text:

Autocompletion

Commands, colors, and the constant values for setlinecap and setlinejoin, can be autocompleted

For commands, the suggestions also show the expected arguments:

For colors, it shows a preview next to each name:

You can press Up and Down to select a suggestion from the list, and then either Return or Tab to insert it.

Formatting Code

Click on , or press CtrlI, to reformat the code in the editor.

The formatter tries to preserve the same structure of the original code (like commas and new lines).

repeat 10 {
s
20 50,
50 0
}

repeat 10 {
    s
        20 50,
        50 0
}

Errors

Error messages from the interpreter are written to the Console.

If the script has a syntax error, the invalid token is highlighted as red, and the hint from the interpreter is shown in a pop-up next to the invalid token. Only the first error is shown, since the interpreter stops parsing the script after it.

Documentation

When the text cursor is over a command, you can press F1 to open a new browser tab with its help.

The signature for a command is shown in a pop-up when the mouse cursor is over the command name, or over one of its arguments.

rect 0 0 w h
fill

Hotkeys

There are some global shortcuts that can be used anywhere:

Saved Files

Click on , or press CtrlS, to manage scripts stored in the playground.

Each file has a name associated to it. In the capture above, colors are used as example names.

When there are no saved files, the dialog asks for a name to the current script.

Click on to create a new empty file.

Click on to download all saved files as a ZIP file if you want to keep a copy in your own devices.

You can use the keyboard to select a file: Up and Down to change the current selection, and Return to open it.

The data is stored in the localStorage of your browser. If you clear your browser data, or if you are using private/incognito mode, the files will be lost when the browser is restarted.

Examples

Click on to open a gallery of examples.

To load one of the examples, you can double-click on it, or select it and then either click on the Open button, or press Return. The example is then loaded as a new file.

Some of these examples are more complex than what is expected in the common usage of drawvg. They are intended to show how to accomplish different drawings.

Examples can be loaded using the keyboard: select with the arrow keys (Up, Down, Left, Right), and then open it with Return.

Sharing

Click on to generate a URL that contains the source of the current script. You can send this URL to someone else, or store it as a bookmark, in order to load the same script.

Extracting the Code

The gzip parameter of the URL is a Base64-encoded string of a gzip file containing the source code. You can get the source code from that parameter with a shell script:

echo "$URL" \
    | perl -pe 's/.*gzip=//; s/%(..)/chr(hex($1))/ge' \
    | base64 --decode \
    | gzip --decompress --stdout

Player

The output of a drawvg script is a raster image, which is rendered in the panel next to the editor. The browser must support the Web Workers and WebGL APIs.

Actions

The toolbar above the player gives access to these actions:

The toolbar also includes an element to control the size, and another element to change the animation speed.

Animations

By default, the player displays a still image, but it can also animate the script, either forwards or backwards. The animation is rendered by evaluating the script with different values for the n (frame number) and t (timestamp) variables in each frame.

The playback can be managed by the following actions:

Animation Speed

The element in the middle of the toolbar allows you to speed up or slow down the animation. The initial value is 1x, which means the animation is running at normal speed.

When speed is 1x, the variable n always takes integer values (0, 1, 2, ...). But when it is different from 1x, the values are interpolated. For example, is speed is 0.5x, n will be 0, 0.5, 1, 1.5, etc. This behaviour is not present when drawvg is running within FFmpeg.

Size

The canvas is the surface where the output of the drawvg script is shown. Its size can be controlled with the following options:

The size is displayed on the left of the toolbar above the canvas.

Video Export

Click on to animate the current script and export it into a WebM file.

There are a few parameters to configure the render, but in most cases you may only need the first two parameters (the duration and the frame size).

Depending on the platform and the parameters, this process may need a lot of resources. If you want to export a large video, it is recommended to do a small test in your device before the full export.

The browser must support the WebCodecs API. Specifically, the VideoEncoder interface.

Monitors

Below the player there is a panel with two tabs: Console and Render Time.

They contain information about the execution of the drawvg script.

Console

This panel displays the messages written by the drawvg interpreter running in a WebAssembly module.

In messages from drawvg scripts (either the print command, or the print function), the values for the n and t variables are included on the right side.

If the same message is printed multiple times, the console displays a single message, prefixed with the number of times it was repeated. This is the same behaviour of console.log in many Web browsers.

The console keeps a limited number of messages. This limit can be adjusted in the menu above the console. You can also click on to remove all messages.

During the execution of the script, messages are kept in an internal buffer in the WebAssembly module, and they are pulled periodically. If the script prints too many messages (for example, in a repeat loop) and the buffer is full, the console displays a warning to indicate how many events were lost.

When the script is modified, the messages that are already in the console are greyed out, and the new ones are displayed using the normal color. This makes easier to identify the messages from the latest version of the script.

Render Time

The Render Time tab displays metrics about the duration, in milliseconds, to render each frame.

The measurement only considers the time to execute the script. It does not include the time to display the image in the canvas (via WebGL).

Each row shows the data collected from a range of samples, in three parts:

The number of rows is adjusted to fit in the height of the panel. A taller panel will have more rows, and each row will contain less samples.

The tab keeps a limited number of samples. This limit can be adjusted in the menu above the heat map. You can also click on to remove all samples.

The duration is measured with performance.now. Some browsers may reduce its precision, depending on the privacy configuration, so these measurements must be taken as an approximation.