rekogition-track-faces.js

spotlitt.faces.forEach(face => {
    const el = document.getElementById(face.el_id)

    // Make sure we're between 0 and 100
    const inRange = (val) => {
        return Math.min(Math.max(val, 0), 100)
    }

    const getXPos = (width, height) => {
        const imageWidth = (face.width * height) / width
        let xDiff        = (width / 2 / imageWidth) * 100

        const { x } = face

        if (x > 50) {
            xDiff *= -1
        }

        return inRange(x - xDiff)
    }

    const getYPos = (width, height) => {
        const imageHeight = (face.height * width) / height
        let yDiff         = (height / 2 / imageHeight) * 100

        const { y } = face

        if (y > 50) {
            yDiff *= -1
        }

        // Center of face doesn't really include hair, bump it down just a bit to make it look right
        const buffer = 5

        return inRange(y - buffer - yDiff)
    }

    const positionFace = () => {
        // Grab the current width/height of the element
        const { width, height } = el.getBoundingClientRect()

        // Position the background with the new coordinates
        el.style.backgroundPositionX = getXPos(width, height) + '%'
        el.style.backgroundPositionY = getYPos(width, height) + '%'
    }

    // Listen for the window resizing
    window.addEventListener('resize', positionFace, 100)

    // Position face on initialization
    positionFace()
})