ProximityEffect demo 6

• grids
  • 1*
  • 2*
  • 3*
  • 4*
• text
  • 5*
  • 6*
  • 7*

’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.addStyle('translateX',                       0, {value:  0, scatter:  50, scatterMethod: 'normal'} );
proxEffect.addStyle('translateY',                       0, {value:  0, scatter:  50, scatterMethod: 'normal'} );
proxEffect.addStyle('translateZ',                       0, {value: 75, scatter:  50, scatterMethod: 'uniform'});
proxEffect.addStyle(   'rotateX',                       0, {value:  0, scatter: 270, scatterMethod: 'normal'} );
proxEffect.addStyle(   'rotateY',                       0, {value:  0, scatter: 270, scatterMethod: 'normal'} );
proxEffect.addStyle(   '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.totalNodes; n++)
    {
        let z = proxEffect.getNodeIndexData(n, 'styles')[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}%)`;
    }
});