adrian-lorenzo / facetools

An application that uses face detection for drawing and trying heads using Processing.

Face tools

An application that uses face detection for drawing and trying heads using Processing.

Adrián Lorenzo Melián - Creando Interfaces de Usuario, ULPGC. [email protected]

Figura 1 - Demostración de la ejecución del modo de la aplicación "Face Drawer"

Figura 2 - Demostración de la ejecución del modo de la aplicación "Head Wardrobe"

---

Índice

• Introducción
• Requisitos
• Instrucciones de uso
• Implementación
  • Lienzo de dibujo
  • Masks
• Herramientas y recursos utilizados
• Referencias

Introducción

El objetivo de esta práctica es hacer uso de una combinación de salida gráfica en respuesta a una entrada de vídeo. Para ello, se ha desarrollado una pequeña herramienta que hace uso de los frames obtenidos de la cámara para realizar dos tareas diferentes a partir de dos modos.

El primer modo, denominado Face Drawer,permite realizar dibujos en un lienzo haciendo uso de la parte central de la cara como puntero. El segundo, denominado Head Wardrobe, coloca a las caras que aparezcan en el vídeo caretas/cabezas en tiempo real, pudiendo elegir entre tres opciones diferentes.

Requisitos

Para hacer uso de esta aplicación, es necesario tener instaladas la librería Video de Processing, y la librería compilada CVImage de Bryan Chung (que incluye OpenCV 4.0.0).

Instrucciones de uso

En el modo Face Drawer, mantén pulsado Space/Espacio para dibujar en el lienzo. Si deseas borrar todo el trabajo realizado, pulsa la tecla Backspace/Retroceso.

El el modo Head Wardrobe, pulsa Space/Espacio para cambiar de cabeza/careta. Si deseas visualizar las caras eliminando las cabezas/caretas, mantén pulsado la tecla Backspace/Retroceso.

El programa se inicia en el modo Face Drawer. Para cambiar de modo, solo debes pulsar la tecla Enter.

Implementación

Ambos modos hacen uso del marco de detección de Viola and Jones[1] para la detección de caras. A partir de conocer la posición y tamaño de la cara, el resto de tareas funcionan de manera diferente.

Lienzo de dibujo

Para dibujar usando la cara, el algoritmo utilizado es muy sencillo. El primer paso es detectar la cara. A partir de obtener la cara, es necesario obtener el punto medio del rectángulo que describe la cara. Este punto define la posición del puntero en el lienzo.

Cada vez que el usuario dibuja un punto, está almacenando en una lista el punto medio de su cara, que luego se dibujará en el canvas. Esta lista tiene tamaño limitado para evitar sobrecarga, eliminándose primero el punto más antiguo.

if (facesArr.length > 0) {  
  if (isSpacePressed){
    if (points.size() == maxPoints) {
      points.remove(maxPoints-1);
    }
    points.add(0,
      new PVector(
        facesArr[0].x + facesArr[0].width/2,
        facesArr[0].y + facesArr[0].height/2
      )
    );
  } else {
    circle(
      facesArr[0].x + facesArr[0].width/2, 
      facesArr[0].y + facesArr[0].height/2, 
      circleSize
    );
  }
}

Máscaras

Teniendo la posición y tamaño del rectángulo donde se encuentra la cara en la imagen, es muy sencillo añadir una máscara a una cara en una imagen. Para ello, solo hay que superponer la máscara con un tamaño adecuado en la posición de la cara (en nuestro caso, un poco mayor al tamaño de la cara, para un mejor resultado visual).

Herramientas y recursos utilizados

• Happy Smiley Face. Wikipedia Commons - Imagen bajo licencia Creative Commons 0 (Dominio público).
• Plum face with green eyes. Wikipedia Commons - Imagen bajo licencia Creative Commons 0 (Dominio público).
• Bearded man. Free SVG - Imagen de dominio público.
• Giphy - Herramienta usada para la creación de gifs a partir de los frames de la aplicación.

Referencias

• Guión de Prácticas 2019/20, Creando Interfaces de Usuario. Modesto F. Castrillón Santana, J Daniel Hernández Sosa.