Effects & Animation

In the clips array in buildTimeline , the effect key in takes in an array of filters that you can use to apply effects to a clip. Hypno uses Apple's Core Image Filters for the filter library, and you can find full documentation of the available effects here.

Applying a Filter to a Clip

In the example below, we have two clips, the first with a bit of contrast and saturation color correction added, and the second with a Gaussian blur. Each new hypno.Effect instance takes in 1) the filter name, and 2) its input parameters.

//
// Hypno-Demo-Effects.js
// Hypno-Demo-Effects
//

import { Asset, Time, TimeRange, Clip, Vector } from 'libhypno'
import { Image, Filter, Kernel } from 'libhypno/coreimage'

import * as hypno from './stl.js'

let runtime = 150 //setting a global duration to 5 seconds

hypno.buildTimeline({

    fps: 30,
    resolution: new Vector(960, 1280),
    clips: [
        {
            start: 0,
            duration: runtime/2,
            effect: [
                //create a new effect
                new hypno.Effect(hypno.filters.ColorControls, {
                    "inputSaturation": 1.4, //pass in input parameters
                    "inputContrast": 1.2
                })
            ]
        },
        {
            start: 50,
            duration: runtime/2,
            effect: [
                new hypno.Effect(hypno.filters.GaussianBlur, {
                    "inputRadius": 10
                })
            ]
        }
    ]
})

And, here's what this looks like in Nyx:

Animating Effects

Custom Shaders