|
|
App inventor 2 en español -- Tutorial de iniciación de App Inventor 2 en español -- ____________________________ 299E.- Facemesh. Seguimiento de la cara. - Mediante esta extensión podemos consultar los movimientos de nuestra cara. https://mit-cml.github.io/extensions/data/extensions/edu.mit.appinventor.ai.facemesh.aix IMPORTANTE: - En muchos cambios de Diseño es necesario Reiniciar la Conexión del MIT Companión para que tome esos cambios.
___________________________ - Dirigimos la cámara delantera de nuestro móvil hacia nosotros, observamos nuestra cara. - La extensión toma 450 puntos de nuestra cara. - Si marcamos la Propiedad ShowMesh veremos sobre nuestro rostro la posición de cada punto. - Según nos movamos, esos puntos cambiarán su posición x,y - Cada punto tiene dos coordenadas, en una tabla 1--> x 2-->y - Algunos puntos están localizados directamente como Chin, Forehead, LeftEyeBottom,...
- También podemos localizar la posición de los puntos por su número, por ejemplo el punto número 2 es la punta de la nariz.
- Imágenes de: http://appinventor.mit.edu/yrtoolkit/yr/tutorials/facemesh.html - Si marcamos la Propiedad ShowMesh veremos sobre nuestro rostro la posición de cada punto, son 450. - Se ven muy pequeño y muy juntos. - Así que vamos a realizar una aplicación para ver el número de cada punto de una forma más clara. - Podemos dibujar en un papel una cara y dirigir la cámara a ese dibujo, observaremos algo así, - Solo he puesto los puntos pares, ya que en total son 450 y si ponemos todos se mezclarán unos con otros.
____________________
____________________
___________________________
____________________
____________________ 416,311,312,313,14,83,82,81,192,79,97,91,180,87,16,317,404,325, 309
___________________________
- Esta aplicación dibujara dos bolas azules sobre los ojos de la cara (LeftEyeTop y RightEyeTop) - También dibujará una bola amarilla sobre la nariz, es el punto 2. - La bola amarilla la podemos cambiar de posició pulsando los Botones, así iremos viendo a qué parte de la cara corresponde cada número. - En el evento VideoUpdated vamos a comprobar si la posición de la nariz ha variado, si no ha variado es que nuestra nariz, el punto 2, la bola amarilla no estará cambiando, en ese caso el móvil vibrará. ____________________
____________________
___________________________ - Imágenes de: http://appinventor.mit.edu/yrtoolkit/yr/tutorials/facemesh.html
___________________________ - La bola roja está en nuestra nariz, debemos mover la nariz, se moverá la bola roja, hasta poner la bola roja en la cesta. - Se dibujará el recorrido de la bola. - Si abrimos la boca se borrará el recorrido de la bola. - La base de nuestra nariz es el punto número 2, por eso lo he puesto en la variable nose. - También podríamos poner la nariz con la propiedad NoseBottom, en este caso tendríamos las posiciones x,y. ____________________
____________________
___________________________ - Mediante tu nariz marca las letras. - Mueve tu cabeza de forma que la nariz situe a la bola sobre las letras. - Cada vez que una bola se situe sobre una letra su botón correspondiente se pondrá de color rojo. - Cuando los cinco botones sean de color rojo y abras tu boca, se volverán a poner del color inicial. - La imagen face10t.png es una imagen con fondo transparente. - A la variable x le resto 3, x - 3, para que el punto de chequo esté fuera del color de la bola. ____________________
____________________
___________________________ - Elegimos una cierta cantidad de puntos y los unimos mediante líneas, obtenemos una malla, mesh. - Podemos poner la cámara delantera o la trasera, en esta se produce efecto espejo. - También podemos poner como fondo nuestro rostro y fondo blanco. ____________________
____________________ - En vez de poner varios bloque de puntos, podemos escribir todos los pares de puntos en una lista y luego dibujar los puntos de esa lista, está de forma incompleta en el bloque "for next", solo he puesto un ojo.
- Corrección del efecto espejo. - Con la cámara trasera (Camera Back), la malla sale con efecto espejo, es decir cuando el Modelo mueve la cabeza hacia la derecha, la malla (Mesh) se mueve hacia la izquierda como indica la siguiente imagen. - El código que hace la corrección se encuentra en el Procedimiento draw_line, la parte del else.
___________________________ - Enfocamos con la cámara trasera (Back Camera) la foto de un rostro, por ejemplo el siguiente, y pulsamos el Botón Foto 1.
- Enfocamos con la cámara trasera (Back Camera) la foto de otro rostro, por ejemplo alguno de los que muestro en la siguiente imagen, y pulsamos el Botón Foto 2
- Pulsamos el Botón Comparar y obtendremos un número, cuánto más bajo sea ese número más se parecerá la primera Foto a la segunda. - Los rostros deben estar de frente y derechos. - Cuando enfoca los rostros saldrá una malla verde sobre ellos, esa malla tiene el efecto espejo, como vimos en el ejemplo anterior (ejemplo 7), esto no tiene importancia para el cálculo ya que en los dos rostros se produce el mismo efecto. - Observarás que aunque las Foto1 y la Foto2 las realice en el mismo rostro, hay diferencia. Intenta no mover la cámara de un Clic a otro en los botones. - También puedes utiizar la Cámara Delantera, pero las dos Fotos deben estar realizadas con la misma Cámara. - En esta página hay muchas caras para hacer pruebas, los rostros deben estar con los ojos en horizontal, si dobla la cabeza las medidas son erróneas. https://unsplash.com/s/photos/face ____________________
____________________ - Puntos para dibujar la malla: 360,387,387,399,399,254,254,360,134,160,160,34,34,24,24,134,309,14,14,79,79,86,86,316,316,309,444,11,224,11,55, 11,285,11,285,357,55,128,360,285,360,357,34,55,34,128,357,366,128,137,366,378,378,149,149,137,3,9,9,11,3,430,3, 210,9,399,9,134,430,366,210,137,430,9,210,9,316,378,86,149,316,366,86,137,309,430,79,210,360,444,444,399,134,224,224,34 - Puntos para calcular las distancias: 11,3,360,34,430,366,210,137,360,357,34,128,3,153,11,357,11,128,9,366,9,137,285,366,55,137,430,210,285,137,55,366
____________________ - Hay distintos métodos para comparar las imágenes, yo he creado este, puedes adaptarlo a otros para comparar su eficacia. - En la lista points_distance tenemos una cadena de pares de puntos, por ejemplo con (11,3) calculamos la distancia entre esos dos puntos, con (360,34) la distancia entre esos dos puntos... - Calculamos la distancia entre los ojos, eye_eye, tomaremos esta medida como referencia. - Vamos calculando la distancia entre pares de puntos, dividiendo esa distancia entre eye_eye y guardando esos valores en una TinyDB. - Los valores de la Foto 1 se guardan en los tag: 1, 3, 5, 7, 9, 11,... ya que el offset es 0. - Los valores de la Foto 2 se guardan en los tag: 101, 103, 105, 107, 109, 111,... ya que el offset es 100. - Al pulsar el Botón Comparar, se resta los valores de los tag anteriores y se van sumando sus diferencias. - El error total indicará la diferencia entre un rostro y otro, cuanto más cercano a 0, más se parecerán los dos rostros.
- Otro método sería calcular el valor cada distancia, ir sumándolas, luego, calcular la raíz cuadrada total y dividirlo entre la referencia. https://www.sewaproject.eu/files/0ffc0251-2934-4ecf-812f-9d641c82f729.pdf ____________________ - Consulta esta página: https://google.github.io/mediapipe/solutions/face_mesh.html - Carga este ejemplo, lo he probado con FireFox (tienes que conectar una cámara web), con Chrome no me ha funcionado. https://code.mediapipe.dev/codepen/face_mesh - Puedes abrir la parte de abajo en una nueva ventana. https://cdpn.io/mediapipe/fullembedgrid/KKgVaPJ?animations=run&type=embed - o bien, baja este archivo a tu ordenador y ejecútalo con Firefox facemesh.htm (en este sitio web no funciona, debes bajar este archivo a tu ordenador y ejecutarlo con Firefox.)
https://face-recognition.karkranikhil.vercel.app/ https://dev.to/karkranikhil/face-recognition-using-javascript-33n5 ___________________________
|
| - Mi correo: juana1991@yahoo.com |
- KIO4.COM | - Política de cookies. | Textos e imágenes propiedad del autor: © Juan A. Villalpando No se permite la copia de información ni imágenes. |