Cómo Programar una Cara que Sigue el Cursor con la Mirada (Con Canvas y JavaScript)

El pasado domingo hice mi primer streaming en directo en la plataforma de Twitch, y decidí estrenarme con un poco de creative coding: desarrollar una página web interactiva en la que hay una cara que sigue el cursor con la mirada.

Aquí tienes el resultado. Queda chulo, ¿eh?

La idea me gustaba porque es una interacción sorprendente y simpática, además de que se tarda relativamente poco en implementarla (si sabes cómo).

Creo que no hace falta que te lo diga, pero si te interesan estos temas de creative coding sígueme en mi canal de Twitch, para que te notifique cuando haga el próximo streaming 😊

Para implementar esta web, lo primero que hice fue conseguir la foto adecuada, en mi caso ésta de Salvador Dalí con los ojos MUY abiertos:

Foto frontal en blanco y negro de Salvador Dalí con los ojos muy abiertos

Con un poquito de maña y Photoshop creé estos 3 PNGs transparentes:

Cabeza de Dalí recortada y con los ojos en blanco
El auténtico Iris de Salvador Dalí
Cabeza de Dalí con los ojos recortados (como si fuese una careta)

Teniendo estas 3 imágenes, simplemente tuve que "pintarlas" una encima de otra de la manera correcta en una página web. Esto podría haberlo hecho de muchas maneras, con más o menos CSS y Javascript.

Al final me decanté por usar directamente el elemento Canvas de HTML y un poco de JavaScript dibujar sobre el canvas y crear la interacción con el ratón. Esta quizá no es la manera más sencilla de implementarlo, pero sí la más interesante y sirve para ilustrar un montón de conceptos que son útiles para muchos otros proyectos: referencias al DOM, bucles, contexto 2D del canvas, eventos, etc.

Por comodidad y para poder compartir el código, lo programé sobre la plataforma Glitch, que es un cómodo editor online con una comunidad bastante guay.

De hecho, si quieres saber cómo está implementado puedes ver aquí el código que utilicé:

Para que lo entiendas mejor y no te tengas que tragar el streaming completo (que dura más de 2 horas 😱) he recortado las partes más relevantes en este vídeo para que puedas seguir el paso a paso sin toda la paja:

Vídeo con el paso a paso de cómo lo implementé

¿Te ha gustado? ¡Recuerda compartirlo! 🤗