Gabonese Flag Helper explainer


#1

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()


#2

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


#3

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


Quick French Flag explainer
drawBox Colors List
#4

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?


#5

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