The p5play library has an awesome feature called Groups that allows us to group similar sprites and define all of their shared properties in one place. For example, take a look at the animation below that periodically creates a ball that falls from the sky. Each ball has the same color, diameter, Y-position, Y-velocity, and bounciness. By creating a Group for these balls, we can define all of these properties in one place:

let ballGroup = new Group();
ballGroup.diameter = 20;
ballGroup.y = -20;
ballGroup.vel.y = 2;
ballGroup.bounciness = 0.5;
ballGroup.color = 'lightblue';

Once the group is defined, it's super easy to create a new sprite from it:

let ball = new ballGroup.Sprite();

The animation above runs this line of code every 20 frames to create a new ball in the ballGroup group. The only difference from our normal sprite creation, let ball = new Sprite(), is the inclusion of the group name, ballGroup.

The other powerful aspect of creating sprites from a Group is that the group acts as a container holding all of the individual sprites. What this means is that it is super easy to perform an action on ALL of the sprites in the group by just using the group name. For example, the animation above has the following code in its draw() function:

if (kb.pressing('r')) {
  ballGroup.color = 'darkmagenta';
} else {
  ballGroup.color = 'lightblue';
}

if (kb.presses('u')) {
  ballGroup.applyForce(0, -200);
}

Notice that the group variable, ballGroup, is used to change the properties of all the balls. Can you figure out what the code does? Try performing the if statement actions in the canvas to see if you're right!