adashabeta

ProximityEffect demo 6

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

View/download project on GitHub.

wrap-chars page.


// split the words into separate elements using wrap-chars
let poem = document.querySelector('*.centerpiece');
WrapChars.wrap(poem, {
	split: 'word'
});


// effect config
let params = {
    threshold: 20,
    distance: 100,
	jitter:    50,
	direction: 'vertical',
    attack:     0.7,
    decay:      0.2,
};


// add effects
proxEffect.addEffect('translateX',                       0, {value:  0, scatter:  50, scatterMethod: 'normal'});
proxEffect.addEffect('translateY',                       0, {value:  0, scatter:  50, scatterMethod: 'normal'});
proxEffect.addEffect('translateZ',                       0, {value: 25, scatter: 150, scatterMethod: 'uniform'});
proxEffect.addEffect(   'rotateX',                       0, {value:  0, scatter: 270, scatterMethod: 'normal'});
proxEffect.addEffect(   'rotateY',                       0, {value:  0, scatter: 270, scatterMethod: 'normal'});
proxEffect.addEffect(   'rotateZ', {value: 0, scatter: 10}, {value:  0, scatter:  90});


// get data through effect API to add depth blur
proxEffect.addEventListener('redraw', e => {
	for(let n=0; n<proxEffect.nodes.length; n++)
	{
		let z = proxEffect.getNodeIndexData(n, 'effects')[2].far;
		let d = proxEffect.distanceFromIndex(n);
		let f = Math.abs(z)*Math.pow(d, 2)*0.025;
		proxEffect.nodes[n].style['filter'] = `blur(${f}px) brightness(${50}%)`;
	}
});