Hello, everyone. I'm thrilled to be part of conf 32. I have to the chance to share my insights of one of the most exciting insertion of creativity and technology. Algorithmic arts using JavaScript. This conference brings together people passionate about tech, and I hope you will join me. By the end of this session, you'll see how JavaScript is not only a tool for development, but also a medium of artistic expression as well. Let's drive into this journey together and explore a fascinating world of, we're called, because Think back to when you were a child. Remember how naturally drawing came to you? However, it was doodles in the margins of your school notebook, crayons on paper, or even drawing in the sand at the beach. What did your drawing mean to you back then? For many of us, drawing as a child was our life. About pure creativity, a way to express ourselves without worrying about rules or being judged. It was about exploring our imagination freely. But as we grow older, many of us stop drawing. Why is that? Does the fear of impression creep in? Do we become too focused on what others think? Today, I want to invite you to reconnect with that creativity freedom. It's time to use the power of code. The table of contents, what I want to talk with you today. Get to know me. I'll start sharing a bit about myself, who I am, what brought me to this point, and why I'm passionate about both technology and art. This will give you a sense of perspective I'm bringing to the table. Understanding algorithmic art. Next, we'll drive into what algorithmic art is. I'll explain how algorithmic creative coding come together to form an unique blend of art and technology, and how this field is transforming the way we think about creativity. Exploring JavaScript for creative coding. After that, I introduce you a powerful JavaScript library. P5. js that you can use to start creating algorithmic art by yourself. You'll see how tool enables artists and coders alike to experiment with visual interactions. Resources for experimentations. I also share some great resources where you can experiment with team learning including platforms like Open Processing that offers inspirations, tutorials, and examples from the creative coding community. Conclusions and reflections. As we near the end of the talk, I offer some deep reflection of how algorithmic art challenge our traditional ideas of art, and how you can incorporate this from of creativity into your own projects. And finally, I'll provide my list of reference so you can explore these topics further and see the sources that you need. begin the concept and ideas was discussed today. I'm Francisca Beatriz Medina Gonza, and you can find me on my social networks. On LinkedIn, I'm listed by my full name, Francisca Beatriz Medina Gonza. But if you prefer Instagram, you can find me at franny. b, franny. b. Instagram is my platform. So if you happen to take photos, screenshot, or whatever during the session or while experiment with algorithmic art, I really appreciate if you tag me. It's always great to stay connected and share our creative journeys. My roles. I'm currently role as UX and front end leader at LATAM Airlines. I'm responsible for overseeing the design and development of user interface with our data visualization team. Thank you. As a speaker, I have the opportunity to share my knowledge, passion for technology at conferences like GSCom Chile. As a volunteer for Women Techmakers, I support initiatives that empower women in technology through mentorship, education, and community building. Let me tell you a bit more about who I am. I'm a variety career designer, web developer, teacher, and now leader. But beyond the tech, I always love making art and craft with my hands. no, I'm definitely not a robot. I'm cute, emotional person who finds joy in creative, both digital and physical. I'm from Santiago de Chile, and while Santiago is our capital, it's important to know that Santiago is not Chile. Chile is a long and diverse country with so much to offer beyond this. For those who are wondering, where exactly Chile? we are the southernmost country in the world, stretching all the way down to Antarctica. We speak Spanish, so I want to apologize in advance if my English is not perfect. Thank you for understanding as I present this talk in Spanish. is my second language. Personal motivation. My personal journey into the world of art and technology started in a childhood. I was a shy kid who loved art and dreamed of becoming an artist. That passion led me to study design at the university. But during my time at the university, I had a crisis. I started to feel like maybe this was Then I discovered web development, which rekindled my childhood love of creative and building things. That turned me on to my course called Creative Programming for Design. I became a teaching assistant in that class, inspired by one of my professors, Ricardo Vega. So this talk is for you, Ricardo. Through this journey, I made amazing connections, like my friend Valentina Gaete, who was one of the students in that class. Vale went in to pursue a master's degree in Germany. And she always tell me that this class changes her life. My own preliminary thesis at draft was about algorithmic logos, which sparked my interest in merging art and technology. Now, as a professor, I strive my students the same inspiration and opportunities that I received. I'm not currently in a full creative role. My goal is to bring creativity back to my work and help the students to involve technology to open up opportunities for themselves. My journey to where I am has not been any fun by linear. When I start, I didn't imagine I will become a team leader, a speaker at conference like this, or even a volunteer in per woman and girls in tech. In fact, for a long time, I was show an introverted person too afraid to speak up or take On challenge that feels beyond my reach. I use it to see leadership in and public speaking as Things other people did. People were naturally outgoing and confident, not someone like me. But everything began to change when I realized that growing comes from stepping outside the comfort zone. My roles today, whether team leader, mentorship, or giving talks, didn't come because I had everything to figure it out. They became, I took risks and pressed filters, and learned. to trust my own voice. Along the way, I discovered incredible satisfaction of helping others, especially women in tech, to find their place in a world that often feel like it's not made for us. That's why I became a volunteer and a speaker to share what I've learned and help others on their own journeys. This sack is part of that mission to spear You to see how your own potential. So let's start with the basic. What is an algorithm? I'm sure that most of you have come across this term, but let me sure we are all in the same page. An algorithm is essential, a set of instructions, a step by step process, solving a problem or performing a task. It's like a receipt of cake. There are specific steps to follow to reach the desired outcome. In the world of programming. Algorithms are what make computers capable of performing complex operations. Whether you realize it or not, algorithms are everywhere, from recommending what video you should watch next to controlling traffic lights, And even in the art we are about to create. Now, there's a, here's a big question. What is art? Definitive art is something philosophers and artists have been debating for centuries. And there's no answer. For some, art is about beauty and aesthetics. For others, it's art. About emotion or making a statement, art can be way of seeing the world of expression, something that world can capture. Here's are some aspect to consider creative expression, aesthetic value, mediums and forms, interpretation and perception in innovation and tradition and cultural significance. The way we create and experiment art. As involved dramatic in the recent years, with the risk of digital technology, art now have access to tools that previous generations could have imagined. Today, art is confined to a paint or canvas or sculpted in marble. It's pixels, code, and even virtual spaces. Digital art allows to blend mediums to collaborate in ways that were never possible before. The boundaries between art, design, and technology have become increasingly fluid. And algorithmic art is a perfect example of that. This new frontier where creative meets competition. Algorithmic art represents a unique form or artistic expression where technology and programming play a fundamental role in the creation of the work. This type of art is notable for its ability to transform algorithmic art and data into visual and sensory experiences, often challenging or traditional. Perception of art. Algorithmic arts is a perfect example of how art and technology can merge in a way that is both precise and poetic. It learns the computing power of computers to create pieces of art. That would be impossible or last extremely time consuming to make by hand. Artists know as algorithms, used to code design algorithms that generate visual works. This algorithm can produce intricate patterns, complex geometries, or even simulation of natural process. And the beauty lies in the fact that Often, no two outputs are the same. The art evolves based on the algorithm, logic, input, and randomness. This art pushes the boundaries of what traditional thinks, of acts, creative, offering, and so on. new ways to explore and express ideas. An algorist is an artist who use algorithms as part of the creative process. But begin an algorithm is more than just write code. It's about seeing code as a tool of expression. For this artist, algorithm becomes the paint brushes and the computer screen They use code to generate art, creating everything from abstract design to interact visualization. An algorithm doesn't just program for function. They program for beating meaning, embracing the unpredictable impression that becomes with algorithmic design. In September 1995, the term algorithm was coined by the artist Jean Pierre Herbert. He wanted to describe artists who use algorithms as the primitive tool for creating art. At the time, it was a new concept. Combine the world into one. For a fine art with the pressure of computer science, Herbert and others in the field recognized that algorithms could do more than solve mathematical problems. They could be used to explore creative in neodymamic ways. His work set a stage for the explosion of digital art that we're seeing today, and the term algorithm has become to symbolize the fusion of these two worlds. Now. We have JavaScript, JavaScript is the one of the most versatile and widely used programming language. Today, Origin created for adding interactive to website. It had grown for far beyond that. JavaScript now powers everything from the web app service. And yes, it's even because powerful. Told for creating art. What makes JavaScript special for our purpose is flexibility. It's accessible enough for beginners to pick up quickly, but powerful from enough for complex artist projects. JavaScript is an incredibly powerful language, but what makes it even more versatile is the vast ecosystem of libraries. There are libraries for everything. Let's say you work on a website, you go to libraries like React or Vue to build dynamic user interface, need to make, manage massive amounts of data. there's D3JS for data visualization or libraries like Loudish for simple complex data manipulation. Want to animate? GreenScogs. has you covered for six Even if you need to handle something mundane as date and times, don't worry, there's moment, yes, to help you out. We even have libraries for libraries. Tools like Webfar or Babel exist to optimize and bundle all your code together, making everything run smoother. So yes, JavaScript developers often joke that if there's a problem, there's a probably already a library to solve it. But what about art? Yes, even for creating art there are libraries. Today we'll focus on one of those, p5. js. This library was specifically designed to bring the power of coding into the hands of artistic and creatives. Whenever you design art, Interactive visuals generate patterns of something complex, completely unexpected. P5. js unlocks a world of artistic possibilities through code. P5. js is a fantastic library created by Lauren McCartney, and it was designed to make coding accessible to us. Artists, designers, educators, and anyone interested in the creative coding. Lauren's vision was to make a tool that allows people to create visual art with code without needing to be an expert programmer. It's built on the top of processing, a popular framework used by creative coders. And it brings all of the power into the JavaScript ecosystem. There's a story of P5. Yes. 2001 processing was developed by Cassy Rian, an artist and verified data scientists. In 2001, Cassy Rias and Ben Fried. Both students at the MIT Media Lab create Processing. Their goal was to develop a software sketchbook and a language that would serve the electronic art and visual design communities. Processing was designed to be an easy to use language for artists and designers, convening visual programming environment with a simple syntax to encourage experimentation and creativity. In 2008, Processing. js was developed by John Reesing. a programmer. In 2008, John Risen, known for his work on jQuery, developed the developer Processing. js. This was a JavaScript port for processing, allowing processing code to run natively in web browsers without the need for Java plugins. Processing. js made it easier to integrate processing sketches into the web page and brought the capabilities of processing to a broader audience. in 2013, P five was developed. Vale Laura McCarty, artist and programmer Laura McCarty developed P 5G. SP five GS is a JavaScript leverage that aim to make coding accessible for artists, sinus education and beginners it. It's a repertation of processing for the web with a focus on making code more approachable and inclusive. McCartney works on p5. js, empathizes, interactive and creativity. Building on legacy of processing. Will leverage modern web technologies. Between 2014 and 2015, some Java and processing updates make it difficult for processing JS to remain used. Between these days, updates to Java and processing itself create incompatibilities which uses for processing JS. These updates make it challenging to maintain and use processing JS, leading to a decline in Java. As the community began to shift towards more robust solutions like p5. js, which were better suited to develop the solution. To evolving web environments. Processing JS stopped active development in 2016. By 2016, active development of processing has changed. The community and developers recognize that P5. js was more viable option for web based provisional programming. P5. js provides a more modern and versatile platform, prompting the focus to shift and turn it towards its development and support. In 2018, the PFGS online editor was launched. Online editor made it even easier for users to start coding with PFGS without needing to start any software. The editor provides a user friendly interface, fostering a collaborative and accessible environment to learn and creative coding. It became a significant resource for educators and learners worldwide. In 2020, Both Processing and P5. js continue to be actively used in development. Processing continues to evolve as a powerful tool for creating code in Java, while P5. js thrives as its JavaScript counterpart for web based projects. The ongoing development of both platforms ensures that they remain a valuable resource for artists, designers, and programmers. What are the differences between Processing and P5? Processing was based in Java with its own IDE. What are its strengths? It's easy to use. Designed for artists and non programmers, Processing has a simple syntax that is easy to learn. Performance as a Java based platform, Processing often offers better performance for more computationally intensive talks. Community and libraries. Processing has a large community and many libraries available for tasks such as computer vision, data visualization, and more. Desktop applications. Great for creating stand alone desktop applications and installations. What are its weaknesses? Web integration. Web integration, less straight off to integrate with technology compared to p5. js. Processing is somewhat insulate from modern JavaScript ecosystem, which include powerful tools and libraries for web development. p5. js P5GS is a JavaScript library often used with web based IDE or integrated into web projects. What are its strengths? Web integration. P5GS is designed to work seamlessly with web technologies, making it ideal for interactive web based projects. Accessibility. Since it's run in the browser, P5GS projects are easily accessible and shareable via URL. Leverage. P5GS. The power of modern JavaScript ecosystem, including tools, library and frameworks like React, Vue and D3JS. Learning resources, extensive documentation and tutorial, practical and suitable for Beginners learning coded through creative problem, weakness. As a JavaScript library, P5. js might not perform as well as processing for more computational intensive tasks. Creating a standalone desktop application can be more complex compared to processing. With P5. js, you are still using the same JavaScript basics. Functions, variables, loops, and logic. Just like any other program. But there's an exception. exciting part. Instead of outputting data or perform calculation, you're creating visual experience directly on canvas. When you use V5. js, it generates an HTML file with a canvas element and that canvas becomes your virtual paper. Everything you draw, animate, or interact with happens inside this canvas, allowing you to bring your code to life. To life in a visual way. Functions like set up and draw are essential in define what appears on the compass. Set up runs once like setting this and draw is where the action happens. It's like the function that gets called continuously to create animation or update your visual frame by frame. Essentially every line of code you write is an instruction for what gets to draw. Onto that canvas, making coded, direct and creative process. Let's take a look at this template for the PFGS website that creates a star shape. The beauty of this code is in its simplicity. It uses basic geometric principles and loops to generate points of a star. Placing each vertex with. Precise mathematical accuracy. By routing and scale, you can create a pattern that feels both calculated and organic at the same time. What's powerful here is that just a few lines of code can produce something visually striking. One of the most exciting aspects of p5. js is the ability to create interactive experience. With just a few lines of code, You can make your artwork respond to user input. Whatever is through the mouse, keyboard, or even the sound. For example, you can track the position of the mouse and use that data to move elements on the canvas or change colors dynamically. Imagine Creative a painting that reacts to where you click or draw your mouse across the screen. With P5. js, interaction is as simple as using built in functions like MUSE. X and Muse I to detect the position of the mouse or key press it to respond to the keyboard inputs. You can even incorporate audio input to visually sound waves or create artwork that reacts to external sounds. The potential for creation is limitless, making your audience a part of creative process. P5GS is particular with suit for creating geometric patterns, which are often visually captivity and mathematical presses. By convening shapes like circles, squares and triangles with loops and transformations, you can create intricate designs that will be incredibly difficult to write by hand. Whether it's still in patterns, mandalas, or optical illusion, the presence of the computer allows you to play with symmetry, repetition, and scale in a way that results in measurable visuals. And because you are working with code, you can easily tweak parameters like size, color, or rotation for of elements to explore endless variations of the same pattern. Fractals and interactive systems are another fascinating area to explore with P5GS. These are patterns that repeat themselves at different scales, often resulting in highly detailed and complex structures. A classic example is the Mandelbrot set or the Sierpinski triangle. With P five GS, you can use recursion where a function calls itself to generate fractals that reveal infinite complexity as you zone in or out. These fractal designs are not only beautiful, but also demonstrate the power of mathematical and in creating art. Data visualization is another exciting application of 5GS. Data visualization is another exciting application of P5GS. By mapping data to visual elements like shape, color, and size, you can create visual representations of complete datasets that are easy to understand. Wherever you're working with scientific data, social media metrics, or any type of your information, P5GS can help you turn that numbers into visuals. For example, you can create by bar charts, scatter plots, or even abstract visualization where data points become a part of larger artistic composition. This approach not only makes data more engaging, but also allows you to tell story with, through your visuals. P5. js can also use to simulate natural phenomena from the movement of particulars to behavior of flock of birds. You can model real world systems using code. By applying rules that mimic natural processes, you can create simulations that behave in life like ways. For example, you can simulate the growth of plants, the flow of water, or even the way animals move in groups. They are simulations that are not only visually interesting, but you can provide insight into Underling mechanic of nature, all will pushing the boundaries of what art can represent. Randomness is a key ingredient in many forms of algorithmic art. By incorporating randomness into your code, you can create piece that never the same twice. For example, you could generate a forest trees with each tree as a unique shape. Or create abstract art where colors and shapes appear in abstract and predictable forms. P5. js makes it easy to add randomness with functions like random that introduce variables in size, position or color. The element of chance in your data adds a layer of spontaneity allowing for surprise and often beautiful results. Beyond just reacting to user input, P5. js allows for randomness. Fully interactive generation where the user can activate the app work. For example, you can create a drawing tool that viewers become the artist clicking and drawing into their shapes on the canvas. Or you can build environments where the user controls the evolution of patterns, adjusting parameters in real time to influence what happens on the screen. This floor, the line between creator and audience turn the artistic process into collaborative experiences. One of the most Famous examples of algorithmic art is Conway's Game of Life, which is a tip of cellular automaton. In this simulation, simple rules detect wherever a cell on a grid is alive or dead, and from those rules incredibly complex patterns emerge over time. What makes this fascinating is that it mimics real world processes, like the growth of a population for the spread of fires. From a few basic rules, the game of life has been a source of inspiration for artists and scientists alike. And with P5GS, you can easily create your own version of the cellular automata to explore beauty and simplify life. rule bus system. Now we have covered a wide range of possibilities. I want to share some resources that will help you drive deeper into the world of algorithmic art with p5. js. Whenever you are a beginner or an experienced coder, the resource will provide inspirations, tutorials, and tools to help you to create your own code. One of the best platforms to explore and share your p5. js creation is Open Processing. It's an online community where artists and coders share their projects, providing inspiration and learning opportunities. You can browse thousands of sketches, many of which are open source, meaning you can see the code behind the visuals, learn from it, and even remix it to create something new. Open Processing is valuable not just for showcasing work, but for fostering collaboration and experimentation with the creative coding community. Let's look about this sketch on Open Processing. This sketch uses basic shape repetition and randomness to create an organic looking pattern. The code starts by definition, simple shapes like circles and lines. Then applies randomness to their position, size, and color. What do you guess is visually interesting? Piece that looks like it was drawn by hand, even though is entirely generated by code. Next, we have this example, which showcases how p5. js can be used to create fluid continuous motion. This script simulates particles moving across the canvas, influenced by invisible forces like gravity or wind. The co release allows us to on vector to define the position and velocities of each particle, creating a dynamic flowing visual that feels almost alive. It's a great example of how PFGS can bring movement and energy into your art. Finally, let's look at that example. This sketch demonstrates that the power of convenient randomness with control. The artist uses randomness to generate abstract shapes, but also add parameters that control how the object moves. How those shapes evolve every time. The result is a piece that feels both chaotic and intentional, where every refresh of the page brings something new. Yet, grounded, like this. Same underlying structure. As we see today, Algorithmic Arts is a powerful way to merge creative and technology. It's also allowed us to explore new forms of expression where the artists and the code collaborate to create something unique. What excites me most about this field is that it challenges the traditional idea of art. It invites us to see beautiful in logic, randomness, and in creativity. in the unexpected. Algorithmic art reminds us that creativity doesn't have to be confined to paint brushes or scoping tools. It can soon live in the code we write. I know I've covered a lot of ground today, and if you want to dig deeper, there's an excellent resource I have They've referenced it through this talk. If you enjoyed this talk and want to see more of my work, or you have questions about getting started with Algorithms VS, feel free to follow me on Instagram. I love to share, connect, and see what amazing creations you come up with.