Hello all

This is an extension of a previous topic thread here:

Updating stacked circles drawn with curveVertex() and for-loop

But the focus is a bit different to warrant a new thread perhaps.

I have moved initializing the stacked circles from draw into setup. The reason, is that in draw the circles update differently (like an animated buzz) than I would like.

Initializing in setup the edges update in a more amorphous/unstructured mannerâ€“the intended goal.

However, the problem is that only one circle is drawn, I lose the stacking.

I cannot figure out why this is happening.

Iâ€™ve tried numerous waysâ€“adding additional loops, different update function locations, duplicate beginShape/endShape, etc.

**Attaching the 2 codes below.**

**The first one** is the animated buzz effect, not what Iâ€™m going for.

**The second one** is amorphous, what I am going for **BUT there are missing circles**.

**VERSION ONE**

```
int div = 8; //# of points around the circle
int numCircs = div-3; //# of loops to draw 4 nested circles
int addPoints = div-5; //# of additional points to complete circle shape
float [] x = new float [div];
float [] y = new float [div];
float cx; // center x of circle
float cy; // center y of circle
float r = 20; // smallest circle radius in the nest of circles
float section = radians(360/div);
void setup() {
size (400, 400);
cx = width/2;
cy = height/2;
noFill();
stroke(0);
}
void draw() {
background(255);
for (int j = 1; j < numCircs; j++) { //loops 4 times to draw 4 circles
beginShape();
for (int i = 0; i < div; i++) { //plots the curveVertex points around the circle
float angle = i*section;
x[i] = cx + cos(angle) * r*j; // r*j = increase radius of circle each time
y[i] = cy + sin(angle) * r*j;
}
for (int i = 0; i < div; i++) {
curveVertex(x[i], y[i]); // curveVertex x,y positions to draw from
circle(x[i], y[i], 10); // reference to show placement of x,y positions
update();
}
for (int i = 0; i < addPoints; i++) {
curveVertex(x[i], y[i]); // add additional points to complete full circle
}
endShape();
}
}
void update() {
float off = 0.5;
for (int i = 0; i < 8; i++) {
x[i] += random(-off, off);
y[i] += random(-off, off);
}
}
```

**VERSION TWO**

```
int div = 8; //# of points around the circle
int numCircs = div-3; //# of loops to draw 4 nested circles
int addPoints = div-5; //# of additional points to complete circle shape
float [] x = new float [div];
float [] y = new float [div];
float cx; // center x of circle
float cy; // center y of circle
float r = 20; // circle radius
float section = radians(360/div);
void setup() {
size (400, 400);
cx = width/2;
cy = height/2;
noFill();
stroke(0);
for (int j = 0; j < numCircs; j++) {
//beginShape();
for (int i = 0; i < div; i++) { //plots the curveVertex points around the circle
float angle = i*section;
x[i] = cx + cos(angle) * r*j; // r*j = increase radius of circle each time
y[i] = cy + sin(angle) * r*j;
}
//endShape();
}
}
void draw() {
background(255);
for (int j = 0; j < numCircs; j++) { //loops 4 times to draw 4 circles
beginShape();
for (int i = 0; i < div; i++) {
curveVertex(x[i], y[i]); // curveVertex x,y positions to draw from
}
for (int i = 0; i < addPoints; i++) {
curveVertex(x[i], y[i]); // add additional control point to complete full circle
}
endShape();
update();
}
}
void update() {
//for (int j = numCircs; j > 0; j--) {
//beginShape();
float off = 0.1;
for (int i = 0; i < 8; i++) {
x[i] += random(-off, off);
y[i] += random(-off, off);
}
//endShape();
//}
}
```

How do I retain the stacking of the circles as in VERSION ONE and have the amorphous edges as in VERSION TWO?

Both codes are runnable.

Any insight is as always greatly appreciated!