Adding the twirl effect to the background in p5js

[Gwerbyn]

Is there any way to create the twirl effect to the background in p5js?? I want to be able to do stuff like this: https://gyazo.com/7380ed923b08a07f632e4106fa0fb56e with code. If anyone knows how to do this i would really appreciate the help. Thanks in advance!

[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.