Infinite Patterns in the Digital Canvas: Unleashing Creativity With JavaScript in Algorithmic Art

Rate this content
Bookmark

This talk highlights the transformative role of JavaScript in creating dynamic, self-generated artworks. Delve into how libraries like p5.js, Three.js, and Paper.js are empowering artists and programmers to push the boundaries of digital creativity.


We'll journey through the evolution of algorithmic art, showcasing how JavaScript enables the creation of intricate patterns and complex visual compositions. The presentation will feature engaging examples and demonstrations, illuminating the power of JavaScript in crafting interactive, ever-evolving art pieces. Concluding with practical insights and resources, this talk is a gateway for anyone eager to explore the fusion of art and code in the digital age.

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

FAQ

Algorithmic art is a type of art where the artist sets the rules using programming and code, resulting in unpredictable and complex outputs. It merges art and technology, creating works that are often impossible to generate manually.

You can find Francisca Medina on Instagram and LinkedIn under the handle frani.be.

P5.js is a JavaScript library focused on creating graphic and interactive web experiences. It is designed to make coding accessible to artists, designers, educators, and beginners, and is inspired by the Processing programming platform for visual art.

P5.js was developed by Lauren McCarthy, an artist and programmer, in 2013.

P5.js was inspired by the Processing programming platform, which was developed in 2001 by artist Casey Reas and data scientist Ben Fry. Processing focused on algorithmic art and was based on Java. P5.js translates these concepts to the web using JavaScript.

Processing was developed in 2001 to support algorithmic art using Java. P5.js, developed in 2013, brought these concepts to the web using JavaScript. Processing.js, an intermediary library, was phased out due to Java updates, leading to the active development and use of P5.js.

P5.js allows for the creation of geometric patterns, fractals, visual representations of data, simulations of nature, interactive generation, and light and projection installations. It supports randomness, user input, and interaction.

Open Processing is a significant resource for learning and exploring P5.js. It offers numerous examples and documentation created by the community, which can be used for personal projects and inspiration.

Algorithmic art is unique because it merges art and technology, using the computational power of computers to create complex and unpredictable works that are often impossible to generate manually. It challenges traditional perceptions of art and represents a new form of artistic expression.

Francisca Beatriz Medina Concha, also known as frani.be, is a UX front-end leader at Latam Airlines in the Gerensy of A and DataOps. She is a professional designer and web developer, and has volunteered with GSConf Chile and Women Who Code.

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

Algorithmic art is a unique form of artistic expression where programming plays a fundamental role in creating unpredictable and complex works. P5.js is a JavaScript library that enables artists, designers, educators, and beginners to create graphic and interactive web experiences. P5.js offers various features and possibilities, such as fractals, iterate systems, and creating art with randomness. It also allows for user interactivity and provides a resource called Open Processing for inspiration and examples. The library offers a wide range of examples for exploration and learning, providing endless possibilities for creating complex and unique pieces of art.

1. Introduction to Algorithmic Art

Short description:

Hello, my name is Francisca Medina and today I'm going to present eight infinite patterns in the digital canvas, unleashing creativity with JavaScript in algorithmic art. Today, we must present a personal presentation of me, then I'm going to share with you an algorithmic art introduction, then we're going to know about Py5.js library, then I'm going to show you some experimental resources, then a conclusion, and I'm going to show you the bibliographic of Py5.js. Algorithmic art is a type of art when the artist set the rules with programming, with code. The exact result of this type of art can be unpredictable and surprisingly complex. This type of art represents an unique form of artistic expression and there is technology and programming play a fundamental role in the creation of the work.

Hello, my name is Francisca Medina and today I'm going to present eight infinite patterns in the digital canvas, unleashing creativity with JavaScript in algorithmic art.

Today, we must present a personal presentation of me, then I'm going to share with you an algorithmic art introduction, then we're going to know about Py5.js library, then I'm going to show you some experimental resources, then a conclusion, and I'm going to show you the bibliographic of Py5.js.

My name is Francisca Beatriz Medina Concha. Today, I'm UX front-end leader. Sorry, okay. Again. Hello, my name is Francisca Beatriz Medina Concha, aka frani.be. Today, I'm UX front-end leader in Latam Airlines in a gerensy of A and DataOps. My background is I am professional designer, but I am most a web developer. I work as a volunteer in GSConf Chile and I was a front leader of the community of women who code, whose recently has been closed. My social networks are frani.be. You can find me on Instagram and LinkedIn. Thank you.

So, what are my personal motivations for show you the infinite patterns in the digital canvas? It happens that when I was in the university, I was a teacher assistant of a class named Creative in Programming. So, in there, we teach processing as algorithmic art for the students to make them art with algorithm and programming. So, for me, it was a very special time to teach the students how to create their original piece of art. Then, I only, I always loved art. My father showed me when I was a child a lot of museums and I want to share with you what motivates me to make this presentation today.

So, algorithmic art is a type of art when the artist set the rules with programming, with code. And the exact result of this type of art can be unpredictable and surprisingly complex. So, the artist made the code, he writes the code, and then as an input and the output is unpredictable and surprisingly complex in the most of times. This type of art represents an unique form of artistic expression and there is technology and programming play a fundamental role in the creation of the work. Art is, in the story of art, the art trades the culture of the state of the time. We start the art to represent the world and then with the photography and new types of technology, it mutates in new representation of art. And today, we have a lot of technology, we are in a digital world. So, the expression of the art is changing. This type of art, the algorithmic art, is not a table for its ability to transfer algorithm and data into visual and sensory experiences. A challenging or traditional perception of art. The art mutates in the history and is fine to us to show this art as a change of culture we are immersed. So, this type of art involves algorithm that is in the process.

2. Exploring Algorithmic Art with P5.js

Short description:

Here, we can see a piece of art created using algorithmic art, which merges art and technology. The power of computers allows us to generate works that are often impossible to create manually. We use the code to generate this art. This type of art, made using p5.js, can include geometric patterns, fractals, data visualizations, simulations of nature, interactive experiences, and more. The library was created by Larry McCarty to make coding accessible to artists, designers, educators, and beginners. P5.js is inspired by processing and aims to create graphic and interactive web experiences using JavaScript.

Here, we can show, we can see a piece of art here, and this is the code of this piece of art. A algorithmic art recognizes for its ability to merge art and technology. It is in the impression of uncomputed power of computers to create works that are often impossible to generate manually. We have the paintings and we cannot do manually this type of art that it rotates and introduces in this piece. We have the code, and the code output generates this art.

Here, we are showing a code of p5s.js that is a library of JavaScript that makes this type of art. So, this kind of art may include geometric patterns, fractals, visual representation of data, simulation of nature, interactive generation, and light and projection installations. Then is a concept named the algorithm. An algorithm is an artist who creates art with algorithms. Here is a pseudo code of what is an algorithm. If creation has an object of art, an algorithm, and one's own algorithm, so this includes an algorithm. As if there's no creation or not object of art, or not algorithm, or not one's own algorithms, exclude not an algorithm. This is a quote of Jean-Pierre Herbert in September of 1995.

So, this type of art are named even a lot of time of today. Then, I want to show you a library of JavaScript that can make this type of art. This library is focused on creating graphic and interactive web experience. And this library was created by Larry McCarty, a female artist and programmer. I like to share their work because all of my purpose is to visualize a woman in programming. It's goal is to make coding accessible to artists, designers, educators, and beginners. In this type of art, there's a lot of people that are introducing in programming, but the black screen can be scary for them. So, when we show you an output that is colorful and artistic, they can be more familiar with the type of coding.

This work, P5.js, is inspired by processing, a programming platform for visual art. There's the introduction of what is P5.js. Yeah. It's a library. They want what I told you that is accessible for artists, designers, educators, and beginners. And they want to draw some piece of art and interactive piece of art in the web. And why with JavaScript? Because JavaScript is transversal in all web. Sorry. The history of P5.js.