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%)`);