Lazy hands


Problem

Sunday morning, a lot of articles have piled up in the browser ready to get read, what could go wrong?

Unfortunately I couldn’t enjoy my article without having to constantly move my hand on the touchpad and scroll in order to read this really long article, which by the way, is quite interesting.

Idea

While searching for solutions I’ve stumbled upon face-api.js which looked promising.

A few hours later…

scrolling webpage by tilting head left or right

Steps

  • extract facial landmarks using faceLandmark68Net
  • store initial angle between the chin and the glabella
const beard = result.landmarks.positions[9];
const glabella = result.landmarks.positions[28];

const angle = Math.floor(
  (Math.atan2(
    Math.floor(glabella.y) - Math.floor(beard.y),
    Math.floor(glabella.x) - Math.floor(beard.x),
  ) *
    180) /
    Math.PI,
);
  • continuously calculate angle
  • compare angle with initial angle
  • use a rudimentary proportionate controller
  • scroll page based on the controller result
  • the bigger the angle difference the more aggressive the scroll
  • eat, read and scroll at the same time