Animation using multiple ellipses and controlled using keyPressed - processing

Question

The code I have here is an animation that shows one circle that moves the way I'd like it to. I'd like to have 10 circles and I assume I use a loop or possibly an array but I'm not quite sure how to do that. At the same time, I want to make it so that at first the animation doesn't move but starts moving when I press a specific key and stops when I press the same key.
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x;
float y;
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void setup() {
background(255);
size(400, 200);
x = random(dia/2, width-dia/2);
y = random(dia/2, height-dia/2);
}
void draw() {
background(255);
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if(speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if(speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if(speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if(speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}

Answer 1

You can get multiple circles by encapsulating the data you need to draw a circle into a class. It might look something like this:
Circle c;
void setup() {
size(400, 200);
c = new Circle();
}
void draw() {
background(255);
c.draw();
}
class Circle {
color a = color(random(255), random(255), random(255), random(125, 250));
float dia = random(60, 80);
float x = random(dia/2, width-dia/2);
float y = random(dia/2, height-dia/2);
float speedX = random(-3, 3);
float speedY = random(-3, 3);
void draw() {
noStroke();
fill(a);
ellipse(x, y, dia, dia);
x = x + speedX;
y = y + speedY;
if (speedX > 0 && x >= width - dia/2) {
speedX = speedX * -1;
}
if (speedX < 0 && x <= dia/2) {
speedX = speedX * -1;
}
if (speedY > 0 && y >= height - dia/2) {
speedY = speedY * -1;
}
if (speedY < 0 && y <= dia/2) {
speedY = speedY * -1;
}
}
}
Then to get multiple circles, you'd just create multiple instances of your Circle class and add them to an ArrayList:
ArrayList<Circle> circles = new ArrayList<Circle>();
void setup() {
size(400, 200);
for (int i = 0; i < 5; i++) {
circles.add(new Circle());
}
}
void draw() {
background(255);
for (Circle c : circles) {
c.draw();
}
}
For the user interaction, have a look at the event methods like mousePressed() or keyPressed(). The Processing reference should be your first stop. Good luck.