Processing resources (tutorials, references, examples) are here:
https://processing.org/
I encourage you to peruse the website and get familiar with the resources there and use them.
A must read:
Guidelines—Asking Questions
You must first be familiar with the Processing environment and entry level programming; assuming you have some of the basics to get started.
You must understand the co-ordinate system. See the tutorial.
That looks like a grid. < Important concept and keyword when doing a search!
A nested for() loop will be helpful. < Another important concept!
The Processing reference has one example of a nested for() loop:
The points in the example can be made larger or replaced with other shapes.
There may be other examples on the site that use for() and nested for() loops.
After you get a grid you can start manipulating the points with some additional code.
Add interactivity later! There is a tutorial that discussed that.
My initial attempt:
The grid is the first step and very achievable.
The rect() and spacing is the next challenge!
You can space them with increasing and decreasing values along each row and column.
Only after you master the above you can consider more advanced approaches.
Try it with just a one row first. The columns can be added after and you will start to see how that works with some (maybe lots of) coding.
I like to experiment and have fun with coding!
Once I progressed (this may be advanced for a beginner) I used sine waves and spacing along the y for equal increments along x for the rect() size:
Shows the spacing used (blue points and lines on left):
Give consideration to interactivity and variables you are using but add that last.
One step at a time!
Have fun!
:)