 # Big Blue Blob explainer

Aim of the puzzle:
Use the ease method `.ease()` to modify the rate of an animation’s change over time.

Walk through of solution:
The ease method `.ease()` defines the rate of an animation’s `.transition()` over time. For example, an ease value of `linear` means that there is a constant rate of change, or that the animation neither accelerates or decelerates during its duration. This is the default setting for `.transition()`. A value of `easeQuadIn` means that there is an accelerated rate of change, or that the animation begins slowly but speeds up over the course of its duration. An ease value of `easeCubicOut` means there is a decelerated rate of change, or that the animation starts quickly but slows down as time progresses.

In the code that you start off with, there is a function, `changeSize`, and an event handler. The `changeSize` function applies an animation to `blob`, changing its radius, `'r'`, over the course of 1 second. The event handler calls the `changeSize` function when `blob` is tapped. Since ease is not defined, it defaults to `linear`. In this puzzle, you’ll change the ease on the `blob`.

To complete the puzzle, add the ease method, `.ease()`, to `blob` after `.transition()`. Use `d3.easeElastic` as an argument. Now, when you tap on the `blob` its rate of change will be non-linear.

Sample code solution:
(Tap below to reveal)

``````function changeSize() {
blob.transition().duration(1000).attr('r',35 + pickRandom(100)).ease(d3.easeElastic);
}

blob.on('click',changeSize);
``````

Javascript Concepts: Variable, Function, Event Handler
D3 Concepts: Attribute, `.transition()`, `.duration()`, `.ease()`
Additional Code (hidden code that runs before the puzzle’s code):

``````let color = [...Array(36)].map((_,i)=>`hsl(\${10*i},100%,50%)`);

let blob = svg.append('circle').attr('r',35).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2).attr('fill','deepskyblue');
``````
3 Likes

Well, and the variable “color” is used for what exactly? 