ASSDraw3

ASSDraw3 overview

ASSDraw3 is a tool for designing shapes to be used in ASS subtitle file. The main feature of ASSDraw3 is that you can design the shapes you want using mouse and ASSDraw3 automatically generates the drawing commands, which are basically vector drawing commands.

ASS subtitle

It is a format of subtitle file that can be used to embed subtitles to a video. It is very flexible format that supports stylings, text animation (e.g. karaoke), shapes etc. ASSDraw3 focuses on the shapes feature that ASS subtitle format supports. It does not care at all about subtitle.

Drawing commands

Imagine drawing a shape using a pen (real world pen that uses ink). To draw a square on a piece of paper, you first position your pen above a particular position on the paper. Then you press the pen tip lightly on the paper surface and start moving the pen in a straight path to produce, well, a straight line on the paper. Then you do the same for three other edges of the square. Once the tip of the pen reaches the starting point, you get a square.

That is basically how shapes are drawn in ASS subtitle. There are commands to instruct the renderer to move to a specific point, draw a line to that point, draw a bezier curve etc. A string of cleverly-choreographed commands renders shapes ranging from as simple as a square to more complex shapes like a snow speck or a christmas tree. Commands for a square can be easily written by hand but it takes lots of imagination to design a complex logo without visual aids.

Commands fully supported by ASSDraw3:

  • M x y
    Move to point (x,y), closing the current shape using a line connecting the current point to the previous M
  • L x y
    Draw a straight line from current point to (x,y)
  • B x1 y1 x2 y2 x y
    Draw a Bezier curve begining from current point and ending at (x,y) with (x1,y1) and (x2,y2) being the internal guide/control points

N x y (move to point (x,y) without closing the current shape) entered in the Drawing Commands input field will be converted to L command.

S (spline), P (extend spline) and C (close spline) commands are not supported.

This help file has been generated by the freeware version of HelpNDoc


Basic Interface

This help file has been generated by the freeware version of HelpNDoc


Shapes on canvas

Points refer to the endpoints of lines/curves. They are the connection points from one line or curve to another. On the canvas they appear as squares (red by default but colors can be changed in settings).

Control points are the internal points of Bezier curves. They control how the curves curve.

Hovered points and control points are circled and crossed, and their coordinates are displayed. Line or curve that the hovered point belongs to is also highlighted with dashed thicker line/curve.

Selected points and control points are, as the title denotes. Points are selected when left-clicked, and it is possible to select multiple points.

Other things worth knowing are:

    • Origin crosshair hints where coordinate [0,0] is.
    • Control lines are the lines that connect control points together with points at both ends of a Bezier curve. They are just guide and won't appear in rendered shape.


Drawing modes

The drawing modes determine how the canvas responds to your mouse gestures, in particular how left-clicks are handled. Each drawing mode is exclusive, meaning that at one time only one drawing mode may be active. To activate any drawing mode, use the drawing modes toolbar as shown below, or use the F1 - F7 shortcut keys.

Drag

In Drag drawing mode, you can drag any point of the shape to move its location. Dragging on empty area of canvas allows you to select multiple points so that you can drag a set of points in-sync. Note: when in any other drawing modes (except Scale/Rotate and Bilinear), holding the Shift key temporarily switch to Drag mode until you release the key.

Move

Move drawing mode is not for moving the shape around, but it is to add M commands, which tell the renderer to move to a specific coordinate, closing any path before it does that.

Line

Draw a straight line from the current point to a specific coordinate.

Bezier (curve)

Draw a Bezier curve from the current point to a specific coordinate. Once you release the left mouse button, the two control points will be generated, thus allowing you to shape the curve any way you want.

Delete

Remove a line or curve from the canvas by clicking on its point or any of its control points.

Scale/Rotate

Rescale and rotate the shape.

Bilinear (Transformation)

Distort the shape using bilinear transformation.


Using the mouse and keyboard

Left mouse button

On the canvas, your left mouse button does the followings:

  • In any drawing mode except Scale/Rotate and Bilinear Transformation, pointing/hovering on a point or a control point highlights the point, showing the point's coordinates and highlighting the line/curve the point belongs to.
  • In Drag drawing mode, you can drag points and control points to change the shape.
  • Also in Drag mode, if you can drag on empty area of the canvas to select multiple points (see Multiple points selection), then drag on of the selected points to move all of them in-sync.
  • In M, L or B drawing mode, left-clicking on the canvas adds an M, L or B command (move, line or bezier curve) to the end of the commands string. The point associated to the command is added to the canvas when you depress the mouse button and can still be moved around until you release the button, at which time the command is finalized (for bezier curve, the control points are generated at that moment). Left-clicking and dragging from an existing point on the canvas adds the new command/point immediately after the existing one.
  • In Scale/Rotate and Bilinear Transformation modes, drag an edge or a vertex of the bounding rectangle to scale or transform the shape.

Right mouse button

On the other hand, your right mouse button is used as follow:

  • In all drawing modes except Scale/Rotate, right-dragging the canvas (i.e. holding right button down while moving the mouse pointer over the canvas) pans the canvas, moving the shape within the viewpoint.
  • In Scale/Rotate drawing mode, right-dragging rotates the shapes around the shape's center.
  • Double-right-clicking on a shape's point (but not control point) pops up context menu to perform special functions on the point:

Mousewheel

Mousewheel is mainly used for zooming. Mousewheel up zooms in (scale up) while mousewheel down zooms out (scale down).

Keyboard shortcuts

Even though ASSDraw3 is virtually usable with just a mouse, there are several keyboard shortcuts that can used in together with mouse captures for different purposes (refer summary below).

Summary

Keyboard key / Mouse gesture | Action | Ctrl key
PageUp | Zoom in (scale up) | Refine scaling by 0.1
Mousewheel up
PageDown | Zoom out (scale down) | Refine scaling by 0.1
Mousewheel down
Directional keys | Pan | Refine panning by 10
Ctrl + N | Clear canvas | -
Ctrl + P | Preview | -
F1 | Drawing mode: Drag | -
F2 | Drawing mode: M | -
F3 | Drawing mode: L | -
F4 | Drawing mode: B | -
F5 | Drawing mode: Delete | -
F6 | Drawing mode: Scale/Rotate | -
F7 | Drawing mode: Bilinear Transformation | -
Ctrl + 1 | Reposition origin to bottom left of canvas | -
Ctrl + 3 | Reposition origin to bottom right of canvas | -
Ctrl + 5 | Reposition origin to center of canvas | -
Ctrl + 7 | Reposition origin to top left of canvas | -
Ctrl + 9 | Reposition origin to top right of canvas | -


Output

The output of ASSDraw3 is the drawing commands string located in the box "Drawing Commands"

Copy this commands and paste it into Aegisub, enclosing it within {\p1}..{\p0} tags, like:

{\p1}m 0 4 b 14 -8 49 -6 51 6 b 53 18 39 29 28 34 b 41 15 31 -1 0 4 m 4 31 l 29 -15 l 13 -14 m 43 -13 l 4 31 l 62 -6 m 4 31 l 58 20 l 63 6 m 11 11 b 18 6 29 12 26 23 b 24 29 4 17 11 11{\p0}


Undo/Redo

ASSDraw3 has a powerful undo/redo mechanism for any changes on the shape on canvas. In the GUI the Undo and Redo operations can be invoked from the menu 'Canvas'. It is however easier to use the hotkeys Ctrl+Z and Ctrl+Y.

Take note that any operations that do not modify the points of the shape, such as zooming in/out and panning is not undoable since, well, the shape is not modified. However, a zooming action may be undone if it is sandwiched between two shape-modifying actions.


Context menu

When in any drawing mode other than Scale/Rotate and Bilinear Transformation, double-right-clicking (i.e double-clicking using right mouse button) pops up context menu that, depending on where you click, allows you to perform specific actions:

  1. Move [0,0] here
    Reposition origin (coordinate [0,0]) to the position double-clicked on canvas without moving the shape. As a result, all the points that make up the shape undergo linear translation. This gives the same result as (left-)dragging the origin crosshair.

  2. Mode: xxxxxx
    Switch to a particular drawing mode

  3. Convert to Bezier curve (B command)
    Self-explanatory

  4. Convert to line (L command)
    Ditto

  5. Smooth connection
    Available for any connection points in between two Bezier curves; enable smooth connection mode on that point makes sure the curves are smooth on that connection whenever you drag any of the two control points nearest to the connection of the two curves.


Multiple points selection

To select multiple points, first switch to Drag mode if you haven't done so. Point to an empty space on canvas and start dragging. A dashed selection rectangle will appear and resize following your mouse dragging.

Any points of the shape that fall within the rectangle will be selected. Likewise, any points that are not included in the rectangle are unselected, unless if either Ctrl or Alt key is depressed, in which case the behaviors are as follows:

Depressed Key | Behavior
Ctrl | Add points to the existing selection
Alt | Remove points from selection
None | Start a new multi-selection, reseting any existing selection


Scale/Rotate

Once you initiate the Scale/Rotate mode, ASSDraw3 will display a rectangle that bounds the shape on canvas. You can then manipulate this bounding rectangle to scale and/or rotate the shape.

To scale the shape, point you mouse pointer to an edge (i.e. a side of the rectangle) or a vertex (i.e. a corner where two sides meet) until one or two circles appear on the bounding rectangle. Using the left mouse button, drag the edge/vertex to rescale the rectangle, and the shape will rescale to fill in the rectangle.

To rotate the shape, drag using your right mouse button. Note: you do not have to point on an edge or a vertex.


Bilinear Transformation

Bilinear Transformation works like the scaling in Scale/Rotate mode but without the restriction that the rescaled bounding rectangle must remain a rectangle. Meaning that you can change the rectangle into a rhombus and the drawn shape will fill in the rhombus form. In other words, you can distort the drawn shape however you want.


Shapes Library

Shapes Library (SL) is a built-in shapes storage where you can store shapes you design to be retrieved later. By default, SL is located at the far-right end of ASSDraw3 GUI but it can be moved and docked to another position, and even hidden by clicking the X button. A menu item 'Shapes Library' under the menu 'Workspace' can be used to hide/unhide SL.

You can add a shape you just draw on the canvas to SL by clicking the plus '+' button. A thumbnail of the shape will be added to the display area. Once it's there, your shape is considered saved in the library. You can replace a saved shape in the library with another shape currently on the canvas by right-clicking on the thumbnail and select 'Save canvas here'.

To load a saved shape onto the canvas, simply double-click on the thumbnail. Selecting 'Load to canvas' from the right-click menu does the same.

To remove a saved shape from SL, select 'Delete from canvas' from the right-click menu. You can also use the checkboxes to select multiple saved shapes and click the red X button to delete multiple shapes. Beware though that any deletion of shapes from SL is not undoable.


Transform dialog

Transform dialog is a legacy feature that was brought along from ASSDraw2 just for the heck of it. In those days of ASSDraw2 where there was no Scale/Rotate mode, this dialog was the only way you could rescale or rotate the shape. Now that ASSDraw3 has that new mode, plus Bilinear Transformation mode, Transform dialog became obsolete since you need to know the math in order to use it. That said, this page explains the math behind the Transform dialog.

First, the Transform dialog can be accessed through menu Canvas > Tranform. Here is how the dialog looks like:

If you are familiar with 2x2 transformation matrix then the formula diagram in the dialog should be self-explanatory. If not, then read further. Notice that the formula is broken up into two parts separated by the (left) arrow. The direction of the arrow denotes that whatever the right-hand side of the formula simplifies into, the values would be assigned to the x and y coordinates of the points. Now look at the x and y in the right-hand side. First, they are substracted by mx and my respectively. Then they are multiplied using matrix multiplication against [m11 m12; m21 m22]. This translate into:

top = m11(x - mx) + m12(y - my)

bottom = m21(x - mx) + m22(y - my)

Finally nx and ny respectively are to these values:

top = m11(x - mx) + m12(y - my) + nx

bottom = m21(x - mx) + m22(y - my) + ny

The new x gets the top value and the new y gets the bottom value.

Now the questions are, why such a weird formula?, and how is it useful?

First, let's try m11 = m22 = 1, m12 = m21 = mx = my = nx = ny = 0. The result:

(new) x = x

(new) y = y

We get exactly the same coordinates! This is because the matrix with m11 = m22 = 1 and m12 = m21 = 0 is called identity matrix and whatever matrix multiplies the identity matrix will return the same matrix.

Now let's try m11 = m22 = 2, m12 = m21 = 0:

(new) x = 2x

(new) y = 2y

Now the coordinates are doubled!

With this transformation, the shape will be twice larger than before. Changing m11 and m22 with any other value N will grow the shape N times since if a point was at (1,1), it is now at (N,N). Notice though that a point at (0,0) is still at (0,0). This means that the shape grows centering at (0,0). Sometimes you want the shape to grow centering at a different coordinate, say (S,T). To do this, first you must move all the points so that the point that is at (S,T) relocates to (0,0). Then you scale the shape up. Finally you move the point that was originally at (S,T) back to, well, (S,T). Now how do we translate that to the values in the Transform dialog? Recall, first: move (S,T) to (0,0); second: scale it up; third: move (0,0) back to (S,T). How about this:

new x = N(x - S) + S

new y = N(y - T) + T

See how it fits into:

new x = N(x - mx) + 0(y - my) + nx

new y = 0(x - mx) + N(y - my) + ny

Well, if you haven't realized: mx = nx = S; my = ny = T.

Now that was all rescaling. To rotate the shape, suppose you want to rotate it by theta:

m11 = cos theta

m12 = sin theta

m21 = -sin theta

m22 = cos theta

After all those explanations, it is so much simpler if you use the Scale/Rotate mode :P


Canvas background image

Starting from ASSDraw3 (not as if I'm evisioning ASSDraw4 or something though ;)), you can load an image to be displayed as the canvas background so that you can trace the image.

First, you need the image file, obviously. Drag the file from Explorer (or My Computer if you prefer to call it that way) and drop it onto ASSDraw3's canvas. Voila! The image is set as canvas background!. Once it loaded, you can lower the opacity of the background to make it easier to work with.

Pan background button

Notice that the 'Pan background' button on the toolbar, that was previously disabled, is not clickable.

Here is how both the 'Pan drawing' and 'Pan background' buttons work. Both buttons are independent toggle buttons, meaning that they can be activated or deactivated independently to each other. If 'Pan drawing' is active then right-dragging the canvas pans the drawing. Likewise, if 'Pan background' is active, right-dragging the canvas pans the background. Since the buttons are not dependent to each other, you can pan both drawing and background at the same time or only one at a time. Take note that these settings also affect zooming.

Loading from clipboard

There are times when you do not have an image as a file, but rather stored temporarily in the clipboard, especially when you just did a 'print screen' action (PrtSc key) or copied (Ctrl+C) a portion of an image in an image editor. Instead of having to save the image to a file to load in ASSDraw3, you can just 'paste' the copied image onto the canvas by selecting menu Canvas > Paste or using the hotkey Ctrl+V.

Aligning drawing to background

You can align the [0,0] coordinate of the drawing to each of the corners or the center of the image by selecting menu Background > Reposition [0,0] or using the hotkeys as displayed in the menu.

Unloading background

Background image can be easily unloaded by selecting menu Background > Remove background.


How do I load an ASS subtitle file?

You don't. ASSDraw3 does not handle the whole subtitle file.

Read this if you haven't done so.

Also, read this.


Where are the scrollbars?

Nope, the canvas does not have scrollbars. Unlike a document, which has a definite dimension, the canvas in ASSDraw3 has infinite dimension, meaning you can draw shapes as large as you want as there is no such thing as the border of the canvas. Therefore a scrollbar does not make sense here.

Even though the canvas is virtually infinite, your viewpoint (i.e the screen) is not, thus ASSDraw3 can only show a limited portion of the whole infinite canvas. At times, some parts of the shape on the canvas do not fit in the viewpoint. To make it possible to view any or all parts of the shape within the viewpoint, ASSDraw3 provides you with two mechanisms:

  • Panning
    With panning mechanism, you move the shape around within the viewpoint by right-dragging (dragging using right mouse button) the canvas. If some portion on the right side of the shape is hidden, you can pan the canvas to the left, vice versa.

  • Zooming
    By default, ASSDraw3's canvas is zoomed in at 1000% at startup, meaning that the shape displayed on the canvas is in the scale of 10:1 of actual size rendered on video. If the shape appears too big that it is difficult to visualize how it looks like, you can zoom out to a lower zoom factor by using the mousewheel, or PageDown and Ctrl-PageDown if your mouse does not have a wheel. (PageUp or Ctrl-PageUp to zoom in)


How do I save the shape to a file?

You can't. Well, at least not in a straightforward way. You can manually save a shape you have designed by getting the drawing commands first, and later copy-pasting them into a text-editor such as Notepad and save as a .txt or anything at all.

Unless you are planning to send the drawing commands in an email or post them on file-sharing networks, ASSDraw's built-in Shapes Library might suffice to 'save' the shape you design.


How do I use the shape in Aegisub?

Refer here to read about how to get the drawing commands.

Refer to Aegisub's manual on how to put drawing commands into subtitle lines.


How do I assign different colors to parts of my shape?

You can't. Again, ASSDraw3 works on how to draw shapes. Aegisub handles colors, position etc. (Actually even with Aegisub you can't assign one color to one part and another color to another part of the shape. Even if it is doable, it is not straightforward.)


Can I load an image as the background of the canvas?

Guess what? You can! And it is very easy to do so (unlike in ASSDraw2 where you have to use window transparency trick)

First, open Explorer (or My Computer if you prefer it called that way). Navigate to the folder where the image file you want to load as the background is located. Drag that file and drop it onto ASSDraw3's canvas. Voila! The image is set as canvas background!.

Another way of loading canvas background image is by copying it to clipboard (the image, not the file). Then paste it into ASSDraw3 either by Ctrl-V or using the menu Canvas > Paste. This is the prefered way if you don't have the image file on your disk, for example if it is on a webpage and some weird script prevents you from saving it to your computer -- simply do a printscreen (press PrtSc key) to copy the whole screen image to clipboard.

Read this for more tips & tricks for working with canvas background.


My canvas background shows black box where video frame should be displayed. Why?

Let me guess. You do the printscreen trick on your Media Player Classic (MPC) and directly paste into ASSDraw3. Tell you what, it is not something ASSDraw3 can do anything about. If you paste the screenshot to any image editor you will get the same black box. It is caused by how video is overlaid on screen by DirectShow. DirectShow renders the video directly onto video memory, bypassing Windows, thus when you do PrtSc, Windows captures the black box instead of the video frame because it can't see the latter.

To fix this, you need to open the Options dialog in MPC (sorry, can't help if you use something else) by pressing O key. Navigate to Playback > Output. In the DirectShow Video box, choose a "renderless" renderer. Click 'Apply' or 'OK' and re-open the video file (simply unpausing won't work). Do the PrtSc again.


Where is the transparency option that was in ASSDraw2?

Removed in favor of the super-cool loading image as canvas background feature.