JSDoc: Class: Blend

new Blend(config)

Parameters:

Name Type Description

config

Object

configuration , see createDefaultConfig() for default values

Properties

Name Type Attributes Default Description

media HTMLVideoElement | Media | MediaElementTrack must pass one of: (src/services/MediaService/Media, src/services/MediaService/tracks/MediaElementTrack, HTMLVideoElement)

fit string <optional> contain video maintain-aspect-crop behaviour [contain | cover | stretch], see const FIT

cellGrid

object

{x:1, y:2}

the x:column, y:row totals of the video spritesheet

Properties

Name	Type	Description
`x`	number	the column total of the video spritesheet (x axis)
`y`	number	the row total of the video spritesheet (y axis)

cellIndexLength integer <optional> set if spritesheet max-cell-index is less than the full celltotal(w*h)

cellUVTrim number <optional> 0.985 trim video cell texture lookups to avoid cell-bleed (notrim=1, trim to 25% borderwidth = 0.5

vertexShader string <optional> ./shaders/base.vert eg ./shaders/base.vert

fragmentShader string <optional> ./shaders/circleFade.frag eg ./shaders/circleFade.frag

internalRenderer boolean <optional> true if false, wont create renderer, scene, camera. Intended to then use mesh/material in an externally defined scene. Side effects: fit should probably then be full uv coverage (fit:FIT.STRETCH)

touchMode string <optional> hold (none|hold|hold_threshold|toggle) see const TOUCH_MODE

touchEasing number <optional> 0.5

holdThreshold number <optional> 0.25

transitionPress

object

{delay:0.0,duration:1.0,ease:"Sine.easeIn"}

TweenMax props for transition of blend on press

Properties

Name	Type	Description
`delay`	number	Seconds
`duration`	number	Seconds
`ease`	String

transitionRelease

object

{delay:0.0,duration:0.8,ease:"Sine.easeOut"}

TweenMax props for transition of blend on release

Properties

Name	Type	Description
`delay`	number	Seconds
`duration`	number	Seconds
`ease`	String

blendEasing number <optional> 0.3

blendBiasFunc function <optional> (n)=> n

bleedBiasFunc function <optional> (n)=> window.Power1.easeOut.getRatio(n)

autoMaxRadius boolean <optional> true

mouseRayCasting boolean <optional> false

Source:

Blend.js, line 113

Extends

BaseBlend

Members

(static) EVENTS

Properties:

Type	Description
Blend.EVENTS__TYPE

Source:

Blend.js, line 126

(static) FIT

Properties:

Type	Description
Blend.FIT__TYPE

Source:

Blend.js, line 132

(static) TOUCH_MODE

Properties:

Type	Description
Blend.TOUCH_MODE__TYPE

Source:

Blend.js, line 129

blend

Properties:

Name	Type	Description
`blend`	number	sets blend value in shader

Overrides:

BaseBlend#blend

Source:

BaseBlend.js, line 377

cellIndex1

Properties:

Name	Type	Description
`cellIndex1`	integer	sets cellIndex1 value in shader. cellIndex1 is the video-spritesheet cellIndex blended FROM

Overrides:

BaseBlend#cellIndex1

Source:

BaseBlend.js, line 393

cellIndex2

Properties:

Name	Type	Description
`cellIndex2`	integer	sets cellIndex2 value in shader. cellIndex2 is the video-spritesheet cellIndex blended TO

Overrides:

BaseBlend#cellIndex2

Source:

BaseBlend.js, line 397

EVENTS

Properties:

Type	Description
Blend.EVENTS__TYPE

Overrides:

BaseBlend#EVENTS

Source:

Blend.js, line 117

FIT

Properties:

Type	Description
Blend.FIT__TYPE

Overrides:

BaseBlend#FIT

Source:

Blend.js, line 123

maxRadius

Properties:

Name	Type	Description
`maxRadius`	number	sets maxRadius value in shader. maxRadius is a viewport-unit setting for the maximum blend radius

Inherited From:

BaseBlend#maxRadius

Source:

BaseBlend.js, line 404

See:

config.autoMaxRadius - set to true, will auto-calculate/update this value to the minimum full-coverage size

radiusBleed

Properties:

Name	Type	Description
`radiusBleed`	number	sets radiusBleed value in shader. changes the radial effect bleed width

Overrides:

BaseBlend#radiusBleed

Source:

BaseBlend.js, line 408

resolutionX

Properties:

Name	Type	Description
`resolutionX`	number	sets resolutionX value in shader. auto-calculated/updated based on canvas size

Inherited From:

BaseBlend#resolutionX

Source:

BaseBlend.js, line 421

resolutionY

Properties:

Name	Type	Description
`resolutionY`	number	sets resolutionY value in shader. auto-calculated/updated based on canvas size

Inherited From:

BaseBlend#resolutionY

Source:

BaseBlend.js, line 426

TOUCH_MODE

Properties:

Type	Description
Blend.TOUCH_MODE__TYPE

Source:

Blend.js, line 120

touchX

Properties:

Name	Type	Description
`touchX`	number	sets touchX value in shader. touchX,touchY are used as a radial effect center

Overrides:

BaseBlend#touchX

Source:

BaseBlend.js, line 385

touchY

Properties:

Name	Type	Description
`touchY`	number	sets touchX value in shader. touchX,touchY are used as a radial effect center

Overrides:

BaseBlend#touchY

Source:

BaseBlend.js, line 389

uvTrim

Properties:

Name	Type	Description
`uvTrim`	number	sets uvTrim value in shader.

Inherited From:

BaseBlend#uvTrim

Source:

BaseBlend.js, line 414

See:

config.cellUVTrim - set initially by this config value

videoScaleX

Properties:

Name	Type	Description
`videoScaleX`	number	sets videoScaleX value in shader. auto-calculated/updated based on canvas size/video-aspect in accordance to config.fit

Inherited From:

BaseBlend#videoScaleX

Source:

BaseBlend.js, line 432

videoScaleY

Properties:

Name	Type	Description
`videoScaleY`	number	sets videoScaleY value in shader. auto-calculated/updated based on canvas size/video-aspect in accordance to config.fit

Inherited From:

BaseBlend#videoScaleY

Source:

BaseBlend.js, line 438

Methods

destroy()

as advertised

Overrides:

BaseBlend#destroy

Source:

BaseBlend.js, line 456

toggleBlend(onCompleteopt, tweenPropsopt)

Parameters:

Name Type Attributes Description

onComplete function <optional>

tweenProps

object

TweenMax props for transition of blend

Properties

Name	Type	Description
`delay`	number	Seconds
`duration`	number	Seconds
`ease`	String

Source:

Blend.js, line 254

transitionToIndex(fromIndex, toIndex, nextIndex2, onCompleteopt, tweenPropsopt)

Parameters:

Name Type Attributes Description

fromIndex integer

toIndex integer

nextIndex2 integer

onComplete function <optional>

tweenProps

object

TweenMax props for transition of blend if not provided - uses config tweenProps

Properties

Name	Type	Description
`delay`	number	Seconds
`duration`	number	Seconds
`ease`	String

Source:

Blend.js, line 272

tweenBlend({number, onCompleteopt, tweenPropsopt)

tweens to a given blend value

Parameters:

Name Type Attributes Description

{number blend = (0 to 1)

onComplete function <optional>

tweenProps

object

TweenMax props for transition of blend if not provided - uses config tweenProps

Properties

Name	Type	Description
`delay`	number	Seconds
`duration`	number	Seconds
`ease`	String

Source:

Blend.js, line 297

update()

raf, extended from BaseBlend

Source:

Blend.js, line 188

updateBlend(target)

called per frame, updates any touch behaviour

Parameters:

Name	Type	Description
`target`	number	blend value to bias/ease to

Source:

Blend.js, line 198

updateTouch()

called per frame, updates any touch behaviour

Source:

Blend.js, line 214

Type Definitions

EVENTS__TYPE

Type:

object

Properties:

Name	Type	Description
`BLEND_UNIT`	string	emitted on blend value change. event value:number (0 to 1)
`BLEND_TOUCH`	string	emitted on touch or mousedown. event value: none
`BLEND_TRANSITION_COMPLETE`	string	emitted on blend value =1. can use to switch video cell targets. event value: none

Source:

Blend.js, line 15

FIT__TYPE

Type:

object

Properties:

Name	Type	Description
`COVER`	string	fill frame, maintain aspect ratio
`CONTAIN`	string	fit within frame, maintain aspect ratio
`STRETCH`	string	stretch to frame, dont maintain aspect ratio

Source:

Blend.js, line 28

TOUCH_MODE__TYPE

Type:

object

Properties:

Name	Type	Description
`NONE`	string	for external-only control of touch/blend events
`HOLD`	string	transition to index2 on hold - transition to index1 on release
`HOLD_THRESHOLD`	string	trigger transition to index2 on hold duration, then index1 = index2. if threshold crossed - no release trigger
`TOGGLE`	string	trigger transition to index2 on press, then index1 = index2. no release trigger

Source:

Blend.js, line 41