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?

Well, it seems to me that a lot of work has gone into creating quite a rich Animation puzzle, so I am surprised to see this one is not more commented in the 3 years since its creation! Maybe we could have some questions back-and-forth on this one, @Grasshopper_Ben?

I quite like the idea of reading the hidden code and solution a bit more, then expressing how much of the code I’ve been able to understand. How does that sound?!

I’ve grasped that the intial attributes of var bubble are set in the first line of hidden code. And that bubble is given different attributes by function blow and function burst. I take the point that bubble.interrupt() has to come first in the function block for it to work, but I’m not clear on how it interacts with the rest of the code.

Also, I’m not clear what the code at the bottom, beginning bubble.transition() and ending ease... is doing.

I would be grateful for any light you are able to shed on this matter, thanks, @Grasshopper_Ben

1 Like

Hey there, .transition() tells the shape to change its attributes over time, for example, changing a circle’s 'fill' attribute to 'yellow'.

.duration() defines how long that time is (in milliseconds), and .ease() can be used to change how the animation is spread out over time (for example, slowly transition in the beginning, then fast at the end). You can see an example of the different ease functions here.

Ben

1 Like

Thanks, but I understand the idea behind those attributes. It is more that there are two code blocks for blow and burst, but then 5 lines of code directly above the function calls - what are those 5 lines doing for us?

In the additional code, bubble is given a radius of 30 and a 'cx' position of 115. That means when you load the puzzle, but don’t run code, that’s what you’ll see.

When you run code, the lines you’re asking about will change the radius to 15 and move the 'cx' to 100 over a duration of 10000 milliseconds (10 seconds).

This makes it look like the bubble is slowly deflating before you click on face or bubble and trigger the event listeners that make the bubble inflate or blow up.

1 Like

Thanks for that clarification, I’m reading the code clearly now. I’m seeing two function declarations at the top. But the sequence of the animation begins after that, with a transition which happens when the code is run, followed by a couple more animations which are invoked on click.

Just to clarify regarding the two interrupts. I can see that interrupt in function burst() serves to interrupt the function blow() transition. And now I’m realising that the interrupt in function blow() serves to interrupt the first transition which runs when the code is run. Does that sound right?

Correct. .interrupt() will interrupt whatever animation is in process, whether it’s the bubble inflating or deflating.

Thanks, I’ve got it now. I think part of the confusion for me what that initially I didn’t notice the animation happening on ‘Run Code’ due to the grasshopper pass animation!

Good work. I love it

Wish we could change hidden code as well to learn more about JS