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

**URL:** <https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097>\
**Category:** Coding Questions\
**Created:** [December 9, 2022, 9:05pm UTC](https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097 "2022-12-09T21:05:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 9, 2022, 9:05pm UTC](https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097/1 "2022-12-09T21:05:58Z")

</div>

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.

```auto
/////////////////////////////////////////////////////////
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
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 < 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();
    curveVertex(x[0], y[0]); // add additional control point to complete full circle
    curveVertex(x[1], y[1]); // add additional control point to complete full circle
    curveVertex(x[2], y[2]); // add additional control point to complete full circle
    //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!  
🤓

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 10, 2022, 1:21am UTC](https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097/2 "2022-12-10T01:21:37Z")

</div>

Hello,

My brief exploration of this:

```auto
//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
float section = radians(360/div);

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);
    curveVertex(x[0], y[0]); // add additional control point to complete full circle
    curveVertex(x[1], y[1]); // add additional control point to complete full circle
    curveVertex(x[2], y[2]); // add additional control point to complete full circle
    //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]); 
    }
  curveVertex(x[0], y[0]); // add additional control point to complete full circle
  curveVertex(x[1], y[1]); // add additional control point to complete full circle
  curveVertex(x[2], y[2]); // add additional control point to complete full circle
  endShape();
  }
  
void keyPressed()
  {
  redraw();
  }

```

It may give you some insights.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/3/93b06fb814142aa0b596e32064ae9b4ea7a12f8f.png)

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 10, 2022, 2:00am UTC](https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097/3 "2022-12-10T02:00:06Z")

</div>

Many thanks @glv !!  
I see the problem now. 🙂

Am posting the revised code for anyone with same question in the future:

```auto
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
float section = radians(360/div);

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();
  }
}

```

🤓