# One Step at a Time 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);
});
``````
2 Likes

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

1 Like

Nevermind… Got it

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

1 Like

Thanks. That worked for me.

2 Likes

How exactly does this ‘walker’ work? It is not directly related to body, correct?

2 Likes

plz help me this is my code and its not working-

oh bother i found my mistake

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