Skip to content

Handle Multiple Data with Arrays

In this chapter, you will learn how to use arrays to handle large amounts of the same type of data concisely. You will be able to apply the same operation to many elements to animate them uniformly.

Declaring and Using Arrays

Consider creating an animation with many shapes. In order to display the shapes at different positions, it is necessary to prepare a lot of information including coordinates. You have learned to declare variables that represent each coordinate, but as the number of data increases to 10 or 100, it becomes troublesome to write or modify the code.

[Example 8-1. Move multiple circles]

Arrays allow you to write the same type of data together. An array, in short, is a ordered set of variables. Variables are identified by a [index] in the array name and can be used like x[0], x[1], x[2], .... An array can be understood as a row of variables, each in an area that can store a large amount of data, with a index assigned to it.

By declaring an array using the brackets [] as follows, you can create an array with an initial value. Note that the array numbering starts from 0, so an array with n elements will be numbered from 0 to n-1.

function setup(){
    let x = [50, 90, 180, 200, 160];

    print(0 + ", " + x[0]);
    print(1 + ", " + x[1]);
    print(2 + ", " + x[2]);
    print(3 + ", " + x[3]);
    print(4 + ", " + x[4]);
}

The convenience of arrays is that you can use variables for indices, so the above program can be rewritten as follows with a for loop

function setup(){
    let x = [50, 90, 180, 200, 160];

    // The number of array elements is obtained as array.length.
    for(let i=0; i<x.length; i++){
        print(i + ", " + x[i]);
    }
}

The for loop can also be used to programmatically determine the contents of an array, without having to enter the initial values manually. In this case, empty parentheses are used to declare an array with no elements, and you can later add elements by assigning variables to the appropriate numbers. Arrays can also be print() directly.

function setup(){
    let x = [];

    for(let i=0; i<10; i++){
        x[i] = i*20;

        // Display the number of elements to confirm that an element has been added.
        print("i = " + i + ", length = " + x.length)
        print(x);
    }
}

Here is the source code for Example 8-1. The y-coordinates of each circle are declared as an array. You can see that the elements of the array are read and written sequentially in the for loop. If you want to apply a certain operation to a large number of shapes, it is a common practice to combine an array and a for statement to access all the elements.

let circleY = [50, 90, 180, 200, 160];

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(50);

  for (let i = 0; i < circleY.length; i++) {
    let circleX = 50 * (i + 1);
    circle(circleX, circleY[i], 25);

    circleY[i] += 2;

    if (circleY[i] > height) {
      circleY[i] = 0;
    }
  }
}

Exercises

Exercise 1

The following program, which was used in the previous homework, moves a ball by adding its speed (xspeed, yspeed) to its position (x, y) every frame.

// ball Position
let x = 20;
let y = 20;

// ball velocity
let xspeed = 5;
let yspeed = 2;

let r = 10; // radius of ball

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);

    circle(x, y, r*2);

    x += xspeed;
    y += yspeed;
}

Rewrite this program according to the following instructions and submit the final product.

  1. Rewrite the positions of the balls into an array and display many (about 100). At this time, the initial position of the balls should be placed in a random position.
  1. In addition, the speed of the ball is also rewritten into the array. Randomize the speed so that the ball moves in various directions.
  1. Adjust the initial positions of all balls to the center of the screen and make them look like an explosion.

Exercise 2

The following program places many circles on the screen.

let x = [];
let y = [];
let size = [];

let n = 50;

function setup() {
  createCanvas(710, 400);

  // initialize location and size of all circles
  for(let i=0; i<n; i++){
    x[i] = random(width);
    y[i] = random(height);
    size[i] = 30;
  }
}

function draw() {
  background(50, 89, 100);

  for (let i=0; i<n; i++) {
    // update the location of i-th circle here



    // draw i-th circle
    circle(x[i], y[i], size[i]);
  }
}

Change it so that the circle moves around in random directions. Also, add a variation in the size of the circle.