The aim of this puzzle: Add another set of dots that are medium-sized.
Walkthrough of the solution: The for loop will loop 50 times, and each time, it will make a big blue circle and a little green circle. You’ll basically need to copy one of the commands and change the size and color. You’ll want to start writing the new command between the other two because it will be medium-sized and that gives it a better chance that it won’t get covered up by the big circle, or cover up the little circle (however, there’s no guarantee it won’t happen the next time through the loop). The size is set by the 'r' attribute, and it needs to be between 5 and 15 because those are the radii for the small and large circles. The color can be whatever you want, but find something you think looks nice!
Sample code solution:
(Tap below to reveal)
for (var i = 0; i < 50; i = i + 1) {
svg.append('circle')
.attr('r', 15)
.attr('cx', pickRandom(position))
.attr('cy', pickRandom(position))
.attr('fill', 'dodgerblue');
svg.append('circle')
.attr('r', 10)
.attr('cx', pickRandom(position))
.attr('cy', pickRandom(position))
.attr('fill', 'white');
svg.append('circle')
.attr('r', 5)
.attr('cx', pickRandom(position))
.attr('cy', pickRandom(position))
.attr('fill', 'lime');
}
JavaScript Concepts: Binary Expression (+, <), Code Block (for loop), Calling Functions, Call Nesting
Grasshopper Concepts: pickRandom()
D3 Concepts: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Additional Code (hidden code that runs before the puzzle’s code):
var position = [];
for (var i=15; i<=window.innerWidth; i+=30) position.push(i); // (var i=15; i<=315; i+=30)
