Patrones Infinitos en el Lienzo Digital: Desatando la Creatividad con JavaScript en el Arte Algorítmico

Hola, mi nombre es Francisca Medina y hoy voy a presentar ocho patrones infinitos en el lienzo digital, liberando la creatividad con JavaScript en el arte algorítmico. Hoy, debemos presentar una presentación personal de mí, luego voy a compartir con ustedes una introducción al arte algorítmico, luego conoceremos la biblioteca Py5.js, luego les mostraré algunos recursos experimentales, luego una conclusión y les mostraré la bibliografía de Py5.js. Mi nombre es Francisca Beatriz Medina Concha. Hoy, soy líder de front-end UX. Disculpen, está bien. De nuevo. Hola, mi nombre es Francisca Beatriz Medina Concha, también conocida como frani.be. Hoy, soy líder de front-end UX en Latam Airlines en una gerencia de A y DataOps. Mi formación es como diseñadora profesional, pero soy más una desarrolladora web. Trabajo como voluntaria en GSConf Chile y fui líder de front-end de la comunidad de mujeres que programan, la cual recientemente ha sido cerrada. Mis redes sociales son frani.be. Pueden encontrarme en Instagram y LinkedIn. Gracias. Entonces, ¿cuáles son mis motivaciones personales para mostrarles los patrones infinitos en el lienzo digital? Sucede que cuando estaba en la universidad, fui asistente de profesor de una clase llamada Creatividad en Programación. Así que allí enseñamos processing como arte algorítmico para que los estudiantes crearan arte con algoritmos y programación. Para mí, fue un momento muy especial enseñar a los estudiantes cómo crear su propia obra de arte original. Además, siempre me ha encantado el arte. Mi padre me llevaba a muchos museos cuando era niña y quiero compartir con ustedes lo que me motiva a hacer esta presentación hoy.

Entonces, el arte algorítmico es un tipo de arte en el que el artista establece las reglas con programación, con código. Y el resultado exacto de este tipo de arte puede ser impredecible y sorprendentemente complejo. Así que el artista crea el código, lo escribe, y luego como entrada y la salida es impredecible y sorprendentemente compleja en la mayoría de las veces. Este tipo de arte representa una forma única de expresión artística y la tecnología y la programación desempeñan un papel fundamental en la creación de la obra. El arte, en la historia del arte, comercia la cultura del estado del tiempo. Comenzamos el arte para representar el mundo y luego, con la fotografía y nuevos tipos de tecnología, muta en nuevas representaciones del arte. Y hoy en día, tenemos mucha tecnología, estamos en un mundo digital. Entonces, la expresión del arte está cambiando. Este tipo de arte, el arte algorítmico, no es una tabla por su capacidad de transferir algoritmos y datos en experiencias visuales y sensoriales. Un desafío o percepción tradicional del arte. El arte muta en la historia y es importante para nosotros mostrar este arte como un cambio de cultura en el que estamos inmersos.

Entonces, este tipo de arte involucra algoritmos en el proceso. Aquí podemos mostrar, podemos ver una obra de arte aquí, y este es el código de esta obra de arte. El arte algorítmico se reconoce por su capacidad para combinar arte y tecnología. Es la impresión del poder incomputable de las computadoras para crear obras que a menudo son imposibles de generar manualmente. Tenemos las pinturas y no podemos hacer manualmente este tipo de arte que rota e introduce en esta pieza. Tenemos el código, y la salida del código genera este arte. Aquí estamos mostrando un código de p5.js que es una biblioteca de JavaScript que hace este tipo de arte. Entonces, este tipo de arte puede incluir patrones geométricos, fractales, representaciones visuales de datos, simulaciones de la naturaleza, generación interactiva e instalaciones de luz y proyección. Luego, hay un concepto llamado algoritmo. Un algoritmo es un artista que crea arte con algoritmos. Aquí hay un seudocódigo de lo que es un algoritmo. Si la creación tiene un objeto de arte, un algoritmo y su propio algoritmo, entonces esto incluye un algoritmo. Si no hay creación o no hay objeto de arte, o no hay algoritmo, o no hay algoritmos propios, excluye no un algoritmo. Esta es una cita de Jean-Pierre Herbert en septiembre de 1995. Entonces, este tipo de arte se llama incluso mucho tiempo de hoy. Luego, quiero mostrarles una biblioteca de JavaScript que puede hacer este tipo de arte. Esta biblioteca se centra en crear experiencias gráficas e interactivas en la web. Y esta biblioteca fue creada por Larry McCarty, una artista y programadora mujer. Me gusta compartir su trabajo porque todo mi propósito es visualizar a una mujer en la programación. Su objetivo es hacer que la programación sea accesible para artistas, diseñadores, educadores y principiantes. En este tipo de arte, hay muchas personas que se están introduciendo en la programación, pero la pantalla en blanco puede darles miedo. Entonces, cuando les mostramos una salida que es colorida y artística, pueden familiarizarse más con el tipo de codificación.

Este trabajo, P5.js, se inspira en processing, una plataforma de programación para el arte visual. Hay una introducción de lo que es P5.js. Sí. Es una biblioteca. Quieren lo que les dije que es accesible para artistas, diseñadores, educadores y principiantes. Y quieren dibujar alguna obra de arte y obra de arte interactiva en la web. ¿Y por qué con JavaScript? Porque JavaScript es transversal en toda la web.

Disculpa. La historia de P5.js. Processing comienza en 2001. Processing es desarrollado por Cassy Reyes, artista, y Ben Fry, data científico. Te dije que processing era una idea para hacer arte algorítmico. Está basado en Java, no en JavaScript, Java. Entonces, quieren traducir esta idea a la web, porque Java no es tan fácil de traducir a la web. Entonces, processing.js es desarrollado por un programador. Y esta biblioteca traduce processing a la web. Pero en 2013, se desarrolla P5.js por Larry McCarthy, el artista y programador que te mostré anteriormente. Pero, ¿qué sucedió en 2014 y 2015? Algunas actualizaciones de Java y processing dificultaron que processing.js se mantuviera en uso. Entonces, en 2016, se detuvo el desarrollo de processing. Y luego, en 2018, se lanza el editor en línea de P5.js. Y desde 2020, processing, que está basado en Java, y P5.js continúan siendo

activamente utilizado y desarrollado. Y la comunidad de P5.js es activa en Instagram. Los sigo. Entonces, si quieres seguirlos, por favor síguelos para estar actualizado con las noticias de esta biblioteca.

Estamos explorando P5.js. Es como JavaScript code. Tenemos las funciones. La pieza de arte que hicimos está en una etiqueta Canva en HTML. Podemos hacer colores, figuras y muchas figuras y formas que podemos usar. Aquí, quiero mostrarte un ejemplo. Y tenemos el editor de P5.js. Y podemos hacer estrellas. Así que generamos una estrella con una forma de estrella. Usas star como una biblioteca. Hemos configurado este tipo de funciones de la biblioteca. Y podemos modificarlo en el editor de P5.js. Entonces, en este sitio web, podemos explorarlo. Es la documentación de P5.js y tiene muchos ejemplos que podemos explorar. Tenemos muchas posibilidades con P5.js. Como fractales y sistemas de iteración infinitos que son infinitos. Y esto es hecho por P5.js. Otras posibilidades son los autómatas celulares. Podemos modular sistemas naturales. Y hay un ejemplo del Juego de la Vida. Podemos ver el code de esta experimentación aquí. Juego de la Vida. Es un juego de la vida. Aquí está el code. Y con diferentes instrucciones, podemos hacer estos autómatas celulares. Y es impresionante cómo el code puede lograr eso. Y luego, otras grandes posibilidades que hacemos con P5.js es la aleatoriedad. Siempre tienes un resultado diferente

salida porque puedes crear una obra de arte totalmente aleatoria. Entonces, siempre será un patrón diferente que quieras compartir. Y la entrada y la interacción del usuario. Y otras posibilidades con P5.js es que puedes hacer si el usuario mueve el mouse o hace clic en algo, puedes hacerlo interactivo con el lienzo. Estamos aquí. Tenemos algunos y tenemos algunos ejemplos que podemos evaluar. Y quiero mostrarte la estructura de este un masterclass de Fede Santana, un diseñador, que podemos leer el código e intentar entenderlo. Es muy simple, la sintaxis de esta biblioteca. Entonces, ¿hay algún ejemplo que quieras explorar? Como el átomo. Ves, en español. Pero tienes el editor de P5. Y aquí está el código. Y tú le das al botón de reproducción. Y puedes ver la vista previa. Podemos identificar algunas funciones. Como la función setup. Cuando creas el lienzo. Y creas un lienzo de 40,000 por 30,000 píxeles. Y aquí está la función draw que crea la pieza. Y hace el movimiento. Y tenemos otro ejemplo. Y otra cosa que me encanta de esta biblioteca y la comunidad que hace este este fragmento de código es que son libres de usar y explorar. Aquí tenemos el código. Presionamos el botón. Y podemos ver este sistema solar. Sistema solar. Y cómo las formas giran alrededor del sol.

Genial. Hoy quiero mostrarte un recurso de experimentación para motivarte a unirte a los miles de programadores creativos y seguir su trabajo y encontrar inspiración para ti y para tus próximos desafíos de programación.

Hay un recurso y un gran recurso llamado Open Processing que son ejemplos de muchos ejemplos creados por la comunidad de diferentes fragmentos de código que puedes usar para tu uso personal

propuestas. Aquí está el recurso de Open Processing. Puedes elegir algunos ejemplos. Y puedes ver el código y usarlo para tus propias propuestas y obras de arte. Así es. Aquí están todos juntos. Y aquí está la entrada. Y solo puedes copiarlos en el sketch y usarlos en tu editor de Visual Studio código u otro editor o usar el editor de P5GS. Y hay mucha documentación y comentarios que puedes usar para entender el código. Y está hecho por y para la comunidad. Entonces, es un buen recurso para que explores y uses si lo deseas.

Y recuerda, hay fractales, formas geométricas, aleatoriedad. Hay muchos ejemplos que puedes explorar. Y de la misma manera, hay algunos ejemplos que son tan impresionantes para mí. El enredo que muestra la aleatoriedad, como formas y líneas aleatorias. Luego se enreda allí. Miedo a los esqueletos. Esa es otra impresionante obra de arte. Y arcos y flechas que se basa en otro ejemplo de Open Processing. Pero es impresionante para mí porque es infinito. Quiero mostrarte cómo funciona. Pieza interesante. Porque es infinito en la forma del infinito y contiene aleatoriedad y siempre es diferente e infinito. Entonces, aquí está la salida, la obra de arte. Pero aquí está el código. Se basa en este sketch. Y aquí está el código. Es un gran código. Pero es bonito y se basa en esta pieza. Es más simple. Pero si tomas algunos ejemplos, puedes hacer ejemplos más complejos en esta plataforma y recurso para y por la comunidad. Y conclusiones. Muchas gracias por esto. Muchas gracias por esto. Quiero saber si conoces este tipo de arte. Y estás motivado para ser el nuevo de la década. Estoy muy contento de estar aquí. Y espero que esto te motive a explorar nuevos tipos de código, nuevas salidas y obras de arte que puedes hacer para explorar y aprender sobre la lógica del código y la programación. Gracias. Y estas son las referencias a las que puedes ir a explorar. Gracias.