Randonneur 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 wheelSet, which contains 2 objects with the properties cx and cy.

A circle created with svg.append('circle') will always be solid, which will look a bit awkward on our bike. In order to get around this, we’ll create a 2nd circle that is the exact same shade of blue as the background of the code console. This is why backgroundBlue is also imported. This blue circle will be on top of the khaki circle, and have a slightly smaller radius. Together, these 2 circles will make the wheel look like a wheel.

The For…of loop will iterate through the imported array, and use the cx and cy properties of the objects in the array to define exactly where the wheels should be placed.

Sample code solution:

import { wheelSet, backgroundBlue } from 'grasshopper.bikeShop';

for (let wheel of wheelSet) {
    svg.append('circle').attr('fill', 'khaki').attr('r', 35).attr('cx', wheel.cx).attr('cy', wheel.cy);
    svg.append('circle').attr('fill', backgroundBlue).attr('r', 31).attr('cx', wheel.cx).attr('cy', wheel.cy);
}

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

let midX = window.innerWidth / 2;
let midY = window.innerHeight / 2;
let svg = _svg.append('g');
let bike = _svg.append('g');
let topBar = bike.append('line').attr('x1', midX - 50).attr('y1', midY - 30).attr('x2', midX + 50).attr('y2', midY - 35).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let seatPost = bike.append('line').attr('x1', midX - 55).attr('y1', midY - 50).attr('x2', midX - 30).attr('y2', midY + 30).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let seatStay = bike.append('line').attr('x1', midX - 50).attr('y1', midY - 30).attr('x2', midX - 80).attr('y2', midY + 25).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let chainStay = bike.append('line').attr('x1', midX - 80).attr('y1', midY + 25).attr('x2', midX - 30).attr('y2', midY + 30).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let downTube = bike.append('line').attr('x1', midX - 30).attr('y1', midY + 30).attr('x2', midX + 52).attr('y2', midY - 20).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round');
let fork = bike.append('path').attr('d', `M ${midX + 47} ${midY - 50} L ${midX + 60} ${midY} C ${midX + 63} ${midY + 8} ${midX + 65} ${midY + 20} ${midX + 75} ${midY + 25}`).attr('stroke-width', 5).attr('stroke', 'red').attr('stroke-linecap', 'round').attr('fill', 'transparent');
let handleBars = bike.append('path').attr('d', `M ${midX + 46} ${midY - 50} L ${midX + 60} ${midY - 50} C ${midX + 75} ${midY - 50} ${midX + 70} ${midY - 30} ${midX + 45} ${midY - 35}`).attr('stroke-width', 5).attr('stroke', 'khaki').attr('stroke-linecap', 'round').attr('fill', 'transparent');
let seat = bike.append('path').attr('d', `M ${midX - 65} ${midY - 58} c 2 0.5 3 1 4 1 l 8 1.2 l 10 1.2 c 2 1 2 3 0 4 l -14 -1 c -1 0 -5 0 -6 1 c -4 -2 -8 -8 -2.5 -8`).attr('stroke-width', 1).attr('stroke', 'black').attr('stroke-linecap', 'round').attr('fill', 'khaki').attr('stroke', 'khaki');
let wheelSet = [
       {
            cx: midX - 80,
            cy: midY + 25
        },
        {
            cx: midX + 75,
            cy: midY + 25
        }
];

let backgroundBlue = '#003248'

2 Likes

Thank you too much for that