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 letters into separate elements using wrap-chars
let poem = document.querySelector('*.centerpiece');
WrapChars.wrap(poem);


// effect config
let params = {
    threshold:  20,
    distance:  100,
    jitter:     50,
    direction: 'horizontal',
    attack:      0.3,
    decay:       0.3,
    doPresetDistances: false,
};


// 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: 75, scatter:  50, 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: 30}, {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}%)`;
    }
});