Good question. It’s not easy to get to there from where you were. I ran your code through the cleaners and fixed it to do the thing:

```
let dots = 360 // Number of dots
let circles = 20 // number of circles
let circlesize
let x = []
let y = []
let distance = 10 // distance between circles
let offset = 0
let baseSize = 100
function setup() {
createCanvas(800, 800);
}
function draw() {
background(220);
offset++
offset%=distance
translate(width / 2, height / 2)
for (i = 0; i < circles; i++) { // Loop to create the number of circle
circlesize = baseSize + i*distance + offset // to create more circles than one
for (o = 0; o < dots; o++) { // loop to create the circles with dots
x[i] = circlesize * cos(radians(o)) // calculates dot position in x direction
y[i] = circlesize * sin(radians(o)) // calculates dot position in y direction
point(x[i], y[i]) // displays the dots
}
}
}
```

Notice that there is an offset variable. This controls how “far” away from being the next-outer circle a circle is. At the start, offset is 0, so the rings have radii of 100, 110, 120, etc. Each frame, offset increases by 1, so the next frame they have 101, 111, 121, etc, then 102, 112, 122, etc… And so on up to offset == 9 (109, 119, 129…). When they hit offset == 10, the modulus operation (offset %= distance) sets the offset back to 0, and the process starts over.

This achieves the desired effect… just run the code. It’s easier to see it working than to explain it.