Creando ilusiones ópticas con CSS

Siempre me han flipado las ilusiones ópticas, sobre todo porque te das cuenta de como funciona nuestro cerebro bajo ciertas circunstancias, llegando a engañarnos para que veamos algo que en realidad no existe.

Hay mil ejemplos de ilusiones ópticas, yo he intentado recrear algunas de las más clásicas con CSS. Usando animaciones (en el caso de haberlas), dibujando algo con CSS y dejando actuar al cerebro de cada uno, o jugando con la perspectiva y el 3d en otros casos.

En este artículo veremos 6 ejemplos de ilusiones basadas en diferentes efectos ópticos. Además hay algunos enlaces a otras ilusiones ópticas y dejo por aquí un enlace a mi Colección Optical Illusions en Codepen, con (de momento) 15 ilusiones ópticas hechas con CSS y algo de HTML.

Ilusión de cuadrícula centelleante

Esta ilusión óptica descubierta por E. y B. Lingelbach y M. Schrauf en 1994 es una variación moderna de la ilusión de cuadrícula de Hermann (1870) pero con propiedades diferentes.

Los puntos oscuros parecen aparecer y desaparecer rápidamente en las intersecciones aleatorias, de ahí la etiqueta «centelleante». Cuando se mantienen los ojos directamente en una sola intersección, el punto oscuro no aparece.

El efecto de esta ilusión óptica a menudo se explica por un proceso neural llamado inhibición lateral. La intensidad en un punto del sistema visual no es simplemente el resultado de un solo receptor, sino el resultado de un grupo de receptores que responden a la presentación de estímulos en lo que se denomina un campo receptivo.

Más información en Wikipedia, y en inglés todavía más.

Ilusión de movimiento circular

En esta ilusión, aunque parece haber un movimiento circular simultáneo de las bolas blancas alrededor del círculo naranja central, en realidad los bolas blancas se mueven linealmente independientes entre sí.

Lo que crea la ilusión de movimiento circular en este caso es el retardo en la animación de cada bola.

Puedes pasar el cursor por encima del círculo naranja para mostrar las rutas de movimiento lineal de cada bola blanca.

Inspirado en el video Crazy Circle Illusion! de Youtube.

Ilusión de deriva periférica

En esta ilusión, descrita por primera vez por Faubert y Herbert en 1999, no hay animaciones de ningún tipo, es solo tu cerebro haciendo su trabajo.

Si fijas la vista en uno de los círculos azules (o en cualquier otro punto de la pantalla) verás que los círculos azules se detienen, pero al mover la vista hacia otros puntos de la pantalla (o incluso mientras lees esto) los círculos azules parecen ondear como una bandera.

La ilusión se basa en las diferencias temporales en el procesamiento de la luminancia que produce una señal que engaña a nuestro sistema de movimiento.

Más información en Wikipedia (en inglés).

Inspirado en la Ilusión de Movimiento Anómalo de Paul Nasca.

Aquí tenéis otro muy parecido pero con cuadrados en lugar de círculos: Peripheral Drift Illusion – Squares

Triángulo de Penrose

Este objeto imposible fue creado en 1934 por el artista sueco Oscar Reutersvärd y fue redescubierto de forma independiente por el físico Roger Penrose, en la década de 1950, quien lo hizo popular, describiéndolo como «imposibilidad en su forma más pura».

Aparenta ser un objeto sólido, formado por tres tramos rectos de sección cuadrada (también se hace con cubos o paralelepípedos), que se encuentran unidos formando ángulos rectos en los extremos del triángulo que conforman. Esta combinación de propiedades no puede ser satisfecha por ninguna figura tridimensional en un espacio euclídeo ordinario.

En este caso la ilusión está en la perspectiva, si cambiamos el ángulo de visión (pasando el cursor por encima de la figura) veremos el truco.

Mas información en Wikipedia.

Escalera de Penrose

Esta ilusión óptica fue descrita por los matemáticos ingleses Lionel Penrose y su hijo Roger Penrose en un artículo publicado en 1958.

Unas escaleras que cambian su dirección 90 grados cuatro veces mientras da la sensación de que suben o bajan a la vez, sea la dirección que sea. En su versión estricta de cuatro escaleras unidas su construcción 3D es imposible.

La ilusión óptica (una vez más) se basa en jugar con la perspectiva. Puedes pasar el cursor por encima para desengañar a tu cerebro.

Mas información en Wikipedia.

Por aquí dejo otro ejemplo muy parecido, también con una escalera: Stairs Optical Illusion.

Cascada Imposible de Escher

En esta ilusión del gran Escher se usa el mismo principio del triángulo de Penrose para crear el efecto de una cascada de agua perpetua.

El agua cae por el borde del acueducto y sobre la rueda hidráulica en un ciclo infinito imposible; en sus notas sobre la imagen, Escher señala que se debe agregar periódicamente algo de agua a esta máquina de movimiento perpetuo para compensar la evaporación.

En realidad, el efecto óptico elegido es uno originado por el problema de la representación del espacio tridimensional sobre la superficie bidimensional de un lienzo (o en este caso una pantalla): es imposible distinguir un elemento que se extiende hacia el fondo de otro que se eleva si no es a través de ciertos juicios realizados por el cerebro apelando a criterios no únicamente geométricos.

Si pasas el cursor por encima de la figura esta rotará en una animación en bucle y verás la realidad. También puedes hacer clic y mantener pulsado para hacer zoom, y detener la rotación (si estas sobre la figura) para ver la estructura 3d con más detalle.

Inspirado en la litografía «Waterfall», del gran artista neerlandés M. C. Escher.

También me he inspirado en esta versión simplificada de la cascada, la idea original era hacer algo menos detallado, pero luego no podía dejar de agregar más y más elementos. Me quedé con las ganas de poner unas ovejas… Lo dejo pendiente…

Con el tiempo iré añadiendo a este artículo nuevas ilusiones ópticas:

• NOV 2022 – Cascada Imposible de Escher