Strange Gravity explainer

The aim of this puzzle: Make the regular blue object fall like the strange green object.
Walkthrough of the solution: If you were given 1 minute to move your phone from one side of the room to the other, there are a lot of ways you could do it: get it there really quickly and then wait, move smoothly and slowly across, start slowly and speed up as time runs out, or even two steps forward one step back the whole way. All those different ways to move across the room are like the easing of your transition. The ease call takes one argument: a function from the d3 library. d3.easeQuadIn starts slow and speeds up just like how gravity works on Earth, while d3.easeCubicOut starts fast and then slows down. To solve the puzzle, you need to replace the easing function for the blueCircle with the same easing function as the greenCircle.
Sample code solution:
(Tap below to reveal)

function drop() {
  blueCircle.transition()
    .duration(1000)
    .attr('cy', 180)
    .ease(d3.easeCubicOut);
  greenCircle.transition()
    .duration(1000)
    .attr('cy', 180)
    .ease(d3.easeCubicOut);
}
d3.selectAll('circle')
  .on('click',drop);

JavaScript Concepts: Code Block (function), Member Expression, Identifiers
D3 Concepts: .transition(), .duration(), .attr(‘cy’,), .ease()
Additional Code (hidden code that runs before the puzzle’s code):

var floor = svg.append('rect').attr('fill','slategrey').attr('x',0).attr('y',205).attr('width',300).attr('height',50);
var blueCircle = svg.append('circle').attr('fill','aqua').attr('r',25).attr('cx',100).attr('cy',30);
var greenCircle = svg.append('circle').attr('fill','limegreen').attr('stroke','lime').attr('stroke-width',3).attr('r',25).attr('cx',175).attr('cy',30);

In Strange Gravity (Animation I), the balls don’t drop when you play the animation (for both the example of what to do, and your own code).

iPhone 6, with whatever the latest iOS and Grasshopper versions are.

Ugh, never mind. My phone was apparently just not registering when I tried to tap the screen to make the balls drop.

It keeps saying the starting code has been tampered with and won’t let me move on

Hey there, looks like a quick fix. For the blueCircle, delete the .easeCubicOut that’s inside .ease(). It should just look like this:

.ease(d3.easeQuadIn)
1 Like

Thank you very much it helped me.

Hey ben i am not able solve the problem. Please help! otherwise the app is best to learn coding

I have solved the problem for “Strange Gravity.” You just need to change the .easeQuadIn to .easeCubicOut on blueCircle. I hope that helps.