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!
