 How do I draw multiple ellipses in a circle formation

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.

1 Like

Hello Kashyap,

welcome to the forum!

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

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

}

Then you can calculate the position using cos and sin:

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

2 Likes

Hi Chrisir,

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 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);
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++) {
}
}
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 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) {
x = cos(angle2) * radius + width/2;
y = sin(angle2) * radius + height/2;

}

}
}

1 Like

this belongs into setup

This

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.

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?

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.

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

It’s policy here not to give full code solutions

Chrisir

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

float X;
int mx;
int my;
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);
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");
}
}
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);
}```

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

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

a = 255;
}//Ball

void move() {
angle += 20;
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);
}
}
1 Like

Does it work?

What doesn’t?

Do you have a question?

Just keep working on it, mate.

In move, don‘t change the angle.

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