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

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.

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.

Processing starts in 2001. Processing is developed by Cassy Reyes, artist and Ben Fry, data scientist. It's based on Java, not JavaScript, Java. They want to translate this idea to the web, because Java is not as easier to translate to the web. So, processing.js is developed by a programmer. And this library translates processing to the web.

In 2013, P5.js is developed by Larry McCarthy, the artist and programmer. In 2014 and 2015, some Java and processing updates made it difficult for processing.js to remain in use. So, in 2016, processing stopped development. And then, in 2018, P5.js online editor is launched. And since 2020, processing that is based on Java and P5.js continue to be actively used and developed. The community of P5.js is active on Instagram. If you want to follow them, please follow them to be updated with the news of this library.

I follow them. So, if you want to follow them, please follow them to be updated with the news of this library.

We're exploring P5.js. It's like JavaScript code. We have the functions. The piece of art we made is in a Canva tag in HTML. We can make colors, figures, and a lot of figures we can and shapes we can use. Here, I want to show you an example. And we have the editor of P5.js.

And we can make stars. So, we generate a star with a shape of a star. You use star as a library. We have set up this type of functions from the library. And we can modify it in the editor of P5.js. So, in this website, we can explore it. It's the documentation of P5.js and has a lot of examples that we can explore. We have a lot of possibilities with P5.js.

Like fractals and iterate systems that are infinite. And this is made by P5.js. Other possibilities is cellular automata. We can modulate natural systems. And there is an example of Game of Life. We can view the code of this experimentation here. Game of Life. It's a game of life. Here is the code. And of different instructions, we can make these cellular automats. And it's impressive how the code can make that. And then, other great possibilities we do with P5.js is randomness. You always have a different output because you can make a piece of art totally randomness.

So, always be a different pattern you want to share. And user input and interaction. And other possibilities with P5.js is you can do if the user moves the mouse or clicks something, you can make interactive with the canvas.

We are here. We have some a we have some examples that we can evaluate. And I want to show you the structure of this a workshop of Fede Santana, a designer, that we can read the code and try to understand it. It's very simple, the syntaxes of this library.

So, is there some example you want to explore? Like the atom. You see, in Spanish. But you have the editor of P5. And here's the code. And you turn the play sketch. And you can be the preview. We can identify some functions. Like function set up. When you create the canvas. And you create a canvas of 40,000 for 30,000 pixels. And here's the function draw that makes the piece. And make the movement.

And we have another example. And another thing I love about this library and the community that makes this this piece of code is that are free to use and to explore. Here we have the code. We play the button. And we can see this solar system. Solar system. And how the shapes rotate around the sun.

Nice. Today I want to show you some experimentation resource to motivate you to join to the thousands of creative programmers and follow their work and find inspiration for you and for your next programming challenges.

There's a resource and a big resource named Open Processing that are examples of a lot of examples made by the community of different piece of code that you can use for your personal proposals. Here are the open processing resource.

You can choose some examples. And you can look at the code and use for your own proposals and piece of art. Like that. Here they are all put. And here's the input. And it's only you can copy them in the sketch and use in your visual studio code or other editor or use the P5GS editor. And there's a lot of documentation and comments you can to understand the code. And it's made for and by the community. So, it's a good resource to you to explore and use if you want.

And remember, there are fractals, geometric shapes, randomness. There's a lot of examples you can explore. And in the same way, there are some examples that are so impressive for me. The tangle that shows the randomness, like randomness shapes and lines. Then it's tangled by there. Skeletons fear. That is another impressive piece of work. And arcs and arrows that is based in another open processing example. But it's impressive for me because it is infinite.

I want to show you how it works. Interesting piece. Because it's infinite in the shape of the infinite and it holds randomness and this always is different and is infinite. So, here is the output, the piece of art. But there is the code. It's based in this sketch. And here's the code. It's a big code. But it's nice and it's based on this piece. It's more simple. But if you take some examples, you can make more complex examples in this platform and resource to and for the community. And conclusions.

Thank you very much for this. Thank you very much for this. I want to know you if you know about this kind of art. And you are motivated to be the new of the decade. I'm so glad to be here. And I hope this motivates you to explore new types of code, new outputs and piece of art you can make to explore and learn about the logic of code and programming. Thank you. And these are the references to you can go to explore. Thank you.