Partículas, Píxeles y Propósito: Creatividad en el Frontend Más Allá de la Cuadrícula

Hola a todos. Soy Chris, y estoy muy emocionado de estar aquí con todos ustedes. Hoy vamos a hablar sobre partículas, píxeles y propósito. Y podrías estar pensando, espera, ¿es esta una clase de física o una charla de React? No te preocupes. Prometo que no es ninguna de las dos o tal vez sea ambas. En los próximos minutos, te llevaré en un pequeño viaje. Uno que conecta creatividad, código y significado. Pero antes de comenzar, un poco sobre quién soy. He estado construyendo cosas en la web durante unos 15 años. Pasé seis años y medio de esos años en Google, donde fui uno de los primeros ingenieros de UX. Mi trabajo era hacer que los productos de Google se sintieran más humanos a través de sistemas de diseño como el diseño de materiales. Y después de eso, comencé mi propio estudio, Torii, donde nos enfocamos en transformar front ends para startups y empresas. Lo que realmente significa es que hacemos que las cosas se sientan bien. Pero no solo que se vean bien o funcionen bien. Sino que se sientan como si hubieran sido creadas con cuidado. Porque al final del día, las grandes interfaces son como grandes conversaciones. Deberían dejar a las personas sintiendo algo.

Esto es todo sobre mí. Así que hablemos de partículas, píxeles y tal vez un poco de propósito. Así que antes de continuar, quiero hacer una pausa aquí por un segundo y realmente pensar en esta pregunta. ¿Por qué eres un desarrollador de React? ¿Es porque te encanta programar? ¿Porque disfrutas resolver problemas y hacer que las cosas funcionen? ¿Porque es divertido jugar con computadoras y hacer que hagan cosas geniales? ¿O tal vez es por el sueldo? Y oye, no hay juicio ahí. O tal vez, solo tal vez, es porque crees que a través de lo que construimos, realmente podemos hacer que la vida de las personas sea un poco mejor. Cualquiera que sea tu respuesta, tenla en mente. Porque esa es la razón por la que tu razón es la base de todo lo que estamos a punto de explorar juntos.

Para mí, todo comienza cuando era niño. Crecí viendo mucho anime y películas de Disney. El Rey León, Dragon Ball Z eran mis favoritos. Las animaciones, la música, la historia, todo traía una mezcla de emociones que tuvo un impacto profundo en mí. A partir de ahí, los videojuegos me llevaron al siguiente nivel.

Pasar de ser un espectador pasivo a ser parte activa de la historia, fue un gran momento de asombro para mí. Soy un gran fan de Nintendo, y el mismo impacto que Disney tuvo en mí, Nintendo lo tuvo en mí. Todavía recuerdo el día de Navidad cuando recibí Zelda, Garena of Time. Recuerdo el olor del manual de instrucciones. Olía tan bien, como si estuviera a punto de embarcarme en el bosque de Zelda de verdad. Y solo jugarlo, fue increíble.

Jugué horas interminables, mis ojos estarían bien abiertos la mayor parte del tiempo, sin parpadear durante horas. Estaban tan rojos que mi mamá comenzó a preocuparse. Sabía que no era raro. Así que se colaba en mi habitación y miraba mis ojos cuando estaba jugando, y descubrió que apenas parpadeaba durante minutos. Así que me decía, si juegas, tienes que parpadear cada 10 segundos, maldita sea. Parece que no lo hice.

Y mis ojos sufrieron, y con el tiempo, perdí visión, me dio miopía y astigmatismo. Y aquí estoy hoy con gafas desde entonces. Mi mamá siempre me dice esta frase de, te lo dije. Así que mientras crecía, tenía dos pasatiempos, jugar fútbol y videojuegos. Eso era todo. De hecho, el fútbol se veía así. Tuve que comprar estas gafas. Por alguna razón, no funcionaron para mí. Pero ese es un tema para una historia diferente.

De todos modos, cuando la gente me pregunta, ¿qué quieres ser? Tenía dos respuestas. Una que me satisfaría a mí, que es quiero ser futbolista. Lo decía cuando mis padres no estaban cerca. Y otra para satisfacer a mis padres, quiero ser ingeniero de software, para poder construir y luego jugar videojuegos. La última parte, no la decía, porque de lo contrario, mis padres se enfadarían.

De todos modos, era un estudiante terrible. Me inclinaba más hacia los videojuegos, cuando el fútbol empezó a ser más serio, menos divertido. Imagino que quería evitar a toda costa cualquier dificultad en mi vida. Pero luego cumplí 18 años, y tuve que tomar decisiones sobre lo que necesitaba estudiar. Así que lo único que me emocionaba era la ingeniería de software. Pero sabía que no estaba preparado para este desafío de convertirme en ingeniero de software. Así que la vida de repente se volvió bastante dura.

Mi primer año en la universidad, no aprobé ni una sola materia. Así que tuve que decidir si continuar mis estudios como ingeniero de software, o hacer otra cosa. Entonces tuve este sueño donde un yo futuro me hablaba, Chris, si no cambias, si cambias a algo más fácil, que no te gusta en primer lugar, siempre lamentarás el hecho de que ni siquiera hiciste el trabajo, ni siquiera lo intentaste. Y fue entonces cuando me di cuenta de que tenía que darme una última oportunidad, al menos poner el trabajo por un año más, hacer mi mejor esfuerzo y ver hasta dónde puedo llegar.

Así que puse el trabajo, comencé a cambiar algunos hábitos, y las cosas poco a poco empezaron a cambiar. Empecé a obtener buenas calificaciones, empecé a disfrutar de las matemáticas, la física y la programación, lo aburrido se volvió divertido. Así que empecé a encontrar esta alegría en cosas que antes parecían aburridas y desagradables. Y la vida con cada desafío, poco a poco, me dio la confianza para ser lo que soy hoy.

La razón por la que les cuento todo esto, es que es importante encontrar alegría al intentar alcanzar nuestras metas. Cuando la vida se pone difícil, vamos a poner el trabajo, pero aún así encontrar la alegría en las pequeñas cosas. Convertirse en ingeniero de software fue mucho trabajo para mí. Pero para poder lograr eso, tuve que encontrar la alegría en el viaje, la diversión y el equilibrio de cada día.

Así que las partículas y los píxeles me recuerdan esto. Vivimos en un mundo en constante cambio, es muy impredecible, no fácil, a veces muy frustrante. Pero luego, cuando se pone difícil, es bueno reflexionar por qué empezamos en primer lugar, haciendo lo que estamos haciendo. Y comencé a buscar cosas que puedan despertar alegría y diversión. Para mí, uno de mis objetivos como ingeniero de software ha sido crear experiencias que la gente ame, para poder aprender a crear emociones y sentimientos similares a los que las películas y los juegos me hicieron sentir cuando era niño.

Así que cuando miro 3js, las experiencias que la gente es capaz de crear, se ven tan asombrosas, tan poderosas. Es tan genial y me trae de vuelta esos sentimientos que tenía cuando era niño. Y eso me ha llevado a donde estoy hoy. Ahora, no es una tecnología fácil. Es intimidante. No voy a mentir. Pero déjame compartir contigo algunas cosas que aprendí mientras intentaba hacer cosas geniales con la tecnología.

No estoy seguro de que lo hayas notado, pero lo que estás viendo frente a ti es una espiral hecha en 3js. Esta es una de mis formas favoritas. Se encuentra en todas partes en la naturaleza, desde girasoles hasta conchas, incluso en el arte. Probablemente hayas visto esta impresión antes. Es la gran ola de Kanagawa. Es muy hermosa, pero representa algo oculto en su forma. Está construida sobre una relación matemática simple llamada el número áureo.

Y lo que es fascinante es que no es aleatorio. ¿Qué es este número áureo? Para aquellos que no saben qué es esto, déjame explicártelo en este patio de juegos interactivo. Imaginemos que tenemos una cuadrícula donde vamos a añadir píxeles cuadrados. Vamos a empezar con un cuadrado de uno por uno, y nuestro objetivo es añadir cuadrados en el lado más grande de la forma previa. Así que si añadimos uno más, vamos a obtener dos cuadrados de uno por uno. Si añadimos uno más en el lado más grande, vamos a obtener un dos por dos. Y si hacemos el mismo proceso de nuevo, ahora vamos a obtener un tres por tres. Así que tres por tres, uno, deberíamos obtener como un cinco por cinco en el siguiente.

Y eso es lo que estamos obteniendo. Si continuamos este proceso, ahora obtenemos un ocho por ocho. No sé si te das cuenta, pero lo que estamos haciendo ahora mismo es una secuencia llamada Fibonacci. Comenzamos con uno, uno, dos, tres, cinco, ocho. Fibonacci, lo que estamos haciendo es sumar el cuadrado actual más el anterior. Así que cinco más ocho, 13. Así que el siguiente cuadrado debería ser 13. El siguiente, 13 más ocho, deberíamos obtener un 21. Muy bien.

Esta proporción o relación que se ha utilizado se llama el número áureo. Si dibujáramos una espiral usando la dirección de la creación de este cuadrado, ¿qué sucede? Esto es lo que sucede. Estamos viendo una espiral usando el ángulo áureo. Así que para resumir lo que hemos hecho hasta ahora, lo que hemos hecho hasta ahora es el número áureo que también se llama phi. Describe la proporción. Cada nueva sección es más grande que la anterior por la misma proporción. Y eso equivale a 1.618.

Es dividir el índice de Fibonacci de n por el índice de Fibonacci de n menos uno. Y así es como la naturaleza equilibra una escala. Lo ves en girasoles, conchas, incluso galaxias. Pero la naturaleza no solo crece en tamaño. También crece en términos. Si tomas esa misma proporción del número áureo y la aplicas a un círculo en lugar de a una línea, obtienes esta espiral construida al rotar cada paso alrededor de 137.5 grados. Eso se llama el ángulo áureo. Es la rotación que las plantas usan al crecer hojas o semillas, para que nunca se superpongan. Es un patrón muy eficiente en la naturaleza. Hasta ahora, usando la fórmula del ángulo áureo rotando 137.5 grados, ¿qué sucede cuando vamos más allá de unas pocas partículas y comenzamos a dibujar miles de ellas a la vez?

Los shaders se ejecutan directamente en la GPU. Procesan cada píxel en paralelo. En lugar de dibujar un punto a la vez, podemos calcular miles de ellos o incluso millones simultáneamente. ¿No es genial? Construí este playground que estoy a punto de mostrarte en React. Toma unos segundos cargarlo. Solo dame un segundo.

Aquí tienes. Así que en este playground, lo que puedo hacer es interactuar con el shader directamente. Puedo reducir todas estas partículas a una o incluso aumentar. Y no sé si te diste cuenta, pero esto es en realidad el número áureo en movimiento. Podemos cambiar la escala, ver las diferentes formas, aumentando el tamaño del punto. ¿No es genial? De todos modos, pero la naturaleza no se queda quieta. Respira. Así que lo hacemos respirar en esta siguiente iteración añadiendo un par de líneas como estás viendo allí.

Es un shader. No sé si te diste cuenta si estás familiarizado con este código, pero creo que puedes entender lo que está sucediendo allí. Lo que estamos haciendo aquí es añadir una respiración natural. Cada partícula respira independientemente, todo calculado en paralelo en la GPU. Estoy a punto de mostrarte también cómo se ve esto en el playground. Esperemos unos segundos para cargar. Está tardando más de unos segundos en cargar. Veamos. Un segundo, chicos. Esto sucede cuando haces tus propias presentaciones.

Wow, boom. Esto es lo que pasa cuando haces tus propias presentaciones. No lo recomiendo, pero espero que puedas entender de dónde vengo. Así que ahora tenemos el playground. Tenemos 2000 partículas aquí. Nuevamente, podemos reducir todas estas partículas hasta una, aumentarlas, ver cómo respiran mientras crezco estas partículas, y hacer lo mismo una y otra vez. Es muy genial. Puedo jugar con este playground durante horas.

De todos modos, ahora vamos a llevarlo al siguiente nivel. Entonces, ¿qué tal si vivimos, ya que vivimos en un mundo donde podemos interactuar con él, quería hacerlo reaccionar en tiempo real. Y ahí es donde entra React 3 Fiber. Con solo unas pocas líneas de código, convierto el shader anterior en un componente de React, uno que puedo usar en cualquier lugar, como un blog visual plug and play. Así que vamos a ver esto. Estás viendo el código, pero también puedo traer el playground, con suerte toma menos segundos.

Este es un componente mucho más grande, y lo verás en un segundo. Con suerte, nuevamente, estamos teniendo estos pequeños problemas. Aquí tienes. Fue más rápido que antes. De todos modos, aquí estás viendo, de hecho, pasamos de 2000 partículas antes a 50,000. Ahora tenemos muchas más partículas. Nuevamente, puedo reducirlas, puedo aumentarlas, la forma en que las estoy poblando, todas usan el número áureo. Puedo escalarlo. Y ves como unos patrones muy interesantes. Incluso puedo cambiar la fuerza de la respiración. Así se siente más vivo. Incluso puedo añadir algunos colores. Tal vez un poco de amarillo, y luego un poco de rojo por aquí. Tal vez podamos añadir aquí un poco de amarillento nuevamente, para finalizar con un poco de blanco. ¿Por qué no? Tal vez también podamos reducir un poco la escala. Así podemos ver todo.

Y aquí es exactamente donde React brilla para mí. Me permite tomar una pieza de un shader complicado y convertirlo en un componente fácil de usar que puedo colocar en cualquier lugar. Y fue entonces cuando pensé qué pasa si llevo esto aún más lejos en una forma diferente. Todo esto proviene de la misma fórmula del ángulo áureo.

Así es como hice toda mi presentación. No estoy seguro si lo notaste, pero todas las transiciones, todo se hizo usando Three Js con React Fiber. {{^}}Y esta es exactamente la razón por la que amo el frontend. Es el lugar donde las matemáticas se encuentran con el arte, donde el diseño se encuentra con la ingeniería, y donde la curiosidad se convierte en creación.

Así que cuando te pregunté al principio, ¿por qué eres un desarrollador de React? Para mí es por momentos como este. Porque al final del día, lo que realmente importa es encontrar alegría en las cosas que hacemos, en las cosas que creamos, y significado en por qué lo hacemos. Quiero dejarte con este famoso consejo de Chris Do. Gracias.