I had an error when running this initially with the size() cannot be used here, see https://processing.org/reference/size_.html —

I figured out in some cases size() must be called in settings() example below:

void settings() { size(1000, 760, P2D); }

Great code!
I actually did the exact same thing, also after watching Shiffman's tutorial on youtube.
I encountered the exact same problem as you with the "ArrayOutOfBounds"- yaddi yadda.
Funny thing is I actually came up with the same solution as you but later came up with an alternative one;
in the "edges()" function in the Particle class, you make sure that the particles never reach the edges of the screen. like this:
instead of:
if (x > width) { x = 0; }
you write this:
if (x > width - 1 ) { x = 1; }

Although Im still curious as to why Shiffman didn't expericen the same problem as we did. Have you found out anything about it? I figure it has something to do with some difference between Processing and p5js, but I have no clue...