Looking for Assistance or direction for dynamic glitter effect with blurr fading


#1

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

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.


#2

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


#3

a few tweaks to your code and it runs much faster. link


#4

Thanks, I have to read about the differences between get/set and pixels then :slight_smile:


#5

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/get

Note that set() will automatically take care of setting all the appropriate values in 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.