線形補完(マウス)メモ

var pos = { x: 0, y: 0, cx: 0, cy: 0 };
window.addEventListener('mousemove', move, false);
requestAnimationFrame(render);

move()関数

function move(e) {
	pos.x = e.screenX;
	pos.y = e.screenY;
}

線形補完とイージング

function lerp(start, end, t) {
	if (end == start) return start;
	return start + expo(t) * (end - start);
}
function expo(x) {
	let t = x; let b = 0; let c = 1; let d = 1;
	return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
}

render()関数

render() {
	pos.cx = lerp(pos.cx, pos.x, 0.01);
	pos.cy = lerp(pos.cy, pos.y, 0.01);
	const u_mouse.x = pos.cx / window.innerWidth;
	const u_mouse.y = pos.cy / window.innerHeight;
	requestAnimationFrame(render);
}

この記事が気に入ったらサポートをしてみませんか?