Jamaica. Make a real time feedback into the behavior of your distributed systems and observing changes exceptions. Errors in real time allows you to not only experiment with confidence, but respond instantly to get things working. Again. Close this talk is on algorithmically generated visual designs. So again, my name is Michael Wehar, and you'll see my collaborators, John, Maya and Alyssa, and each of us introduced our own algorithms to generate artwork, and were going to tell you a little bit about our motivation and how we started doing this. So we wanted to bring together artists and computer scientists to develop a better understanding of drawing processes. And we also wanted to explore how programming can be used as a tool for generating visual designs and artworks. And we had several questions. We weren't sure what the answers were, and we wanted to investigate these. What kinds of designs and artworks can algorithms generate? Can generated artworks be appealing? And how can drawing processes be improved based on user feedback? So this is what we actually did. We investigated how computer algorithms can be used to generate visual designs and artworks. We did this by designing and implementing nine algorithms. Each algorithm generates a different type of design or a different type of artwork. We coded these algorithms in JavaScript, and these algorithms basically just draw lines and shapes onto a digital canvas following a certain procedural process. And these procedural processes were inspired by mathematical concepts, natural phenomena and artistic trends. So here are the nine algorithms that we implemented, and you'll see who the author was of each of them. Next to it, we actually have a blog article about each of the nine algorithms, and we encourage you to take a look. So if you see an algorithm that's interesting to you, please do read more about it. So now we're going to show you a video that'll demonstrate the drawing processes. So this is our first algorithms, called geometric patterns. And on the left you can see it actually drawing the image step by step. And on the right, you can see a list of parameters that were used to actually generate this image. Each of the algorithms can be varied based on these parameters. So this is the final image here on the left. Now I'm going two show you a different image that was generated with the same algorithm, but it was given different parameters. Okay, now I'm going to show you one more algorithm. This is called the wrapping paper algorithms. This was done by Alyssa, were you can see the parameters on the left, and hopefully you notice that these designs that were generated with wrapping paper, they just show a lot of different shapes drawn in a systematic way, overlapping with each other. And it kind of looks like some wrapping paper designs. Now, if you want to see the rest of our algorithms. I just showed you two. Please take a look at our websites. Also, we have a full length video showing six of our algorithms running, which you're welcome to take a look at on YouTube as well. So now we're going to talk a bit about our drawing program. So in order to understand how it works, we have to tell you about this framework that we built. These framework. It's still a work in progress, but it allows you to design drawing algorithms in JavaScript, and it'll actually draw them onto an HTML canvas. Our drawing program will take in one of these algorithms, it'll run it, and it'll display the resulting images in real time. Our drawing algorithms have to be written in this framework where you have an initialize, start, pause, reset, and draw one step function. You can see our public repo@GitHub.com slash algorithmically generated. Here's our public repository on GitHub, and you'll see that there's a lot of files here. There's three different pairs. There's one for ALG dots, ALGP lines. Those are three of the different drawing algorithms. If you're just getting started and trying to implement your own drawing algorithm, please start with the ALG js and algorithms js files. There's also a very extensive readme file that goes into a lot of detail about what is this framework, how does it work and how can you get started? So we're going to take a look at the ALG js and the params associations with it, and we're going to start manipulating it to produce some interesting images and visual designs. So you'll see on the left side of the screen a user interface. We actually have a front end web application that's going to display a canvas and have several buttons there. And when we click start, it's going to load in and execute this algorithms. On the right hand side you'll see dots. That's the dots algorithm. And the dots algorithms is a dictionary that contains various methods which are going to make it runnable, and you're going to be able to run it within that front end web application. So if we take a look at the code, you'll see various methods associated with the docs algorithm. There's draw, one step, reset, initialize, pause, and start together. Those are the methods we need to be able to start creating these visual designs and artworks. Now, we also have a params file associated with the dots algorithms. Let's start modifying these parameters and see how it affects the images. Say we adjust it so the transparency is just one. You'll see that all of the circles are now black. Now, if we make the radius larger, say, 50, the circles are much larger. And now almost the full canvas is filled. We can even adjust the speed. So if we wanted there to be some delay so that we could see our drawing happen more slowly, we can make that speed value larger to increase the number of milliseconds there are for the delay. Now, let's adjust the parameters back the way we want. And let's start manipulating our algorithm and see what kinds of interesting designs we might be able to create. Now, I decided to make some changes. I decided to create this new member variable called x and this new variable called y. They're going to keep track of where our paintbrush is located, and I'm going to start them at the center of the screen. So x is going to be width divided by two, and y is going to be height divided by two. And just to show you what this looks like, we're going to increment Alg dots x and increment alg dots y. Now, we should have the paintbrush move across the canvas in a line. As you can see, we gradually drew a line across the canvas. Now, I modified it so we're not just incrementing, but we're also wrapping around. So when we reach these end of the canvas, it should wrap back around and continue drawing. Let's test that out. Great. It worked as we expected. As it was drawing, it wrapped around the canvas. Now let's try some more complex things besides just drawing a line. Maybe we want to add a little bit of noise to it, a little bit of randomness. Let's try that out. I'm using the math random function here. Let's see what happens. But there is some noise there. It's not perfectly aligned. Let's add a little bit more to the x coordinate at every step. Let's see what happens. Now we're drawing what looks almost like a striped pattern. Okay, now let's try to incorporate some functions from trigonometry. And were going to use the number of steps that have elapsed thus far to help us compute an angle, which we feed into those trigonometric functions. So here I'm going to increment x by ten at each step. And I'm going to increment y by ten times cosine of this angle. And this angle is going to move between zero and two PI as the number of steps increase. So, let's see what is graphed it. You can see we have an interesting design that combines different weights. Now we're going to do something a little bit different. Were going to try to draw a spiral design, and we're going to adjust the params and we're going to adjust the algorithm. And as we adjusted the algorithms, we made these circle's radius increase a little bit each time and also the transparency increase. And now we're no longer wrapping around when we go outside the image's boundaries and we've adjusted the functions we use to increment X and Y. So let's see what happens. And these we go, it's drawing a spiral pattern. And now you can see, just writing a few lines of code were able to create some interesting visual designs. Now, these ALG dots algorithms is just a simple example you can play around with. But I do encourage you to take a look at our other algorithms and some of the videos showing how we generate these other images and other designs. If you liked these designs and you liked our framework, well, we encourage you to contribute. You can contribute to our project by implementing your own drawing algorithms following this framework and share it with us. We would love to see your images and potentially collaborate with you all. So we are looking for reviewers to review images that we've generated. And finally, again, this is an open source repo. There's a lot of improvements we can make to our drawing program, and we would love for any users to submit pull requests, submit issues, and you can contact us anytime. Thank you so much.