Feet Don't Fail Me Now explainer


The aim of this puzzle: Make the body move when you tap it.
Walkthrough of the solution: When you tap the body, a foot takes a step. If you look at the code, you’ll see that inside of the arrow function there’s a .transition() command that moves a random foot. You want to add a similar command for the body – the only differences is that you use body instead of pickRandom(foot) and since the body is a circle, its horizontal position is determined by the 'cx' attribute instead of the 'x' attribute.
Sample code solution:
(Tap below to reveal)

var distance = 0;
body.on('click', () => {
  distance = distance + 15;
  pickRandom(foot).transition().attr('x', distance);
  body.transition().attr('cx', distance);    

JavaScript Concepts: Binary Expression (+), Code Block (function), Calling Functions, ES6
Grasshopper Concepts: pickRandom()
D3 Concepts: .attr(‘cx’,), .attr(‘x’,), .on(‘click’,), .transition()
Additional Code: There is hidden code that runs before the puzzle’s code setting the SVG Shape’s attributes and defining some movement functions.


Why can’t I get this!!! I’m getting frustrated :triumph:


Nevermind… Got it :grin:



The 2nd line will pick a random foot and move it. You don’t need to add a second command “for the other foot” because pickRandom(foot) can be either foot each time the function runs.

The last command inside the brackets {} should be replaced. To make the body move, you want to use body.transition() as the beginning of a new line. Take a look at the solution code in the 1st post to see where it should go.



Why use attribute named cx for 2nd object and not just x?


Circles use 'cx' and rectangles use 'x'. The 'cx' is the distance from the left side of the screen to the center of the circle. The 'x' is the distance from the left side of the screen to the left side of the rectangle.

Since the body is a circle, it uses 'cx'.