Submerged!

Noi viviamo sommersi nel fondo d'un pelago d'aria. -Evangelista Torricelli

JavaScript popularity

According to the 2019 Stack Overflow survey: "For the seventh year in a row, JavaScript is the most commonly used programming language"

easeSmoother

The CSS cubic-bezier timing function creates easing curves using 4 control points.

The first and last control points are fixed at (0,0) and (1,1), while the second and third control points are passed as arguments to create a variety of easing curves.

Sometimes an "in-out" easing is needed which starts slow and ends slow. I experimented to find a curve that best approximates the smootherStep function (see here) which produces a natural acceleration similar to when we change lanes while driving on the highway or when we reach for something (see also this).

Specifying the timing function as "cubic-bezier(.49,0,.51,1)" creates the lowest error compared to the minimum-jerk reference (see code at the bottom of this article). Visualize the timing here using Lea Verou’s cubic-bezier.com (compare to ease-in-out). JSFiddle example: https://jsfiddle.net/intrinsica/9ryqet30

If a preset it created, it could be aliased as easeSmoother or easeInOutSmoother.

The green curve below is the reference min-jerk function. The purple curve is the easeSmoother cubic-bezier.



JavaScript reference (see also):

function MinJerk(t) {
  var ts = t * t, tc = ts * t;
  return 6*tc*ts - 15*ts*ts + 10*tc;
}

Alternatively:

let MinJerk = t => (6*t*t-15*t+10)*t*t*t;

Below is the L2 error curve, comparing the cubic-bezier to the reference min-jerk function.

Infinite information

"We've entered an age of infinite information." -James W. Dunn

Our 2018 list of top mobile games

In our spare time, the most played games last year were:
1. Battle Bay from Rovio (strategy guide here)
2: BitCity from NimbleBit (strategy guide here)

3. Go Round from Little White Bear Studios
4: Hackers from Trickster Arts (defensive strategies here)