Side to Side explainer


#1

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')


Side to Side help
#3

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


#4

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


#5

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


#6

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