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

Hello! In the current approach update() accesses only part of the circle’s vertices. But I need the last three vertices outside of the for-loop to complete the circle shape (I believe…).
How can get all of the vertex values to update?

The code is runnable and shows the issue. It’s probably something simple but I haven’t been able to figure this out. I’ve called the update function at different locations but to no avail.

``````/////////////////////////////////////////////////////////
int div = 8; //# of points around the circle
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

void setup() {
size (400, 400);
cx = width/2;
cy = height/2;

noFill();
stroke(0);
}

void draw() {
background(255);

for (int j = 1; j < 5; 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;
curveVertex(x[i], y[i]); // x,y positions to save to array
update();
}
//update();
//update();
endShape();

//update();
}
//update();
}
void update() {
float off = 1;
for (int i = 0; i < div; i++) {
x[i] += random(-off, off);
y[i] += random(-off, off);
}
}
``````

As always, any guidance is most welcome! 1 Like

Hello,

My brief exploration of this:

``````//https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097/2

/////////////////////////////////////////////////////////
int div = 8; //# of points around the circle
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

void setup()
{
size (600, 300);
cx = width/2;
cy = height/2;

noFill();
stroke(0);
noLoop();
}

void draw()
{
background(255);
strokeWeight(3);

translate(width/4, height/2);

for (int j = 1; j < 5; 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] = cos(angle) * r*j; // r*j = increase radius of circle each time
y[i] = sin(angle) * r*j;
stroke(255, 0, 0);
curveVertex(x[i], y[i]); // x,y positions to save to array
//update();
}
stroke(0, 255, 0);
//update();
endShape();

//update();
}
translate(width/2, 0);
update();
}

void update()
{
float off = 10;
beginShape();
for (int i = 0; i < div; i++)
{
x[i] += random(-off, off);
y[i] += random(-off, off);
curveVertex(x[i], y[i]);
}
endShape();
}

void keyPressed()
{
redraw();
}
``````

It may give you some insights. `:)`

Many thanks @glv !!
I see the problem now. Am posting the revised code for anyone with same question in the future:

``````int div = 8; //# of points around the circle
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

void setup()
{
size (800, 400);
cx = width/2;
cy = height/2;

noFill();
stroke(255, 0, 0);
}

void draw() {
background(255);
strokeWeight(3);

translate(width/4, height/2);

for (int j = 1; j < 5; 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] = cos(angle) * r*j; // r*j = increase radius of circle each time
y[i] = sin(angle) * r*j;

float off = 2;
x[i] += random(-off, off); // offset for each point random movement
y[i] += random(-off, off);

curveVertex(x[i], y[i]); // x,y positions to save to array
pushStyle();
fill(0);
noStroke();
circle(x[i], y[i], 10); // reference points for x,y positions
popStyle();
}

for (int i = 0; i < 3; i++) {
curveVertex(x[i], y[i]); // additional control points to complete full circle
}
endShape();
}
}
`````` 1 Like