API Documentation for: NEXT
Show:

DisplacementFilter Class

Extends Filter
Defined in: DisplacementFilter:41
Module: EaselJS

Distorts portions of the image, creates effects like computer glitches, bulge/pinch, and pond ripples. This filter Uses a reference image/canvas and interprets its r/g channels as a displacement map. A displacement map species how far from the original pixel the output pixel should be taken from.

Painting a displacement map means understanding how the r/g channel are interpreted. The red channel changes how far in the x to sample, and the green changes how far in the y to sample. The maximum range is -distance to +distance ('distance' being the distance value on the filter instance). This maps to the 0-255 color space for each channel. This means that for an image to experience no change it should be painted #808000 as that is in the middle for both the x and the y displacements.

  • Red values smaller than 0x80 sample from further left, and larger than 0x80 sample form further right.
  • Green values smaller than 0x80 sample from higher up, and larger than 0x80 sample form lower down.
The output vs input can take some getting used to so experiment! As a tip: when painting to a canvas that will act as displacement map, consider using the blend mode of "overlay" or "softlight". These blend modes will preserve mid tones (no displacement) while still mixing the high and low values as you might need per channel.

See Filter for an more information on applying filters.

Constructor

DisplacementFilter

(
  • dudvMap
  • [distance=0]
)

Parameters:

  • dudvMap HTMLImageElement | HTMLCanvasElement | WebGLTexture

    The horizontal blur radius in pixels.

  • [distance=0] Number optional

    The absolute value of the maximum possible displacement from the original pixel.

Methods

_applyFilter

(
  • imageData
)
Boolean

Inherited from Filter: _applyFilter:206

Parameters:

  • imageData ImageData

    Target ImageData instance.

Returns:

applyFilter

(
  • ctx
  • x
  • y
  • width
  • height
  • [targetCtx=ctx]
)
Boolean

Inherited from Filter: applyFilter:161

Applies the filter to the specified context.

Parameters:

  • ctx CanvasRenderingContext2D

    The 2D context to use as the source.

  • x Number

    The x position to use for the source rect.

  • y Number

    The y position to use for the source rect.

  • width Number

    The width to use for the source rect.

  • height Number

    The height to use for the source rect.

  • [targetCtx=ctx] CanvasRenderingContext2D optional

    The 2D context to draw the result to. Defaults to the context passed to ctx.

Returns:

Boolean:

If the filter was applied successfully.

clone

() Filter

Inherited from Filter: clone:196

Returns a clone of this Filter instance.

Returns:

Filter:

A clone of the current Filter instance.

getBounds

(
  • [rect]
)
Rectangle

Inherited from Filter: getBounds:142

Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.

Parameters:

  • [rect] Rectangle optional

    If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.

Returns:

Rectangle:

If a rect param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.

shaderParamSetup

(
  • gl
  • stage
  • shaderProgram
)

Inherited from Filter: shaderParamSetup:152

Assign any unique uniforms or other setup functionality here.

Parameters:

  • gl WebGLContext

    The context associated with the stage performing the render.

  • stage StageGL

    The stage instance that will be rendering.

  • shaderProgram ShaderProgram

    The compiled shader that is going to be used to perform the render.

toString

() String

Inherited from Filter: toString:187

Returns a string representation of this object.

Returns:

String:

a string representation of the instance.

Properties

_multiPass

Filter private

Inherited from Filter: _multiPass:88

Another filter that is required to act as part of this filter and created and managed under the hood.

Default: null

distance

Image | HTMLCanvasElement

Defined in distance:81

The absolute value of the maximum shift in x/y possible.

Default: 128

dudvMap

Image | HTMLCanvasElement

Defined in dudvMap:74

The visual source to fetch the displacement map from.

FRAG_SHADER

String readonly

Inherited from Filter: FRAG_SHADER:106

Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR

usesContext

Boolean

Inherited from Filter: usesContext:80

A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.

Default: false

VTX_SHADER

String readonly

Inherited from Filter: VTX_SHADER:97

Pre-processed template shader code. It will be parsed before being fed in into the shader compiler. This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR