You will build a seven-segment worm, which we name Elli because it is made from ellipses! Use the Elli Processo Editor. A green seven segment worm made up of ellipses with two red eyes facing right 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 indexed 0 through 6 but all seven elements will be the number 0 to start. Next, create an empty draw() function. In the setup code before the draw() function, give your canvas a size and slow the frameRate down to 8. Next in the setup code, 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 left-most (tail) segment of elli elliX[1] = 40; elliX[2] = 60; elliX[3] = 80; elliX[4] = 100; elliX[5] = 120; elliX[6] = 140; // set right-most (head) segment of elli Set the background color in draw(). Step 1: Create Elli Create an a function named elli() that draws Elli on the screen. Your function should use a for-loop to access the values stored in the array. 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 To get Elli to move to the right, we "shift" the position of each segment (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} --> --> Two seven segment worms, one above the other. The one below is shifted to the right of the one above. To accomplish this in code, we will update the array elements. The new position of the tail (elliX[0]) will be the old position of the 2nd segment (elliX[1]). The new position of the 2nd segment will be the old position of the 3rd segment and so on. We continue this pattern until we get to the head (elliX[6]), which we will need to compute a completely new position for. Make some changes to your draw() function beneath your call to elli() to accomplish this: 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 to the right across (and eventually off!) the screen now. Step 3: Moving Elli Vertically Elli moving diagonallySo 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 the setup code. 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 Elli looking glamourousDeclare 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. How you achieve the fade is up to you, but you can try altering one or more of the RGB values for each segment with a calculation. The body segments should have a noticeable color tint, not simply shades of gray. Example Solution Elli gif.