Why Learn about Arrays?

We have been creating items on the screen, and they have been moving, and that has been fantastic. However, we created only two items along with the player.

What happens when I have to add another? Let’s look at some code.

    var x = 50;
    var y = 50;
    var diameter = 25;

Every time one creates a new item on the screen (for example a circle) and wants it to move around on the screen and possibly change size, one must create three variables for each shape. Not bad if only two shapes are created. What happens if one must create 500 shapes?

At the moment, we would have to do something like this.

    var x = 50;
    var y = 50;
    var diameter = 25;
    var x1 = 150;
    var y1 = 150;
    var diameter1 = 125;

    function setup()
    {
        createCanvas(800,600);
    }

    function draw()
    {
        circle(x,y,diameter);
        circle(x1,y1,diameter1)
    }

With arrays, one can create an array to hold all the information and then create shapes using the arrays instead of having individual variables for each x, y and diameter.

If you want to make sure the circles appear, give it a try here!