CanvasDisplacementMap.md

CanvasDisplacementMap

Kind: global class
Npmpackage:
Properties

Name	Type	Description
source	canvas | canvasDrawer | ImageId	the CanvasDrawer instance or UICanvas / canvas element from which to get the image that will be displaced
map	canvas | canvasDrawer | ImageId	the CanvasDrawer instance or UICanvas / canvas element from which to get the disaplcement map bitmap data to apply to the source
target	CanvasDrawer | UICanvas | canvas	the CanvasDrawer instance or UICanvas / canvas element in which to draw the displaced image
params	object	an OBJECT of optional parameters
params.x	number	A NUMBER representing the X offset of the displacement
params.y	number	A NUMBER representing the Y offset of the displacement
params.scaleX	number	A NUMBER for how much distortion is applied to the X axis; defaults to 0
params.scaleY	number	A NUMBER for how much distortion is applied to the Y axis; defaults to 0
params.channelX	number	A NUMBER representing the color channel on which to displace the source bitmap data along the X axis; defaults to CanvasDisplaceChannel.RED
params.channelY	number	A NUMBER representing the color channel on which to displace the source bitmap data along the Y axis; defaults to CanvasDisplaceChannel.RED

• CanvasDisplacementMap
  • new CanvasDisplacementMap(imgObj)
  • .source : CanvasDrawer | UICanvas | canvas
  • .map : CanvasDrawer | UICanvas | canvas
  • .target : CanvasDrawer | UICanvas | canvas
  • .x : number
  • .y : number
  • .scaleX : number
  • .scaleY : number
  • .channelX : CanvasDisplaceChannel | number
  • .channelY : CanvasDisplaceChannel | number
  • .draw()

new CanvasDisplacementMap(imgObj)

Import from ad-canvas

import { CanvasDisplacementMap } from 'ad-canvas'

Sample ::
Create a displacement map filter and tween the distortion from 0 to 1000 along the X:

T.mapFilter = new CanvasDisplacementMap({
	source: _canvasDrawerSource,
	map: _canvasDrawerMap,
	target: _canvasDrawerTarget
})

Param	Type	Description
imgObj	object	an object containing the arguments for defining / orienting the image, see Properties for more info:

CanvasDisplacementMap.source : CanvasDrawer | UICanvas | canvas

An instance of CanvasDrawer or a UICanvas / HTML Canvas from which to pull bitmap data

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.map : CanvasDrawer | UICanvas | canvas

An instance of CanvasDrawer or a UICanvas / HTML Canvas from which to pull the displacement map bitmap data

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.target : CanvasDrawer | UICanvas | canvas

An instance of CanvasDrawer or a UICanvas / HTML Canvas in which the source bitmap data is drawn with the map displacement data applied

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.x : number

A NUMBER representing the X offset of the displacement

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.y : number

A NUMBER representing the Y offset of the displacement

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.scaleX : number

A NUMBER for how much distortion is applied to the X axis; defaults to 0

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.scaleY : number

A NUMBER for how much distortion is applied to the Y axis; defaults to 0

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.channelX : CanvasDisplaceChannel | number

A NUMBER representing the color channel on which to displace the source bitmap data along the X axis; defaults to CanvasDisplaceChannel.RED

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.channelY : CanvasDisplaceChannel | number

A NUMBER representing the color channel on which to displace the source bitmap data along the Y axis; defaults to CanvasDisplaceChannel.RED

Kind: static constant of CanvasDisplacementMap

CanvasDisplacementMap.draw()

Take bitmap data from the map, use it to displace the source, and apply the distorted composite bitmap data to the target NOTE::
This is much different than CanvasDrawer.update(). It uses bitmap data and applies it to the canvas pixel by pixel, rather than redrawing it as a whole.
CanvasDrawer.update() will overwrite CanvasDisplacementMap.draw(), and vice-versa.
CanvasTweener would not be recommented because that uses CanvasDrawer.update() in order to redraw everything. In order to animate a displacement, TweenLite is acceptable because you're not animating a CanvasElement, you're animating the object properties of the DisplacementMap filter.

Kind: static method of CanvasDisplacementMap
Example

// animate the amount of displacement along the X axis
TweenLite.fromTo(T.mapFilter, 1, {
	scaleX: 0
}, {
	scaleX: 1000, 
	// without this onUpdate method, the scaleX would change but the CanvasDisplacementMap wouldn't know to redraw
	onUpdate: function(){
		T.mapFilter.draw()
	}
})