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);
}