# Looking for Assistance or direction for dynamic glitter effect with blurr fading
**URL:** https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258
**Category:** Coding Questions
**Created:** [March 13, 2019, 10:24am UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258 "2019-03-13T10:24:23Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@digimbyte](https://discourse.processing.org/u/digimbyte)
#### Post date: [March 13, 2019, 10:24am UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/1 "2019-03-13T10:24:23Z")
Hello, I am new to the world of canvas and I am looking for something quick, simple, and optimized for a clients website.
the website has an SVG stencil of the logo and it needs particle effects on it, I’m familiar enough to know that pure particle effects are most likely undesirable and would hinder the cpu.
so, my idea is to mask the SVG with a png that has perlin noise.
then simply tile that over the logo and then copy shift it to the side, tinting and fading to black
the desired effect can be seen here [LINK](https://i1.sndcdn.com/avatars-000425818446-dpzfvw-t500x500.jpg)
this effect would most likely cover a whole screen, the reason we are not using a pre-rendered effect is due to the client’s desire to have it always well presented and as free as possible from image artifacts
this isn’t my particular area but if needed, I am willing to pay for this to be put together.
---
### Author:  [@philipplehmann](https://discourse.processing.org/u/philipplehmann)
#### Post date: [March 13, 2019, 12:32pm UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/2 "2019-03-13T12:32:41Z")
Hmm, I am not sure if this will help.
I tried to create the desired effect. However performance is suboptimal.
Here is the sketch anyway.
[https://editor.p5js.org/zuvala/sketches/udDvtnNcY](https://editor.p5js.org/zuvala/sketches/udDvtnNcY)
---
### Author:  [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [March 13, 2019, 10:59pm UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/3 "2019-03-13T22:59:27Z")
a few tweaks to your code and it runs much faster. [link](https://editor.p5js.org/hotfooted/sketches/daPzvaZaW)
---
### Author:  [@philipplehmann](https://discourse.processing.org/u/philipplehmann)
#### Post date: [March 14, 2019, 7:38am UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/4 "2019-03-14T07:38:50Z")
Thanks, I have to read about the differences between get/set and pixels then 🙂
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 15, 2019, 11:56pm UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/5 "2019-03-15T23:56:47Z")
> [@philipplehmann](#):
>
> I have to read about the differences between get/set and pixels
The performance issue is touched on in the three reference pages:
> Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from [pixels[]](https://p5js.org/reference/#/p5/pixels). – [reference | p5.js](https://p5js.org/reference/#/p5/get)
> Note that [set()](https://p5js.org/reference/#/p5/set) will automatically take care of setting all the appropriate values in [pixels[]](https://p5js.org/reference/#/p5/pixels) for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel array.
---
### Author:  [@digimbyte](https://discourse.processing.org/u/digimbyte)
#### Post date: [April 8, 2019, 12:15am UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/6 "2019-04-08T00:15:52Z")
Sorry I didn’t get back sooner, this is a fantastic start!
it’s crazy how something can be achieved with so little code
what I found interesting was that the pixels didn’t seem to conform to the size of the canvas
```auto
createCanvas(600, 600);
img_wind = createImage(width, height);
```
where was width and height defined?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [April 8, 2019, 1:13am UTC](https://discourse.processing.org/t/looking-for-assistance-or-direction-for-dynamic-glitter-effect-with-blurr-fading/9258/7 "2019-04-08T01:13:40Z")
> [@digimbyte](#):
>
> Where was _width_ and _height_ defined?
1. [reference | p5.js](http://p5js.org/reference/#/p5/width)
2. [reference | p5.js](http://p5js.org/reference/#/p5/height)