Stop the Scramble explainer

Puzzle Explainer
#1

Aim of the puzzle:
Use the interrupt method, .interrupt(), to stop an animation that is in progress.

Walk through of solution:
The interrupt method .interrupt() stops an animation that is in progress. To use it, add .interrupt() to the end of the animation you want to stop.

In the code that you start off with, there is a variable declaration, dots, a function, stopDots, and an event handler. dots selects all the circles and stores them in one variable. The stopDots function is incomplete and below that, gets called by an event handler when square is tapped. In this puzzle, you’ll complete the stopDots function so that when you tap square, the dots stop moving.

To complete the puzzle, add dots.interrupt() inside the stopDots function. Now, when you tap on the square the animation will stop.

Sample code solution:
(Tap below to reveal)

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

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

square.on('click', stopDots);

Javascript Concepts: Variable, Function, Event Handler
D3 Concepts: d3.selectAll(), .interrupt()
Additional Code (hidden code that runs before the puzzle’s code):

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