Nested Squares es-419 Explainer

Explicador de Cuadrados anidados

Objetivo de este acertijo: Crear una colección de cuadrados cuyo tamaño disminuya en una cantidad fija.

Tutorial de la solución: Cuando se ejecuta el código por primera vez, crea un montón de rectángulos con colores, anchos y altos aleatorios. En lugar de usar un número aleatorio para el ancho, podemos usar el valor de la variable size. La variable size comienza en 200 y disminuye en 10 cada vez que pasa por el ciclo, siempre que sea un número positivo.

Cambia .attr('width',pickRandom(200)) a .attr('width',size). Dado que un cuadrado tiene el mismo alto y ancho, también puedes definir el alto en size.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

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

Conceptos de JavaScript: operadores de asignación (-=), expresión binaria (>), bloque de código (for loop)

Conceptos de Grasshopper: pickRandom()

Conceptos de D3: .append(), .attr('fill), .attr('height',), .attr('width',)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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