CSE120 Sp17 Lab 10 - Arrays and Elli

Goals

• Learn how to declare and use arrays.
• Practice using arrays, for-loops, variables, and functions.

Arrays and Elli

You will build a seven-segment worm, which we name Elli because it is made from ellipses!

Video of an almost-complete version: https://vimeo.com/165793422.

Step 0: Arrays

An array is a variable made up of multiple items that we refer to by number. Because an array is a variable, it has a datatype. For example, suppose the x-coordinates for Elli's seven segments are: 20, 40, 60, 80, 100, 120, 140.

Then we can store these values in an array named elliX. To start, we declare the array at the top of our program:

int[] elliX = new int[7];   // declare an array for the x-values of segments

The datatype is int[], which means an array of integers. elliX is the variable name. new int[7] means that the array will have seven elements that are integers; these will be numbered 0 through 6.

Next, create a setup() function. Give your window a size and background color and slow the frameRate down to 8. Next write a for-loop that does the exact same thing that the code below does. Note: You should NOT copy/paste this into your code, but instead use it to guide the creation of your for-loop.

elliX[0] = 20;   // set last segment of elli
elliX[1] = 40;
elliX[2] = 60;
elliX[3] = 80;
elliX[4] = 100;
elliX[5] = 120;
elliX[6] = 140;  // set first (head) segment of elli

Step 1: Initial Elli

Create an a function named elli() that draws Elli on the screen. Your function should use the values stored in the array and will more than likely use a for-loop. Call your new elli() function from draw() to make sure Elli shows up on screen, then modify the elli() function so that the worm has a face (show off your creativity).

Step 2: Moving Elli Horizontally

As Elli moves to the right, the segments' positions will "shift" left (i.e. each segment will take the old position of the segment in front of it):

20, 40, 60, 80, 100, 120 becomes 40, 60, 80, 100, 120, 140.

To make Elli move, we need to shift all of the array elements left by one position and compute a new value for elliX[6]. This can be accomplished with some changes to the elli() function:

elliX[i] = elliX[i+1];     // put this inside a loop
elliX[6] = elliX[6] + 20;  // put this below your loop

Think carefully about your for-loop parameters!

Run your program and your Elli should move across the screen now.

Step 3: Moving Elli Vertically

So far we have used an array, elliX[], to keep track of the x-coordinates of the worm. We can do this for the y-coordinates, too.

To keep track of the y-coordinate, declare another array of seven elements, named elliY, at the top of the program. Initialize each element to 100 in setup(). Advance each segment of the y-coordinate, as we just did for the x-coordinates. The worm should now travel diagonally down the screen.

Step 4: Glam Worm

Declare a third array to keep track of the color of each segment. The type of this array will be color (not int like the others). Modify your code to be similar to the other two arrays, so that the colors of the segments fade from the front of Elli to the back.