Create Emergent Generative Art With JavaScript and P5.js

1. Introduction: hello and welcome a master of fatty Belikov. And today I'll be teaching you how to create generated art using a technique that involves emergent behavior. Once you learn this technique, you will be able to create a wide variety of animations and still pictures that look very intricate and beautiful. For now, we will be creating two animated pieces off art. This is the 1st 1 It seems to be so full of life, isn't it? But creating this is going to take as just a few minutes and some very simple code. Okay. And this is the second piece off emergent art we will be creating today. It might look more complex than the 1st 1 but I assure you that is not true. We will be able to create this too. In a very, very short time. You won't be needing any special tools or knowledge for this class. We will be writing only javascript code, so you'll only need a Broza. We'll dive right into the code in the next video. So I'll see you there 2. Creating Animated Emergent Art: Hello and welcome back. We'll be using coat pen to write all our code. So go to court ben dot io and create a new pin. We won't be writing any HTML r C s s now, so you can minimize thes panels. Next, we will be using a library called p five dot Js to draw on our canvas. You don't have to use it, but it really simplifies your court and helps you focus more on your algorithms to add it. Go to settings, then JavaScript and here, such for p five largesse. Select the first option and you can now close this That be five DJs. You will only need to functions to start drying. The first function is called set up and the second function is called Draw. The set of function is called only once, but the draw function is called again and again about 60 times per second. This means anything you draw inside this function can become an animation. All right. First, let's create a Gammas inside the set up function. We wanted to be a square, so let's set it size 2 400 by 400. And then let's give it a background. You can pass any RGB values to dysfunction. If you pass a single value to it, however, it becomes a shared off gray. So zero is black and 2 55 is white. Anything in between will be agree. Now is also a good time to set the stroke and fill values for our canvas. I'm going to say that the stroke color is a semi transparent black. As you might have guessed, the second parameter here specifies the transparency on Daz for the fill color. Let it be a slightly less transparent black feel. Free retained these values. If you're under court now, you can see the canvas now for creating graphics based on emergent behavior, you will need a lot off simple elements that can move and collide with each other. You can call them particles, creatures Boyd's or whatever else you want to. L simply call them particles. So let's say for now we have AH 100 particles. The store, all the particles. Let's use an array. Each particle can have a size, so let's say it is 40 again. You are free to change the values of these variables. In fact, that's how you modify your generate about. All right now, let's write a function to actually create a particle to keep things tidy. Let's say our particle is an object. It's going to have a few fields. The 1st 1 is going to be its position. Obviously, a position on our canvases made up off an X coordinate and of I coordinate to store bought the values. Together, we can use a vector. For now. Let's assign a random position to our particle, so we'll have to use the random function for the X coordinate will need a random value between zero and the width of the canvas, so just multiplied but picked similarly for the Y. Coordinate, Just multiply a random number with the height of the canvas. Next, we will need to specify the direction in which our particle is moving. This direction to will be made up off an X, confident and of I confident, so create another victor and set its value to some random numbers. In other words, give it a random direction. And now let's add toe very simple behaviors to our particles. We'll do that inside a function called update. Okay, The first behavior is going to be straight line movement. In other words, the particle should always be moving in the direction that is assigned to it. To implement that, all we need to do is add the direction vector to the position vector. Now, if the particle keeps moving in one direction, sooner or later it will go outside the canvas to handle such a situation. Let's add another behavior. Let's say if the particle moves outside the canvas, it simply jumps back to the center of the canvas. To do that, we must check if it's X coordinate is greater than the word of the canvas, our Lesa than zero. If this is true, we set the X coordinate. Tow it by two. It is nothing but the horizontal center off our canvas. Similarly, if the by coordinate is greater than the height of the canvas are lesser than zero, we re setted toe height by two, which is the vertical center off our canvas. The update function is now complete on our particle to is ready, so let's just return it from here. Now it's time to create 100 particles. We can do that inside the set up function, so let's right. Ah, Farlow Pia. And inside that we can push new particles inside the particles. Harry. All right, now we draw the particles. So inside the draw function, let's write another for loop toe iterate over all the particles here, let's use a circle to represent a particle. To draw a circle in p five bridges, you must use the Ellipse function past the X and Y coordinates of the particle to the function and also passed the particle size to it. Note that this will be the diameter off the circle, not the radius, and to move its particle called the update function. At this point, if you're under court, you will see something like this, not exactly what we expected, isn't it? This is happening because the circles are being continuously drawn, every frame, and they're overrating themselves and each other to fix this. We just need to clear the canvas every time we draw. We can do that by calling the background function again. This time, I'll set it Scholar toe white. And now, as you can see, the movement of the circles is looking good. It's time to add a slightly more complex behavior to our particles. This behavior will allow them to collide with each other and respond appropriately. So create a new function called check collisions. Inside it, we must loop through all the particles and take, if any, to are colliding. So we will need two nested for loops. A particle cannot collide with itself, so let's add a condition to take for that. Okay, now it's very easy to take. If two identical circular particles are colliding with each other, all you need to do is check if the distance between their centers is less than are equal to their radius. To calculate the distance, you can use their distance function. You must pass the positions of both the particles to dysfunction. All right now, if this distance is less than the particle size, it means we have a collision. How do we handle the collision? Let's say we simply changed the directions off both the particles, but instead off assigning ah, whole new random direction to them. Let's simply randomly rotate the direction. So call the rotate function on the direction victor of the first particle and passed a random value to it. Also, do that. Do the second particle. Okay, this is good enough. For now, let's call the tic collisions function inside the draw function and see how the particles behave. Very interesting. But it seems all the particles are kind of frozen and are not able to movement. This is because we are not giving the particles enough time to move away from each other. To fix this, let us add something like a counter to each particle and said its value to zero by default . Now, let's say after a collision, we don't want to disturb the particle for some time. More specifically, let's say we don't want to disturb the particle for some number off draw cycles. To specify this number, let's use a variable named Max counter. I'm going to set its value to 1 50 This means after a collision, the particle will be able to move freely for 1 50 drug calls to enforce this behavior Inside the check religions Function said the value of the counter property off both the colliding particles do Max counter. Now we can simply say that the collision behavior off a particle should be run only if it's counter is zero, so add, such if conditions to both the particles. If the first particles counter is zero, execute these two lines, and if the second particles counter is zero, execute these two lines. Lastly, we need to decriminalize the counter. We can do that inside the update function of the particle. So if the counter is greater than zero, just discriminated by one every time it is updated. At this point, if he ran our court, the particles are able to move freely. All right. Now, there's no reason why the size of the circles must be equal to the particle size. Let's change the radius here in the Ellipse function to something much smaller. The moment looks much clearer now. Next, let us try something different. Whenever two particles collide, let us draw a line between them. Doing so is easy, but we can't really draw a line inside. The check collisions function. So whenever collision happens, let's store the positions off the colliding particles inside an array. I'm going to call the IRA lines. Here. Inside the tech religions function begin Simply add the positions off both the particles to the area, so each item, a diary itself, will be an array containing two items which are nothing but the positions off both of particles. Now you must make sure that this lines area is empty every time that a collisions function is called. Otherwise it will grow very large. So reset it are the beginning of the function. Okay, back inside the draw function. All we must do now is loop through the lines are a and draw the lines, so create a for loop inside. It used the line function to drop. The 1st 2 arguments to the function are the X and Y coordinates of the first particle. And the next two arguments are the X and Y coordinates of the second particle. And there you go. We already have an interesting animation. Now you are free to change the behaviors of the particles. However, you can modify this animation by changing these global variables to, for instance, if I changed the particle size to something much larger, say, 80 I get a very different animation. You can also further reduce the size of the circles to give a different feel to the animation. You could also increase the number of particles itself, but not that this can have a drastic effect on performance. So as you can see, but just a bunch of simple behaviors assigned to a large number of particles, we have managed to create an animation that looks both interesting and kind of beautiful Do . 3. Adding Trails: welcome back to the final lesson of this class. Now we're not going to be adding any extra behaviors to our particles. Instead, they're simply going to change how we use them to draw our lines. First, let's say that the color of the line that is drawn between do colliding particles depends on the distance between the particles. So here, along with positions, let's include the distance to in the array. All right now we need to convert the distance into a value that is between zero and 2 55 This is because the RGB values off colors must be between zero and 2 55 only. To do this, we can use the map function. The first argument to this function is the value that you want to map so past the distance , which is the third element of the area. The next two arguments to dysfunction defined their range off the distance. Now this can, of course, only be between zero and the particle size itself. The next two arguments defined the range of the colors so say zero and 2 55 here. No, if we applied this color to the stroke of the line and run vz. This Not bad. Let us now hide the ellipsis completely. In fact, let's not draw them at all. So I'm going to delete this line, nor that our lines are very light to make them appear more prominent. Let us change the background color here. Do black. Okay, now let's see what happens. If we move this call to the background function, do the set up metal instead. This means we'll be repeatedly drawing over our canvas without clearing it. This is much better now. This itself is a nice animation to make it even better. Let's add some Alfa value to our stroke color. Let it be a very small value, say, five. As you can see, this has had a very profound effect on the look off the animation. I like it much more because the lines are tenor. In fact, this looks kind of Harry, isn't it? You can again play with these global variables to further change the animation. Let's see what happens if we have very few particles say, Then again, a very different but very interesting animation. It's worth mentioning that all these animations can go on forever and still seem interesting at any point. If you want to save the art, you can simply right click and perceived image as this will save your art as a still picture in the form of a PNG file. All right, that's all for now. Ladies and gentlemen, I am master of hot available, and I thank you for watching these videos.