DemoImage

DemoImage is a helper class for simply visualizing easing functions. It contains 4 static methods for visualizing different functions of Easing objects.

Negative values are not rendered in the generated images

in(easing: Easing, outPath: string, steps: number = 200)

Creates a graph showing the curve created by the Easing object's in function and saves the image to the specified output path.

JavaScript

import { Easing, DemoImage } from 'eaz';

DemoImage.in(Easing.cubic, 'images/cubicIn.png');

Output

images/cubicIn.png

out(easing: Easing, outPath: string, steps: number = 200)

Creates a graph showing the curve created by the Easing object's out function and saves the image to the specified output path.

JavaScript

import { Easing, DemoImage } from 'eaz';

DemoImage.out(Easing.cubic, 'images/cubicOut.png');

Output

images/cubicOut.png

inOut(easing: Easing, outPath: string, steps: number = 200)

Creates a graph showing the curve created by the Easing object's inOut function and saves the image to the specified output path.

JavaScript

import { Easing, DemoImage } from 'eaz';

DemoImage.inOut(Easing.cubic, 'images/cubicInOut.png');

Output

images/cubicInOut.png

interpolate(inEasing: Easing, outEasing: Easing, outPath: string, smoothing: number = 0.25, steps: number = 200)

Creates a graph showing the curve created by an in Easing object and an out Easing object. The transition between them is smoothed according to the smoothing value.

JavaScript

import { Easing, DemoImage } from 'eaz';

DemoImage.interpolate(
    Easing.cubic,
    Easing.noise(0.05, 5),
    'images/cubicNoiseInterpolate.png'
);

Output

images/cubicNoiseInterpolate.png