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 [
  'red',
  'orange',
  'yellow',
  'green',
  'blue',
  'indigo',
  'violet'
]) {
  drawBox(x);
  drawBox(x);
  drawBox(x);
  newLine();
}

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

I’m not sure where I’m going wrong; I have drawBox(‘red’);
drawBox(‘red’);
drawBox(‘red’);
newLine();
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:

drawBox(x);
drawBox(x);
drawBox(x);
newLine();

5 Likes

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(...) {
  drawBox(x);
  drawBox(x);
  drawBox(x);
  newLine();
}

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++) {
  drawBox(pickRandom(colors));
  drawBox(pickRandom(colors));
  drawBox(pickRandom(colors));
  newLine();
}

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

4 Likes

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 [...]) {
  drawBox(x);
}

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.

–Frankie

1 Like

hey guys,
i dont understand why newline here should be used while in the next practice image decoder it draws alone line by line for each Element of the array

I’m not sure what’s wrong with my code, the outcome matches the description, but I keep getting an error.

Hey there,

It looks like you added a 2nd for loop, and then put the code inside the setup of that for loop, like this:

for (var x of ['red', 'orange', 'yellow']) {
    drawBox(x);
    drawBox(x);
    for (var element of [drawBox(x), newLine()]) {
    
    }
}

Remove the 2nd for loop and just add another drawBox() and newLine() function call, like this:

for (var x of ['red', 'orange', 'yellow']) {
    drawBox(x);
    drawBox(x);
    drawBox(x)
    newLine();
}


My script is correct but, won’t let me continue. Thanks.

can you post just the code please, can’t see if it is correct, after violet should be
]) {
drawBox(x);
drawBox(x);
drawBox(x);
newLine();
}
is that what you have?

Thanks Deezone13, this is my code. Look

Hello Deezone13, I run the code and it gives the correct result, as seen in the image but the congratulations message does not appear but this:
They colors in the array have been edited. Usted the reset button ti reset the puzzle. Thanks.

Ok does it work now?

1 Like

Dear Michael
It works, thank you very much.

I’m still lost as to the purpose of newline() at the end. Is it necessary?

I have a question. I am very new to js but if i wanted the for loop to do the rainbow another time what would I change or add in my code?