Side to Side explainer

The aim of this puzzle: Make the balloon fall from a different position each time it gets tapped.

Walkthrough of the solution: The horizontal position of the balloon is controlled using the 'cx' attribute which can be set using the command balloon.attr('cx',...). To get a random position, you want to use the pickRandom() function and the position identifier. position is an array of numbers that can be used as 'cx' values.

Review card:
The Burst Your Bubble Puzzle should help you practice the skills you need to complete Pick It Up. When you solve it, try to figure out what each part of the code does and when the order of the function calls matters.

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

Grasshopper Concepts: pickRandom()

D3 Concepts: .attr('cx')

Additional Code (hidden code that runs before the puzzle’s code):

var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
    position.push(i);
}

svg.append('rect').attr('fill','silver').attr('y',165+35).attr('width',window.innerWidth).attr('height',window.innerHeight-200);
1 Like

Can someone give me the code for side to side? Really struggling with this

The tricky part of this puzzle is making sure you add the .attr('cx',pickRandom(position)) in the correct place. It should be attached to the balloon.interrupt().attr('cy', 35).

It can go before or after the other attr, but it should be after the .interrupt() in order to complete the puzzle.

–Frankie

1 Like

Why doesn’t adding a new line in-between interrupt and cy with balloon.attr(…) work?

You’re correct.

balloon.interrupt().attr('cy', 35).attr('cx', pickRandom(position));

and

balloon.interrupt().attr('cy', 35)
balloon.attr('cx', pickRandom(position));

will both produce the same output, but only the 1st one will pass the puzzle. I’ll update it to allow both solutions.

–Frankie

4 Likes

Thank you.
Could you give a short intuition as to what interrupt is useful here/needed?
I am especially wondering that the two methods are the same. This means that if the entire code is in one line, the prior .interrupt() only applies to the first code that follows (attr(‘cy’)).

let balloon = svg.append('circle').attr('fill', 'red').attr('r', 35).attr('cx', pickRandom(position)).attr('cy', 35);
balloon.on('click', (___) => {
  balloon.interrupt().attr('cy', 35).attr('cx', pickRandom(position));
  ___
  balloon.transition().attr('cy', 165).duration(2000);
});