Creating Abstract Art With JavaScript And P5.js

1. Introduction: Hello. My name is Asher. Affirmative. Illegal. And I welcome you to my class today. We're going to learn how to create abstract art programmatically using just javascript and the Broza. Here are a few samples of the art we will be creating. As you can see, these graphics are extremely flexible. By simply attaining a few variables, we can dramatically change their shapes and colors. Now, you might be thinking there will be ah, lot off, Matt, our programming involved in this class. But no, let me assure you that that is definitely not the case. This is going to be a very easy class, and it will be quiet sharp, too. But I know if it though you will be armed with a new type of knowledge which you can use while doing something creative. If not anything else, you will at least be able to create and share some very cool wallpapers with your friends. So what have you waiting for? Just open the next lesson and we will dive right into the code 2. Drawing the de Jong attractor: Hello and welcome back all you need to follow. What I teach in this class is a browser. Open coat, Ben, are any other free to use online code editor, and you will be all set. You can use this editor without logging in, but you'll have a better experience if you do log in. All right. Now we will be using a library called P five Dajae as to create our abstract graphics. Just so you know, this is a very popular and powerful library, and it is a JavaScript port off visual programming language called processing. Anyways, to be able to use the library in the code plan editor just breast a settings button. Open the JavaScript tab and type in p five dot Here you will be able to see these three options. For now, we need the 1st 2 options only. So Jews be 50 J s first. Next Jews, be five dot dumb nor Js. As you can see from their links. Be five Js is the core graphics library and be five dot dom Georges is an add on that I loves you to work with the Dharma off your page more easily you can now press the save and close button because we don't need to add anything else. We won't be writing any. It's TML our CSS code in this class, so feel free to minimize these windows. To draw anything on a webpage, you will need a canvas with be 50 J s. You must create the canvas inside a function called fed up, so create the set of function first and inside it called a create canvas function. This function takes two arguments. Overt and height. You can specify your own values based on your preferences. I'm going to say 500 com a 500 year so that I can have a nice square canvas by default. We have a black pen, which we will be drying wit. If you want to change the color off your pen, you must use the stroke function. Now this function expects three values. One for the red competent off your color, one for the green confident and one for the blue confident. So basically it wants the R, G and B values separately to make our abstract art look more three d, though I suggest you include 1/4 value which will be the Alfa Value and Alfa Off 50 should be good enough. At this point, we are ready to start drawing. To drive it be 50 J. S. You must create a new function called drop and do all your drying inside it. This is a special function and it will be automatically called 60 times every second, allowing you to easily create animations. Okay. Now, to create our abstract art, we will be using just to mathematical equations. And these are the questions. Together they define a very popular type of craft called Peter the Young a tractor. The name isn't really that important because there are dozens of such a tractors and you can find them all on Wikipedia. But I think the note is that this a tractor is very simple. It's equations are very shark and they contain just to ignore metric functions. As you might have guessed, the idea is that you just saw the easy questions to get values for X and Y and blood appoint. Are those coordinates on the canvas? It's extremely simple. As you will see over the next few minutes. Let's start solving them. First of all, there are four coefficients in our questions. Hey B, C and D. They won't be tending inside our draw function, so let's declare them outside it. To keep things simple, I will declare them at the top off our program as global variables. You can give any random values to these coefficients, but make sure that they all fall within the range minus three and blustery. This is very important because otherwise the questions won't draw anything next. The equations contained X and Y as variables, so let us declare them to hear both of them can have one as their initial values. Now inside the draw function, let's define two new variables to store the current values of X and y. I will call them old, ex and old. Why and then we just update X and Y based on these questions. So to calculate the sign, we can directly use the sine function and to calculate the co sign, we can use the cost function. I'm literally translating the easy questions to JavaScript code. So nothing special happening here do the same for the Hawaii question, and that's it. There's one problem now. Our equations contained just signs and co signs, so the value of X and Y will be very small. In fact, they will always be within the range minus two and plus two. If you try to plot a point using these values, your abstract art will be extremely small. It will be almost invisible. So what we want to do now is scale those values so that they're in this match the dimensions off our canvas doing that is very easy, but process ings map function. So you just specify the original range of the value, which is minus two and plus two, and then the desired range of the value for the X coordinate. It will be zero on the work of the canvas. We have to repeat the same thing for the y coordinate, but the desired range will be zero and the height of the canvas. Now and now. We can call the point function to draw a point on our canvas using these coordinates, and that's it just fresh the run button to see the graph you created. As I said earlier, the draw function is being called repeatedly every time it is called. A new point is drawn on the canvas, so you should be able to see the abstract art form slowly on the canvas. If you're impatient like me, though, feel free to add a loop inside the draw function so that during its call, multiple points are drawn. I will try to draw 1000 points per call. As you can see, this is much faster. This abstract art is heavily dependent on the values off these coefficients. If you change them, you will get a completely different drying. So let me quickly change a few of them. Now, as you can see, this looks very different. But manually changing the coefficients is quite tedious. So in the next lesson, I'll show you how to create a simple graphical user interface that allows you to change them by simply dragging a few sliders. I'll see you there. 3. Manipulating the attractor: Welcome back. In this lesson, we will use the P five Dom library to create four sliders to change the values off our four coefficients. So I'll declare them all here and call them is later. Be slider. See Slater and these later. Inside the set up function, you must initialize all your sliders using the create slider function it expects range as its input. All are coefficients must be within the range minus three and plus tree. So say that here next you need to specify the default value of this later, so you can just say hey here. And lastly, you must specify the step value. This value decides how much the coefficient changes when you drag the slider. Let's say we want to change it in increments off 0.1 initialized the other three sliders in the same way. Just make sure that the default value matches the coefficients value. Next, I load a C Slater and you'll see as the default value and lastly, the the slider. If you're on your cord, you should be able to see these sliders now. Right now, dragging them doesn't do anything, so let's also add a button to our webpage. You should be able to press this button after dragging this letters to redraw the abstract art so you can give it a level saying redraw. Okay, now toe handle clicks on this button. You can use the mouth pressed function and pass an anonymous function to it as an argument . Inside the function, you must update the values of the coefficients so that they match the values off the slightest, So change the value off A to a slider dot value. Similarly, be to be slider that value C two c slater that value Andy to these later that value. We obviously want to clear the canvas when we start drawing with these new coefficients, so call the background function here on past 255 as an argument to it. This essentially removes all the points we drew earlier and makes our canvas fully white. All right, go ahead and run the code and start dragging the sliders to create different pieces of art . It's as simple as that. If you're not happy with the color off your points, just change the stroke color in the set up and run again. If you want to You can create sliders for the R, G and B values of the stroke color, too. But I leave that as an exercise for the class project. Make sure you complete the project on share your creations with me and other students. I look forward to them. You now know how to create art with JavaScript and a little bit off maps. Thanks for watching bite.