Adding the twirl effect to the background in p5js

[jeremydouglass]

I am not a shader expert, but you can create a twirl effect on an image with GLSL shaders.

Twirl filter in GLSL

And p5.js has support for shaders:

reference | p5.js

Here is a p5.js shader template: https://codepen.io/dollee/pen/XEdqyM

…and here are some examples of shader image effects in p5.js:

There are also many search results for twirl shader, swirl shader, whirlpool shader, etc.

One things to be careful about is that working shader code you find sometimes needs to be adapted:

@hamoid

The uniform names are different in every platform (like ShaderToy, shdr, Procesing, openFrameworks, etc). So you can’t unfortunately copy paste the shaders from shdr to Processing.