# Initializing stacked circles in setup() vs draw() draws only one circle
**URL:** https://discourse.processing.org/t/initializing-stacked-circles-in-setup-vs-draw-draws-only-one-circle/40136
**Category:** Coding Questions
**Created:** [December 12, 2022, 7:59pm UTC](https://discourse.processing.org/t/initializing-stacked-circles-in-setup-vs-draw-draws-only-one-circle/40136 "2022-12-12T19:59:55Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [December 12, 2022, 7:59pm UTC](https://discourse.processing.org/t/initializing-stacked-circles-in-setup-vs-draw-draws-only-one-circle/40136/1 "2022-12-12T19:59:55Z")
Hello all 🤓
This is an extension of a previous topic thread here:
[Updating stacked circles drawn with curveVertex() and for-loop](https://discourse.processing.org/t/updating-stacked-circles-drawn-with-curvevertex-and-for-loop/40097)
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**
```auto
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**
```auto
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!
🤓
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 13, 2022, 12:10am UTC](https://discourse.processing.org/t/initializing-stacked-circles-in-setup-vs-draw-draws-only-one-circle/40136/2 "2022-12-13T00:10:27Z")
Hello,
> [@debxyz](#):
>
> How do I retain the stacking of the circles as in VERSION ONE and have the amorphous edges as in VERSION TWO?
I added two dimensional arrays to your code with success.
Just enough to get you started:
```auto
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!
Reference:
- [Two-Dimensional Arrays / Processing.org](https://processing.org/tutorials/2darray)
`:)`
---
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [December 13, 2022, 1:39am UTC](https://discourse.processing.org/t/initializing-stacked-circles-in-setup-vs-draw-draws-only-one-circle/40136/3 "2022-12-13T01:39:16Z")
> [@glv](#):
>
> I added two dimensional arrays
Hello @glv and thank you!!
2D arrays were not on my radar at all for this!
Works perfectly and I can see why. 🙂
🤓