# Adding the twirl effect to the background in p5js

**URL:** <https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875>\
**Category:** Coding Questions\
**Created:** [January 27, 2019, 12:19pm UTC](https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875 "2019-01-27T12:19:57Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 28, 2019, 6:55pm UTC](https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875/2 "2019-01-28T18:55:34Z")

</div>

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

> **[Twirl filter in GLSL](https://mmmovania.blogspot.com/2011/11/twirl-filter-in-glsl.html)**
>
> I had worked on image processing project back in my high school days and so the last memories returned recently when I wanted to implement ...

And p5.js has support for shaders:

> **[reference | p5.js](https://p5js.org/reference/#/p5/shader)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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

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

> <https://github.com/aferriss/p5jsShaderExamples/tree/gh-pages/4_image-effects>
>
> //github.com/aferriss/p5jsShaderExamples/tree/gh-pages/4\_image-effects

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:

> [@GLSL Shader on 3D Ring not working](https://discourse.processing.org/t/glsl-shader-on-3d-ring-not-working/7757/12):
>
> 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.

---

_[View the full topic](https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875)._