How to create moving abstract mesh gradient background with interactivity

Questions
, ,
22

@jrlazz Just updated the TSL textures to use r171.

23

Hi @TommyWolfheart ā€¦

I made some experiences with only images, not shaders.

The first is using DOMContentLoaded, and the other using the width and height of the image in its name ā€¦ (w#####h#####.jpg).

The first link is:

The second link is:

is work may be useful for some cases of sites. :wink:

PS: Mouse movement affects the image movement too.

24

Hi @PavelBoytchev ā€¦

I found scream.js, tried changing the pathfinding locations, but unfortunately I couldnā€™t bring its code, via CTRL+U in https://boytchev.github.io/tsl-textures/online/scream.html, to run on my home server in version 171.

If we had an example in codepen I think I could do it. :wink:

25

Here it is: https://codepen.io/boytchev/full/XJrMYyV

image

PS. As we a drifting away from the original topic, if you have more questions about the TSL texture, start a new topic.

26

Thank you very much @PavelBoytchev , for your attention, You are a special person.

Now I was able to capture it at home. :wink:

27

Just a little side note, but if you post CodePen /pen/ links on their own line, us forum viewers get a nice inline live demo. :slight_smile:

28

LOL. Thatā€™s like telling someone they might be able to cut through a block of steel with a plastic disposable butter knife (CSS filter/backgdrop-filter), when they actually do need to get and learn to use the plasma cutter (WebGL/WebGPU).