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.
1 Like
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 Likes
a few tweaks to your code and it runs much faster. link
2 Likes
Thanks, I have to read about the differences between get/set and pixels then 
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[]. – reference | p5.js
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.
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
createCanvas(600, 600);
img_wind = createImage(width, height);
where was width and height defined?
