Initializing stacked circles in setup() vs draw() draws only one circle

Hello all :nerd_face:

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. :slightly_smiling_face:
Any insight is as always greatly appreciated!
:nerd_face:

1 Like

Hello,

I added two dimensional arrays to your code with success.

Just enough to get you started:

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 [numCircs][div];
float [][] y = new float [numCircs][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[j][i] = cx + cos(angle) * r*j; // r*j = increase radius of circle each time
      y[j][i] = cy + sin(angle) * r*j;
    }
    //endShape();
  }
}

void draw() {
  background(255);

// Your code...

}

void update() {
  for (int j = 0; j < 5; j++) {
 
// Your code...
  }  
}

And voila!

image

image

Reference:

:)

2 Likes

Hello @glv and thank you!!

2D arrays were not on my radar at all for this!
Works perfectly and I can see why. :slightly_smiling_face:

:nerd_face:

2 Likes