Nested Squares explainer

The aim of this puzzle: Create a collection of squares that decrease in size by a fixed amount.

Walkthrough of the solution: When the code 1st runs, it creates a bunch of rectangles with random color, width, and height. Instead of using a random number for the width, we can use the value of the size variable. The size variable starts at 200 and decreases by 10 each time through the loop as long as it’s a positive number.

Change the .attr('width',pickRandom(200)) to .attr('width',size). Since a square has the same height and width, you can also set the height to size.

Sample code solution:
(Tap below to reveal)

for (let size = 200; size > 0; size -= 10) {
  svg.append('rect')
       .attr('fill', pickRandom(color))
       .attr('width', size)
       .attr('height', size);
}

JavaScript Concepts: Assignment Operators (-=), Binry Expression (>), Code Block (for loop)

Grasshopper Concepts: pickRandom()

D3 Concepts: .append(), .attr('fill), .attr('height',), .attr('width',)
Additional Code (hidden code that runs before the puzzle’s code):

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);
1 Like