Particles Effect With P5.js

[Music] hey what's going on guys in this project we're going to create a particle effect background using the p5.js library and the initial code for this came from a buddy of mine Florin pop who recently started a YouTube channel and he does some really cool projects vanilla JavaScript react CSS and he's doing a video just about every day now so definitely someone you should subscribe to and follow and you can learn a lot from all right so let's jump in and let's create our project okay so I have a couple files here open I have my index.html style.css and script jeaious and these are all empty so if you're following along just create these files I also have my logo which I'm gonna put on top of the particles and you can use any image or text or nothing at all if you want so the HTML is gonna be really really simple let's just generate a boilerplate and we'll just say particles effects and I'm gonna link in my stylesheet which isn't going to have much CSS at all and then our script which is gonna be script J s and then for the in the body I'm just going to have my image which is logo.png okay now we do need to include the p5 library so if we go to p5.js org you can download it or you can just go to get started and you can grab the CDN which is what I'm gonna do so we'll just copy that and paste that right up here and now we should be able to use the library so we can close this up and in the stylesheet real quick we're just gonna add or take away the margin and the body I should say and set overflow to hidden so we don't want any scroll bars and then I'm gonna set the background to RGB and I'm gonna set it to the same blue that I'm gonna set the canvas the p5 canvas background to which is 55 100 and 144 okay and then for the image I just want to position it right in the middle so I'm gonna set it to the width of 40% of the window and we're gonna position it fixed and set it 50/50 percent from the top and then 50% from the left and then to get it right in the middle we'll just add a transform and then we'll translate on the X&Y access negative 50 pixel percent and that should do it so let's open this up so I'm gonna I'm gonna use live server so I'm going to open with live server which is a vs code extension you can just open up the HTML file if you want right on your file system but you can see I just have my image right in the middle here we have our blue background so that's it for the HTML and CSS we can go ahead and close those up and now we're just going to work in our script file now with p5 we have two main functions for what we need to do so one is set up and one is draw and these we don't have to manually call these I'm just gonna show you real quick if I console.log set up in this function and then console.log draw in this function I just want to show you what happens here so if I open up my console I'm just gonna reload you can see setup gets called once and then draw is continuously called OK which makes it really easy to to do animations and stuff like that so we don't have to manually call these now inside of our setup is where we want to create our canvas so we have a function called create canvas and this will take in a height and a width and a height and I want it to take up the entire window so I'm going to use the browser's window object that has a property called inner width ok so that'll be the width of the canvas it'll take up the entire width and then let's do window dot in our height for the height and then down here I'm just going to go ahead and draw a circle for now so we can draw we can use like rect for rectangle we can draw lines with line I'm gonna go ahead and use circle and it's going to take in three things in this case the x position so let's just move it over 150 we'll do 150 on the y-axis and the size we'll do 80 so just doing that you can see that we now have this white circle and there's all types of functions we can use to change the properties of it if we want to fill it we can use fill and we can put like an RGB value in here I'm gonna put a zero and that should make it black and then I just want to show you a couple things that have to do with like events and stuff this has nothing to do with the particles but just to give you an idea of some of the stuff that p5 can do so let's say if and in here we'll say mouse is pressed and there's all types of events you can check for and then we can console log here mouse X and let's log mouse Y so this will give us the position of our mouse and remember this draw function is continuously called so if I click it'll give me the position and if I hold it just keeps running okay so if I move around it'll just keep giving me my mouse position now let's do something kind of interesting and take let's get rid of the console log and let's take this fill right here and let's move this up into here and then we'll have an else and we'll say fill and we'll make this lighter like 100 so zero is black 100 is going to be like a gray so now if I save this and we go back and I just go ahead and click my mouse doesn't matter where and I'm holding it you can see now it's black if I let go it goes back to grey now we can go take it a step further and those the mouse x and most Y values that I just showed you let's actually put those as the position of the circle so we'll say Mouse X and mouse Y which will obviously make this dynamic so now if we go back wherever my mouse goes it's gonna give us that circle so we're basically kind of like drawing if I hold click and hold my mouse it turns black so pretty cool stuff I mean obviously this isn't very useful but I think it's pretty neat for the amount of code that we just wrote now this stuff here has nothing to do with the particles so we're gonna get rid of that I just wanted to show you that real quick and we're gonna go under these functions and create a class for our particles all right so we're gonna call this particle and basically for each particle that we create we need to instantiate a new particle object from this class and we're gonna have a constructor which is just a method that will run automatically when we instantiate an object from this class and it's going to have a couple properties the first thing we want is the position and define a property we use the this keyword so we'll say this position or POS and we want to create what's called a vector okay vectors are kind of hard to explain they're defined as an entity with a magnitude and a direction and they can be represented on an XY axis and what gets passed in here is an x and y component so what this is going to represent is where on the x axis we want this particle to be placed and where on the y axis okay I'm not going to leave X&Y in here I'm just doing it for now so we obviously want this to be random when we instantiate a new particle we want it to be placed just randomly in the window so I'm gonna go up to set up just to show you real quick a function that's available to us called random actually let's let's console.log this okay so we're gonna console.log random and see what that gives us so it gives us a random decimal zero point something now this random function we can pass in a value like we can say 100 and then it'll give us a random decimal that'll be you know zero points something up to 100 point our 99 point something so you can see it's different every time so this random we want to use this for our x and y-components so let's say random there and random here now as far as what we want to pass in here we want the width basically the width of the browser of the window we want that passed in here and with p5 we can actually use just width and height if I console.log with up here up here you can see we get one three to four if I make this a little smaller we get one two to four so it'll give us whatever the width it's like using window dot inner width so what we'll do is we'll pass in width for the x-axis so it'll be a random number up to the width and then a random number up to the height for the y-axis that way it'll just get plotted somewhere randomly in the window now we also want the size so let's say this dot size and we'll set this to 10 and you can make it make the circles bigger if you want and then in addition to the constructor we're gonna have a draw method and this is what's gonna actually create each circle so let's say circle and for the X where we want to plot it on the x axis it's going to be this dot POS so this position property and then the x value for the Y it'll be this dot POS on the y axis and then the size will be P I'm sorry this dot size okay and then we're just going to format this a little bit I'm gonna take away the stroke so no border and then for the color let's fill it in and let's make it white so we'll do RGB 255 so that'll be white and then the Alpha not RGB RGB a so the Alpha is the basically the transparency and we'll do 0.5 so it'll be kind of faded all right so what we have here in this class is enough to at least plot it somewhere give it a position and then draw it so let's go up to the top and let's initialize a variable so basically a global variable in this file called P and then in the setup I'm gonna go ahead and set P to a new particle object and then inside draw I'm gonna call P draw because I can call that draw method because this P variable is a particle and we have a draw method inside of that class so let's save that and let's go back and reload here and you can see that there's a particle right here if I reload again it's gonna be somewhere different because it's just it's getting plotted randomly and we didn't see it the first time it was probably within the white that's why we couldn't see it but yeah so it's just going to get plotted somewhere randomly because of this right here and it's not going to go outside of the window because we have a max of the width and the height of the window and if we wanted to create more we could go ahead and we could do like P 2 equals new particle and then we could do P 2 draw and now you'll see we have two particles so the next thing I want to do is add movement to our particle before we even get to creating multiple particles with it with an array and stuff like that so I'm just going to get rid of this P 2 I just want to deal with one for now so for movement we're going to go down into our class here and create an update method and we need to create a velocity so basically how how how much is this going to move within a certain time frame so let's say this start Val so for velocity and we're going to use create vector here as well now as far as the X&Y I'm gonna use random again except I want this to be between a certain range so here we just said you know random up to this number here we're gonna have two values which will be arranged and that range is going to be negative two and positive two because negative is going to represent one way on the x-axis represent going left and positive will represent going right so that'll be the X component for the Y component we'll do random and we're going to do the same thing negative 2 2 2 so that will be our velocity and in the update we're simply going to take our position so whatever position of the the currents particle and we're gonna add the velocity this dot velocity alright so let's go up here now and we have that update so we want to call that actually right here so P dot update now if we save this we're gonna get movement but something's gonna be wrong see how it's just kind of drawing a line the reason for that is we don't have a background to our canvas so it's showing the past position of the circle so a simple solution for this is to go into our draw and let's add a background and I'm gonna use the same RGB values that I have in my CSS for the background which is this right here so I'll just grab that and put that right in there and now save and go back and there it is so now you can see our particle is moving and it's not leaving a trail it's just moving and it's going it's going to be random completely random so now it's going to go that way and the reason for that is because it's either going to be positive or negative on the X or Y axis and that's because of this right here and if you wanted this to be faster we could do like between negative 20 actually we'll just do it on the x axis so it should go really fast this way but slow up and down so let's save that and look and there we go I reload okay so it goes really fast on the x-axis but I'm gonna change that back so next thing I want to do is is track the edges or detect the edges because right now it's just going off the off the screen and we don't want that we want it to bounce off the edges so let's create a new method here we'll should probably add some comments here so let's say update movement by adding velocity and then down here draw a single particle and then let's say detect edges so have function called edges whoops I don't need to put function on why I did that so for edges we just want to detect each side so let's first do the the sides the X access so if we say if and if you watch my canvas API tutorial a crash course that I did like two weeks ago a lot of this is pretty similar it's just easier to do with this library so let's say if this dot position dot X is less than zero so meaning the the left side or if this dot position dot X is greater than the width of the window then that means it hit either side and in that case we just want to turn it around basically so let's say this dot velocity V L dot X and then we're gonna just multiply it by that times negative one so we're basically just going to turn it around so we'll say we'll use this shorthand which is the star or asterisk equals negative one and that should basically make it bounce it off and we'll do the same thing on the y-axis so I'll paste that and we'll just go ahead and change these to Y except we're gonna say if Y is less I'm sorry if Y is greater than height because this time we're dealing with height and then we'll take this dot velocity dot Y and multiply that by negative one which will turn it around now we have to call this and we're gonna call this we'll call it with an update so we'll call it right here so let's try that it's take a look and it goes up it goes out like a little bit it looks like but it does bounce right off let's see if it bounces off the bottom okay so it's just hitting that limit and then conditional we wrote and then we're turning it around with the multiplying by negative one so it's bouncing off the sides as well okay good so I think that now we're ready to actually create multiple particles so the class here is the same but the way we initialize it is going to be different so instead of creating this single variable let's go ahead and create an array so we'll say particles and we'll initialize an array and then down here let's get rid of this because we're not going to initialize just one single particle we're gonna have a loop but actually before we do the loop we're gonna need to know how many particles do we want to create so we can say Const particles length now we could manually set this if we want but I want a certain amount of particles created based on the width of the window so that there's not too many if the window is small or there's not you know so the way that we can do that is we can let's first round down math then let's take the window dot inner width and just divide that by 10 and that will give us a certain amount of particles in fact let's console.log here see what that gives us whoops P is not defined well just ignore this but you can see we get 131 okay now if I make this window smaller and I reload we get 62 so in this case and this size it's going to create 62 particles when it's bigger it's going to create more it's going to create 130 and just ignore that P for now now to initialize this instead of just creating a variable we need a loop right because we need to go through all of the particles in the length so let's say let y equal 0 and then we'll save as long as I is less than particles length and then we want to increment by 1 then we want to take our particles array and we're going to push on to that a new particle so when here we'll initialize a new particle okay so it's going to create a new particle for however many particles are supposed to be created now down here in the draw we have to mess with this a little bit too because now we're dealing with an array so we're gonna take the particles array and we're gonna loop through it using for each oops so we'll say for each and I'm gonna put some parentheses here we're gonna use an arrow function I'll just say for each particle we'll call it P and then we also want the index and we're gonna be using that in a little bit then an arrow function and then we'll call P dot update okay just like we did before and then P dot draw just like we did before except we're doing it for every particle in the array instead of just a single one so if we save that and now we take a look we have a bunch of particles 130 I believe okay and it's gonna be based on the window window width okay so the last thing to do here is to actually create the connections between them because right now it's just a bunch of floating circles and you may want that but I'll show you how we can also connect these as well so we're gonna create let's see we're gonna create a new method within the class so right after edges let's call this check particles and it's actually going to take in particles and let's move this up so within here we're going to take the particles that are passed in which is going to be an array and we want to loop through so we're going to use a for each here we'll say for each particle we want to get the disk we want to create a distance using the disk function here so this takes in so we've taken four parameters first is going to be the the prot the X property on the position so this dot position dot X next will be this dot position dot Y next is going to be this particular particles x position so dot POS dot X and then the Y position of this particular particle so POS dot Y now we want to create a line if it's a certain distance so we'll say if that distance is less than 120 it's basically if they're less than 120 apart then we'll create a line so we can use the line function and this is going to take in the same coordinates these right here same arguments and then I'm just going to add a stroke to the line so for stroke let's do our GBA to 5 5 so we're gonna do white with an alpha of 0.1 and then that should do it so we need to call this so up in our draw I probably should have called this draw method inside the class something different because we have this draw function here but we want to go up here and go under what we called P draw and call P dot check particles now we want to pass in the array of particles but from this one on so we want to do dots slice and from whatever this index is that's why I put this index here okay so let's save that and there we go so now we have them connecting if there are 120 or less then they're going to have this faded line connecting them giving it that cool look okay so that's pretty much it I mean it's not that difficult we just created a class we have a position of velocity and a size we have we draw the circles we add the movement with the update method here adding the velocity we detect the edges and just turn the circle around the particle around if hits the edges and then we create a line if they're a certain length of a certain distance apart okay and then we just have our array we initialize each one for the array and then we call those methods so that's it guys hopefully you enjoyed this and I'll see you in the next video

Channel: Traversy Media

Views: 46,561

Keywords: javascript, p5, particles javascript, js, p5.js, p5js

Id: H-9jCNhLe-Q

Length: 25min 25sec (1525 seconds)

Published: Thu Jan 23 2020