# How do I draw multiple ellipses in a circle formation

**URL:** <https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059>\
**Category:** Processing\
**Tags:** homework\
**Created:** [December 11, 2021, 5:57pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059 "2021-12-11T17:57:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kashyap](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@Kashyap](https://discourse.processing.org/u/Kashyap)\
**Post date:** [December 11, 2021, 5:57pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/1 "2021-12-11T17:57:02Z")

</div>

![20211211_125335](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91a0daeffe3f805c1b8b45a89707e91d19e140d6.jpeg)  
I need to create a code that allows me to draw any number of ellipses in a circular formation moving outwards (sort of like a firework). Your help will be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 11, 2021, 6:11pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/2 "2021-12-11T18:11:08Z")

</div>

Hello [Kashyap](https://discourse.processing.org/u/Kashyap),

welcome to the forum!

You can achieve this when you use a for-loop with an angle, e.g.

```auto

for(int angle=0; angle<=360; angle+=10) {

}

```

Then you can calculate the position using cos and sin:

```auto
float radius = 200; 
float angle2 = radians(angle); 
float x = cos(angle2) * radius + width/2; 
float y = sin(angle2) * radius + height/2; 

ellipse(x,y,20,20);

```

to make them fly, increase radius every step radius++; and declare it before setup().

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![Kashyap](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@Kashyap](https://discourse.processing.org/u/Kashyap)\
**Post date:** [December 11, 2021, 6:20pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/3 "2021-12-11T18:20:16Z")

</div>

Hi Chrisir,

Thank you for your help.  
This is my code but it does not seem to be working.  
Would it be possible if you could tell me what I did wrong?

float X;  
int mx;  
int my;  
float rad;  
float Y;  
float R;  
float G;  
float B;  
float w;  
float h;  
ArrayList ballList;  
int timer;  
int amount;  
int ball;  
int move = 10;  
Ball b;

void setup() {

size(1300, 700);  
rad = 50;  
mx = 5;  
my = 5;  
ballList = new ArrayList();  
amount = 1000;  
ball= 135;  
h= 10;  
w= 100;  
frameRate(200);

}

void draw() {

background(0);  
if (timer\< millis()) {  
X = 25;  
Y= random(height/2 - 180, height/2);  
timer = timer + amount;  
for (int j =0; j \< ball; j++) {  
ballList.add (new Ball(Y));  
}  
}  
for (int i = ballList.size()-1; i \>=0; i–) {  
Ball b =ballList.get(i);

```
b.display();
b.move();
if (b.a < 1) {
  ballList.remove(i);

```

}  
}  
}

* * *

class Ball {

color c = color(random(0, 255), random(0, 255), random(0, 255));  
float a;  
float radius;  
float angle2;  
float x;  
float y;

Ball(float \_Y) {  
x = mouseX;  
y = \_Y; //mouseY;

```
a = 255;

```

}//Ball

void display() {  
noStroke();  
c-=3 ;  
a-=3;  
fill(c, a);  
ellipse(x, y, 20, 20);  
}

void move() {  
for (int angle=0; angle\<=360; angle+=10) {  
radius = 200;  
angle2 = radians(angle);  
x = cos(angle2) \* radius + width/2;  
y = sin(angle2) \* radius + height/2;  
radius++;

```
}

```

}  
}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 11, 2021, 6:26pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/4 "2021-12-11T18:26:46Z")

</div>

> [@Kashyap](#):
>
> ```auto
> for (int j =0; j < ball; j++) {
> ballList.add (new Ball(Y));
> }
> 
> ```

this belongs into setup

This

> [@Kashyap](#):
>
> for (int angle=0; angle\<=360; angle+=10) {

must be deleted. You can have it in setup() instead. Then pass angle to it instead of Y.

(The for loop handles ALL balls but in the class we only look at ONE ball. )

Instead make radius = 200; in the class BUT before its constructor

**The function `move()`**

The function `move()` increases the `radius++;` and calculates x and y again. No for loop needed.

---

<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 11, 2021, 8:14pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/5 "2021-12-11T20:14:08Z")

</div>

Hello,

Some resources:

- [https://processing.org/tutorials/trig](https://processing.org/tutorials/trig)
- [Trigonometry and Polar Coordinates - Nature of Code Video #3.2 · The Coding Train](https://thecodingtrain.com/more/archive/nature-of-code/3-Oscillation/3.2-Trigonometry-and-Polar-Coordinates.html)

`:)`

---

<div class="post-metadata">

**Author:** ![Kashyap](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@Kashyap](https://discourse.processing.org/u/Kashyap)\
**Post date:** [December 12, 2021, 6:22pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/6 "2021-12-12T18:22:31Z")

</div>

Im extremely sorry however I don’t understand what the code is supposed to look like. Is there any way you could show me the exact changes?

---

<div class="post-metadata">

**Author:** ![Kashyap](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@Kashyap](https://discourse.processing.org/u/Kashyap)\
**Post date:** [December 12, 2021, 6:23pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/7 "2021-12-12T18:23:56Z")

</div>

Thank you for your help, I took a look at the links, however they only show how to draw 1 ellipse at a time. For this project, I need to create multiple ellipses all together.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 12, 2021, 6:33pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/8 "2021-12-12T18:33:11Z")

</div>

Okay.

Here we go.

You have an ArrayList of class Ball.

Fill it in setup ()

Move and show it in draw()

Since you for loop over the ArrayList in draw () you don’t want to have a for loop in move(). (The content of the class takes care of ONE ball only)

The radius increases but put the initial definition of radius as 0 at the start of the class and not into the move() method.

Otherwise the radius can’t increase in move()

Show your entire code/ your attempt

Then I can give advice

It’s policy here not to give full code solutions

Chrisir

---

<div class="post-metadata">

**Author:** ![Kashyap](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@Kashyap](https://discourse.processing.org/u/Kashyap)\
**Post date:** [December 12, 2021, 11:22pm UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/9 "2021-12-12T23:22:03Z")

</div>

Thank you so much for your help. I have made the changes you have told me to. What should I do next?

````auto
float X;
int mx;
int my;
float rad;
float Y;
float R;
float G;
float B;
float w;
float h;
ArrayList <Ball> ballList;
int timer;
int amount;
int ball;
int move = 10;
Ball b;

void setup() {

  size(1300, 700);
  rad = 50;
  mx = 5;
  my = 5;
  ballList = new ArrayList(ball);
  amount = 1000;
  ball= 18;
  h= 10;
  w= 100;
}

void draw() {

  background(0);
background(0);
  if (timer< millis()) {
    X = 25;
    Y= random(0, height/2);
    timer = timer + amount;
    for (int j =0; j < ball; j++) {
      println("run");
      ballList.add (new Ball(Y));
    }
  }
  for (int i = ballList.size()-1; i >=0; i--) {
    Ball b = ballList.get(i);

    b.display();
    b.move();
    if (b.a < 1) {
      ballList.remove(i);
  }
  } 
displayShooter();
}

void displayShooter() {
  fill(255);
  rect(mouseX - w/2, height - h, w, h);
  rect(mouseX - 10/2, height - 30, 10, 30);
  ellipse(mouseX, height -20 + move, 10, 10);
}```

____________________________________________

````

```auto
class Ball{
color c = color(random(0, 255), random(0, 255), random(0, 255));
float a;
float radius;
float angle2;
float X;
float y;
float angle;

Ball (float _Y){
X = mouseX;
Y = _Y; //mouseY;

a = 255;
}//Ball

void move() {
radius++;
angle += 20;
angle2 = radians(angle);
X = cos(angle2) * radius + width/2;
Y = sin(angle2) * radius + height/2;
}
void display() {
noStroke();
c-=3 ;
a-=3;
fill(c, a);
ellipse(X, Y, 20, 20);
}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 13, 2021, 12:01am UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/10 "2021-12-13T00:01:21Z")

</div>

Does it work?

What doesn’t?

Do you have a question?

Just keep working on it, mate.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 13, 2021, 12:02am UTC](https://discourse.processing.org/t/how-do-i-draw-multiple-ellipses-in-a-circle-formation/34059/11 "2021-12-13T00:02:26Z")

</div>

In move, don‘t change the angle.

As I said, each ball should have its own angle given to it in setup ()