In the Middle explainer

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) {
    .attr('r', 15)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'dodgerblue');
    .attr('r', 10)
    .attr('cx', pickRandom(position))
    .attr('cy', pickRandom(position))
    .attr('fill', 'white');
    .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)

There appears to be a bug in the provided code; position is used for both cx and cy, but the window size appears to be about 440x230 (i.e., x and y are not the same dimensions). Is this deliberate?



Hey @Scott_McNay,

position is defined in the additional code like this:

var position = [];
for (var i=15; i<=window.innerWidth; i+=30) position.push(i);

It is dependent on the window width, since that is wider than the window height the same array of numbers are picked from randomly to decide both cx and cy. The aim is to simply change the distribution of circles each time the code runs, rather than being purely random locations. This creates a new pattern each time, while still being an organized grouping of shapes.

H :slight_smile:


Please help me complete this. I am unable to even after entering the code given as solution



Can you share a screenshot of your code? We can take a look at it and help you get it working.


Thanks a lot for the support. I could clear it. There was an extra bracket in the code. It happened so because of the typing method in the app. To add a new property, we have to tap the last added one. The tap was not proper … Ended up with an unwanted bracket in code…

Thanks sir,

Will surely mail you with next doubt

Have a blooming day


1 Like

i is number of circles . And i < 50 means circles can’t reach more than 50 .

Continuing the discussion from In the Middle explainer:

In the middle circle, there is an .attr() call attached to a pickRandom() call. Try deleting the .attr('cy',...) and adding it back to the end of the whole chain.


This is a situation where looking at the pattern can reveal the issue; there is only one right-parenthesis after the first pickRandom instead of two, and at the end of the line there are two instead of one, unlike the other two lines.

I’m curious how the whole hidden and solution code results in an 8 x 8 grid of 64 circles (minus a few omitted circles).

It seems there are a glitch in the program.
My code is correct, but I cannot change the original code on the top, I do not have all the keys available in the bar below.
Please help.

1 Like

Hey there, yes that looks like a glitch. Take a snapshot of the code. Try to reset it and enter the code again. If it didn’t worked, Reset and enter the code in the grasshopper app.

There is a problem with a puzzle.
The quotes around white, cx and cy are bad because they are “smart quotes”, and I can’t report a bug here.

Is there a bug I cant get it

I am having the same issue, I can not modify the top line of code to be
for (var i = 0; i < 50; i = i + 1) {
I tried installing the app, and there is the exact same issue.

It looks like many months without support here. Is anyone able to fix this bug?

Tenho o mesmo problema o codigo esta correto o que esta errado na verdade é o teclado que não deixa inserir a soma e o sinal de =.

Galera problema resolvido no quebra cabeça uns precisam da linguagem em inglês outros e só modificar para o português que funciona, Eu estava utilizando o inglês e modificando ele funcionou ,

I++ can’t change