# Animated gradient blur

**URL:** <https://discourse.processing.org/t/animated-gradient-blur/38956>\
**Category:** Project Guidance\
**Created:** [September 24, 2022, 6:20am UTC](https://discourse.processing.org/t/animated-gradient-blur/38956 "2022-09-24T06:20:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dragodiv](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dragodiv](https://discourse.processing.org/u/dragodiv)\
**Post date:** [September 24, 2022, 6:20am UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/1 "2022-09-24T06:20:47Z")

</div>

Hi

How can we do the below animated gradient blur?? how can we get the gradient effect animated. Any pointers will be of great help.

> **[Erica Anderson | Gif background, Glitch gif, Aesthetic gif](https://www.pinterest.com/pin/692428511472313556/sent/?invite_code=12786533d41d4ff2b6a423b9e84a2b8e&sender=312859642772332038&sfo=1)**
>
> Dec 20, 2021 - This Pin was discovered by Olgerda. Discover (and save!) your own Pins on Pinterest

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 24, 2022, 10:03am UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/2 "2022-09-24T10:03:20Z")

</div>

Hi @dragodiv,

you can checkout the concepts of …

Cheers  
— mnse

…Perlin Noise:

[![](https://img.youtube.com/vi/ZI1dmHv3MeM/maxresdefault.jpg "Coding Challenge #136.1: Polar Perlin Noise Loops") ](https://www.youtube.com/watch?v=ZI1dmHv3MeM)

[![](https://img.youtube.com/vi/c6K-wJQ77yQ/maxresdefault.jpg "Coding Challenge #136.2: Perlin Noise GIF Loops") ](https://www.youtube.com/watch?v=c6K-wJQ77yQ)

…FlowFields:

[![](https://img.youtube.com/vi/BjoM9oKOAKY/hqdefault.jpg "Coding Challenge #24: Perlin Noise Flow Field") ](https://www.youtube.com/watch?v=BjoM9oKOAKY)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 24, 2022, 12:09pm UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/3 "2022-09-24T12:09:41Z")

</div>

Hello @dragodiv,

> [@dragodiv](#):
>
> Any pointers will be of great help.

These are on the [Processing website](https://processing.org/):

[https://processing.org/reference/noise\_.html](https://processing.org/reference/noise_.html)

Check out the _Math_ section in _Examples_:  
[https://processing.org/examples](https://processing.org/examples)

You can always go down the rabbit hole and do a search in the forum.

Experiment and explore!

Start simple and build on that…

`:)`

---

<div class="post-metadata">

**Author:** ![dragodiv](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dragodiv](https://discourse.processing.org/u/dragodiv)\
**Post date:** [September 24, 2022, 4:53pm UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/4 "2022-09-24T16:53:36Z")

</div>

Yes yes had gone through perlin noise and flow fleids…but wasnt sure about how can the gradient change as the flow…?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 24, 2022, 5:00pm UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/5 "2022-09-24T17:00:09Z")

</div>

Hi @dragodiv,

ie. you can map the noise value (or the angle) to colors…

> **[Reference](https://processing.org/reference/lerpColor_.html)**
>
> Calculates a color between two colors at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very ne…

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![dragodiv](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dragodiv](https://discourse.processing.org/u/dragodiv)\
**Post date:** [September 24, 2022, 6:23pm UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/6 "2022-09-24T18:23:38Z")

</div>

Ohh okok… Will go through that and apply it and see… Thank you all for response…will post the code if I get close… 🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 24, 2022, 7:00pm UTC](https://discourse.processing.org/t/animated-gradient-blur/38956/7 "2022-09-24T19:00:43Z")

</div>

Hello @dragodiv ,

HSB colorMode() is fun to work with…

In the 3D Perlin noise example set the _hue_ instead of the _brightness_.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/e/6eae1b8005fc9f3efcc2ccaa693dfeb8fc5a8a1c.png)

Reference:  
[https://processing.org/reference/colorMode\_.html](https://processing.org/reference/colorMode_.html)

`:)`