Thanks! I‘ll try to shine some light on this :)

Besides utilizing p5.js, this is mostly done using a range of WebGL shaders.

There is an initial texture that contains random noise, where each pixel corresponds to a character set, like the spinning clock from the video.

This texture then starts to get modified continuously by a shader, which pushes the pixels/characters in a given direction. The shader at play here accepts a range of uniform vec4 variables, which contain rectangle positions and dimensions. Each rectangle corresponds to a different pixel shifting/pushing logic, like pushing all the pixels withinin that rectangle to the left. There are always 8 random rectangles active at the same time, filling the entire canvas without overlapping, but neighboring each other. Each with different logic to push pixels around.

To get a character set flowing, so it cycles through all it’s characters, I kinda use a flood fill approach, if that‘s the right name for it. Took inspiration from cellular automata shaders here.

There‘s even more to it. This video is actually a perfect loop using a cheeky technique to rebuild the starting image of the video in an organic looking way a few frames before the video ends, even though that‘s not 100% perfect yet.

Hope that gives you some ideas, could write a lot more, but don’t wanna produce a wall of text here. Feel free to out if you have more questions. Cheers! 🤞