Code Art: Learn Creative Coding to Generate Visuals with JavaScript

1. Introduction : Hey, welcome to the course of product, creative coding, generated art, or whatever you call, what are they? Well, it's probably the most unexplored territory in this era. Why? Because once you learn creating art with coding, there's actually no limit. You can do this. This, and even this. You don't have the boundaries of visual effect programs. It's the combination of technical side and design. The best part, all we need to know is basics of JavaScript and HTML, language and ways of creating. We will use JavaScript algorithms in this course. Because nowadays, JavaScript is everywhere. You will have a chance to make your project interactive with other technologies when you use JavaScript, like what? Like this. This was a clip from the college. We will create particles that you listen to music and behave differently. After learning this type, you can use audio input in any effect you want. You'll be shocked when you see how easy it is to make these animations. If you already know a programming language, that's a big plus. Alright? Alright, these are really good animations. What can I actually use them? It's up to you. You can create your own NFT collection, upload to your website, put them in your portfolio, or just make them for fun. Big agencies are already uses the power of cold, dark, and very few people know how to use it. Join us and learn to draw with code before it's too late. 2. Before Start: Hey guys, first of all, I wanted to talk about the tools that we are going to use in this course. You can download them to follow these directions. But be aware that they are not required. Because nowadays there are many ways of doing the same thing, right? For instance, I will use VS Code as IDE, but you can of course use other IDEs, like Atom or Sublime Text or any IDE you want. But for the ones who want to progress exactly the same way with me, you can download VS code here. So be sure that you install the correct version. For example, I am using insiders version of VS Code because I'm using M1 chip, you can download the correct version from their official site. And also I am using macOS operating system and I will use terminal for creating folders, files, etc. So you could do the same steps manually as well. Because in the end we're just creating folders and files, nothing special from the terminal. So you could do that manually. But I believe getting used to the command line will be a better choice for you. So I suggest you use them during the course. Alright, for macOS, users, just hit Command + Space to open Spotlight search. And type terminal. Here. Click Enter. So your terminal is opened and you are good to go. Okay? For Windows users, you can use command line, just search for CMD. Open your command line. You could use that. For both operating system, I can suggest hyper terminal. You can go hyper.is, and download it for your system. It's the same thing in the end, but hyper terminal has more customizations and better UI. I want to state one more thing for Windows users. That is, some commands are not same between these operating systems. We will mostly use mkdir for creating folders and touch for creating files. Okay. I believe "mkdir" is for both operating systems, so it is also usable in windows. Touch may not be, so touch is not recognized in Windows. So whenever I type touch command, you can use echo> instead. So for example, I say, let's say I go into desktop. You could also use cd command. Moving around the folders. When I say cd .. goes back and I say cd desktop it goes there, so let's create a new file in desktop called a.js We can do this in macOS using touch command, and here is our file. But if you can't do it on Windows, you can just say echo> a.js. This is the equivalent touch command in windows. Since I am using macOS in this course. If any command is not working on Windows, you can check from Google for the equivalent version. If you can't find. Don't hesitate to ask me. If you are ready, Let's get started in the next video. 3. Getting Started (Particles): In your command line. Go into the desktop. Or wherever you want to create your folder. I will create a new folder projects, and go into that projects folder. And here I want to create two new files. One for HTML, and I will call it index.html. One for JavaScript, index.js. Okay, So now let me bring my folder here. We have created two files. Let's open it with vsCode, in a second. Okay. So this is the new files we have created. So open index.HTML and index.js as well. In index.HTML, I want to type HTML, and I want to choose this one, HTML5, because we want it to auto complete the HTML5 template. So when I click Enter, you can see it creates the head body. And so on. We want to create a new canvas tag in the body. Because we will use that for our visuals. I want to give an ID for that canvas. "my-canvas" And also all let's create a script tag because we will use JavaScript. And let's give us source index.js so that it can understand we are calling JavaScript functions from this file. So save it. In index.js. We want to get that canvas object. And then we will get its context and write everything using that context object. To do that, we will use the ID of the canvas. So I will create a new variable: const canvas. And we can use document get element by ID function. And if you pass the ID of my-canvas here, let me control it. It's same. This can bring us the canvas from the HTML file. And then we can get it contexts. And I want to call it CTX. For simplicity, we will write CTX many times. That's why I will use a shortcut here. So we can get canvas.getContext Get contexts function like this. We want to get context 2D so we can assign it to CTX to use the context object. So let me just log CTX in the console so that we can understand better. Okay, right now, I will save this and we should also open index.html in a browser. Let me do that. You can do this by opening this index HTML with Google Chrome. Okay? Now I have opened this. This is a Chrome tab and I will just do this to see both the code and the outcome at the same time. And in Chrome, right-click and say Inspect to open the developer tools. Here, I want to open console. So right now we have just logged the CTX and let's check what it is. So this is an object from canvas. So we can see some properties of CTX. For example, fill style, which is set to black right now. Or font, which is ten pixels, sans serif, or line width, which is one. By default. We cannot see functions here because they are coming from inheritance feature of JavaScript. So if I open prototype, you can see some functions that we can use. For example, arc, we will use arc to draw circles. Let me just, rect We will use rect for drawing rectangles. Okay? Restore, we will use it to restore our canvas or rotate the canvas. Alright, so this is CTX object, and from now on we will mostly use ctx for every action in JavaScript. Okay, so let's go ahead and draw a basic rectangle. First of all, we want to start with ctx.beginPath( ) This is just saying to the browser that I'm beginning to drawing something. You can see that function here. And then I want to draw a rectangle. And this rectangle, you can see the properties in the explanation reactangle. We need x, y, width, and height values Well, I will give 100 for each of them for this example. Finally, we need to specify whether we want to fill this rectangle. Or we want to stroke this rectangle just to highlight the borders. Let me just comment this line for now. We are filling. So when I save this js file, nothing happens because this is not a live server. We need to refresh. And I'm doing this by pressing Command R. You need to refresh the browser. When we refresh we can see our rectangle. And if we choose to stroke and refresh again, it will look like this. You should ask here, where's the bottom line? Right? We don't have the bottom side of the rectangle. So let me explain why this happened. First of all, we just created a Canvas, but we didn't know the size of the canvas. Actually. Let me just make the background of the canvas red. So that we can see our Canvas, refresh the page. So we expected that the canvas to be full screen. But the canvas is just here. By default, it is not full screen. So we should here specify the canvas width and canvas height. So I will say canvas width, and I will just assign Windows inner width. So inner width is inside of the browser, so the white area. Okay? So it is just from this side to this side. Okay? And for the height, we can also use when window inner height. And you can think inner height like innerwidth as well. So sometimes you may have here URL and top navigation bar. So inner height does not contain that part. It is just the white area. When I save this and refresh the page, you can see the canvas is now with the same size of our inner width and height. But there's a little problem. Again. That is this white regions at top, left, and bottom. So let's also remove them. So we should use CSS just for resizing the canvas. I don't want to write everything in line, so I will create a new CSS file for this only. So let me just delete that. And also we can add a link in the head tag. So let's give index CSS and save this file. So we should here create a new file which is index CSS. We should call the my canvas tag like this. So right now if I refresh the page, you'll see there's no CSS. Okay. Because we just deleted the background color. So let me just make it blue again so that we can understand if our code is working. Okay? Yeah, it is working. So what I want to do here is first, firstly, I want to set position to absolute. Okay. So because we don't have anything here, any parent and child or any component to render. So that's why there's only canvas. So we can set its position to absolute and we can just force top and left values to 0. Okay? Also, let's, let's just set width and height as well. So it is, we are 100 sure that our canvas is fully lies between our browser. Okay. This is great. One more thing I want to talk about its when we change. Let's just delete background color here. We just wanted to test. So one more thing, I want to talk about this when I make any differences. When I change something everytime, I should go into browser and refresh the page. So I'm doing this by pressing Command + R If you are a Windows user, you can use Control + R. But this is not an efficient way. In every change, you shouldn't press Refresh buttons. That's why I want to talk about an extension in VS code. So if you are using Sublime Text or Atom, there are some similar extensions like this. So you should just search for Live Server. This is very common. In the first line, you can see a live server extension, that has been downloaded for approximately 20 million times. So go ahead and install this. Okay, I already installed. And then in your HTML file, click somewhere, right-click. And let's just say open with Live Server. Okay, when you do that. It is just server started at port 5500 So this is a live server now, which means when we make change. It just auto refresh. Okay, when I save the file, this is already changed. We don't need to refresh every time anymore. 4. Event Listeners: Alright guys, let's make something. So I want to talk about event listeners, which is a really handy tool or interactive art in JavaScript. So we're going to track the click event and draw a rectangle on the coal was why are we clicked? Okay, So let's first snow to commerce. There is a built-in function at during the summer. And here you can type, you can type the type of the event. We are looking for a click event. So I will say click. And for second parameter, this is a callback function. You should use a function that what you want to do ran the Commonwealth is collect. Alright? So we will write some statements in these lines. And these lines will be run on click. So first, let's just lock the event itself. So we can do e as a parameter here, and you can just use that function. So first, just lock the e to see what it is. I will just save this. And also let's delete this line. Okay, so our console is clear. And when I click somewhere, there is a lock and it's type of pointer event. So let's open it. There are lots of, lots of properties here. But if you go down, you can see x and y property. So that if I say console log it up x dot y and save it. So when I click solver, you can see we can get the x and y position of that location. Okay? Which is a great tool because we can use so that we can use that point to draw a rectangle. Instead of logging this, I will just use. So we can just maybe move these lines, by the way, holding Alt option and using the arrow keys, you can move lines like this. And if here, instead of during 100, we can say e dot x dot y. So let's just make this smaller, maybe ten. And just make it feel. Okay. So when I say or when I click on Carlos, you can see we just draw a rectangle. Wherever we click. Okay, this is great. Let's go farther and change your rent the center. Instead of click, I want to use Mar's moon. Okay? And save this. So this time, when you click somewhere, it will also track the mouse event so that we can do with our mouse. So this function is called many, many times. Let me just, let's just log the x and y values. So save this. So you can see it's logged many, many times because we are moving the mouse and the event listener tracks marshmallow. So every time I move my mouse, just create a new rectangle. And it just locks the x and y. Real is, this is something like this is something like brush, right? So we can draw whatever we want. 5. Draw an Arc (Cirlce): All right, guys, we can draw rectangles now. Let's see how we can draw circles. To draw circles, we will use CTX arc methods. And I want to talk about how this works in detail. Consider these parameters. In the parameter section, you can see x, y, which is usual Radius, which will be the radius of the circle, start angle, angle. I will explain what are they Just now and a boleon optional parameter at the end. You don't have to give optional parameters. It is just to decide whether you want to start drawing the circle on clockwise or the opposite. Okay. You will understand better now. Consider a coordinate plane, and we have a zero point in here. You can think about trigonometric. When we call arc function, it will start from zero, and it is starting to draw circle like this. If you give an end angle of 90, you just draw an arc, not a complete circle. You can define the start angle and end angle as well. Because this function is not for drawing circles always. You could also draw arc So in the code, let's try to draw a circle. So I will just comment out these lines and save it so that we have a clear commas. Now, if we give 100 and hundred for x and y values, 50 for radius, zero for starting angle, and let's say 360 angle to draw a complete circle. I will save this refresh. So we should also say begin pat CTX field. Save this and you can see the circle. Let's change it to one 80. You can see a complete circle again. Let's change the angle to 90. Why this is happening because these parameters are not expecting degrees. Instead, it's expecting radiance. That's why here we should use that Pi times two for a complete circle or that Pi for a half circle. You could also use some converters from degrees to radiance. Or you could write your own converter. Let's write function degree to radiance. This can be an arrow function. I'm sorry, like this. The formula for that is degree I degree divided by one 80 times Pi. Let's save this and Let's also move our function above. Then we can now use degrees. Call that function we just wrote and let's say one 80 and save it. This is same again. Let's try 270. You can see or 90. Be aware that this is not filling the area of that part. This is intended to draw arc. Let's say stroke, and now it is more meaningful, I believe. When I say one 80, it's a half circle or like this. All right. We could say 360 for a complete circle as well. Okay. 6. Generate Atoms: Now that we also know how to draw a circle, head over to this video where we will start drawing exciting things. So let's start. First of all, in this video, we will create more than one item. So we will create circles, and I want to use a class in this time because we will use that class to generate many atoms. I want to start declaring with atom class. It needs a constructor, This will generate atoms and they are basically small circles. That's why we need x and y values in the constructor. So that x equals to x and y equals to y. For radius, I want to make the radius random 10-0, but I don't want it to be zero because it will not be visible. Let's add two or we could also make this eight. It's 2-10. We also will declare speed speed on the x direction, It can be random as well, but this is too much. Let's make it four. If we declare a speed like this, 0-4, they will always go right. In order a circle to go left, it needs a negative speed because it's x value so decrease when while going left. That's why I will just say minus two. The outcome will be between minus two and plus two and do the same thing for y as well. We are done with constructor. Let's also create an update method. So this update method will be called in every frame, and it should update the x value of the atoms, and it should update the x value using speed x variable, and also do the same thing for y as well. But we're just defining some variables, the circle speed, it's radius x and y, but we didn't draw anything yet. To do that, we need to draw function. So atom can draw itself. Remember how do we draw. We say CTX begin PT, first of all, and then we can say CT x r here we can give x value. We can give the y value, and we can also give radius from the constructor. Start angle should be zero as always. I can give that Pi times two for end angle because we always want a complete circle. I also use function here. Let's save this. There's still nothing on the coals because we didn't create any atom. We just declaring it, so the computer keeps atom class in the memory, but it's not used right now. Let's go ahead and use the atom class. On top of everything, I want to create atoms array, which will be an empty array for beginning. Then Let's add an event listener, so that when we click on somewhere, the atoms can be generated on that point. So I will call as a event listener. Event listener will listen click event. And for callback function, I will pass the event. So that we can access x and y values of the clicked point. Inside of event listener, I want to use a for loop here. I will use the shortcut. In four loop. Let's change index with, so it is more readable, I believe. I want to create 20 atoms. Let's specify the boundary, and then let's delete these lines. What we want to do here is to push into atoms, a new atom, right? So let's also declare its x and y value with the event that we just used. Okay. I will save this. When I click on somewhere, still nothing happens. But just to check. If these lines are working, we can add a log here. Let's say hello. When I click on somewhere, you see it logs hello 20 times. When I click again, 20 more, and so on. These lines are working. We don't see anything yet because we didn't use function. If we use draw function here, it could also draw. But what I want to do here is to show you an animation function. So we can create a new animation function like this. In here, we will use request animation frame. This function is really easy to understand. This function will just call a function that is passed. If we pass here animate, so that it will call itself again, we would create a loop, and this is an infinite loop, and that's what we want exactly. Because whatever we write in between, they will be called infinitely. Because in this line, it will call animate again and goes from the beginning and runs the codes and then goes back again and so on. What we want to add here is a draw the atoms. So I will use atoms and I will use for each, which will iterate over every item in the atoms array. So we can we can pass a parameter, which will be the iteration object. Atom. Here, the atom will iterate over the atoms array so that we can use draw function here. With these lines, we just draw every atom in the atoms. After draw, I want to also call update function because we will increase the speed. We will increase the x with speed or decrease x and y values. The animation function will be called many many times and we will always update the x and y, and we will draw again so that we can see animation right now. I say it When I click, still nothing on the comas. We should add one more thing. We just created animate function, but we never call it. Let's just call it. Now when we click, finally, you can see the result. Wherever you click, 20 atoms generated, and they just randomly spread around. The speed, the radius are random. And we can see an animation because we used request animation frame. So let me just refresh the page and see again. This is already a great project for beginning that we will make better visuals in the future. 7. Destroy and Blur: Currently, the atoms are not being destroyed at some point. This is not a good approach for performance issues. They are just moving infinitely, but they will not be destroyed at some point. Also, I believe if you make atoms smaller in every frame, and they can be if they can be destroyed at some point, so they can get smaller and smaller in every frame. It will be a better visual effect. Let's try to implement that logic. I will first try to change the update function of the atom class. This update will just changing the speed so we can also update the size of the atom. We could use the same method. In here, I could also update the radius, but I want to just create a new update method and I will call this update speed in terms of flexibility, you know, in the future, maybe we can just want to update speed twice and we don't want to update size. And so it's just for flexibility. I will create a new update size method. In this method, I will decrease the radius. Let's try 0.1. In every frame, we will decrease the radius, when we call update size method. Let's go ahead and try this Update size, and let's also change this to update speed. Save this. Let's see what we got. Now, This is just let me open the console. We have a problem failed to execute arc the radius provided is negative. We are just decreasing the radius, and at some point, it will be negative and since we cannot have a negative radius, the console just give a warning. So what we can do here is to delete the atoms that has a negative radius value. If we do that, we will also handle the performance issue because once we delete an atom, we don't have to think about it anymore. So in that four each where we iterate over atoms, we could check atoms radius, and if it is lower than 0.3, we should delete the atom. The atoms are just stored into atoms array if we can delete from the atoms array, we are just fine. We didn't create new variables or any kind of data storage. We're just holding them into atoms. There is a way to. There are many ways to delete atoms to delete an element from the array. We will use splice method here. I will say atoms that splice needs a number here, which will be the index of the element that we want to delete. To achieve that, actually, we should first change the four each function here. I will add a new parameter index here, and four each is already ready to give us the index value of the loop. You can see here, you can give a parameter of value and also index and we could also give the top one what we don't need right now. If we type here index, we can just use index here as well. And we should provide a delete count. So we just want to delete one element. So this is fine. I believe right now we are just deleting atoms that has a radius of below 0.3. Let's say and try. Now, we don't have any errors. It becomes a nice star animation. So you can see the effect the circles are just decreasing, are just getting smaller and at some point, when they have a radius of below 0.3, they destroy themselves so that we are just fine. We don't have anything on the memory after the animation. Okay. So this is very efficient. All right. But let's make this effect cooler. So I will just let's change this click to Mamu and see what happens. Maybe this is too much. We're just creating items, and our coma is just full because we are not deleting them from the scene. What we can do about this? I want to talk about a concept right now. Context save and context restore. So these blocks are just, you know, it's self explanatory. They're just saving the context, all of the settings of the context, for example, fill style, or, you know, line with everything else, it's just a the save point here. And when we change something between them, we can change fill style we can change fill style to red. So when we change it between these two lines, for example, in this line, fill style was black. When we say restore, it just goes back. So it is black again in the 27th line. All right. So we can make any change, what we want to do, and then we can just restore it that makes the whole setting go back to this line to this point. So I want to add the blocks here and I want to change fill style. Let's try red, Okay. And I want to draw a rectangle. I will use fill for the whole cas. In every animation loop, we will draw a rectangle in the whole coas To do that, we should give conva and Cas values. Let's say this. We're just drawing the red rectangle in every frame so we cannot see anything. Okay. So there's no point of doing this, obviously. But if we change this red to some RGB value. So our background was white. So let's say 2505, 2505, 2505, and this is for setting a white color. So this is similar to writing just white. But this time, I want to add Alpha as well, which is the opacity. This A stands for Alpha. Here, I want to add an Alpha to 0.2. Direct angle will have a opacity of 0.2, which will give us a nice effect. When I say this, when I move the, you can see, let me close the console as well. So you can see that nice blue effect, right? And our particles are just moving with a nice trailer effect, and they are being destroyed at some point when they get really small. 8. Generate a Nice Sky-Stars Effect: We have created a nice visual effect that listens to mouse movement. What if we want, the code generates the atoms by default. So what if we don't want to listen the mouse event? But instead, we want it to create automatically new atoms. So I will comment out these lines here. And at the button, I want to create a new function. Okay? So let's, let's call this function generate atoms. And I will use arrow function again. Okay? So for, for instance, to create atoms, we can just use the same logic here. It's enough to just push atoms into the array, right? So because then we have an animation function, it will draw, update speed, updates size, and does everything. So we should just first push into atoms. So I will say atoms.push We want random values. So this expression here, as you know, creates random value between, if I type here 10, between 0 and 10, right? But I don't want any static value here. Instead, we can use canvas width. So the atoms can be generated anywhere on the canvas. And do the same thing for Y as well. This time canvas height. Okay? And then we can just say request animation frame and call the same function here because we want it to be a loop. Okay? Now if I call generate atoms and save this file. So I'm sorry, we didn't. We just gave x and y values. We didn't call the class. So I will add new atom at the beginning and the parenthesis at the end. I save it again. So you can see now we have generated a random atoms anywhere on the canvas. Okay, so this looks nice, but let's make it better. I believe if we make the background black and make atoms smaller and white, it will look like sky. Okay, so how about trying that? We should change this line. I will just comment out because I don't want to lose this. But this time we want it to be black. So I will give 0 for RGB values. Let me save it. Our canvas is black right now. We can't see atoms properly because we should change their fillStyle to white. Where we actually draw atoms. Just before drawing. We can say CTX, fillStyle to white. So right now it looks much better. And also they are too big. I want them to be smaller. So maybe we can change radius here. So Let's try something 2. Instead of, instead of 8. Now, they are smaller and they look like stars in the sky. This is how you can create a sky or a space effect with JavaScript. 9. Custom Movements of Particles (Parabolic): It's really easy to create random atoms. But what if we want to create atoms in specific locations? And we also want to move them in a way that we want to specify. Okay? So in order to do that, I will just create a new JavaScript object point. It should have two basic values, x and y. So here, instead of random values, I just want to use point X, point Y. So let me save this. So if I gave 500 here, you can see they are at the specific point, okay. Or if you want something specific at something at the middle, of canvas, we could say canvas width divided by two. Canvas height divided by two. So it's exactly on the center. Okay? So let's go ahead and move this on canvas. So what we want to do here is to change the point x. If I change point x, if I increase it with one in every animation frame, it will go right. Let me save it. So you can see just goes right. If we also change the y, now reframe, it will go below and right. At some point, it will go outside of the canvas. Okay, so how do we make it bounce between some points we can use trigonometry here Because cos x function is going between one and minus one, while decreasing are increasing. Okay? So if you use cosine to increase point x, it will go right. And then at some point it will turn back and starting to go and left. Okay, let's use this in our code. Let's actually start x and y from 0. Maybe we can use cosine here. We should give radians, again, not degrees, but I want to just convert it from degrees to radians. And I will also assign a new variable. It will start from 0 and it will be increasing in every frame so that our cosine just goes and turns back. So let's use that variable here, degree. And remember the formula for converting to radians. Divided by 180 times Pi. Okay? So I want to generate atoms from the center of the canvas. That's why I will just add canvas width. Divided by two plus, and also here canvas height divided by two plus. Again, now if I say, you can see it just suddenly it just go somewhere. Now I see it's because we just made a typo here. It should be like this. When we save it. You can see there are generated at the center of the canvas, but we are increasing point x or decreasing in every frame. But nothing changed. This is happening because range of the point x is between -, so it doesn't affect much. That's why I want to multiply that value here. Let's say 200. And also y Let's say 200 again. Now you can see it is just rotating between these values. So point x is one. It will be on the right. If it's minus one, it's goes on the left here. So what we can do also, we can make that movement parabolic as well. So right now we don't do much for y if we say always one. So we're just shifting it. So that doesn't change. But remember parabola formula. So let me just open. This is just the basic parabola, y equals to x square. So let's just implement this in our code, which is y equals to point.x times point.x What do you think will happen? Our shape, we'll just starting to draw a parabola. Let me just save it. You can see the result and using that logic. And trigonometry, you can draw everything you want. A circle, eight, an infinity symbol, everything. 10. Getting Started (Pixel Effect): In this section, we are going to create a nice pixel effect using Vanilla JavaScript. So at the end of this section, you'll be able to use this pixel effect on error PNG images. So if you are ready, open your command line and we can start. In the previous sections. Remember we created a new projects folder in desktop. So I will go into the projects folder. I will create a new folder here regarding this project. And I will call it pixel effect and go into that folder. So here, what we need is actually three phones. So as always, index HTML. So I will say touch index.HTML to create it. And also touch index.js and also for CSS, style.css. Okay, now we have created our files. Let's open. 11. Setting Up the Project: We can open the project with VS code using terminal as well. So in your command line, if you just say caught spaced dots, if your command shell is already installed, the commands, this will open the VS code using your directory here. So if it's saying something like command not found, let me on the screen, you can just go into VS Code and press Command V or Control V on Windows. And here type shell command. So since I'm using insiders version of VS Code, because I'm using an arms six to four version for Apple silicon. It says called insiders, but, but normally, you can see here it says installed called command in pet. So if you are using insiders, you should install this one. If you are using normal version just VS Code. So you can check it here. You should see here install, install cold. And once you do that, once, once you click that, it will install that command. And then you can hear, use this command. Since I'm using inside this version for me, it is called insiders. Okay? And it will open the project in VS Code for me. Alright, so let's start with index HTML. As always, we will use HTML5 template. Here. We can say pixel effect for the title. And then as always, we should create our columns. I will give my code was like homeless id. We should also create a script tag given the source of index js. Finally, let's also link our CSS file with a link. Okay? So everything is ready in HTML. Let's go into, into CSS. So here I want to choose everything. That's why I will use asterix and set margin 0, padding, 0, box-sizing, border-box. This will allow some adjustments. You can research for it. It's a CSS topic I will not discuss right now. Let's make the background black. And then we can call our Cosmos using Ivy Tech. And let's set some border. One px solid white. And also set its position to absolute because we don't have anything else. We don't have something relative so that we can fix it at the center of the screen by doing top and left values. There are many, many alternatives. Doing this one every way will work. So finally, we want to translate the colors, my minus 50%. So these lines will just make the colors will just bring the Congress at the Center on every resolution. Okay, I will just save CSS and we are done with HTML and CSS. We can now open JavaScript file. So it's like always, we should first create the cars using element by ID. Pass the ID of my car was. And we will also create our CTX is in that context. Goody. Alright. Now, what I want to do is to move some PNG images into this folder and use that image as well. I will provide you this image is from the resources section. So you can download them and use exact same images with me. Or you can choose your own PNG pictures in your own project. So let me bring my pictures. Okay, So we have three and PNG pictures. Right now. Now that we have done in local file system, we can now access it. I will create a new variable, which will be which, and it will be an object of image class so that we can now change its source to let say. Let's start with Kerry. Okay, So this is the name of the file in the same folder. That's why we don't need any slash and dots, anything else. We can just pass its name because they are in the same hierarchy, right? Also. So now that we have the source of the image, we can actually call it. So we can say Image lot. So this will be called when the image is already logged. So we can say, we can say function here. And everything we will write. These lines will be called after the image is loaded. Okay? If you didn't say, if you didn't use are not property of image. We could start coding before the loading process. So that will cause some errors. Okay, So this is the safest way to use image with JavaScript. Alright? So when it's loaded, what we want to do is to set Carlos width to that image width and also Carlos height to that image. Now, we can draw the image using CTX image function. So for first parameter, you should give the image itself. So I will say Image and I'm starting x and starting y should be 0. Finally, we can do commerce with Carlos height or the endpoints. So when I save this, Let's also go into the HTML file. Right-click on it and open with Live Server. And if you didn't watch that section where we installed live server, it's really easy. You should just go into the extensions here. We can type Live Server and you can just install this one. It's about 20 Melians. It has about 20 minutes download. So it is safe to use. Once you install it, you can right-click in the HTML file and say Open With Live Server. 12. Get Image Data in JS: Entry will be opened in your default browser. I will do, I will use Chrome. So let me just stack this way as code so that we can see both of them simultaneously. All right, We are ready to go. So now we can draw the image into the car was, which means we can also use imageData function for our image. So let me just see dx. Let me just explain get imageData function. So we should give x, y, width and height. Relish. Like drawing a rectangle. And what this function does is to actually getting the image data. The returning object will be an error. So actually let me just imageData. Okay, Let's just logged to say it and understand easily. So I will open the console image that you can see. We have a data object. Okay, So let's actually logging, log the data itself. So it's an array. It has that many items. 2 billion, maybe 2 million. I dress. And if you open inside, you can see It's just a clamped type of an array. So it's actually a single array. It's not a mattress. There is no. So it seems like there are three items inside of an array, but it is just, you know, this is just Developer Tools, very off shoring things. But it's normally, it's 1D array, so they're just next to each other for every number. And you can check this. It starts from 0. And if you open the second section stashed 400, the index is increasing continuously. Alright? So what are these zeros? Meaning? It works like this. You know, RGB values, right? R stands for red. G stands for green, B stands for blue, and a stands for alpha. So we can identify every pixel in the cow was using this color. Well. So we will have a number between 0 and Two, 55 for each of them. And that will show how powerful of that color in that image. So like in this example, let me expand this tab. Okay, so in this example, let's say our first pixel is right here. And the red value of that pixel is 0, because there's no rent here. It's all black, right? The blue is also 0. The green is also 0. I'm sorry, green. Blue is also 0 and alpha is also 0 because it's not transparent, right? There is not a pasty. There's no brightens in that pixel. But let me just find something in the middle. I'm just randomly choosing. So rare and I hope I can find someone not black. Shouldn't be that hard. So we should look for though. Okay, We found it at this pixel. I don't know where it is right now. But we know that red value is 217, green value is 10928, blue value is 166, and alpha is 25. Okay? So now you can understand that we have. Rgba values for all of the pixels in the columns. Which is great because we can use that values to do everything we want. So we can draw the image on the opposite side. We can get its colors and use them in different ways. Or we can create a pixel raining effect, which we will do. Okay? So if it is clear enough, I hope I didn't explain things. We can continue right now. So now that we have imageData, we can actually separate the red, green, and blue values, right? We can keep them in different data structures. Okay? We can calculate some brightness with using that revenues. So you can understand better when I type. So let's start with a for loop. I will change index to i. So we should loop to image data, data that lacked, right? So let me open the console again. I guess I shouldn't close it. Okay, so we have two million. Two million. Yeah, we have around 2 million elements and we should loop through them. So in this for loop, I want to identify red, green, and blue values. Red will be imageData. The data. And we will remember the red ones are, the first one is red and then green, blue, Alpha. And the fourth one, actually the fifth one is again red. And then this one is red again. This one is red again. So we can say I times four, we can get all of the red value straight. First. In the first iteration it will be 0. The second iteration it will be four. So we can get every red values. So I will do the same thing for green as well, but this time you can just another parenthesis here. And we can say plus one, because this time we will get 159 and so on. So let's go ahead and do this for blue as well. It should be plus two. And with red, green, and blue values, we can just create a new brightness variable. So it's just, it will be useful for that effect. Okay? So we just want to use an average of red, green, and blue variables. So I will, I will just get the sum of the three values and divide by three to get the average. So we can assign it to brightens. Right? And then let's just create a new array. At the top of everything. I will call it brightnesses array, an empty array. And let's just push brightness value into that array. Alright, so what will be the length of brightness array? It will be same with the pixels in our columns, right? So we just get red, green, and blue values of each of the pixels. And we get the average of them. And we call that value to brightness, and we will push it into the brightness, Eric. Okay? So if you remember, our result will not be colored. Later. We can do this with colored as well, but in the first step, we just want brightness value and we will use it. All right, let's continue. Let's generate Tarzan particles or this effect. I will use a new for-loop for that. Again, I will use I again. And let's say this time I will give static 10 thousand for boundary of the for loop. Now, this loop will iterate 10 thousand times and we should just push. Actually we should first create particles array. So now what do we want to do is to push particles or a 10 thousand times new particle, right? So, but we don't have any particle right now. We didn't create any class. So let's first do that. We'll just leave a comment here. So we should, we should be able to say here new particle. Okay? And then we will uncomment it once we have that particle, particle class, I'm sorry. 13. Create Particle Class: Alright guys, it's time to create particle class for our particle effect. At the top. Maybe here we can say class particle. And we are used to that syntax, right? We have used this before. So I will just call its constructor. And we don't need to give any parameters actually because we can make it default. So as always, we have X value, which can be random. And the range will be between 0 and Carl mosfet, right? So, um, some of you maybe miss the Math.random section in the beginning of the course. So this value will return a random value between 0 and columns with, okay, so if we say just here, this will return a random value between 010. So we can say commerce with here. It will return some x value between. Let's just close the console now. Some random x value between the campus inside of the cosmos. And let's do the same thing for Y as well. But we want, we want our particles to start at the top of the columns. This time we don't want any randomness. That's why I will say 0 for every particles. So it will start randomly on the x-direction, but it will start at the top every time. I'm also called brightness, because we will use brightness. Remember here, we just calculate it. I will just make it 0 by default, but we will change it later. Okay? They should also has a velocity because they will fall down with a random velocity. So something like three works. And also they will be circles. That's why they need a radius. And I want every particle will be in different sizes. That's why Let's make its radius values between. So I don't want it to start from 0. So I will just add one here. So this value will be between 1.52. Okay? So we held down the constructor part. It's time to stamps tied to update function. In the update function, you are already know what update function is four. It will be called in every frame, right, with our animation function. And we will write the animation function later on. But update function will be called in every frame. So whatever we rewrite between the update function, these lines will be called continuously in every frame. So what we want to do continuously run to increase the y values of the particles so that they can fall down. So we want to increase them using velocity of the particles, which will be random as well. So actually let's add here. I don't want this to be 0 because it will be 0. They will not fall down, they will just stay stuck to that pixel. So I will just add 0.1 just to be sure that they are falling. Alright, we can go ahead. And so the particles will just fall down continuously. And at some point they will come to the bottom side of the columns, right? So when they do, we should just, actually, there are two ways we can either destroy them or we can change their y value to 0 again, so that they start from the beginning. I will use the second way in this project. So I will say if this dot y is bigger. Than or equals to I was height, which means they're just about to go outside of the canvas. Let's make y 0 again so that it starts from the beginning. And I also want to change their x so that they will be randomly positioned, again. Mud, random. And our boundary is converse with anything. So this makes sense, right? It's just pure logic. Okay? I will just say this. Let's continue with our draw function. Actually, before I draw function, I want to talk about the brightness because this is where we use the brightness. In the update function. We will change the brightness of the particle in every frame with the value that we get from the actual image. So remember this brightness array, just a huge array, but it is 1D. So it's just, it has maybe more than 2 million elements. And we can get the exact point for our practical. So how do you do that? I will say this dot brightness. And we can call brightness. Here. We should use x and y value of the particle. We should use very cleverly so that they match its position in the brightness error. Okay, So think about that. How can we use x and y values of our particle? That it will match the brighten the center. And this will also comes from the image data. But there's a little difference between them. Here we have x and y values of the columns. So it is a mattress, which is Tuesday, right? But here we have just one, the array. So somehow we need to map this x and y values to this brightness. I will explain this part using a slideshow. 14. Mapping from 2d to 1d: This is our columns. We have the x values on horizontal, we have the y-values on vertical. And this is the brightness array that we used. So they bought your presents the same thing. The pixels in the cosmos. But there's a little difference. One of them is in 2D, while the other is 1D. So with using x and y values, we can represent a pixel in two-dimension. Because we use x and y values. But in brightness array, it's linear. We only have one dimension. So here you can see the reflection of the brightnesses array into x and y coordinates. So these values represents the index is off the brightened survey into the Canvas. We can use the formula to access the index of the bright survey using x and y values of the pixels. So let's say we want to access the tenth element and pixel. So, but we don't know which pixel it is in the brightness array. We only know x is two and y is two. So let's use the formula. It will give us ten. And that works because we're just multiplying y value with the rows count. It makes sense, right? Then we just add x. Okay? So let's see another example. If we want to access X4 virus six pixel, the formula will give us 44. So we will use this formula in our code. It will look like this. By the way, we just use Math.floor in the code because the x and y values are just randomly generated float values. So since they are fluid, they are not integer. But we will, we need integers. That's why we will use Math.floor in the court. 15. Apply the Mapping Formula: Let's use that formula in our code. So I will say Math.floor, this dot y minus one times commas. But for now, I can expand this window plus mod floor again, that x. Okay? So still we don't see an animations because we didn't create our animation function. But be patient. We're just about to do that. 16. Draw Function: Let's also create the draw method, which is really easy, and we did that before. So in here I say draw. Really should start drawing, will begin pads. And we can say fillStyle, white. By the way, you can change this line with whatever color you want. Or in the future, we may want to change this line with the image color so that the pixels will be colored as well. So we want to draw a circle using x, y, radius 0, and the complete circle. That's why I will use math.pi times two. So we already explained what are these parameters and how to draw a circle in the previous sections. And finally, we should say CTX, fear. Alright, let me just save this, but we're not calling drove functioning it. That's why we don't see any animations. 17. Complete the Effect: Let's go to the end. Here we can create animated function. So I want to make it an arrow function. And first thing in the animation function, we want to change the opacity of the common ones. We can do that by using global alpha property of the CTX. And let's set it to 0.05. Also change fillStyle to black. Okay? And we want to draw a rectangle, reframe with that opacity and black color. So that's why I will give commerce with and commerce height. So that rectangle covers all the area. Okay? So you can see what we're doing here, right? We're just drawing a bluish and output as 005 alpha rectangle, which will give us nice blur effect of the particles. And we are drawing a rectangle that covers all of the cameras so that we don't we don't need to worry about all of the particles individually, but we're just drawing a big rectangle instead. Alright? And of course we want to draw an update particles in the animate function. So for that, I will use for each entity. So let's call particles array. For each. We will iterate over particles. For each particle I want to update. And I want to. And between them. Let's also change the global alpha again. So we will lose the particle brightness here. So part brightness array, we just assign it to the particles so that every particle has a different brightness according to the pixel of that location. Right? So let's use that brightness between update and draw. Let's change the global alpha particles right? At the end of the animation. I will also call request animation frame as usual. Alright, then let's just call animate function and save this file. We don't see any particles. That's because we didn't push particles into particles array. In this for-loop. We didn't generate because this is just comments. So particles array that we should say push a new particle and this should be fine. When I say Wait, we don't see anything again. Okay, This is weird. Oh, there's a, I see just one particle. So maybe our breakfast is too much to draw. Let's multiply this value with a little number. Okay, now we have our particles. They are responding to the picture, which is great. But I just want to increase this a little bit. This is not bad. Maybe we should still decreasing. Yeah, this is much better. So now what we did here is to changing the global alpha with the brightness that we just calculated. By taking the average of the red, green, blue values of that pixel in the original image. And these values gave was the brightness or that pixel. And we use that brightness in our pixel effect. I hope you enjoyed this effect. And what's exciting here is we can use this effect from now on in any image we want. Okay? So I also provide you the wall or on PNG file in the Udemy. So it's enough to change here as well around to apply that effect on this image. 18. Add RGB Colors: I believe this is already a great effect. But if you want to use the original colors instead of black and white, we can do this easily. So let's open our code. A bow. I want to create a new RGB array. Alright? So we will use RGB array like brightnesses array. Each iteration of this for loop, we want to push also red, green, and blue values into an array. And we will use that later. So here I will also push in RGB array. So I will use JavaScript string literals. I believe that's the name of the technique here. So just put a back-to-back here. And we can now combine texts, text with the JavaScript objects like this. And it will return as ***** in the end. So like this, I will say dollar sign with the parent. This is Carla paranthesis. You can now type red here, and then you can just continue typing stink. So we want to say RGB, red, and red comes from here. Red value, whatever it is. Then we want to import green as well. I'm finally blue and close the parenthesis. So this looks fine. We could also do it like this. It's same thing. Rgb parentheses plus red, plus comma, plus space, plus green, and so on. So I think this is much readable. That's why I used that way. Okay? So right now we have RGB array of each pixel. And inside of that array will have strings, which is standing for RGB values. And if you go below, we say CTX fillStyle black and not this one. Ttx fillStyle white. Instead of growing white particles. We can do with the RGB values that we just stopped. Here. We should use the same logic with brightness array, because this is again a 1D array that holds the entire cameras RGB values. So let's say RGB array. So I will use the same thing. Actually, let's just copy it. Close this section. Let's just copy this and paste here. Okay, Let's say this. Let's see the result here. Actually, it works. So let me open the original image. It's right. That's why our particles are generated. Right? Let's try curry. Curry has more colors, right? Let's try curry. Alright, great. Now our particles are in the exact color of that pixel. This is also great. So let's just change one Morton and we will be done. In the beginning. When I save this refresh, you see the image of the code, right? So let's, let's just delete it because our particles will draw. So we saw it because in here we just draw the image. So in order to get imageData, we should draw the image. We cannot delete the slag, but what we can do instead, after getting the image data, we don't need to keep the image. In contrast. We can just say clear rect, starting from 00 all the way up to calm us what? Our signs. So when I save this, we don't see anything in the beginning and the particles will start to draw it. Okay, just refresh again. We don't see anything here, but the particles are drawn it, okay, So this is great. I believe it's the final state of this effect. I hope you enjoyed. I believe this will this will be a useful effect for your cold. Our journey. 19. Node and NPM: If you haven't installed Node JS yet, go ahead and download that from. So you can download not chairs from this URL. And you should choose the version that according to your operating system. For L1 CPU users, be assured that you are downloading the arms six to four version. Or if you are using Windows, you can just install it here. Then you should complete the setup process. After you installed, you may want to check if node is installed completely by using the command. So to do that, I will open a command line terminal on Mac. You can use PowerShell windows. Alright? See if node is installed, we can use the command naught dash V. Or this is similar to naught dash dash version. So it shows us the version of node.js. Or you can also check if npm is installed because we will use npm, which is a package manager for NodeJS, and we will download Libraries using MPM. Alright? Be assured that Node and NPM installed and you can see the versions of them so that we are good to go. 20. Install canvas-sketch: Now that we have installed and PM, we can now install Karma Sketch library that we will use in Google. Let's start for common with Sketch and go into that detail page. So this is the creator of commerce sketch. You can see the library on here. We will use this library so you can check the documentation and examples from down here. If you go below, you can see an installation guide for commerce sketch. So we already downloaded the MPN. We can use this command. Copy this comment here, and go back to terminal or PowerShell, whether we are using macOS or Windows, list dash g at the end makes it global. So we don't download it locally in a folder, but we are downloading globally. So press Enter and wait for the downloading process. So if you have problems like me, errors on the terminal, it's just the permission shoe. Alright? So you can just say sudo in the beginning and then paste the command is it is, it will solve that issue. Okay, just type sudo in the beginning and then press Enter. Alright, so now we download Sketch library as well. Right now, I want to talk about the terminal comments just a little bit. I just want you to know commands that you should know how to follow. Alright, so first of all, you can go into a directory using the cd comment. Let's say cd Desktop. And now we are in the desktop. You can create a new folder using vectors. So I will call it sketch. We just created a sketch folder in desktop and then go into that sketch folder. By the way, you can see that if I type SK and press Tab, just auto-completes, right? Because there's only one folder that starts with s k, my desktop. And that's how I would go into that directory. If you want to go back, you can just say cd dot dot. So we are in the desktop. Again. We're going to sketch in Scouts, we can get a list of folders and files by just typing ls. So currently we don't have anything in Sketch folder. That's why we don't get anything. So let's create a new test pile. So touch command creates a file. Alright. Now if you type ls, you can see the test JS we just created. If you had created to jazz and type ls, you can see that as well. So Alice should, you should see the list of the files. It shows all of the files in a folder. Okay, these are the basic commands, command line that we will use. So we created our folder. Let's create our first sketch project. By the way, just to visualize it easily, I want to bring my folder in that screen so you can see it simultaneously. The files in that folder. We don't actually need them. I will just delete them. We can now create our karma sketch project. So let's check. Go back to again, the top. We have the command for creating your project. Also opening it in the browser. Refresh dash open. So let's just paste it. Let's copy and paste it here. And press Enter. You'll see that the file I just created. And we also have opened the project in the browser. So this is a live server, which means you can see in terminal, the server running at this URL. If you copy this URL into some browser, you can see the sketch. 21. Canvas Sketch Library: We are now able to see our visuals in the browser. But before that, let's go into the folder again. You can see that it creates three files. Under folder. We will write the code on sketch js. So let's open it. I will just move the file in the screen. So let me explain these lines. The first line, this is just not just important term. So this line is just require, requiring comma Sketch library that we just downloaded. And it keeps the outcome of the library in canvas sketch variable. Alright, so that we can use color sketch from the library. And below that, there are settings. Settings is just a JavaScript object that will be passed as a parameter of Commerce get function here. So that library knows how to, how to behave with the settings we just adjust. So let's say I want to change the dimension. I can do it here. So let's say for now, we want the Commonwealth in a form of A4. You see that it's in a form of a four. Or we could also change the orientation of the colors. As landscape. For example. You do that, you see, you just rotate it the colors. Okay? So the settings object is for general settings that you can adjust. For more details. You can always check the GitHub page. Alright, here at the documentation, you will see more examples as well. Let's go ahead and talk about this function. So this is an arrow function that returns another function. This context, we will use every time that we want to draw something. And we can get the weight, also height of the canvas as well using these parameters. We could also add some parameters here, but this is enough for now. Alright. So, okay, enough for the theoretical part. Let's get into action and draw a basic rectangle. So we will write most of our code down here. Okay, First of all, we should change fillStyle to blend because it was white before. You want to draw something. We should first say begin path. So that JavaScript knows we are starting to draw. Okay? And then we can call contexts that rect function to draw a rectangle. So you should do x, y, width, and height relish. And I will give all of them are hundreds. I'm finally here. If I say contexts that fill, we just feel the rectangle's area. Or we could just say stroke to just highlight the borders of the rectangle. So let's see the difference. Now. Let me just type field first. So I will save it. And when a second, yeah, you can see that it automatically updates the browser as well because it's a live server. So we don't need to refresh anymore. Alright, that's a nice feature of karma sketch. I will use the screen like this sorted. We can simultaneously write the code and see the outcome. So we typed pill here. You see that area is filled. And if you just make it stroke, you can see it's an empty rectangle now. Alright. So one of the benefits of commerce sketch is you can take a screenshot of the visuals. You create it. We can do that by just pressing Command S on macOS and control as on Windows. So this is fun. Let's say we just want to say our practice. And I will just press Command S. And again, if you are using Windows, please press Control S. And once you do that, it just takes a screenshot of the columns. And the result just goes into downloads folder in your computer. So this is the result. It's just a PNG of, but we just call it. We could also of course took a screenshot like this of the image that you know, it's just, this is just not the best practice, is faster and easier. That's why I like that feature of communist sketch. 22. Practice Rectangles: In this video, we have a new challenge. We will try to draw this image using Como sketch. So there are 12 rectangles next to each other with a 100 pixels. Yep. Let's start trying to draw that view with coma sketch. So first of all, we need to create a rectangle, right? We will use a fill function. Okay? And also, we want to change the dimensions of the rectangle so that it will be longer. Let's try to change the height. We don't want a horizontal rectangle, so we should maybe decrease the width. Okay? But this is not a good approach. We just gave static rollers to width and height. This is not a good type brush because if you change the screen size, rectangle is not responsive. Alright? So what if we changed the dimensions? So let's change the comas dimension. The amount of the pixels in cameras is much more. So my rectangle becomes much smaller. So the objects cannot be dynamic in this way. Alright? But what we can do is to declare a new variable. That will be, this can be the time per cent of the common ones. Okay. Let's copy this line. And also for the height, I will call it wrecked height, meet time per cent of cardiomyocytes. But it should be maybe, I don't know. Let's try 0 too. Let's use vectors and vector height function. Okay? So now it is responsive. Alright. This is a better approach. But our rectangle is still take, Let's go ahead and make the rectangle thinner. Maybe 01. This is too much. Let's try 05. Not bad. How about 0? Okay, this is great. We have created a rectangle, but what we need is 12. Often. Instead of creating 12 rectangles manually, we can use for loop. Here. We run to create Ralph objects. So let's specify the boundary of the for loop 12th and written increase with one in every iteration. Then we should move these lines in that form, right? So we should begin pad in every iteration and you should draw a rectangle in every iteration. And also we should fill them as well. So let me just save this file. Right now we have two rectangles, but they all are on top of each other. Alright, that's why we just see one rectangle. So let me just separate them. So we should change the x value, right? In every iteration. So let's try to change x value. So we should, we can do multiplication with AI. So AI increases in every iteration, and that will give a 100 gap. Now we can see that many of rectangles, but we need a larger carnivores. So this is great. If you can't die should be 12 rectangles. 12345678910. Tough. Alright? And also there's a 100 pixel gap between each of the rectangle, right? Because we increased the I value in every iteration. And we multiply that with handed. There is a 100 gap. 23. Canvas Translate: Before the next shape, I want to talk about some functions. First, let's talk about Carlos translate. So this is our Canvas. In the beginning. We have an origin point, which is 00. So in that state, if we write the code on the left, the game pads, and the basic rectangle, which starts at 0054, written height. It will draw a shape like this. Then we'll see Charles late. The cows by using colors translate function. Parameters are handled for x and for y. It will work like this. So mu comb was origin point is 100100. Alright, we're just translating on the course. So our new origin becomes the translation points. So you don't see it on the browser. But under the hood, it works like this. So this state after countless translate your field, say million pad and draw a new rectangle at 0. It will draw that rectangle on the new origin. Alright? But again, we don't see it on the browser. We just see these two rectangles. If the code is like on the left. Alright. So in the end we're just translating the cow was just shifting it and starting the origin in a new translation point. Alright, so let's see it in the code. Let's try. So first of all, I just want to change the fill style. It should be black. Then let's say it became pad. Let's draw the first rectangle from the 0.0054 with 54 bytes. Contexts fill. You'll see that we have a rectangle, the origin. Then we want to translate to the point in Hollywood. So at this point, if we say letting change, alright, because we just translate them 12 lead tin. So again, copy and paste these lines and save it. Now you can see, even though we say draw from the origin, it starts here. Right? This is the result. 24. Canvas Rotate: Last video, we see how we can translate the colors. So let's see how we can rotate the coal loss on this example. So we are on this state and off to translate. What if we also rotate it to Columbus? So in rotate function, we use math.pi divided by one AD because it expands radians, not degrees. To convert from degrees to radians, we use that formula. So I have to translate. If we rotate, the car was rotated like this. So our new rectangle should be something like this. Because we rotate the canvas and draw the rectangle after that rotation. Alright, let's try that in our example. Go back to the editor. So here, after translation, I just want to rotate the context as well. So I want to rotate it to degrees. But remember this, I expect radians not degrees. So we should convert it. And the function is we will use Pi divided by 180. There are some functions from libraries like coma sketch that makes this term, this conversion automatically. We will use that later. But for now, just be assured that you are converting from degrees to radians. Alright? So when I save it, you'll see that the second rectangle has rotated. 25. Save and Restore: But everything that has created after this rotation affected. So there is a problem. Because we just rotate the colors. I might not want to rotate everything else after that line, right? There should be a way to restore the colors, right? And there is. So you can use the save and restore block. So every time you just want to have a checkpoint, a save point, you can say context, I'd say. So. Let's just added here before translate and before rotate. We want to say, because we just want to go to the initial phase, let's say. So after we say contexts, Dr. restore, we can just create a new rectangle. This time. Let's make it there. We'll take 70. And you'll see that it says, it's created at the initial origin of the colors. So we go back at the first state. Okay? So let's try, let's try to say the point after translate. This time, we will go back to the phase that after translation, but before rotation. So we will not have any rotation. But we start from hundreds and hundreds. Let me save it. So you see that now it's just actually let me just change the fill style. Tourette sorted we can see easily. So this is just doesn't rotate, but starts from a 100100 because we just say point here. And while we restore it, it just goes back. At that stage. 26. Randomness: I want to talk about randoms for a while. Creative coding. Random numbers are quite handy. We use them to generate random patterns, objects, and also animations. So in JavaScript, there's a built-in method to generate random numbers. For now. They're not that random number. For now. Let's just log it to the colossal. Save it. And in the browser, if you right-click and say it was packed. Here, go into the console. You can see the outcome. So it just gives a random number between 01. So every time I say this JavaScript file, the random number will change. And we can see it will be around, it will be between 01, right? So if you want something between 010, we can just multiply this value with ten, then the output will be expanded to ten, right? So that's how we can generate random numbers. Let's use a random number in an example. So let's create a random rectangles. So I will, as always, I will start with begun path and down. Actually first, let's change the fill style to blackmail me. And I also want to change the line width 20 pixels. So now we can use to create rectangles like this. Let me just, yeah, Right now, I just want to make the x and y value to be random. So I will say not threaten them here. And we can multiply it with tar file nerves. So it can be between 0500 and also for y. So let's see, every time I say the rectangles position change and it is absolute random, we have no idea where it will regenerate. Alright? We could also use them in numbers for width and height of the rectangle. So it is, It's completely random rectangle by using math fan. So let's go ahead and create just a single rectangle, but it hasn't of them. So to do that, I will create a new for-loop, the Townsend's rectangles. I will just move this one here. So let's maybe not feel about stroke. And also I will just, I will just make Carlos size for x and y values, but decrease the width and height values. So let's just save and see the outcome. At this point, every time you save the file, the image will change. Because we use random numbers. If you want a faster result in, can just comment line with outcome. Or you could also make the line width random as well. Maybe it's between 05. 27. Bounce Animation: Less than or equals to 0, also chose to velocity. So that means this is the 0.4 y, y starts here, starts here. So for y, if it's equals to 0, at that point, they should just make the velocity on the opposite direction. So I'll just save this. And let's make the velocity five to see it quickly. Okay? Yeah, it works. So this will, this is an infinite loop because our return function is being called infinitely. And the ball will just bounce between these two sides. 28. Circle Class: In this video, we are going to create a real project using color sketch. So at the end, the final project will look like this. So you will see a video we will discuss about the animation using color sketch. Alright, if everything was ready, go ahead and open your command line. And we will start creating a new sketch project. I will call it Project warm. Js, dash, dash, dash, dash open. So it just opens in a browser. And let me just bring up the folder as well. So in sketches, we have project one dot js. Here. We have a brand new column or sketch present. And this outline is already explained in previous videos, so we can start writing code to make our project. So first of all, what do we want to do is to create some circles, right? So I want to create a circle class because we will create multiple shortcuts. So maybe hundreds of circles. That is why let's first create a class like Eric classes. Because needs a constructor. Circle needs x, y, and radius values to be created. And then I'll say this dot x equals to x, this dot y equals to y, this.radius equals two radius. And these lines just doing the acts of the circle columns from the parameter when it's time shift. Okay? Now we can just caused my sarco. Sarco. And I will give you 100100 for x and y values, like here, 50 for the radius of the circle. Okay? So at this point, if I say, you can't see anything on the browser because we created the circle. But there is nothing actually that drove the circle on the column was right where they didn't use Honorlock. We didn't use stroke entity. So to do so. We also need a method of the circle class, and I'll call this method drove. Okay? Drone needs to take a context parameter. It will use the context to begin path. Night we did in previous videos in return. And then it will draw the circle using arc. So right now we can use x value of the circle, y value off the circle. Radius of the circle. Now I want the start angle to be default 0. Okay? Because we never want half circle. We always want complete circle. That's why I will also note that pi times 2 by default. Alright? And then finally, let's say a context stroke. So save this. And still I think is on browser because we didn't call draw yet. So my circle that drove While we call drop function and save it, still be the highlights work. It's because we give the context prior military in the draw function. Okay? Right now you can see the circle is here. Maybe we could make that fill just to see it easily. We should also change contexts dot fillStyle to black. Now our circle is here. Okay, but the earliest stroke, and I just want to change Lima it. Let's make it eight. Reasonable right now. Alright, so we created our first circle using circle class. In the next video, we will create multiple circles and will keep them circles array. And then we can start iterating on circles. 29. Generate Circles: Guys, now it's time to create circles. We just wanted to create the circles IRA for once all. That's why I will not implement it in return. Because this will be called many times. C will change the settings for animation. That's where I will call circles. Circles array. I will create circles here. And then we need a loop, just too apparent. A 100 circles into delta paired. So in every iteration, I will push a new circle into the NRA. And let me just expand this tab. So I want random values for x, y, and radius. Well, okay, I will just say random times r, which is 2048. I will use that value for x and alpha y radius. I will just, I don't know, maybe 20 is a great boundary for it. Alright. We are pushing a 100 circles into the circle survey and their properties are complete, ran. Alright, so let's save this. We can not see them yet because we didn't called Joel function of circles. So in here, instead of creating one circle, Let's just use circles for each function. Each iterates in every element of circles array. So we can just say circle. We can say circle that drove context for. When I save it, you can see on the right, the random generated circles are on our Canvas. So every time I say, every time I refresh the page, the circles are generated. 30. Animate Circles: Now that we have created our circles, it's time to move today. We will do that by using Como sketch animation. We will give every circle a velocity, x and y directions. So let's go ahead and do it again. Constructor function. We don't need any parameters because we will generate the velocity by default. So I'll say this, note velocity x on this thought well as to why these were lost to Alice, be random as well. That's why I will call match on the function multiplied before. So that value will be 04. But these circles should also go left. Sometimes. We want a value between minus 22. So to do that, we'll just say minus two with the result. So we just shifted the Altcoin. The expression here returns a number between minus 22. I will also say for Y value. Alright? So each of the circle has a velocity on x and y, where it's completely random numbers. Let's welcome. You just want next step is to create a new move function. In the circle class, I will call a new function. And this low mood disorders. When a discount on how do we do that is just simply changing the x value of the circle with the velocity x. So we are adding relapsed dx to the position in every frame because we will call the small function in return and run me enable the animation property. The return will be called an oval frame. So move function will be called an airframe, and x will be change in a reframe. Also do this for y. Perfect. So now our class circle is already just, we should just move function and the return statement right here, after we draw the circle, we also want to move. This loop would be iterating on every circles. So by writing this line will move in every frame. But remember to innovate on emotion. You just change settings. Like this. I don't want to just say, great. Circles are just moving randomly. 31. Bounce Circles: The circles are moving, which is great. But wanting notice here that are going outside of the canvas. So at some point we will end up with circles. What do you want instead is to keep them inside of the cameras. So let's write some code that the circles will bounce on the balls. We need a balanced function. In the balanced function, we will check the circles x value, and we will compare it with the width. So we need an if statement here. If this x less than or equals to 0, that means we will go left side of the canvas, or this dot x is greater than the root. Remember we cannot access width of the commerce from inside of the class. I will just create a parameter for that. So if the X is less than 0 or bigger than a whit, the circle will bounce, right? And how do we balance? It's so easy. It's just we should change the direction of the x. And we can do that by multiplying with minus one. If you are going great with dispute of two, let's say if you want to bounce back, the speed should be minus two. Let's just do this for the Y as well. If it's less than 0, or if the y is bigger than height, then we should also at the height parameter. So if this is the case, we rant outside of the borders. So we should multiply y minus one. Okay? Then we can just call bounds function. For each. I will pass the width and height parameters. Okay? That didn't work. Alright, so I was just, instead of writing bonds, I just wrote. Okay, you can see the circus now bouncing on the roles that they can not go outside. 32. Euclidean Distance: We already have a beautiful looking animation. Let's make it prettier and add the lines between circles. Do so, we need to calculate the distance between two circles and draw a line in that distance. There is a well-known formula for distance calculation between two points. Leading distance works like this. Let's assume we have two points and we know they are x and y values. In order to calculate the distance between them, you should first look at the difference between x and y points. So we should first find out X1 minus X2, Y1 minus Y2. Then we can use the occlusion formula to find the distance between two points. So let's look at this example. We have two points on the coordinate plane. And our canvas works with pixels. So we can think there are similar, which means you can take these points as the circles in my project. So between two circles, distance on x axis is three. And the distance on the y-axis is for the formula, we can easily find the distance between two points is five. So we will use this formula in are called to calculate the distance of our circles. 33. Draw Lines: Let's continue our project and draw lines between circles. In return, we will use for-loop or iterating every circle. Okay? So I will use a new for-loop. But this time I will use the shortcut and change the index to i. And we shoot this final boundary with the charcoals. Thanked. Okay, I plus, plus, I am happy with that. So I will also make this line here, circle one should also change this one. Okay? So now we have a for loop which will run 400 times right now. And we are just keeping the circle object in a new variable. Inside of that for loop. I want to create another for loop as well. This will be a loop inside of a loop, and let's call, let's call it j. This time. We should also loop four circles here and change this one as well. And I'll call this constant the circle tool. Right now. We are looking for circles and we are keeping the circles in a constant. And then we are looking for circuits. Again. We're keeping the circle to a constant as well. So we will iterate two times in charcoals array. In here. We could draw a line between these two circles, right? But if you do it like this, boat circle sometimes will be the same circle. So in the first iteration, let's say circle one is the first charcoal in the array. The circle two is the first article as well. So it's not a best way in order in terms of efficiency. And also, if you draw a line in this, in this way, we will draw a line in both sides. So from circle 0 to circle one, and also from circle one to show called 0. So it is not efficient as well. That's why for these reasons, I want to start the j value from I plus one. And that way, the circles will not be same again. Because when I is 0, j will be one. And when I is one, j will be two, and so on. So we are not drawing two times and we will not draw, will not try to draw a line between the same circus. Okay? So that way we make it options. All right, let's now try to draw a line between these two unique circles. So as always, I will start with beginning path. And then we have a new function here, which is context that moved to this pretty self-explanatory. We will do x and y values here. Like translate this context. We'll move to that point so that we can start drawing at that point. So I will circle one, circle one dot y sorted. We are now at the circle one's position. And what do we want to do is draw a line circle, tooth position, right? So equal to that, x equals to y. And finally, we want the stroke. Let's get rid of empty lines. Let's save this and see the result. Okay? Actually, it was great. It means that what we just wrote works, but the line width is too much. So let's also change the line width. Maybe here. But I want to keep so I want to keep the circles, right? So I will add the lung here. But for the lines, one is enough. This looks better. Next step is we draw lines between all of the circles. This is too crowded. And next step will be calculating the distance between circles and drawing the lines according to that distance. So that when two circles are far enough, there will be no line between them. 34. Get the Distance Between 2 Dots: We will find the distance between two circles using the euclidean formula that we just discussed. Lu that I will create a new function. And I will use arrow function. Call it yes, get distance. This function requires four pi routers, X1, X2, Y1, and Y2. So remember the formula. So we knew the distance between x values. We need to distance between y values. We can return the sqrt function. This is the root of the value inside the parameters. So we should multiply a with a power of two and plus Many times p. Okay? So this value will return the distance between two points if you pass x and y values of the points. So let's go ahead and use that function. Here. I will declare a new variable dist and lose that distance function. So x and y values are circles. So I will say circle one dot x, two dot x. So long that why circle to y? Now we have the distance. And what we need here is an if statement. So we should check the distance. Let's say if it is less than 250, okay? So if two circles are closer than 250, we want to draw a line. So I will move these lines that IF statement. So when I save, we can see now we're not drawing lines between all of the circles, but we only do ran two circles are really close. 35. Responsive Line Width: I also want to change the line width with respect to distance between circles. Saw that band two circles gets closer. The width will be picker and then get apart. The line will be a tumor. Okay, So to do that, more into that if statement, we will change the line width here. So I want a maximum value of ten. Let's start with ten. And we will decrease the linewidth with respect to distance. But distance starts from 250. Let's divide it by 25. So this value will be maximum ten. Okay? And it can be 0 for minimum value 0 line which will be tau. And let's save this. And now you can see our lines are getting thicker and thinner with respect to distance. So one thing I want to fixed as well, the lines are visible inside of the circles. You can see it starts from the center of the circle, but I want it to start from outside of the circle. Okay, so the lines shouldn't be visible in the circus. To do that, we can feel the inside of the circles with white color. Okay? So we can do it in drove function. Let's just fill style, change the fill style here to white. And we can just say fuel. So every time you draw a line, we also draw the circle. And by filling the circle inside of the circle with white will always labs the lines. So when I save it, we can see there's no line inside of the circle. Okay? But that makes our lines, you know, ten or so. I will also change the line width. Maybe 12. Okay, This is great. So it's up to you. From now on. We can change the line weight. We can change our lines worth actually, you can change the borders of the circles, or you can change the velocity of the circles and so on. So it's up to you. Give it a try. I hope you enjoyed this project. 36. Getting Started (Audio Visualizer 1): Welcome back to this section. We will make an amazing audio visualizer that is responsive to any audio input. As you can see, the balls are jumping when I talk, when I clip or when I play music. And then you're still good. When you are ready to do this. Head over to the next video to start. 37. Setup for Audio Visualizer 1: As always, we will start from command line. So let me bring mine. I'm currently in desktop. Let's go into projects folder where I will save and store my projects. So if I type ls here, you can see our old projects. So let's create a new folder here. And let's call it audio visualizer. Go into that folder. Let's just great files. So as usual, we need an HTML file. This time. Since we're getting the microphone data, I want to create a new file called microphone JS. And finally, we need a new file for visualization. Let's call it Visualizer dot js. Okay, we are good to go. If you remember the command or opening this folder in width code. If you are using inside this version like me, you can type a command like this. Or if you're using normal version of risk code, you can just command called spacetime. When we type that command, it opens the folder in West code so that we are good to go. 38. HTML Template: Let's start the project by importing HTML5 template. As always. So here, this time we will use JavaScript files. First of all, let's change the title. So we want to import these two JavaScript files, HTML boilerplate. So I will create a new script and do a swash microphone JS, and also visualizer JS. So remember, we will use microphone class in visualizer. So the order is important here. Microphone script should be a bow of visualizer script. Okay, So to start, please. Let's go into microphone JS file and we'll save it. 39. Complete HTML: These scripts tags shouldn't be on hat, but they should be in body. Just after we have countless, right? I will call id of Michael was countless. Though one more thing we should add here is the CSS file. We almost forgot it, but it's there is another way of adding files. So you can do it inside with God. So we can click this new file icon and you can just type the name. Okay, and let's also link that CSS file like this. Okay, so we don't have to create new files from command line. Maybe this is an easier way. So now we have CSS or JavaScript files, and our code was created in HTML. So we can start writing code. Microphone, Jess. 40. microphone.js: Instead of writing the whole microphone JS file, I will just copy and paste the code here. So I found this on web to get microphone data. This is a boilerplate that you can use all of your audio visualizers. So we don't need to know the details exactly here. It will just gets the microphone data, the audio input. You don't actually need to change anything here. Or maybe you want to change. You may want to change FFT size if you want some variety in the output. So let me just explain quickly what we have here. This is just a casual class called microphone. Here we have the constructor. So the first property is identifies whether the microphone is initialized or not because we want to wait for it if it is not initialized yet, okay? And at the end of everything, it will become true. And then we just get user media function. And keep in mind that still there, all when religious. So we don't have any third party libraries here. And apparently, this method returns a promise because it uses then after get user media function, which basically will wait for this line. And we will run after it returns something. So if it returns successfully, these lines will be called. Or if there's an error, it just alert the error on the browser. Okay? And when it is ready, these lines will be called. So we have analyzer here. And these lines will decide FFT size, buffer length, and so on. And finally, change the initialized property to true after connecting to the microphone. And otherwise, it will just alert the error on the browser. Alright, so we also have two methods here. First one gets the samples. So it is the outcome that we will use. Returning object will be an array and its length will be half of the FFT size. So we declared a 50 size 512. Here are samples. Array length will be 256, okay? So it's always half of the FFT size. And we will use that sample survey during visualization of the audio. Okay, so think about like this. We can have 256 balls that each ball will respond to an element in this array. Okay? You will understand better when we actually do, do it and put it into practice. And finally, we have the volume function that will get womb methods. And I believe it is pretty self-explanatory. This method will return the volume of the audio inputs. 41. Get Microphone Data: Now that our microphone is ready, we can start writing the code in visualization. Open this file. The first thing I want to do here is to show you the data we get from microphone. To do that, I will create a new variable, microphone. From microphone class. We didn't have any parameters in constructor. We can create a new microphone or object like this. Let's also create that animate function. Because we want to get the microphone data in real time continuously. And as you know, we need to request animation frame to animate this function. And also we need to call it somewhere in the code. So between these two lines, whatever we write will be called in every frame continuously. So I just want to log the microphone data into the console so that we can see what it is exactly. But first, I want to check if microphone is already initialized. So remember, we have a property and it is true when Eris had things are done in microphone. So if microphone is initialized, let's just get samples using the samples function. And this here. For now let's just logged into the console. So I save this and I will just go into index.HTML. Right-click open with live server. If you don't have this option, you can always download Live Server extension from extensions in VSCode. We did this before in this course. So I will not explain the steps right now. But if you installed Live Server extension, you can just open it like this. And let me just bring it to this screen. And I will also the white my screen like this. Alright, so our code is running on this port. Let's just look at the console. We are getting microphone data continuously. And there are lots of, lots of samples. And it's just going continuously because I am speaking, right? And this also uses my microphone browser. In the first step. When you open Live Server, it may ask for for you to allow using microphone, okay? And once you accept it, can use the audio input. Okay, so let's look at the one log here. So it is an array. As we discussed. It's length is 256, and the values are just some small values. These values are, each of them represents something. I'm not really a sound expert. And I don't, I don't actually know what are these values. But you can imagine it like they are frequencies or some signals that explains the sound at that exact point. We can use these values to visualize the sound. And these values are really small values. There are like between minus four and plus four. And they usually is less than one. So they can be negative values as well, or positive values as well. And I believe as the values are increasing. Now we're getting some interesting sounds. Alright? So if I don't talk, values will be 0. For example, at this point, there's no audio input. Alright? So now that we know what our samples data looks like, we will use this data. We can pre-process it, of course. But eventually we will use this data to create some visuals. Okay, So let's start using our commerce to create some visuals. 42. Ball Class: Let's start drawing our visuals with creating Karl Marx. As usual, we will get element by ID from HTML template. Let me check the ID of my colors. Let's copy and paste it here just to be sure the names mats. Let's also create CTX, that context methods. And we want 2D. And finally, we can adjust weight to window width and window height. Alright. Now why adjustments are ready? We can start creating the first class. So at the end, what we want in countless an array of bolts, right? Or shortcuts. I will just call them balls because they will jump. In this project. That's why I'm create a class named ball. And as usual, we will have a constructor of that class. It will get two parameters, x and y. And these values will be the initial x and y positions of the ball that there'll be spawn. So let's just assign this dot x dot y. So why does we want here is, so we're going to create a bowl and which is a complete circle. And if you remember, we are doing this using CTX augmented. Here, what we need to do is radius value. That's why we also need a radius. But I don't want to get it from parameters because we were just want to make all the radiuses of the balls are saying. So I will just use a default value of eight. Then let's also decide its color. You can change whatever you want. You can use blue, red, gray. And I think also I will explain this later, but I just want to let's, let's just skip this part. Let's add that property. And so what I need here is jump for SSH and also false. Okay, because balls will fall and they will jump according to the audio in Detroit. But in the initial phase, at the very first beginning of the project, the balls will fall. So they will start from top and they will fall before everything. That's why I don't want to make the fall force 0, but instead, I will just make it 0.1. Alright? Where I've done with the constructor, we'll just add one more property, but I will add it when the time is correct. So as usual, we also need to draw methods. It is it includes she takes fillStyle. I will assign this to this color because when we want to change the color, the ball will also be in that color. So we should say begin Pat should also say CTX bar to draw a circle. So this dot x bar, x value, I'm sorry, this dot y for y value. This they'll try and use for radius. Start angle will be 0 and angle will be pi times two because we will always draw a complete circle which will look like a bowl. Finally, we can say CTX pill. Okay, so you should already be familiar with these lines. We made many practices on this before. So what we need, what else we need is two more methods. So we just want a formatted and a jump. That's it for the ball class. And we will write the context of fall and jump methods later. 43. Generate Balls: Alright, we have the ball class. Let's go ahead and generate the ball so that we can see them on columns. To do that, what we need is an array. It will be empty at the beginning. And we will need a function that will generate the balls. I will use arrow function here. Okay? So in this function, first of all, let me just delete this log so we don't see. So let's clean. Close the console. Okay. So in January false, this time we will make something different. I don't want to statically defined the length of the balls array. So I don't want to just create a 100 boss. Let's say. What I want instead is to create the balls, which will be responsive for Carlos foot. So what I mean is, if coal was why do you know that I should be less balls to ante, for example, right? Now, if we have a larger commonwealths, we can have a 100 bonds. Okay? So eventually the land of the balls array will be dynamic. To do that, let's just assign. Let's just create a new variable, distance. This will clarify the distance between each ball grid. So I just want to make a party or the beginning. And we will just calculate how many balls that I should be using. Carlos width divided by distance. Okay? Which makes sense, right? Because B has a width of 1 thousand on we want I'm tired t distance. So we should have something around. I'm tired tea bowls, right? Because there will be instances and the ball's weight as well. But I will just say minus two here because we want distance from the beginning and at the end as well. Amount of balls will be calculated like this. Okay, so now it is responsive to the Kawasaki. When we change the width of the browser, the amount of balls will change. And what we need is a for loop. And let's just say I for iterator. And we want to loop this. We want to identify amount of Bosch saw that this will be running amount of moles times. And in the fall loop, I will just say balls push r1 to create a new ball and push it into the bowls, right? So let's just call new ball. And we just need to give x and y values here. For x and y values. For y rarely, it is really simple. We can just give a static value. For example, 500. Okay? But what x value? We need to use the distance again. So the first ball should be distance, right? So when I say a tardy, it's x should be tardy. The second ball should be plus one more distance, right? So 2R2 plus Turkey, the second ball's exposition should be 60. So if I say distance plus I times distance, I believe there will be a boss just next to each other among the cosmos. So there will be both throughout the Cold War's, there will be gaps at the beginning and also between each of the balls. That's what we want. And when I save this, nothing happens because we didn't call generic balls function yet. When I call it as say, the balls are generated but we can not see them yet because our color is what? Actually, I just want to change background to black, but let's check it first. By changing balls color. Do we have the ball song, Carlos? I'm not exactly. That's because we didn't draw the balls yet. So we just generate the boss, but we didn't call the draw function. So what we need to do is say ball for each ball, I'm just basically iterating on every ball in that array. And I will call bold a draw function. So now we have the balls on the Canvas. Alright? So our function is working. We don't need to draw the walls here. I will just delete it. And I will also make the color white again. And let's go into style.css, very real lead, just background color. So here I want to select everything by using asterix. Lets just match margin and padding 0, box-sizing, border-box. So these are just default. We are almost doing this array in every project. And also. So right now, if you notice, we have bars on the right. So this is just, this makes these lines makes buddy scrollable. We don't want this. That's why I will just say overflow. Let's see. So the bars go. Finally, let's just change. The column was bare ground, ground, black or out. 44. Falling Balls: All right guys, let's draw the balls and make them fall. So first of all, animate function. If microphone is initialized, I want to draw the balls. So to do that called balls array. And use for each method. Here, let's just pass a ball that iterates of the balls. And I just wanted to say ball drawn. When we do that, you can see the balls in comas. And notice if we change the column size, the amount of balls, chains, so that we have both trial to cows. And since we are going to do an animation here, I just want to clear the cones in a reframe. I will do this by using clear rect function. Will pass x and y starting from 0 all the way up to Carl Woese, width and height. So you can see we have nice bonds. If we also make them fall. Just before draw. We can see the balls falling. But first we should also look for function. So to do that, I will lose fall forms and change the balls. Why? Actually, I will say this dot y plus equals this dot full force, which will update the y value of the ball in every frame and adds full force. So when I save this, you can see balls are just pulling slowly. Let's make this look more natural. In real life, when something is falling, it's full force is increasing, right? Because of the gravity. That's why I will also increase all force in every frame, 0.05. So now you can see a more natural effect. But at some point the ball should stop. So here I will just add the constraint. We just want the walls to fall if only they are. Y is less than Coleman's height divided by two. So if only the boss or a bowl, half of the colors, they will fall. Otherwise, they will stop. Just like this. Let me just refresh it again. So they started from position bifans it. And they started falling because we are calling fall function in every frame. And we only have one constraint, which is both y position should be higher than Carlos height divided by two. That's why there's, there's top. When they reach that point. 45. Jumping Balls: When the balls for each at this point, so that there are striking, striking to the ground. We want to make them jump, right? To do that, what we need is another if statement here. We need to check if ball is falling. Because if they're not falling, we want to make them jump. And to check that value, you just need another property. Let's add. A property is falling. And it will be true in the beginning because the boss will falling at the initial state. So if the balls are not falling, which means balls is falling property is false. In that case, we want it to jump. All right, Let's go up and here declared a jump method. So I will, first of all, what we want to do is to make full force to 0, because we had a full force before. And it will affect our y position in every frame. So when the fall and when holding property is false, first thing we want to do is to make all fours 0. Then we can now affect our y. We jump force. So this time I will use minus equals because in coordinate system of commerce, when the ball is going up, it's why ReLu is decreasing. So in commonwealths, 0 is here at top and it is increasing when the balls are going down. So if you want a ball to jump, we should decrease its y value. So I want to decrease why ReLU would jump force. And to make it more natural, I will again do the same logic. I will decrease jump force as well. Okay? So we also have jumped methods now. But one thing we shouldn't forget when jumping ends. When it goes back to falling state. We should also reset. Jump force to 0, just like we did fall force here. Okay, So now they look identical. They're just symmetric to the other one. Alright, let's give it a try. Didn't work. And this is because, this is because our jump force is 0. Let's change this. So we have a jump force. Ball. Okay, So maybe we should also change ball is falling property because we never make it false, right? It's always true. So I will add here an else statement. And make ball is falling to false. And let's try. It. Just jumps for awhile. You see that? Let me run it again. And then continuous falling. Okay? So this is because this if statement runs one, although it's falling property is false. So we should also give a constraint here. The check if it is falling and falling state, right? So if the ball, so we were calling for function, if only the ball is in falling state and its y position is less than coma site. So let's save this. And also, maybe we should. Maybe we should just change ours to else-if. And let's just add a constraint. If balls y position is bigger than cause height divided by two. This looks better, right? Because we just want to jump if only, if only its y value is bigger than Carlos height divided by two. So in other words, at the middle of the columns. Alright, so we will change both jumped force here later on and here when the ball. So basically we're just decreasing jump force, right? When the ball, Let's comment this line. Then not going down. When I uncommented goes down. So we are also decreasing jump force, and it starts from 0.1, which will be a negative value. So instead of making a jump, we just, you know, make them fall again. So let's just make this value ten, let's say 400. Nothing change. Let's just comment this line. This has just, did I make a typo here? So we should change its y position in every frame. So let's go into console. I'm missing something. So if the ball is falling, so we should, this log should drown in our frame right now. And it is indeed we can see in the console, right? So the jump method is being called now reframe and why it is called. Let's also log here. The jump force. Let's delete this. So the jump force is 0. Why is that happening? It's because when we are falling, we just make jump force 0, right? So in the beginning we made it ten. But every time it just made it fall, down, force becomes 0, so they're not jumping. So actually, we shouldn't assign it here. We should assign it ran the polling state ends, which is here, right? When the ball is pulling stayed false. We should also declare a jump force. I will just do Tanh here. Now, you can see our balls are just jumping. But maybe ten is too much. Let's make it too. Okay, great. But we have another problem right now. The, they never come back. Alright? So to prevent that, I will just add another constraint here and if statement. So when the ball is jumping, at some point, we should turn on the appalling state, right, so that they will come back. And I just want to do it. When jumped force becomes 0. Okay, So it's in real life. Though. When we jump. In real life, we hear a jump force in the initial phase. And gravity is decreasing the jump force in every second trait. And at some point, or jump force becomes 0 and we start falling. Right? So let's do the same logic. Logic here. When the jump force becomes 0 or less than 0, make the balls fall again. But to do this, we should turn on uncomment, this line that will decrease, jump force, reframe. And when it's less than 0 or equals to 0, we should again turn on the falling state to true. So let's try this. Okay. Now we can see our balls are jumping in any jump, in every jump, or jump force and fall force are just increasing and decreasing like natural. And at some point, at the peak point, jump force becomes 0. When that happens, they start falling again. Okay? So this is how you can do a gravity logic without using any game engine and anything else. With pure Vanilla JS. One more team we want to add here, that will be the real connection between audio and our balls to change the jump force with the audio inputs. And we will do that in the next video. 46. Audio Input: Alright guys, are bolts are jumping. And it's time for the most exciting part, which is Jim, make them jump responsive to the audio input. So we should change this line obviously, because we want to just jump force weight the microphone data. Okay, so we already get microphone data. And remember, samples array Is samples area includes 256 elements. And we have some balls as well, though, but our amount of balls is not specific. It depends on Canvas. So we could have more than 256 or we could have less. So I will not match them exactly. But we could, if we could get indexed somehow, involves array, right? We could assign every sample to a ball. So like first sample. So the first element in sample survey can be the jump force for the first ball. And the second element in sample survey can be the jump force for second ball and so on. I believe it will be great. And to do that, we should track the index of balls in this for each. And if you just Google for ETL script, you can see the parameters of that function. And the second parameter is index. So the first one that we just used is the value of the current element. We just call it ball. If you pass second, this is optional. But you can pass. And it's, it is returning the index of the current element, but we just are looking. So let's go ahead and use it. So to use that, I will just add a parenthesis next to ball. I will say indexed. Now in this forage, I can lock. Next. Let me just delete the other logs lines. So we have only this one. Let's save this and check the console. So you see that it's starts from 0 and increases in every iteration. Alright, so we can use this index value. And in here I want to call sample, sorry. Let's just try samples index. Let's just try use samples for jump force. But again, remember samples are just really, really small values. So let's also log console, log to the console samples to see. So they look like they're not jumping. But if you look closely, you can see some small movements. And this is because our samples are really small numbers. So we should, and there are also negative values. So we don't want any jump force negative. So we can use mat abs function to get the abstract of the value. Okay? When we do that, we don't have any negative values anymore. And also what we want to do is to multiply this value with ten, maybe because they are too small. Let's make them positive and multiply it on with ten and see what happens. When I close Console. We don't need locks anymore. Let's say this. Right now. You can see you and I speak, the balls are just jumping and it looks like multiplying with ten is enough. You could of course, increase this value if you want more, jump Fox. Or if you want to go crazy, you can go crazy as well. But remember, if they jumped too much, they will go outside of the canvas. So I'll keep it ten. And I believe it's done. So let's try a different solution. They're just moving again. And at this point, you could actually, it's really up to you from now. So you could change the colors. Or you could also add a method here. No, change colors. And you can maybe do a parameter here, like a value. And you could change colors according to the samples index. So the balls can change colors with audio. And here you can use RGB, RGBA values and pass parameters. You can do everything. You can change, jump force if you want faster balls. Or what you can do. Else. If you want higher or bigger balls, you could just change radius like this. But remember to change the distance as well. Just to be sure they're not colliding. It's make them smaller again. Or you could make them really smaller like this. It's up to you. Go ahead and play with the values and add some new features for all. 47. Introduction ( Audio Visualizer 2): In this section, we are going to make another audio visualizer that you can see on the screen. Let me play music so you can see the effect better. Job. If you like the effect. I don't work to the next video where we will start doing this project. 48. Setup for Audio Visualizer 2: I have created the project and everything is same with the previous audio visualizer. This time just change the title with audio visualizer to. So we also linked style CSS. Again, we have a commerce with the id Mike homeless. We have microphone JS and visualizer, ingenious, and apo. This HTML file with live show over by just right-clicking and selecting this option. And then you can just use the same template for microphone JS. Because again, we don't need any differences and this is what we need in this project. Also style CSS is same with the previous one. Just use asterix for selecting everything to adjust margin and padding. Just make hidden overflow property of the body and make the background black. So we didn't yet defined commerce width and height. That's why our Cola's comes these Bhutan height by default. So we will change it in visualizer JS. If you are ready with these two files, we can start to visualize a JS. 49. Create Figures: As always, let's start creating colors. Let's use our commerce ID here. Let's also create CTX. Let's adjust what to Window. And also height, which we know in our heights. So our commerce now is fully adjusted and covers all the browsers in their screen. And what we want to do next is to assign the microphone to new microphone. And remember we call this class from microphone js. And we can do it like this. We're not importing anything because microphone JS is just a bowl of visualizer JS. And in the end, all of the JavaScript is will be transformed into this HTML file. So we do have actually microphone cluster in visualizer JS. And let's check if everything works by just creating animate function. Request animation frame animate. And remember, this blogs are providing us an animation by calling this animate function in every frame. So here we want to check if the microphone is initialized already. This property. So if microphone initialized, I want to get the samples. Samples. Microphone that samples. Let's just log it to see if everything works. I will open the console by using f 12th. We don't have any samples. So let me just open. That lives over again. Maybe there are some box. We don't have still. It's because we didn't call the animate function My bad. Okay. Now we can see the samples when I talk. It will get the audio input right. Now we can get rid off this console log. We can now start creating our class. This time. I want to call figure no parentheses here because it will have different methods. So it will be adjustable. It will highway, it will teleport and chain sizing methods, some things like that. So it's not that simple ball. That's why I decided to call it figure. But as always, we need a constructor. So this time, let's start with X and Y again, but we will increase the number of parameters later on. So this delta x equals to x, this dot y equals to y size. I will use eight and then four initial size. But remember we will change this value with the microphone input. Okay? So this is enough for now. Let's just draw this figure. And this is all. There is nothing new for us. So this does, this dot fillStyle is this dark color. Dx also begin Pat dx arc because again, we want to draw shortcuts. So I will pass X4 charcoals x. Why? And size. I didn't call radius this time. You could also say size, the same thing. So 0 for starting angle. And math.pi times 24 and angle, which is exactly the same thing with 260 in-degrees, but we should give some radians here. So we use this expression. And finally, we should feel what we just draw. Alright, let me save this. And down below, we should credit fingers error. To do that, I need a for-loop. Let's change its index to i. I want to create ten figures. So I will say figures push near figure. So you should all be familiar with this syntax, right? We did all of this many times. So new figure, but this time, instead of doing a specific x and y, I want to spawn these figures randomly. Okay, that's why I will call Math.random function. And I will multiply it with color suite so that the x value will be between 0 and column sweet. It can be anywhere in the Congress and do the same tank for y-value as well. And this time we will say comas height. Alright? So let's just try to draw the figures at this point. So first of all, I want to clear goals. We will do some animations in the future. So let's clear the calmness, the whole commas in airframe. And now we can, let's try to draw figures. For that. I want to iterate over figures array, right? And I will use for each, I'll say figure. And for all figure, you want to call the draw method. Okay? So we haven't do any color. Let's just do a light color so that we have the figures on the columns. And every time I refresh this browser, it will do us a randomly generated positioned figure straight because our x and y values are random. But they should be in the countless. So we should, in every frame they should have tan figures, exactly 12345678910. 50. Circular Movement: Next thing I want to do with this figures is to give them some circular movement. Like circular movements because it makes objects to look like a live. Alright, so let's implement circular movements for our speaker. In Figure class, I will create a new method called circular movement. So here I'm actually we can use cosine and sine functions. So we should change the x-value and the y-value of the figures with some values so that it will draw a circular path. Right? So if we only change the x value, let's say not cosine. So we also need a counter here that will loop to loop between 0360. So it will be the whole degrees starts from 0 and goes all the way to 360. So to do that, I will implement counter in this figure. So it will start from 0. And then I will, I will increase it. Every circular movement at the end. Actually. Let's start contour plus, plus and run it bigger than or equals to 260. I will make it 0 again. Right? So that contour will increase recall of circular movement. And when it reaches those 260 degrees, it will go back to 0 and start from there. Again. That's what we need actually. Now, I will call this counter here. But remember, cosine function is not looking for degrees. Instead, it is looking for reading. If you remember, radians to degrees formula x divided by 180 times mud pie. Okay? So let's do this for our counter divided by 180 times pi so that we ensure that it draws a complete circle. Let me just save it like this and call circular moment in a reframe. Let's see what happens. So our balls are moving, right? Which is great. So cost MC, that cost function returns a value between minus one and plus one. And it is just switching between these values. And we are updating x with that values so that our balls are going right and left continuously. Let's do the same thing for Y as well. But this time let's use, I'm actually led to use cosine again to see what happens. I can just copy and paste it here and save this. So you can see when we give the same function to why it will draw some path like this, like diagonal, because we're increasing to x and y at the same time, at the same value, with the same value. But if you change this to sign and save it, you can see they are drawing a circle a moment. This is the key to make some circular movement like this. 51. Change Size with Microphone Input: Alright guys, let's keep calling. Next step is to add the microphone input to the movement of the circles. Actually, not the moment, but the size of the circuits we want. Make them bigger. When there's an input of a high wars. And their size will depend on the voice input. They will get bigger and smaller according to the microphone input. So to do that, I will add a new method in the figure class. Right here. Let's add a new method and you're a name of change size. So this mattered needs a parameter. I will call it value. And this parameter will comes from the samples array, which is connected with the microphone in portrait. So we will use a parameter from the input bars and change the size of each arc. So to do that, let's first check if value is bigger than the size. So we will adjust the value just a bowl. But first let's check if the value is bigger than size. So if it is, we will make the size equals to value S. In other case, we want to change the size. So this means we don't have any voice input or we have one, but it's really, really low so that we can not hear it, so that computer can not hear it. In that case, we want to change the size and we want to decrease its size. Let's say, I don't know 0.1. So this will be called in every frame. So it's size decrease. I'm Tom per cent in airframe. Right? So let's just call this method in animate function. Right here. The dirt, that chain size. But in order to give it a parameter which will comes from sample separately, we need to get samples index rate. So we don't have an index right now. But if you remember, we can get the index by just passing a second parameter in for each function. So if we do it like this, the first one will be the figure itself that we are iterating over. And second parameter will be the index of that. So in that way, we can get that index in the samples array and we can change its size. I'm using the voice input. Alright? So let me save this and see the outcome. Alright, so we can not see anything. Actually, we saw something in the beginning, but they just disappears instantly. So why does it happen? Because maybe our value of decreasing is too much. Let's change this to 1% and save it again. So this is better right now. They're disappearing slowly. But at the end, we can not see anything again. So it looks like the value is too small, right? So apparently are rarely is not enough to make the size bigger. Let's, we can also check it. I login it. Let's see. So our value is 0. Um, this is not what I expected. Okay, so let's try to multiply this value. Let's say I want to create a new variable called silent. And it will be the outcome of value times 200. And let's use the sound here and here, Ezra. Let me save this again. We don't have any output again. So I will just open this in a new tab. This was a bug for Google Chrome. So when we open it in a new tab, there's no problem. So you can see they are getting bigger when I speak higher or smaller when I speak louder. But let's also see value and the sound in the console. Let's first check the value. So you can see it's something really small. That's why we just want to multiply it with 200. Alright? Is this something I find by trying? Okay, there is no formula for this. But I tried some values. And 200 seems nice because I want figures to get them bigger, to make them bigger. And 200 is fine for me. You can try different values and you can decide on another random. But the main point here is we, right now, we have circles and there's size are changing depending on the voice input. 52. Play Music: At this point, the size of the figures should change with the wife's input. So let me play a song to say it. Obviously. 53. Teleport: Finally, I want to show you some customization examples. Because I want you to customize your own effect with any way you want. Okay? So for an example, let's add a new method in Figure class. So I want to add a teleport method because when figures to approach, it's, the fact looks much better. Let's add teleport effect and you can see the outcome. So I will say teleport there. We should change its x and also y value of the failures. And I want them to teleport randomly. So let's just say much random times column loss width, which means it will be teleported somewhere inside of the Carlos. Okay? And do the same thing for y, but this time, type here Hunt. So we have our teleport method. Let's call it moon animation. So for every figure, if we call teleport function, they are location changed in every frame. This looks like a cos. Okay, we don't want cows. So we shouldn't call teleport in every frame. Or this is a true care approach. Again, we could add a constraint here. So when something happens than teleport, not in every frame. So you can add any constraint. It's up to you. For simplicity. I will just add a constraint of random. So this can be random as well. I blew it is perfect if you randomize a routine. So when I add here a constraint like this, the Math.random returns some number between 01 and if it is bigger than 0.99, which is approximate be a one-person, right? Then teleport to figure. Let me say this. You can see, it's more rare right now. We see some teleports, but it's not continuously. We could decrease its frequency by just increasing this value here. So they are almost, are not supporting anymore. Or you can increase its frequency by decreasing the constraint value. 50% is still too much. Maybe 90% will be 95. Okay? But my opinion, 99 looks really nice. Okay, So the reason I wanted to show this is to show you that this figure, this effect is customizable. You can add any method you want, play with it. You can see different outcomes. And finally, at the end, I want to show you one more thing, which is increasing the animation speed. Okay? So right now our circular movement is too slow. In my opinion. I want to increase it. So you could also do it with calling. But what if you want to change the frame rate? If you want to change the FPS, you could also add different libraries and so on to do that. But there's another tricky approach for that. I want to show you. So we are calling animate function here and it calls itself again and again, right? What if we call enumerate function now for me? So let's change this to ten or five, maybe. Just call animating a fall. So this will increase animation speed five x because we are calling animate function five times. Let me save this. So you can see the circles are moving faster. Alright? So this is basically increasing the frame rate in a second. 54. What is three.js?: In this section, we are going to use EJS to create 3D visual effects. So let me explain what it is really quick. Basically, it's makes easy to use an animate 3D objects on the library itself as its own camera, scene, geometry. And it is the best lawn library for 3D rendering on the map. So you can think it like unity. Like you're developing games. If you are developing games, you might know unity. So it's a game engine, right? So to JS, It's all physics engine, so it makes easier to create 3D effects. Alright? So and it's not a program or a framework, it's just a library. So moving forward, this is the official website of two js. And there are many, many examples and use cases of it. 55. three.js Use Cases: Let's check some use cases. By the way, two EJS is also used by big companies. So you can see nasa here. And this was get up, I believe. Yeah. So here the route dispelled is a 3D model. And in order to render this world as a 3D model, you invite an animated. We can use three js. So that's it. So guitar is using tree js. Let's check what else do we have? There are also games like this. This looks like a nice website. Let's wait for it. Maybe the only advantage of 3D modelling is it takes too much time to render. So the websites like this might not load quickly, but you can see it's really cool. So there are some cool websites like this, mostly for agencies. And the model is also to the agent. This is not a video. This is a 3D model, so you can interact with it. Okay, That's the difference. Let's see more examples. What do we have? So Apple is also using TJ, as you might know, the iPhone integrations, like when you go down, down, It's just you can interact with it. Alright. So there are games, there are websites, and so on. Let's just not waste too much time. But you can, of course, go into more details. You can check the examples here. Again, this is not a tree JS Course. That's why I will not explain all of the features of t j's. But here I found a nice course website. Look at this. I don't know, burner cyber, but I really appreciate his work. So this is a store, your website, but maybe it's best course website I have ever seen. So you can see it's 2D model and they are just animating. And I can drag and change the rotation of the scene, right? I can go up. Now. I can really interact with the object with my mouse. So I did not take this course. I don't know the content, but it looks real nice. I just wanted to show you. So these type of things you can do by using treasonous. Alright, let's go back here. We can see documentation examples. On the left. You can join Discord or forums and root and join the community of teachers. So what else? Actually, the website is like this more or less. So let's not waste time here. Let's start doing our first two JS project, which is really excited because we are going to create a 3D cube and move it in 3D space in a browser. Let's go and do that in the next video. 56. Install three.js: Previously in this course, we are here we installed Node JS. If you skip that part, you can check that video named installed Node and npm is the first video of coma sketch section. Alright? If you are watching this video from another place, you can check for downloading and installing NPM. And once you install npm, we are good to go. So you can always check. You can always check if MPM is installed by using note that we are npm dash we. So this is my Node.js version and this is my NPM version. Alright? If you how naught or MPN, you can see the version of thumb. If there's, if it's saying that looks something like this command not found, and that means you don't have npm or Node in your computer. Alright? And remember, it's best practice is to download time globally so that you can access it every directory. Alright, so first of all, let's clear our terminal and let's create a new folder for three JS. I want to do this in my desktop. So I will say make their three giants. I'm not sure that this command is valid on Windows too, but we're just creating a new folder, desktop, okay? If this doesn't work on Windows, you can just right-click and create a new folder, okay? Or you could find your own command for current line or PowerShell in windows. Alright, So when I, when I type this command, we have a new folder and we want to install three JS library into that folder, okay, to use in our project. So let's go into that folder we just created. And I want to install three js, right? Let's go into Google and check how can we install triggers. So I will go into the official website. I'm on left. Let's check documentation. So here we have Getting Started section, and here we have installation. We are lucky that they provide NPM installation guide. So we have MPM as well. We can use this command that is that simple. So in the folder, I want to paste this command and we'll install three minutes really fast. So let me bring my folder here. Two j's. Let's open this. Okay. I'll put it like this. So here we have loud modules package like Jason, package.json, which means we have installed to Pages. And let's also checked for Node modules in three. Let's go for source. Okay, So we have renders, lights, cameras or audio materials and so on. But here we have three dot JS file. So we want to use commands, methods, functions, and variables from this file. And it is enough to import this file into our file to use them because we have installed it. So when we create a new file here and write our code, we can use error function and method. This node modules, right? That's why we installed it in the same directory. 57. Open the project: Let's create our files in that directory. So there are many ways of doing this, but I like using terminal foreigners as well. I'll say touch. Let's say index HTML. We can see we created a new file. And also for JavaScript, let's call it index js. So you can create file only way you want. And also regarding with this problem, if these commands are not working on your operating system, I believe make unlike limit is same, but Windows could be different. So there's something called hyper terminal. You could download it in Mac or Windows. So it's something like this. And I remembered that you can use Linux commands. So the same command in an operating system using hypertonic and its interface is really good. So this is a nice platform to use as a terminal. Okay, so let's continue. We have created our files and we are ready to code, right? And finally, let's open the project. If you are losing insiders version of VS code, like me, you can write this command to open the project. If you are using a normal version of this code, does the standard version, you could just say called space. And if that doesn't work for you, you can come VS Code command P or Command Shift P, or Command Shift P to open a shell command and install cold. Or again, you don't need to necessarily use the shortcut. You can just manually open the project in VS Code, which is fine as well. 58. Import three.js: In index HTML file, I'm just press exclamation mark and hit Enter to create HTML5 templates. Alright, first thing, let's change the title of the project. First. Three Julius app. And then we can we can just remove the gaps between the Commonwealth and the boundaries. So just we, we will create two EJS objects, right? So we got to remove the gaps around too buddy. So let's do this in line. For now. I will say by the margin 0. We could add a CSS file and do that as well. But all we need is this line. So we can do it in line, okay? Alright. Now we can call the three js file that we just downloaded in body. To do that, open a new script tag. And as a source, let's say lot modules three. So let's check whether these are three JS files. In Node modules. In three, what we need is not sourced but built two regions. We will use this code. So in index HTML, I will say three built and select three js. And just underneath open a new script tag. And everything we will write will go inside of that tag. 59. Creating Scene and Camera: To actually be able to display anything with two jailers, we need three things. Seem camera at random. Okay? So let's create them. Creating a scene is really easy. We can just create a new variable caused seeing. We can use new keyword. And we can hears three library because we just imported it just above. And let's call C capital matrix. Okay? So next step is to create terminal. Again, we love me may want to create a new wearable camera. Let's call new keyword again. We will use three. So here, actually there are a few different cameras, nutritionists, we will start using perspective camera because it is recommended by the documentation. And let's open the mat. So this method takes four arguments. The first attribute is the field of view. It is the extent of the scene that is seen on the display at any given moment. So we should do some degrees. Let's give 7254 more and don't worry about it. It is easier to understand with examples. Alright? The second one is the aspect ratio. And we may almost always the same thing in this period, which is window inner weight divided by window in her height. So this will ensure that the resolution is correct. Okay, the aspect ratio of your browser. Alright, so the third parameter is actually let me just type the last two attributes and explain it. So if the object is closer than this value to the calorie, it will not be random. Okay? The object, if it is further away from the camera than this value, it will not be rendered. Alright? So these are the constraints of near and far. Alright? So if it is farther away from bigger than one, it will not be. Alright. 60. Creating Renderer: Next up is, let's create a new variable again called gender. And we will use three. This time. We will use web random. So three JS uses WebGL render by default, but it also has different options for older browsers. Okay? So once you've created the render, we can set the size by calling set size method. So you could give any values width and height. For this example, we will use the entire screen. That's why I will say window width and window in her car. Alright. And finally, let's add to render element to the doll. And we will just use the jealous scripts, append child with it. Okay. I will call decremented by the apparent child. So let's call it render dom. Alright, so this is the plane of Trajan's in every project you will create, you need to do the steps. You need to create the scene camera random error. You need to set the size of the render and you need to append this element to the door. 61. Create a Cube: At this point, I want to open the project in a browser and see what we get. So in HTML file, I just right-click and open with live show. And we all know they explain this. If you don't have live server, you can download it from the extensions. Alright, so let me bring my brush off. So this is a queen. I'm here. So let's just use the screen. Let's stick them together. Or we don't have something here yet because we didn't create any object. But the things we did earlier was just a setup. So let's create the first object, a cube. Maybe. I'm in order to create an object, we need to tints geometry and material. Alright? Okay, for geometry, Let's create a new row. We will again use tree, and this time we will call bucks geometry. Box geometry is an object that contains all the vertices and faces of the cube. Right? Next up is the material. Again. And I'll call mesh basic material. For now. And let's open this. We will just use semicolon and we can give the color here. And the color here has same attributes with CSS color. Okay, So it is looking for hex code. I will just copy the hex code from documentation to hear of ten. So we have created geometry and material. And once you have bought, you can apply material to the guilty. Okay? So we can do that by using much. Let's create tube. We would call mesh function. We will use geometry and material as attributes. So this mesh function requires two parameters, geometry and material, and we can use the things that we just created. Finally, we can add the cube to the scene. And let's say this. Still don't see anything which has no. So by default why we call seen at the tank we add, will be added to the coordinates zeros, zeros. This is a problem for us because the camera is also at that position. So both the camera and the cube, there'll be inside each other. To avoid this. Documentation tells us to change cameras Z position. So the cube right now is at position 000, but the camera is at 005. 62. Render the Scene: We are almost done. We created the cube and added into C. Let's render the scene so that we can see it in the browser. Actually. I will create an animated function. And you should be familiar with this animate function from the previous side chains. Just a quick call. Inanimate function. We need to request animation frame and we will just pass and weight function again here. This request animation frame generate the loop. Saw that animate function will be called every frame, right? You should already know if this, once we have enumerate function, we can call rounder. Rounder scene we just created here for first parameter and camera. We just created here for the second panel. And that's it. Let's call and wait function in the app. And when I say this, here we go. Finally, we have something in the browser. So it is not animating on new incorrect now because we didn't try the code for it. But we can see the cube we just created, right? So it's green because we again, the color green and everything else comes from two js library. For example, we didn't specify the background color, but its columns from library itself, right? So we did specify abiding margin 0. So we don't have any margin on the borders. Finally, you will have the box at the end. Next step is to animate it. 63. Animate the Cube: If you remember, we were changing the position of objects in animated function in order to move. We will apply the same logic here. We'll set up moving. Let's just rotate it. Okay? So in animate function, just a bow there, Angela. We should change the rotation of the cube. So let's call it q rotation. You can say x or y. Let's first try rotational x. I mean, every frame I want to increase its rotation x value by one. Let's try and see the outcome. You can see it is just rotating, but this is too fast. Let's try 0.1. Better, but still to 1.01st 0. And this looks better. Okay? And we could also do the same thing for Y value. And now we have an animated Q. We used rotation methods. And of course we could also use position method attribute for, let's say if you want to know, okay, for x, for example, mothers will go out of the coal was like this. Let me say it again. So we can move way to it and rotate it. We can do whatever we want actually. So right now, I want you to play with it. You can create many more cubes, rotate them, change their position, make them collide, anything you want. Now we can play in 3D. Perfect. Okay, play around Gettier state, and I'll see you in the next video. 64. Introduction to 3D Space Effect: In this section, we are going to create a 3D space affect. The result will look like this. This looks like the project we did earlier, but this time it will be a 3D. Mainly developers, users, this kind of defects in their portfolios landing page. Alright, if you are ready, let's get started in the next video. 65. Setup for 3d Space Effect: We don't need to open a new project. We can continue from here. Let's create a new file here. I will call it space, not HTML. And press exclamation mark, hit Enter to create a HTML template and change the title to 3D space. Next step is to import the assets. In this project, we only hire one circled PNG assets. And I will provide you this file in resources so you can download it and import it in your own project. Alright, so let's go ahead and add a style tag here and change the body CSS. So we don't need to do much here. That's why I will do it in line. So just make sure that we don't have any margin. We adjust the width and height. Let's set background to black and overflow. Hidden. Morphine about setup is to import the Free jazz library embodied. Let's reference the tree JS file. So it's not modules free. I also built here three main JS. So trimming GIS is enough for this project. I'll open a new script tag. And every tank we will write from now on, we'll go inside of this tag. 66. Init function: As we discussed previously in this course, we need to define cine camera. And this time I'll create an init function that will start everything off. For instance, creating the scene. Like mu three sin or creating the camera. From 3D library. I will use perspective camera here again. And let's give 64 fall, which stands for field of view. For the aspect ratio. We will again set it to integrate divided by inner height threshold, our default like 11 thousand. So let's set the cameras that position one and rotated degrees for 90. And as you remember from previous courses, we can set it to match pi divided by two, which is 90 degrees. So I will continue with the create, with creating the renderer from tree, not wipe GEL random error, and set the size of the renderer using set size metrics. Finally, let's append it to the document body. We can use append child methods and such granular DOM element. Four parameters. 67. Create Stars: In this video, we'll create the stars using a for-loop. Use the shortcut for for-loop and change iterator using AI. And I will set the boundary to 5 thousand because we want that many of stocks create. So let's also delete the line and create the star here. I will use vector T of three library. So we should do X and Y and Z values. And I want them to be random. A random number between minus three hundred and three hundred. So let's also copied this line for y and that values. Alright. So once we created the star, we can set its velocity because they will be moving. And also acceleration. We will then later upgrade the velocity with this acceleration, we can change the values later on. And also what we need is here an array to push the star that we just created. That's why I will create a new array up here and push it, push the star into that array. So we need that area because we want to set the geometry and we will use it here. And let's check what it is exactly. I will open this file with Live Server and let me bring my tab just next to the way Xcode. Let's expand it and say inspect to see the console. So now you can see it lacks an array. And here it is, the acceleration and velocity that we just sat. Okay, so we have an array and every includes the stars. So we should also create a geometry and we will use this GO, Eric, I will call that variable star jewel, but let's first define it up. And we can now set it new tree buffer geometry. So this is a new feature of three js. We can not use geometry anymore, but we should use buffer geometry. I will say set from pints. Now we can pass the array that we just created. Let's log star Geo and see what it is exactly. So it's a geometry and object off to EJS and it has attributes like count, and it is 5 thousand because we create 5 thousand stars. Let's leave the log statement here. We don't need it. We will start creating the texture in the next video. 68. Use Geometry and Material: We'll create the sprite using a texture loaded. Okay, Let's say new three, texture loader. And I will call Lord methods. We can pass the PNG file name in this parenthesis. Let's say circle PNG that we just imported. And let's create the star material as well. We will say new three points material. So we need to adjust some properties. For example, color. I want to create gray stars, which size of 0.6. And we will use the sprite we just created for map fields. Alright? So now we have starting material and geometry as well. We can create by using three points and we can pass star Geo and starting material for parameters. And finally, we should add the stars that we just created the scene. Okay, this block of code should also be inside of the init function because we don't want to run this call before initialization, right? So let me just move, move all of this code into the init function. And I made a typo here. We're using charcoal PNG. Let's also fix that. Rename circle. Then let's also fix it in HTML file. Not certain codes target. 69. Animate Function: In this video, we will add the animate function. You are already familiar with this. We use that function before many times. So let's also call request animation frame and call the animate function again to create a loop. Alright? So I want to show you something about buffered geometry because it's something new integers and let's check how to use it. So in its official documentation, just go down. And here you can see we will randomly at points and they are using attributes position array. So we need the same thing because we also have to add random points. So let's create a new variable positions. And we will use star Geo. And same with documentation, we can say that tributes position error. And in order to understand it better, let's just lock position flanked here and also the length of the geo Eric. We don't see anything yet because we didn't call my function. But let me just move these three lines up. We can let see anything again because we didn't call it function as well. Okay, so let's, Let's call it function. Now we can see the length of arrays. So as you can see, 20,000 of light. So it's three times exactly two times difference between them. And that's because one of them is in 1D and other is in 3D. So it's like, it's like the expanded version of each other. Okay? So in dual array, the first element halts X, Y, and Z values of the stars. But in positions, the first element only holds the x value. Second element halts the y-value. And third one hostess exact value. So the four to ALU will be the x value of the second stock. That's why it's in one. Alright, let's continue. We also need a loop in the animate function. I will create a for loop again and set iterator. Let's call Joanne linked here. Let's use that because it's, it's the shorter one. I will set your array ice velocity. We are iterating over the array and we created velocity field of elements. So let's set velocity plus equals to acceleration. So here it's really easy. What we are doing is just adding acceleration to velocity in a reframe. Also, we should set a positions with velocity, right? So we can update the position with velocity. But first let me just lock the positions just to see it easily. I should love the position here. Okay? So now you can see that it's just an array holds, holds all of the positions. And like I said, X, Y, and Z values, and it's in 1D, so just, you know, Ford is the x value of the second style. We should also update them with velocity. So in every frame, we can just say two times three plus one. And it will be the correct index. So it's the transformation of 3D 1D. You can do the math. So because we are iterating over G0 airline, alright, so the maximum value will be 5 thousand in this loop, but we gotta reach 15 thousand in positions array. Alright? Let me also called an amide function in init function. Still we don't see anything. And that's because we didn't try the render section. Okay, let's keep going. We just underneath the for loop. We can just write line for updating. And actually let me check the update maximum because it also changed with offered geometry. Let's go back to this page. So down below, you can see this line here. So if you need to render, you need an update. The syntax is this. We say star attributes position that needs update equals to true. And also after that, let's render this scene and camera. And also finally request and we already did this slide. Let me just delete it, save this file and see the outcome. Perfect. So we have the animation. It's working everything we wrote. But we also need further. 70. Finish the Projet: Our effect looks really nice. I'll try it now. We have a problem. When stars goes part of the calculus. We're not responding to them. Right there, just going outside of us and we cannot see anything on the cow was after a while. So let's pick this, fix this for loop. I want to open a new IF statement. This statement will check if the positions are out of columns. So it's enough to check the y value only if the position is less than minus 200, which means the star is out of the commons. And what we can do here is to set position to 200, again, like this. So we just respond spot the star at 200 y. So we can also change its velocity to 0 in order to reset its velocity because otherwise it will be really fast. So on the right of the screen you can see the effect working and the stars are responding after going outside of the car was. And this is also efficient for for system. There is no stars outside of the Commonwealth, so we're not harming the CPU. So let's also rotate the stars. Why? We too, Let's see.com. Okay, this is too fast. Let me just make it 0.2. Still fast. 0.020.002 is great. So it's a cinematic effect by just rotating the stars a little bit. I believe it is better. Now. We've finished yet another project. You are doing really great. As always. You can just play with the effect. You can change anything, you want, the colors velocity. Or you can also add some new features class maybe. So I hope you enjoyed this project and take care. 71. Some three.js Examples: Before coming to the end, I want to show you some free JS examples that you can be inspired. I really liked this works. So I just wanted to share with you too so that you can imagine more use cases. Alright? So first one is Atradius call, so that you can see on screen, actually, let me reload the page so you can see the initial animation as well. So I believe it's really a nice work by Louis hub rugs. So you can see if you just look at the cart, it's written with JavaScript and it's the tree JS library is used. I believe there is some practical algorithm and freezers and some post-processing for full colors. Okay, so the second 1 second example is from three JS library. So it's from their official website. And it's an example of particle effect of 3D models. They don't provide the code here, but if we say Inspect, we can see the call actually in sources section. Just check points, dynamic HTML. We can see the code here and you can see there are just using HTML template, just like we did before. And here the important the tree library. And they use free GIS for this nice-looking animation. And this is something different here. It's just all the J format is used for 3D models of this human models. Again, I believe some particle effect is used on that OBJ models. Okay. So it's the, it's almost the same thing that we did earlier in the particle effect in this course. And actually I believe also in Skoll here. I believe it's also used in Scout project as well. So let me just check for the asset here so that I can show you better. Here we can see the asset that is used for skull. Just go there. This is for dark texture that PNG. But what we are looking is OBJ format for 3D object. So let me just paste it. It should download the model so I can open it. Let me bring my Xcode on this scene. So you can see this option, this 3D model is used in this project. And then some effects, some particle effect is applied. So this is called model. So that means you can use any model you want and you can use the particle effect to create your own. Alright, The main idea here is to import a 3D models. I think it will be really cool if the Skoll particles moves around with a music like we did previously in audio visualizers section. Who knows? Maybe we can do something like this in the future. Let me know if you want. It's totally unlike that. In the comments section. Can I expand a course curriculum according to demand? But for now, that's it for me. I am really thankful to all of you who can watch this far. I hope you guys enjoyed it if you like this course. Don't forget to make a review. See you next time. Bye.