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 (hidden code that runs before the puzzle’s code):

var tether = svg.append('rect').attr('width',length).attr('height',16).attr('fill','white').attr('y',72);

var walker = svg.append('g');
var left = walker.append('rect').attr('width',80).attr('height',40).attr('x',0).attr('y',10).attr('fill', 'lightseagreen');
var right = walker.append('rect').attr('width',80).attr('height',40).attr('x',0).attr('y',110).attr('fill', 'teal');
var body = walker.append('circle').attr('r',40).attr('cx',0).attr('cy',80).attr('fill','mediumturquoise');

var foot = [left, right];

walker.on('click', ()=>{
   tether.attr('width',body.attr('cx')); 
});

tether.on('click',()=>{
    distance=0;
    body.transition().duration(1000).attr('cx',0).ease(d3.easeBackInOut);
    d3.selectAll('rect').transition().duration(1000).attr('x',0).ease(d3.easeBackInOut);
    tether.transition().duration(1000).attr('width',0).ease(d3.easeBackInOut);
});
1 Like

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

1 Like

Nevermind… Got it :grin:

1 Like

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.

–Frankie

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

–Frankie

1 Like

rage Ahhhhh!!! I typed a correct answer but still don’t get it!!! Tell me what the hell am I wrong!!! >:O

1 Like

Don’t write distance as string. // ‘distance’
Simply select the distance // distance

Thanks. That worked for me.

2 Likes