Working with Transformations

Transformations transform the content or the geometry of a VisualTrack. For example, the scale transformation grows or shrinks the image frame produced by a VisualTrack.

The transformations property of a VisualTrack is a collection. When the FX Renderer renders a frame, it will apply all tranformations listed in the collection, one after the other.

Scaling a VisualTrack proportionally

When using user-supplied images that must fit into a given geometry, you must scale the image without distortion. There are two ways to fit an image with unknown dimensions: Letterboxing (scalingaspect) and cropping (scalingcrop). In both cases you need to know the size of at least one side of the target and the desired aspect ratio.

var txform = new sdl.Transformation({
    type: "scalingaspect", // or "scalingcrop"
    specifiedside: "w",
    fixedsidesize: "200",
    aspectratio: 1.2
})

var track = new sdl.VisualTrack({
    content: {
        type: "http",
        source: {
            path: "http://my.server.com/images/$variable.jpg"
            variable: {
                type: "map"
                key: "username"
                defaultvalue: "unknown-user"
            }
        }
    },

    transformations: [txform]
})

Desaturating a User Image

var txform =  new sdl.Transformation({
    type: "intensity",
    saturation: 0
})

Masking a Video

When you overlay dynamic content that is sopposed to be obstructed by an object in the foreground, you need to mask out the obstructed part in the image. The masks (or mattes) must be supplied by you in the image property of the transformation. To mask out videos, the masks also need to be videos or image sequences.

var txform =  new sdl.Transformation({
    type: "mask",
    image: {
        type: "video",
        source: {
            path: "userdata/masks.zip"
        }
    }
})