When I created the original spiral hearts, I hard-coded my colors stops and the transitions between those color stops. I made the heart red at frame 0, pink at frame 17, purple at frame 34, and red again at frame 51. I had a subroutine that would calculate all of the in-between colors for me—so that at frame 29, the heart would be a mix of pink and purple.
But hard-coding the subroutine that calculated my colors for me made playing with the colors a real pain. It was a pain to change the color of the color stops, the number of color stops, and the number of frames between color stops.
To fix this, I created a new subroutine, setHeartColor, and started storing my color stops in an array named colorstop. An array is an indexed list. We can add and remove items from the list, and we can access a list item using its index. For example, the first color stop is colorstop[0] and the second is colorstop[1]. Each color stop stores four values: its frame number, red intensity, green intensity, and blue intensity. These values are stored as object properties. To access the blue intensity of the third color stop, we would use colorstop[2].blue. Don’t worry about arrays and objects for now—just know that they make storing and accessing data easier and more flexible.