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

Rate this content
Bookmark

Esta charla resalta el papel transformador de JavaScript en la creación de obras de arte dinámicas y autogeneradas. Adéntrate en cómo las bibliotecas como p5.js, Three.js y Paper.js están empoderando a artistas y programadores para empujar los límites de la creatividad digital.


Recorreremos la evolución del arte algorítmico, mostrando cómo JavaScript permite la creación de patrones intrincados y composiciones visuales complejas. La presentación contará con ejemplos y demostraciones interesantes, iluminando el poder de JavaScript en la creación de piezas de arte interactivas y en constante evolución. Concluyendo con ideas prácticas y recursos, esta charla es una puerta de entrada para aquellos que deseen explorar la fusión del arte y el código en la era digital.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Francisca Beatriz Medina Concha
Francisca Beatriz Medina Concha
24 min
17 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El arte algorítmico es una forma única de expresión artística donde la programación juega un papel fundamental en la creación de obras impredecibles y complejas. P5.js es una biblioteca de JavaScript que permite a artistas, diseñadores, educadores y principiantes crear experiencias web gráficas e interactivas. P5.js ofrece diversas características y posibilidades, como fractales, sistemas iterativos y la creación de arte con aleatoriedad. También permite la interactividad del usuario y proporciona un recurso llamado Open Processing para inspiración y ejemplos. La biblioteca ofrece una amplia gama de ejemplos para explorar y aprender, brindando infinitas posibilidades para crear piezas de arte complejas y únicas.

1. Introducción al Arte Algorítmico

Short description:

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 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. El arte algorítmico es un tipo de arte en el que el artista establece las reglas con la programación, con código. El resultado exacto de este tipo de arte puede ser impredecible y sorprendentemente complejo. 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.

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.

2. Explorando el Arte Algorítmico con P5.js

Short description:

Aquí podemos ver una obra de arte creada utilizando arte algorítmico, que combina arte y tecnología. El poder de las computadoras nos permite generar obras que a menudo son imposibles de crear manualmente. Utilizamos el código para generar este arte. Este tipo de arte, creado con p5.js, puede incluir patrones geométricos, fractales, visualizaciones de datos, simulaciones de la naturaleza, experiencias interactivas y más. La biblioteca fue creada por Larry McCarty para hacer que la programación sea accesible para artistas, diseñadores, educadores y principiantes. P5.js se inspira en processing y tiene como objetivo crear experiencias gráficas e interactivas en la web utilizando JavaScript.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Rome, ¡una cadena de herramientas moderna!
JSNation 2023JSNation 2023
31 min
Rome, ¡una cadena de herramientas moderna!
Top Content
Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.
Mejorando la Felicidad del Desarrollador con IA
React Summit 2023React Summit 2023
29 min
Mejorando la Felicidad del Desarrollador con IA
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
Análisis estático en JavaScript: Lo fácil y lo difícil
JSNation 2023JSNation 2023
23 min
Análisis estático en JavaScript: Lo fácil y lo difícil
Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
JSNation 2024JSNation 2024
20 min
Automatiza el Navegador con la API de Renderizado del Navegador de Workers
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
Conquistando la Complejidad: Refactorizando Proyectos JavaScript
JSNation 2024JSNation 2024
21 min
Conquistando la Complejidad: Refactorizando Proyectos JavaScript
Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.

Workshops on related topic

Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
WorkshopFree
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).