Longer Rainbow explainer


The aim of this puzzle: Draw a rainbow three columns wide, with a different color on each row.
Walkthrough of solution: The for loop will loop through every color in the array. In each loop (i.e. when each color is selected) you’ll need to draw three boxes of that color and then move to the next line. To tell a for loop what to do on each loop (i.e. each color selection) you write code within the curly brackets {} — the block statement — and reference the variable that is looping through - in this case x. Since you want three boxes you’ll need three drawBox(x) functions, and then one newLine() function to move onto the next line. This means for each color that is looped through (i.e. selected) three boxes will be drawn then a new line started.
Sample code solution:
(Tap below to reveal)

for (var x of [
]) {

JavaScript Concepts: Loops, Arrays, Blocks (for loop), Identifiers, Variable Declaration, Calling Functions
Grasshopper Concepts: drawBox(), newLine()

Would someone please explain Longer Rainbow!

I’m not sure where I’m going wrong; I have drawBox(‘red’);
drawBox(‘orange’);… all the way until violet ending with
newLine(); all with the {} brackets. Please advise~


For each array value, its going to iterate through all of those lines of code.

So if your variable is x for example, for the first array value “red”:

drawBox(x) will equate to drawBox(“red”)

So really you only need:



The only thing I don’t understand about this code is, why is newline() the determinate value that causes the box to draw a different color?

More specifically, why is it not drawing a new color for each instance of drawbox(x) if the loop statement calls for a cycling of colors, and what would the code look like if you wanted each individual box a different color listed in the array?


If we look at the code inside the for-loop:

for(...) {

The newLine() does not change the value but rather moves what drawBox is looking at on the screen to be the next line (under the 3 boxes you just drew).
The real determinant of color is the variable x. Inside the for-loop parenthesis, we see:

for (var x of ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])

This means that on the first run, x = ‘red’. It will do the 3 drawBox(x) and then move to the next line. Then the for-loop will iterate again, but this time x = ‘orange’, because ‘orange’ is next in line. The loop will happen continuously until the end of x = ‘violet’. Then the loop will break and everything after the for-loops curly braces will run.

To make each individual box listed in the array, you either remove 2 of the drawBox(x) or make the array a variable and assign drawBox() to be a random item taken from that list.

colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
for (var x = 0; x < 10; x++) {

Hope this helps! If not, feel free to reply and I’ll try to go more in-depth. :smile:


The color variations of x automatically end with a comma inside the brackets that I can’t remove. I think this is causing an error and the code won’t work. The error is “maximum call stack size exceeded”


Hi @Holly,

Looks like you have run up against one of our bugs we’re working to fix. The problem is not the extra comma, but instead a local memory leak somewhere (that’s pretty much what the error warning is saying).

If you hard close Grasshopper, then re-open and run the card again the red error should go away and you’ll either solve the card or get feedback on what needs to be adjusted.

Hope this helps!
H :slight_smile:


I’m quitting! Everyone is right, I am SO STUPID!!! Can’t do ANYTHING right! I keep botching the games, such as Longer Rainbow! Why is it not explained properly?


Here’s a simplified version of the code, so we can see the parts of a For Loop more clearly:

for (var x of [...]) {

There are 3 main parts:

  1. var x – The variable that goes through each value in the array.
  2. [...] – An array of values. On the 1st time through the loop, the 1st item from the array will be stored in the variable. On the 2nd time through the loop, the 2nd item from the array is stored in the variable.
  3. { drawBox(x) }– The body or block of the Loop. This is filled with commands that will run each time through the loop. Notice that it is using the looping variable, x.

In the Longer Rainbow puzzle, the array is filled with strings which are color names. The looping variable is called x. That means, on the 1st time through the loop, x is storing the 1st color, 'red'.

Inside the body of the loop, there are 2 commands: drawBox(x) and drawBox(x) again. So, the 1st time through the loop, it will create 2 red boxes. On the 2nd time through the loop, x will store 'orange' and then create 2 orange boxes. It keeps going through the array, drawing 2 boxes for each color.

You’ll see that the boxes are all along the top of the screen. That’s because there is no command in the loop body that says “go to a new line after creating the 2 boxes”. You can add that command by putting newLine() right after the last drawBox(x). It should still be inside the loop body, between the curly brackets {}.

To make the rainbow wider, you can add more drawBox(x) commands inside the loop body, so that there are 3 drawBox(x) in a row.