Stop The Scramble es-419 Explainer

Puzzle Explainer
#1

Explicador de Detén el barullo

Objetivo de este acertijo:
Usar el método interrupt, .interrupt(), para detener una animación que está en curso.

Tutorial de la solución:
El método interrupt, .interrupt(), detiene una animación que está en curso. Para usarla, agrega .interrupt() al final de la animación que quieres detener.

En el código con el que comenzaste, hay una declaración de la variable, dots, una función, stopDots, y un controlador de eventos. dots selecciona todos los círculos y los almacena en una variable. La función stopDots está incompleta y debajo, un controlador de eventos la llama cuando se pulsa square. En este acertijo, completarás la función stopDots para que al pulsar square, dots deje de moverse.

Para completar el acertijo, agrega dots.interrupt() dentro de la función stopDots. Ahora, cuando pulses square, la animación se detendrá.

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

let dots = d3.selectAll('circle');

function stopDots() {
dots.interrupt();
}

square.on('click', stopDots);

Conceptos de JavaScript: variable, función, controlador de eventos
Conceptos de D3: d3.selectAll(), .interrupt()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

let svg = setupD3();

let XX = window.innerWidth / 2;
let YY = window.innerHeight / 2;
let phase = Math.PI * 4 / 5;

let square = svg.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .attr('x', XX - 50)
  .attr('y', YY - 50)
  .attr('fill', 'red');

for (let i = 0.25; i < 5; i++) {
  let dot = svg
    .append('circle')
    .attr('r', 25)
    .attr('cx', XX)
    .attr('cy', YY)
    .attr('fill','red');

  for (let j = 0; j < 80; j++) {
    let x = YY * (Math.sin((i + j) * phase));
    let y = YY * (Math.cos((i + j) * phase));
    dot
      .transition()
      .delay(3000 * (j+i/5))
      .duration(3000)
      .attr('fill', `hsl(${(i+j) * 360 / 5},100%,50%)`)
      .attr('transform', `translate(${x},${y})`);
  }
  dot.transition().delay(3000 * 80).attr('cx', 1000).attr('cy', 1000);
}
1 Like
#2
#3