Explicador de Control de color
Objetivo de este acertijo: Causar que el círculo cambie a un color aleatorio cada vez que lo pulsas.
Tutorial de la solución: Cuando ejecutas el programa, ve que creaste una función llamada changeColor(). No lo ejecuta de inmediato, sino que espera hasta que otra parte de tu código llame a la acción. Entonces, lo primero que en realidad se ejecuta es circle.attr('fill', pickRandom(color)); al principio. Esto define circle como color aleatorio. A continuación, la función se omite, y avanza a la línea circle.on('click', changeColor);. Esta parte es complicada, pero es útil si la lees al revés: ejecutará la función changeColor una vez que hagas 'click' .on() el círculo. Entonces, haces clic en el círculo y se vuelve negro porque debes mirar dentro de la función donde defines el atributo 'fill' y lo cambias a pickRandom(color), tal como lo hace la primera línea. Tu función debe ejecutar el mismo código que la primera línea, pero se debe ejecutar cada vez que pulsas el círculo, y eso es exactamente lo que hace la última línea del programa.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
circle.attr('fill', pickRandom(color));
function changeColor() {
circle.attr('fill', pickRandom(color));
}
circle.on('click', changeColor);
Conceptos de JavaScript: bloque de código (función), funciones de llamada, anidamiento de llamadas, identificadores
Conceptos de Grasshopper: pickRandom()
Conceptos de D3: .attr(‘fill’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):
var circle = svg.append('circle').attr('r',window.innerHeight/2-20).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2);
let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);