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 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
2 Likes
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++;
}
}
}
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.
Hello,
Some resources:
- https://processing.org/tutorials/trig
- Trigonometry and Polar Coordinates - Nature of Code Video #3.2 · The Coding Train
:)
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()
Show your entire code/ your attempt
Then I can give advice
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 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);
}```
____________________________________________
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);
}
}
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 ()