Explicação de No meio
Objetivo deste desafio: Adicionar outro conjunto de pontos de tamanho médio.
Passo a passo da solução: O laço for fará um laço 50 vezes e, cada vez, fará um grande círculo azul e um pequeno círculo verde. Basicamente será necessário copiar um dos comandos e mudar o tamanho e a cor. É preciso começar a escrever o novo comando entre os outros dois porque ele será de tamanho médio e isso dá a ele uma chance maior de não ficar coberto pelo círculo grande ou cobrir o círculo pequeno (entretanto, não há garantia de que isso não acontecerá na próxima vez). O tamanho é definido pelo atributo 'r' e precisa estar entre 5 e 15, pois esses são os raios dos círculos pequenos e grandes. A cor pode ser a que você quiser, mas encontre algo que ache bonito!
Solução do código de exemplo:
(Toque abaixo para revelar)
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');
}
Conceitos de JavaScript: Expressão Binária (+, <), Bloco de Código (laço for), Funções de Chamada, Aninhamento de Chamadas
Grasshopper Concepts: pickRandom()
Conceitos de D3: .append(), .attr(‘r’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘fill’,)
Código Adicional (código oculto executado antes do código do desafio):
var position = [];
for(var i=15; i<=window.innerWidth; i+=30) position.push(i); // (var i=15; i<=315; i+=30)
