Gabonese Flag Helper explainer

The aim of this puzzle: Use drawBoxes() and newLine() function calls to create the Gabonese flag.
Walkthrough of the solution: Instead of drawing the first row of boxes using:

drawBox(green);
drawBox(green);
drawBox(green);

we can simplify that by using the drawBoxes function. drawBoxes() uses a string and turns each letter of the string into a box. A string is a group of letters and/or numbers that always have quote marks around it: 'this is a string'. The important part about a string is that it is seen as a sequence of keyboard characters – so green is an identifier, but 'green' is just the word “g-r-e-e-n” made up of five letters.

To make green, yellow, and blue boxes, you use the letters 'g', 'y', and 'b'. The first row of the flag is created with one function call: drawBoxes('ggg'); Then a newLine() is used to move the grasshopper to the next row. The starter code only draws one yellow box, but you need three to make the row long enough. That means you need to edit the string from 'y' to 'yyy'. Then there’s a newLine() to move the grasshopper to the third row. Finally, you need to add one more drawBox() function call to create a row of three blue boxes. To do that you use the command drawBoxes('bbb');
Sample code solution:
(Tap below to reveal)

drawBoxes('ggg');
newLine();
drawBoxes('yyy');
newLine();
drawBoxes('bbb');

JavaScript Concepts: Calling Functions, Identifiers
Grasshopper Concepts: drawBoxes(), newLine()

3 Likes

If we code drawboxes (byb) then it will show blue yello blue.why not black or any other starting from b or y

2 Likes

drawBoxes() is a custom grasshopper function.. There is code that matches each letter with a specific color, and ‘b’ was simply chosen to draw blue. If you want to create a black box, try using ‘k’. ‘e’ will also create a very dark grey.

The color associated with each letter might not be clear from the name alone, but here is the list of color names:

    a: 'amber',
    b: 'blue',
    c: 'cyan',
    d: 'dandelion',
    e: 'ebony',
    f: 'flame',
    g: 'green',
    h: 'honeydew',
    i: 'indigo',
    j: 'jade',
    k: 'key',
    l: 'lime',
    m: 'magenta',
    n: 'navy',
    o: 'orange',
    p: 'pink',
    q: 'quartz',
    r: 'red',
    s: 'smoke',
    t: 'teal',
    u: 'umber',
    v: 'violet',
    w: 'white',
    x: 'xanadu',
    y: 'yellow',
    z: 'zinfandel'

–Frankie

5 Likes

Those letter-color-coding are really weird. What will happen if i choose a color not mentioned in the list? How do i color “dark brown” for example?

1 Like

Yes, some of the names are unusual. The purpose of this list is to ensure that every letter has a color associated with it, not to assign every color possible to a letter.

To create a dark brown box, you can use a color object which is taught in a later lesson (Custom Colors).

A color object has a red, green, and blue property. Each property has a value between 0 and 255. Here’s an example dark brown color object:

var darkBrown = {
  red: 101,
  green: 67,
  blue: 33
}

You could then use drawBox(darkBrown) to create a dark brown box. Give it a try in the playground :slight_smile:

–Frankie

1 Like

I received a Correct message for incorrect code. See attached image.

Hey there, thanks for flagging!

–Ben

i dont get the gabonese flag helper

I was nervous I would end up with brown, beige, black, (or the worst… BLONDE) so I decided to spell out blue like when I was a grade school html wanna be 20some years ago. It said my answer was correct, but I beg to differ…

Soo… What’s the problem?

The puzzle’s validation is just looking for 3 b’s in the last drawBoxes(). It’s a bit lenient.

While you’ve typed out 'blue', the drawBoxes() function is looking at each individual character, and not seeing what you’ve spelled with it, which is why you are getting the design that you have.

Hope this clears things up!
Ben

So ‘key’= black? O_o