Button Down explainer

Aim of the puzzle: Use a for…of loop to create multiple SVG shapes.
Walk through of solution: In this puzzle, you will import an array of objects from additional code, and then use the properties of those objects to create multiple SVG shapes.

The import declaration at the top of the code imports the array buttons, which contains objects containing cx and cy properties.

The for…of loop will iterate through the array of objects and create a new circle for each object, using the cx and cy properties of the object to set the circle’s position on the screen.

Set the 'cx' attribute to button.cx, and the 'cy' attribute to button.cy.

Sample code solution:

import { buttons } from 'grasshopper.tailor';

for (let button of buttons) {
    svg.append('circle').attr('r', 2).attr('fill', 'white').attr('cx', button.cx).attr('cy', button.cy);
}

Additional Code (hidden code that runs before the puzzle’s code):

let midX = window.innerWidth / 2;
let midY = window.innerHeight / 2;

let shirt = svg.append('g');
let shirtFront = shirt.append('rect').attr('width', 80).attr('height', 120).attr('x', midX - 40).attr('y', midY - 60).attr('fill', 'lightBlue');
let collar = shirt.append('path').attr('d', `M ${midX - 20} ${midY - 75} l 40 0 l 10 20 l -10 20 l -20 -23 l -20 23 l -10 -20 l 10 -20`).attr('stroke', 'black').attr('stroke-width', 2).attr('fill', 'lightBlue');
let line = shirt.append('line').attr('x1', midX).attr('y1', midY - 55).attr('x2', midX).attr('y2', midY + 60).attr('stroke-width', 1).attr('stroke', 'black');
let sleeves = shirt.append('path').attr('d', `M ${midX + 40} ${midY - 59.5} l 10 0 l 20 60 l -10 60 l -15 -10 l 5 -50 l -15 -50 M ${midX - 40} ${midY - 59.5} l -10 0 l -20 60 l 10 60 l 15 -10 l -5 -50 l 15 -50`).attr('stroke', 'lightBlue').attr('stroke-width', 1).attr('fill', 'lightBlue');
let neck = shirt.append('path').attr('d', `M ${midX -20} ${midY - 75} c 10 20 30 20 40 0`).attr('stroke-width', 1).attr('stroke', 'black').attr('fill', 'transparent');

let buttons = [{
            cx: midX + 3,
            cy: midY - 40
        },
        {
            cx: midX + 3,
            cy: midY - 25
        },
        {
            cx: midX + 3,
            cy: midY - 10
        },
        {
            cx: midX + 3,
            cy: midY + 5
        },
        {
            cx: midX + 3,
            cy: midY + 20
        },
        {
            cx: midX + 3,
            cy: midY + 35
        },
        {
            cx: midX + 3,
            cy: midY + 50
        }];
1 Like