Color Clicker es-419 Explainer

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

1 Like