Burst Your Bubble explainer

The aim of this puzzle: Allow the burst function to pop the bubble.
Walkthrough of the solution: The reason the initial code doesn’t let you burst the bubble while it’s blowing is because it’s waiting for the blow transition to finish first. That transition has a duration of 10 seconds (10000ms), but we want to be able to burst the bubble at any time. To do this, you have to use .interrupt(). When you use the command: bubble.interrupt(), it stops whatever transition is running on the bubble object. If you try to set attributes while another transition is running, they will be ignored, so make sure to include the interrupt before setting attributes. An extra note: if you want to start a new transition while another one is already running, there is an .interrupt() already built into .transition(), so a new transition will automatically interrupt an old one, but the .attr() alone will not.
Sample code solution:
(Tap below to reveal)

function blow() {
  bubble.interrupt();
  bubble.transition()
    .attr('r', 500)
    .attr('cx', 585)
    .duration(10000)
    .ease(d3.easeSinOut);
}
function burst() {
  bubble.interrupt();
  bubble.attr('r', 15)
    .attr('cx', 100);
}
bubble.transition()
  .attr('r', 15)
  .duration(10000)
  .attr('cx', 100)
  .ease(d3.easeSinOut);
face.on('click', blow);
bubble.on('click', burst);

JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .interrupt(), .transition(), .attr(‘r’,), .attr(‘cx’,), .duration(), .ease(), .on(‘click’,)
Additional Code (hidden code that runs before the puzzle’s code):

var bubble = svg.append('circle').attr('r',30).attr('cx',115).attr('cy',140).attr('fill','pink');
var face = svg.append('path').attr('d','M0 258.39C40.79 190.51 73.36 239.28 83.23 209.29C76.1 189.5 75.03 187.48 87.11 183.25C90.98 178.73 88.07 176.13 84.52 170.3C85.78 165.89 88.17 164.27 84.52 159.95C75.48 159.3 74.35 160.48 72.9 155.81C71.17 146.88 79.52 147.79 83.23 133.87C68.87 127.69 56.45 120.93 52.26 109.8C73.59 77.64 46.23 120.44 47.74 97.1C49.27 83.82 47.67 68.23 42.96 50.33C36.01 35.95 22.34 22.5 1.94 10');

face.attr('transform','translate(0 -30)').attr('stroke','plum');
2 Likes

grasshopper is the best coding learning AI, I.failed the same course 44 yrs ago, thank God, I am able to relearn it at my own pace

1 Like


Transition that happens before the blow function ,what actually is it for?