# Face Pointer Playground

Try it

  • Move head to move red pointer
  • Smile to the left or right to click on things
  • Move pointer above/or below page to scroll

The face pointer detects your heads rotation and position in space and from that (very roughly) determines where your forehead is pointed towards on the screen. It positions a pointer there and you can use the calculated values to all sorts of things which we'll explore!

const handsfree = new Handsfree({face: true})
handsfree.start()

// Where on the screen to position the pointer
handsfree.face.data.pointer.x
handsfree.face.data.pointer.y

# Plugins used

  • facePointer - calculates and positions a pointer on the screen
  • faceScroll - scrolls the window or active scroll area
  • faceClick - triggers a click event when a gesture is performed

# Scroll focus

The scrollFocus grants the Face Pointer the ability to scroll different areas by:

  1. Hover the pointer over an area with a scrollbar
  2. When the area is focused (it'll receive a red border) move the pointer into the scroll area (red boxes) to scroll in that direction
  3. Clicking into a scroll area also focuses it

You can update the scrolling speed at run time:

// Default is .15
// - ex) set to .01 to slow it down
handsfree.plugin.faceScroll.config.vertScroll.scrollSpeed = .01

You can also set the scroll zone (how many pixels from the edge of the scroll area to begin scrolling in that direction):

// Default is 100
// - ex) set to 0px to require pointer to go above the top/bottom of the area
handsfree.plugin.faceScroll.config.scrollZone = 0

You can set both of these during instantiation:

handsfree = new Handsfree({
  face: true,
  plugin: {
    faceScroll: {
      vertScroll: {
        scrollSpeed: .01,
        scrollZone: 0
      }
    }
  }
})

# Calibrating

The Face Pointer comes with a Calibrator, which you can trigger by running:

if (handsfree.isLooping) {
  handsfree.face.calibrate()
} else {
  handsfree.start(() => {
    handsfree.face.calibrate()
  })
}

⌚ More info coming soon

# Changing click gesture

⌚ More info coming soon

# Changing scroll speed

⌚ More info coming soon

# Changing other properties

⌚ More info coming soon

# Extending the Face Pointer

⌚ More info coming soon

# Contributing

⌚ More info coming soon