• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Conditionals and Logic
    • Conditionals 1: Boolean Expressions and the If Statement
      • Activity 16 (IF1)
    • Conditionals 2: If/Else Statements
      • Activity 17 (IFELSE1)
    • Conditionals 3: Else If Statements
      • Activity 18 (elseif1)
      • Activity 19
      • Activity 20 (elseif3)
      • Activity 21
    • Logical Operators
      • Activity 22 (And1)
      • Activity 23
      • Activity 24 (SingleRollover)
      • Activity 25 (FourSquareRollover)
      • Activity 26 (MoveWhenPressed)
      • Activity 27 (bouncy ball 1)
      • Activity 28 (bouncy ball 2)
  • Functions
    • Moving Shapes 1
      • Activity 29 (StarBright)
      • Activity 30 (CreatureAtOrigin)
    • Moving Shapes 2
      • Activity 31 (drawCreatureFunction)
      • Activity 32 (BouncingCreatures)
    • Rotating Shapes
      • Activity 33 (RotatingCreatures)
      • Activity 34 (RotatingShapes)
      • Activity 35 (RotatingShapes2)
  • Looping and Arrays
    • Loops 1
      • Activity 36 (ShapeLoop)
      • Activity 37 (RandomLoop1)
    • Loops 2
      • Activity 38 (Deg2Rad)
      • Activity 39 (NumberLoop1)
      • Activity 40 (NumberLoop2)
    • Arrays 1
      • Activity 41
      • Activity 42
      • Activity 43
    • Arrays 2
      • Activity 44
      • Activity 45
      • Activity 46
  • Final Topics
    • Introduction
    • Particle Systems
    • Maze Game
  • Resources

Arrays 1

Arrays are a new type of variable. The variables you know so far can all hold one variable at a time such as:

1
2
3
var x = 10;  // x holds 10
var buttonState = true; // buttonState is true
var greeting = "Howdy!"; // greeting holds the string "Howdy!"

Essentially, each variable is a box with a single value.

An array is a variable that holds multiple values. You can create one like this:

1
var a = [1,2,3,4,5];

The square brackets indicate the variable is an array and any values between the brackets are the elements inside the array.

You can also create an empty array like this:

1
var b = [];

You can retrieve elements of an array like this:

1
2
var c = a[2]; // c contains 3
var d = a[0]; // d contains 1

This is called indexing the array. You place the square brackets *next to* the name of the array and have a number inside, the index number. That retrieves a specific value from the array. Note that indexing starts at 0 not 1. This is standard for most computer languages and a common source of confusion.

Again, indexing arrays starts at 0 not 1.

1
var e = a[1]; // e contains 2

You can ask for the length of an array like this:

1
var len = a.length; // len contains 5

We do something new here. We have the array variable name and then a period (.) and then the variable name “length”. I won’t discuss further how that works except to say that for arrays and special variables called “objects”, you can refer to variables and functions “attached” to the array or object. For now, note there is a special notation involving periods/dots.

Getting the length of an array is important so we can use loops to process an array:

1
2
3
4
5
6
7
var a = [1,2,3,4,5];
var x = 100;
var y = 200;
 
for(var i=0; i < a.length; i++) {
    text("array element " + i + " is " + a[i]), x, y + textHeight() * i);
}

Copy that into a sketch to see it work. Add more elements to the array “a” and see what happens. Don’t forget to copy the code for textHeight() into your sketch from examples above. (I won’t remind you of this in future. textHeight() is useful enough I’m going to assume we can use it all the time. The openprocesing.org console is cumbersome. I’d rather see output on screen.)

Complete Activity 41
Complete Activity 42

You can add and remove elements from arrays while your program is running.

To add an element to the end of your array, use the array function push() as in:

1
2
3
var names = ["Alice", "Bob"];
 
names.push("Carol"); // array is now ["Alice", "Bob", "Carol"]

or

1
2
3
4
var nums = [1,2,3];
nums.push(5);
nums.push(8);
// nums is now [1,2,3,5,8]

You can remove elements from the end of your array using the array function pop() as in:

1
2
var names = ["Alice", "Bob"];
names.pop(); // array is now ["Alice"]

The array pop() function returns the value removed:

1
2
3
var names = ["Alice", "Bob"];
var n = names.pop();
// n is "Bob"

Complete Activity 43

If you want to learn more about what you can do with arrays, the w3schools.com site has a decent reference. Look at these links:

https://www.w3schools.com/js/js_arrays.asp
https://www.w3schools.com/js/js_array_methods.asp

However, you won’t need to know anything from there for the next activities.

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in