Clean code challenge: Flipper animation

[dtinth]

This Flipper component is responsible for the QR Code’s spinning gesture (see video demo).

Some physics and maths tricks are employed to deliver a fluid user experience. When spinning the QR code, it calculates the gesture’s intensity and adjust the rotation speed to match. Some damping is added to give a bouncy feeling. And we have to handle a handful of edge cases as well, e.g. what if the user changes the ID while this thing is spinning.

Here’s the code:

promptpay-qr/webapp/src/Flipper.js

Lines 75 to 102 in 623118c

	// This model object takes care of the state and animation and handles input.
	function createFlipperModel (setRotationDegrees, onFlip) {
	// XXX: A lot of mutable variables here!!!
	// If you are up for a challenge, please help clean up this code!
	// Current rotation to be rendered (degrees)
	let current = 0
	// Target rotation (degrees)
	let target = 0
	// Current rotation speed (degrees/frame)
	let currentSpeed = 0
	// Spring strength
	const springK = 1 / 15
	// Rotation acceleration (degrees/frame^2)
	const acceleration = 0.7
	// Animation parameters...
	let animationActive = false
	let animationStartTime = Date.now()
	let lastFrameNumber = 0
	// State of dragging
	let pointerIsDown = false
	let history = [ ]

As you can see there are about 8 mutable variables. It’s about 100 lines of impure, imperative code. I would appreciate it if someone could make this code more functional and clean. So, hence this clean code challenge.