alucho/static/js/eye.js

window.onload = function () {
    const body = document.getElementById('body');
    const lang = document.getElementById('lang-chooser');
    const eye = document.getElementById('logo');
    const logo = document.getElementById('alucho-logo');
    const iris = document.getElementById('iris');
    const pupil = document.getElementById('pupil');

    // #iris cx attribute animation settings (relative to #alucho-logo i.e. absolute inside the svg)
    const istart = 66;
    const iend = 126;
    const ilength = iend - istart;

    // #pupil cx attribute animation settings (relative to #iris cx)
    const pstart = -17;
    const pend = 17;
    const plength = pend - pstart;
    const oY = logo.getAttribute('height') / 2.;
    var firstTime = true;
    var x0 = -1;
    var y0 = -1;

    // preinitialize eye position (it could be never updated)
    const r = .9;//(ev.clientX) / (window.innerWidth) / 2 + .5;

    const iX = istart + ilength * r;
    iris.setAttribute('cx', iX);

    const pX = iX + pstart + plength * r;
    pupil.setAttribute('cx', pX);
    pupil.setAttribute('cy', oY);

    window.onmousemove = function (ev) {
        if (firstTime) {
            x0 = ev.clientX;
            y0 = ev.clientY;
            firstTime = false;
            return;
        }
        if (ev.clientX == x0 && ev.clientY == y0) return; // avoid fake mouse data (Safari et all)
        const eyeOffset = body.getBoundingClientRect().x + lang.clientWidth + eye.clientWidth / 2;
        const r = (ev.clientX - eyeOffset) / (window.innerWidth - eyeOffset) / 2 + .5;
        const ry = ev.clientY / window.innerHeight;

        const iX = istart + ilength * r;
        iris.setAttribute('cx', iX);

        const pX = iX + pstart + plength * r;
        const pY = oY + 20 * r * (1 - r) * ry;
        // p(r) = y0 + a * r * (1 - r) is a parabola
        // p(0) = p(1) = y0
        // p(.5) = y0 + a / 4
        pupil.setAttribute('cx', pX);
        pupil.setAttribute('cy', pY);
    };
};