| title | bookCollapseSection | weight | p5js-widget |
|---|---|---|---|
FRI | Arrays |
false |
30 |
true |
Arrays enable you to store multiple values under a single variable name. JavaScript arrays are really flexible and allow you to do many things that are not possible with arrays in many other programming languages:
- JavaScript arrays can be resized
- JavaScript arrays can contain a mix of different data types. There are also special arrays that only contain specific data types.
There are two ways to declare an array
let arr = new Array();
let arr = [];Usually, you will use the second option and you can already add elements to the array.
let cities = ["Helsinki", "Espoo", "Vantaa"];You can get each element in the array by using its index number in square brackets:
let cities = ["Helsinki", "Espoo", "Vantaa"];
console.log(cities[0]);
console.log(cities[1]);
console.log(cities[2]);{{}} Remember that we start counting from 0! {{}}
{{}} let cities = ["Helsinki", "Espoo", "Vantaa"];
function setup(){ createCanvas(200, 200); }
function draw() { background(130,80,120); fill(255); text(cities[0], 20, 20); text(cities[1], 20, 40); text(cities[2], 20, 60); }
{{}}
You can change each individual element like you would a normal variable:
let cities = ["Helsinki", "Espoo", "Vantaa"];
cities[2] = "Rovaniemi";
console.log(cities); // now ["Helsinki", "Espoo", "Rovaniemi"]Or you can add a new element:
let cities = ["Helsinki", "Espoo", "Vantaa"];
cities[3] = "Inari";
console.log(cities); // now ["Helsinki", "Espoo", "Vantaa", "Inari"]You can get the total length of the array using length
let cities = ["Helsinki", "Espoo", "Vantaa"];
console.log(cities.length); // prints out 3Since we learned how to use for loops in the previous lesson, we are able to loop through all of the elements in an array in a convenient way.
{{}} let cities = ["Helsinki", "Espoo", "Vantaa"];
function setup(){ createCanvas(200, 200); }
function draw() { background(130,80,120); fill(255);
for(let i = 0; i < cities.length; i++){ let x = 20; let y = 20 + i * 20; text(cities[i], x, y); } } {{}}
We can use multiple arrays to store different properties. For example, let's try to draw a bunch of randomly placed shapes on the screen. We can create an array for the x coordinates of our shapes.
let x = [];We can use a for loop in the setup part of our code to fill the array with random values. Note that I added another variable called num so that we can easily change how many elements we have in the array.
let num = 10;
let x = [];
// this for loop goes to the setup function:
for(let i = 0; i < num; i++){
x[i] = random(width);
}{{}} let num = 10; // how many shapes do we want let x = [];
function setup(){ createCanvas(200, 200); // we can use a for loop to fill the array with random values for(let i = 0; i < num; i++){ x[i] = random(width); } }
function draw() { background(130,80,120); noFill(); stroke(255);
for(let i = 0; i < num; i++){ circle(x[i], 100, 20); } } {{}}
This seems to work, so we can do the same thing for the y and the size s of the circles.
{{}} let num = 10; // how many shapes do we want let x = []; let y = []; let s = [];
function setup(){ createCanvas(200, 200); // we can use a for loop to fill the array with random values for(let i = 0; i < num; i++){ x[i] = random(width); y[i] = random(height); s[i] = random(10,30); } }
function draw() { background(130,80,120); noFill(); stroke(255);
for(let i = 0; i < num; i++){ circle(x[i], y[i], s[i]); } } {{}}
{{}} Once we learn about objects, we can do this in a more efficient way. {{}}
Now that we have a way to keep track of the coordinates of each circle using arrays, we can start modifying those values. For example, let's add the random walk behavior to each circle.
for(let i = 0; i < num; i++){
x[i] = x[i] + random(-3,3);
y[i] = y[i] + random(-3,3);
circle(x[i], y[i], s[i]);
}{{}} let num = 10; // how many shapes do we want let x = []; let y = []; let s = [];
function setup(){ createCanvas(200, 200); // we can use a for loop to fill the array with random values for(let i = 0; i < num; i++){ x[i] = random(width); y[i] = random(height); s[i] = random(10,30); } }
function draw() { background(130,80,120); noFill(); stroke(255);
for(let i = 0; i < num; i++){ x[i] = x[i] + random(-3,3); y[i] = y[i] + random(-3,3); circle(x[i], y[i], s[i]); } } {{}}
{{}} let num = 10; // how many shapes do we want let x = []; let y = []; let xVel = []; let yVel = []; let s = [];
function setup(){ createCanvas(200, 200); // we can use a for loop to fill the array with random values for(let i = 0; i < num; i++){ // the starting point is the middle of the screen // so that the circles don't get stuck to the walls x[i] = width/2; y[i] = height/2; s[i] = random(10,30); xVel[i] = random (-5,5); yVel[i] = random (-5,5); } }
function draw() { background(130,80,120); noFill(); stroke(255);
// We do the for loop twice // First one deals with the animation of the shapes // The second one just draws them // You could do both in the same loop but this structure makes things a bit clearer
// 1st loop, update the values for(let i = 0; i < num; i++){ x[i] = x[i] + xVel[i]; y[i] = y[i] + yVel[i];
if(x[i] >= width - s[i]/2 || x[i] <= s[i]/2){
xVel[i] = -xVel[i];
}
if(y[i] >= height - s[i]/2 || y[i] <= s[i]/2){
yVel[i] = -yVel[i];
}
}
// 2nd loop, draw for(let i = 0; i < num; i++){ circle(x[i], y[i], s[i]); } } {{}}
Practice using the for loop and arrays. You are free to experiment with any of the things we have learned so far but combine it with the for loop. Or make adjustments to the examples we created in class.
{{}} If you don't have any ideas on what do do, you can try to do one of the following:
- Use the for loop to draw a grid of shapes that each should have a unique random attribute color, size, strokeWeight etc.
- Do the bouncing ball example, but with 1000 shapes that change their color individually when they hit the wall.
{{}}