mvasilkov/somoto_task.html

## somoto_task.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf8">
        <title>Crows peck at your crops, Giuseppe!</title>
        <style>
            #thing {
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div id="thing"></div>
        <script>
            /* Color utils */
            function toRgb(colorString) {
                if (colorString.length != 7) {
                    throw Error(`Expected '#RRGGBB', got '${colorString}'`)
                }
                const n = parseInt(colorString.slice(1), 16)
                return [(n & 0xFF0000) >> 16, (n & 0xFF00) >> 8, n & 0xFF]
            }

            function toColor(rgbTuple) {
                return `rgb(${rgbTuple})`
            }

            /* Linear interpolation utils */
            function lerp(a, b, t) {
                return a * (1 - t) + b * t
            }

            function lerpRgb(a, b, t) {
                return a.map((_a, n) => Math.round(lerp(_a, b[n], t)))
            }

            /* This is the thing */
            function changeColor(node, startColor, endColor, duration = 2019) {
                startColor = toRgb(startColor)
                endColor = toRgb(endColor)

                let then = -1

                function render(now) {
                    if (then == -1) {
                        then = now
                    }
                    const t = Math.min((now - then) / duration, 1)

                    if (t < 1) requestAnimationFrame(render)
                    else console.log('Done')

                    node.style.backgroundColor = toColor(lerpRgb(startColor, endColor, t))
                }

                requestAnimationFrame(render)
            }

            /* Crows peck at your crops, Giuseppe! */
            const A = '#FF0080'
            const B = '#B2D7FF'

            changeColor(document.getElementById('thing'), A, B)
        </script>
    </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf8">
	<title>Crows peck at your crops, Giuseppe!</title>
	<style>
	#thing {
	height: 100px;
	width: 100px;
	}
	</style>
	</head>
	<body>
	<div id="thing"></div>
	<script>
	/* Color utils */
	function toRgb(colorString) {
	if (colorString.length != 7) {
	throw Error(`Expected '#RRGGBB', got '${colorString}'`)
	}
	const n = parseInt(colorString.slice(1), 16)
	return [(n & 0xFF0000) >> 16, (n & 0xFF00) >> 8, n & 0xFF]
	}

	function toColor(rgbTuple) {
	return `rgb(${rgbTuple})`
	}

	/* Linear interpolation utils */
	function lerp(a, b, t) {
	return a * (1 - t) + b * t
	}

	function lerpRgb(a, b, t) {
	return a.map((_a, n) => Math.round(lerp(_a, b[n], t)))
	}

	/* This is the thing */
	function changeColor(node, startColor, endColor, duration = 2019) {
	startColor = toRgb(startColor)
	endColor = toRgb(endColor)

	let then = -1

	function render(now) {
	if (then == -1) {
	then = now
	}
	const t = Math.min((now - then) / duration, 1)

	if (t < 1) requestAnimationFrame(render)
	else console.log('Done')

	node.style.backgroundColor = toColor(lerpRgb(startColor, endColor, t))
	}

	requestAnimationFrame(render)
	}

	/* Crows peck at your crops, Giuseppe! */
	const A = '#FF0080'
	const B = '#B2D7FF'

	changeColor(document.getElementById('thing'), A, B)
	</script>
	</body>
	</html>