# RGB blur experiments

**URL:** <https://discourse.processing.org/t/rgb-blur-experiments/6364>\
**Category:** Gallery\
**Created:** [December 6, 2018, 11:49am UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364 "2018-12-06T11:49:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 6, 2018, 11:49am UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364/1 "2018-12-06T11:49:07Z")

</div>

I’ve been experimenting with blur and was quite happy about the results so far.

 ![2018-12-03-blur-paint-1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c70e120832bdb366a6d9b22411f6606ca9ec5839.jpeg)

I created classes and shaders that convert simple shapes (imagine a thin curved line with vertices) into thick ones (meshes) with generative masks and photo textures.

 ![2018-12-03-blur-paint-2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/574fa11c263e9d75e4827aca5d7a838bb3e0d0cd.jpeg)

The blur is a optimized rewrite of the shaders found at [https://github.com/gcorallo/ofxBlurUtils](https://github.com/gcorallo/ofxBlurUtils) Notice the subtle blue tint of the blurry parts. You can blur separately each RGB channel.

 ![2018-12-03-blur-paint-3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ed18ddcf281b798fecd6075336dc9a8a751a529f.jpeg)

The shapes you see are all created with the same equation (it’s animated). I store a collection of equations on an ArrayList, and then I can morph from one equation to another. For that I use another class I created, which is an 2D point array interpolator. What it does is to give each interpolated point a slightly different start and end times, so you can morph those shapes between different equations unevenly (some parts morph earlier, some parts later).

 ![2018-12-03-blur-paint-4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/969c386ad234db3d6da6e969d61094d2864cce50.jpeg)

With an integrated Intel GPU on a laptop it toggles between smooth-ish and slow frame rate (when it gets hot). With a better GPU it animates smoothly.

This is how it looks before any of the magic 🙂

 ![2018-12-06-142513_800x800_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/79ee50faa47c6520212ee5dac72c8df14cf7a1a4.png)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [December 6, 2018, 6:04pm UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364/2 "2018-12-06T18:04:52Z")

</div>

This is cool. My brain doesn’t quite understand what it’s looking at. (I mean that as a compliment.) I’d be curious to see the photo textures you used, or to see a video of the animation in action.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [January 28, 2019, 7:31am UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364/3 "2019-01-28T07:31:42Z")

</div>

I will eventually share textures and video, sorry for the delay! I wanted to share some new iterations from the last weeks:

 ![4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/da3a10a2a8b067d149bfe00a78b862d6a677f391.jpeg)  
 ![5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c01bc5abab5943cb8d8b4be55a55c99b6a0ab903.jpeg)  
 ![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1cd5a4010c66424b1071703bf255e653ee39d518.jpeg)  
 ![2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/41ecb1f2bc9bdab7ed4bab535cad3b4a17ba19e6.jpeg)  
 ![3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1d303e75f8bfbe9c919d7f6585c865f16361cd76.jpeg)

---

<div class="post-metadata">

**Author:** ![Mesalcode](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mesalcode/32/9284_2.png) [@Mesalcode](https://discourse.processing.org/u/Mesalcode)\
**Post date:** [June 2, 2020, 5:30pm UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364/4 "2020-06-02T17:30:51Z")

</div>

It’s been over a year. Has the time come?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [June 2, 2020, 6:10pm UTC](https://discourse.processing.org/t/rgb-blur-experiments/6364/5 "2020-06-02T18:10:14Z")

</div>

Hi, no time now to clean up the code, make it easier to use or write about it, but here is an early version of the blur: [https://github.com/hamoid/Fun-Programming/tree/master/processing/ideas/2018/11/pingPongShader](https://github.com/hamoid/Fun-Programming/tree/master/processing/ideas/2018/11/pingPongShader)

Also more details about the project: [Album cover for Floating Spectrum](https://discourse.processing.org/t/album-cover-for-floating-spectrum/14943)

Cheers!

ps. And the way to give a line thickness: [https://github.com/hamoid/Fun-Programming/tree/master/processing/ideas/2018/11/lineNormals](https://github.com/hamoid/Fun-Programming/tree/master/processing/ideas/2018/11/lineNormals) (then each vertex should have a texture coordinate and call `texture()` to go in the direction of the images above)