shadowBlur on circles Particles

p5.js Coding Questions
1

I have some problems when using shadowBlur, I created particles just like this https://p5js.org/examples/simulate-particles.html
But when I using this code to make a shadowBlur on circles, it’s very lag and bad performance

createParticle() {
    noStroke();
    fill('rgba(200,169,169,0.5)');
    drawingContext.shadowBlur = 10; // this line
    drawingContext.shadowColor = 'white'; // this line
    circle(this.x,this.y,this.r);
  }

I wanna drawing circles like this and multiple colors. This image is an example for one color:


Thank you so much
2

p5.js is excellent in many ways, but its not always the most efficient and performant way to push pixels to your screen. Depending on your computer and what the sketch is doing, you may experience slow frame rates. The example you provide renders at 20 FPS on my machine (compared to 60 FPS for the version without blur).

That said, there are things you can to optimize p5.js code for performance. You could also try switching rendering mode from the default P2D to WebGL. WebGL makes better use of the graphics card, and that will probably get rid of the lag you’re experiencing.

Getting started with WebGL in p5 is a good read.

1 Like