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

Processing Coding Questions
1

Hello! :nerd_face:

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. :thinking:
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
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!
:nerd_face:

1 Like
2

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
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

:)

3

Many thanks @glv !!
I see the problem now. :slightly_smiling_face:

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

:nerd_face:

1 Like