Greyscale (Luminosity) Masks

What Are They? How Do You Use Them?

Greyscale Luminosity Masks are black and white (and various shades of grey) images. One of their uses is as masks for transitions. When a transition is created in Shotcut by dragging one clip to partially obscure another one next to it it is possible to assign one of these masks to that transition using the Custom option. As the playhead traverses the transition first those areas of the left-hand clip that are underneath the mask's BLACK pixels will become transparent, so exposing those parts of the right-hand clip; then the areas underneath mask pixels that are various levels of GREY become transparent; finally those areas of the left-hand clip that are underneath the mask's WHITE pixels will become transparent. It is possible to reverse the order in which the transparency occurs by choosing the option Invert Wipe.

There is another type of mask that is based on the alpha-channel of the image. These use the value of the opacity of the image instead of its luminosity, i.e. the alpha value of the pixels. These masks are used more for masking parts of the video clip while performing other filter operations.

Examples of Luminosity Masks (generated by the HTML files in the ZIP file below)

How Do Greyscale Luminosity Masks Work?

When performing the transition Shotcut looks at the luminosity of the mask. Pixels that are pure BLACK (#000000) have a luminosity of 0%, while pixels that are pure WHITE (#ffffff) have a luminosity of 100%, GREY pixels have a luminosity somewhere between. When the playhead enters the transition Shotcut sets a luminosity threshold of 0%, at which point only those areas underneath pure BLACK pixels will become transparent. As the playhead traverses the transition Shotcut monotonically increases the threshold, so more of the areas under GREY pixels become transparent, until just before the playhead leaves the transition the luminosity threshold reaches 100%, at which point the areas under pure WHITE pixels become transparent.

There are other ways of making a transition, one of which is to have a clip on an upper track, say V2, whose end partially overlaps the start of another clip on a lower track, say V1. The upper clip needs to be split at the point where it coincides with the start of the lower clip and a "Mask: From File" filter applied to the overlapping sub-clip. Using the "Custom" setting you specify the file (PNG or JPEG) that is the greyscale luminosity mask. You then use simple keyframes to increase the

How to Produce Greyscale Images

There are various image manipulation utilities, like Photoshop, Paintshop Pro, GIMP etc. that can create grayscale images and save them as PNG files. These are great if you wish to create complex images with non-regular shapes, e.g. your company logo. However, if you want to create regular shapes, like squares, circles, cones, diamonds etc. an HTML file consisting of HTML, CSS and Javascript can be very useful in that it can be parameterised to create a wide variety of greyscale images with complex greyscale "shading", simply by changing one or two variables.

I have developed several HTML files to create a variety of greyscale images. They are documented below,examples of each are given above. The following ZIP file contains these HTML files:

Greyscale Generators ZIP file

Documentation

Each of the generators has a set of parameters which can be modified. They reside in the files as CSS variables in a style element near the beginning of the file. They look like:

/*
    =========================
    PARAMETERS you can change
    =========================
*/
:root {
    --shape         : cross;  /* one of circle, square, diamond, cross, hexagon, octagon */
    --nw            : 16;     /* no. of shapes per row */
    --stagger_from  : start;  /* one of the following: start, end, center, edges, random, or a shape number like 13 */
    --screen_width  : 640px;
    --screen_height : 360px;
    --export_png    : false;  /* true or false - whether or not to create and download a PNG file*/
}