Processing Tutorial 9

candy-array

Collections of objects packaged perfectly  – the final code structure we needed – Arrays.

orange-dot

Any time a program requires multiple instances of similar data, it is probably time to use an array.

For example, what if you wanted to make an animation that has hundreds of bubbles floating up?

bubbles

Creating a line of code for each bubble would be painfully tedious. Using an array will make things easier.

block3

Section 1. What is an Array?

We already know that a variable holds one instance of data. An array is similar to this except that arrays hold multiple pieces of data.

var-array

Arrays are lists of variables.  These lists keep track of how many elements exist in a collection and what order they are in.

In arrays, the counting order starts with 0.

array-index

So, when you have ten elements, your index begins 0 and stops at 9.

block3

Section 2. Declaring Arrays

As with variable declaration, arrays also need a name and data type label. But, to distinguish an array from a variable, we use square [] brackets, an operator called “new” and we declare the size of the array.

Here’s the syntax structure to declare an array:

declare-array

candy_lollipops_set_2

block3

Section 3. Overview, Initializing Arrays

Because it is common to use large sets of data or objects in an array, it is important to figure out an efficient way to initialize your arrays. For example, if you only have 5 pieces of data in your array then you could initialize your array like this:

float[] floatArray = (1.2,  3.5,  2.0,  3.4123,   9.9);

As you can see in this example, all 5 items in the array collection are listed (1.2,  3.5,  2.0,  3.4123,   9.9). This is fine for smaller collections but what if you had an array of 1000 objects?

There is a better way – we can use variables and loops for large data sets!

red-dot

yellow-dot

green-dot

block3

Section 4. This is how we use loops in arrays – study this section carefully!

Declare an array of 1000 floats and initialize every element of that array with a random number between 0 and 10.

red-dot

To declare our array:

decalr

But, to give us wiggle room to initialize this large array with a loop, we will replace the amount “1000” with a variable called, “n.”

variable-array-declare

red-dot

Now, to initialize our array with a variable we will use a while loop:

array-while-loop

The variable “n” represents the index count of the array

(In this example there are 1000 positions in the index: 0, 1, 2, 3, … 998, 999) 

red-dot

By using a while loop with variable “n”, we have set up an efficient situation where the computer will manufacture all 1000 random integers in an organized count.

orange-dot

This saves us from writing out one thousand different values in our array’s index.

The loop does this work for us. 

yellow-dot

A for loop is an even more efficient use of a loop to initialize a large array.

Here’s what that might look like…

for-loop-array-ex

(If you are not there yet, that is ok. We are going to code an array next.)

Screen shot 2013-12-08 at 1.23.09 PM

block3

Exercise 1 – Coding an array, there will be several steps in the exercise…

Just before we got into arrays, we learned how to use the important structure of coding called Object Oriented Programming (OOP). Our example included creating a class that manufactured bouncing ball objects. We are now going to adapt this bouncing ball program using arrays.

red-dot

–>Download the Bouncing Ball Program Here <–

Open the Bouncing Ball program and test the code to make sure you see 5 bouncing balls.

Screen shot 2013-12-08 at 3.01.28 PM

As you look at the script in the main program tab, what code inefficiency do you notice?

object-class

orange-dot

yellow-dot

green-dot

Answer: It is inefficient to use a line of code for every instance of the ball object.

We can optimize this program to have more efficient code with arrays and loops.

block3

Step 1.

Clearing out the clutter.

First, remove all but the first instance of the ball object from declaration, initialization and functionality like this:

clutter

block3

Step 2.

Rewrite the object declaration as an array declaration with a set of 20.  

Here’s a reminder on how to do this:

array-dec

Answer

block3

Step 3.

How might you use array[] syntax (explained above) to replace the current BouncingBall object syntax in the setup() and draw()?

The answer is here but take a moment to type in a guess before looking and updating your program.

Screen Shot 2014-10-05 at 6.10.11 PM

Run your code and make sure you see a single bouncing ball.block3

Step 4.

Looking at your updated code with array syntax now, what position of your index[] are you calling?  

Here’s a reminder on how index positions work:

array-index

Answer

smiley

Make sure you feel confident that you understand before moving on.

It is worth it to take your time!

block3

Step 5.

Finish the code for your array…

dots

You will use a variable for the index position [] of your array.

And…

You will create a for loop in both the initialization and functionality portions of your program.

Code these updates now:

where-are-the-20-balls

red-dot

Now, run your code to see your array of 20 bouncing balls.

But, wait – there is only one! Why?

red-dot

yellow-dotgreen-dot

blue-dot

Because, all twenty balls are bouncing in the exact same position.

They are layered on top of each other and because of this, it looks like there is only one ball. 

block3

Exercise 2

Add the random function() into the initialization setup() of the BouncingBall array to vary the position of each ball.

red-dot

Now, run your code. You should see the 20 bouncing balls.

block3

Exercise 3 

Adjust the array size; make 3 small changes in your code so that your array shows 100 bouncing balls.

Screen shot 2013-12-08 at 6.25.03 PM

block3Section 5.  The “length” tool

In the previous exercise, it may have seemed pretty efficient to change the size of your array. After all, you only had to adjust 3 values to go from 20 balls to 100. However, sometimes your code will be so complex that in order to change the size of your array you might need to change 20 or more values.

Once again, there is a more efficient way.

RoadSignShortcut

All arrays work with a tool called length. If you learn to use the length syntax convention then it will be quicker and easier to change the size of your array.

red-dot

The use of length looks like this in plain english:

the name of your array, a dot and the word “length

red-dot

This is how you use length in Processing with proper syntax:

BouncingBallCollection.length

block3

Exercise 4

You will now use the .length convention in the bouncing ball program we have been working with. 

Inside of your two for loops, replace the number 100 with:

BouncingBall.length

See example below and adjust your code accordingly. (Test it and make sure you still see 100 bouncing balls.)

LENGTH-EX

Got it?

Now, adjust your code using the dot length convention and create 500 bouncing balls

Screen shot 2013-12-08 at 6.55.54 PM

block3

Exercise 5

Add 3 variables to the constructor in your class, adjust your array and do the other necessary steps so that your program makes 1000 randomly colored balls.

(Remember that you will have to make changes in both tabs of your program.)

Screen shot 2013-12-08 at 7.07.28 PM

block3

Exercise 6

Make a new, remixed project that uses an array and Object Oriented Programming to create a video game object or background of several moving elements. It must be well designed and unique.

block3More Resources to Learn Arrays

The above lesson comes from Jose Sanchez’s video on the Plethora Project.

It is worth watching his tutorial to recap the concepts!

red-dot

Another way to review of these ideas is to watch the informal video tutorials by Processing champion, Daniel Shiffman. His book, Learning Processing and his videos also informed this curriculum.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

What is an array?

Declare, initialize and use and array.

Arrays of objects.

Arrays and loops.

Arrays of flexible sizes.

Download Example Code Using Arrays

block3