I don't have long before he finds me guys, but I really have to show you this amazing fan knows No, no, no, I'm not gonna Why getting disintegrated?

It was actually pretty fun.

So let's try doing it to a cat.

All we need to do is click and the cat would disappear.

And to do this, it only takes about 40 lines of code, so let's jump right into it.

The first thing that we need to do is we haven't index dot html file, which is going to contain our image.

I also have all the different script tags and Java script that we need for a project already downloaded.

So the main things we're going to need HTML to canvas, which will allow us to convert an HTML element to a canvas element pretty self explanatory and then disintegrate dot Js, which will allow us to take a canvass element and break it apart into a bunch of small pieces, which gives you the disintegration effect.

I also have a style sheet here and a script tag linked to so we can write our custom, JavaScript and our customs.

CSS.

Now, the first thing that we want to do is actually create the did that's going to contain our image.

So let's just create here a div.

We're gonna give it an I D, which is just going to be image so we can reference this later and we can close that off.

That's all we need to do for now could save that and jump indoor styles that CSS inside of here.

We first want to select the body and just get rid of all the margin and patting.

That way our image is going to go up all the way to the sides of our screen, and then we can select that image that we have and all we want to do here is we want to set the with 2 100 view.

It's we just want to take up the entire screen.

We also want to do the same thing for the height, but we want to use view height instead.

We also want to set that background image, and I already have my image selected and downloaded.

You can just use any image that you want, but this image will be available and to get every building to blow and it's just called cat dot jpeg.

Then what I want to do is I want to change background size here to be covered this way.

So just fill the entire screen.

And I want to set the background position to be center just so that it's going to show the cat in the middle.

And if we saved that, open it up using live server.

So just right click on her index dot html open with Live Server and we'll see it open up over here.

And of course, when we click, it's not going to do anything.

But that's perfectly OK now, in order to get started with the disintegration using disintegrated dot Js were to go back to our index dot html.

We need to add in a class here a data attribute which is going to be data disk, which stands for disintegration type.

We want to set this two simultaneous.

If I can spell that properly.

Here we go on.

This is just going to allow us to make those disintegration particles and hook it up with the disintegrate dot Js library.

Now we can jump into the script ah Js and start writing the code here.

First thing we need to do is we need to use the disintegrate Library.

So where's type and disintegrate here?

And we want to say dot in it this is just going to get things started and working for us that we can actually use the disintegrate library.

Then after that, we want to get our elements were going to say document, get element by i.

D.

And we gave it an idea of image.

If you remember, we want to add an event listener because we want to listen for Whenever we click on that event, we want to do something.

So we're just going to take that, create a function here.

Let's make our screen a little bit larger.

There we go.

And the first thing that we want to do is we want to get the object that we're going to disintegrate.

So we're going to say this object, how are you gonna set this equal to disintegrate?

Died Get this object just like that and we want to just pass it in the element.

So in our case, e dot target is just going to be this image element here.

Then, once we have that image that we want to destroy.

We just call it the Sangre here.

Just saying great.

We want to call Crate simultaneous.

If I can spell that again, particles.

And we just want to pass it in that object just like that and that's all we need to do.

For now.

We're going to save that.

And as you see, when we click over here, it's going to disappear.

But we haven't ended showing up behind it because the image actually doesn't disappear.

It's just this new object we create.

So, what we want to do as we wanna target that original image and we just want to say we live groups just from if and now if we say that and click use, that image disappears and we get the nice particle effect.

But as you could see, I refresh here this particle effect is not at all what Banos is effect looks like.

So we need to create our own custom particle effect in order to make it look exactly as we want it to.

So in order to do that, we need to just create a variable.

We just say constant, then Oh, snap.

We want to set it equal to a function, and this function is going to be all the code that we need to do to make our actual particles move around properly.

So this function right here is going to be cold for every single particle that gets created when we click on our screen over here.

So when we click every single one of those little particles that gets created, this function is going to be called once for each one of them.

There's also a this dot draw properties, so this dot draw If I can spell that properly.

Here we go this dot draw, and we need to set this equal to a function.

Here we go and this dot draw function is going to get called for essentially every single tick that the particle exists.

So she's gonna get called over and over and over again.

And this is where we can change the values of that particle in order to make it move and disappear.

And this takes two properties.

The 1st 1 is the context is just the canvas context, and the next one is the percent complete.

So we know how want far along we are with our animation.

Also, there's a few properties that we need to set in this function.

The 1st 1 is this dot animation, animation duration.

And this just says how long in milliseconds the animation will last in our case will do 1.5 seconds.

We also need to set the name of this animation.

So we're gonna call this vanita snap this way, we can reference it later for our actual animation.

Again, this is going to have a couple other properties which are the start X and the start.

Why?

But we don't need to set those Those are already set by each individual particle.

When it comes apart of the actual world, soon we click.

As soon as that happens, all of the particles will get their own X and Y position already set for him.

So let's just jump down here into our actual draw method and see what we want to do.

The first thing we want to do is you want to actually start drawing, so we're going to say context dot Begin half.

This is going to allow us to start drawing our rectangles that we're going to create on our screen, and then we want to use context dot Phil Recht and this will allow us to create a rectangle.

And we need to put the dimensions of the rectangle in here as well as the start and end position.

So we know that we have this stops start X, which is going to be the start position, and we have a size that we want to use.

So we're just gonna say this stop size and divided by two and this is going to be our start position.

When it did the exact same thing for Wiesel said, it start wide and again.

These start wide and start X properties are already set as soon as the particles created.

So we already have these creative.

We could do this dot size again and divide it by two.

And then lastly, we could just say this that size is how wide we want it to be.

And this dot size is how totally wanted to be.

Because we wanted to be a square on.

We need to create this dot sized variable because it doesn't exist yet.

So we're just gonna default.

That took three.

For example.

Now, if we say that we're going to have our rectangle being drawn in the correct location with the correct size, which is great.

The next thing we need do is set what color you want that rectangle to be so we can say context Stop Phil style.

And in here is where we actually find what we want our rgb a values to be And this is a string so we can say our g p a and the first value that we want is going to be a red value.

So we're going to create a variable which will call our we're gonna pass it into their, you know, do the same thing with our green.

Same thing with the blue.

Make sure this is a common here and lastly, we're gonna do the exact same thing with our Alfa value.

And this is just going to be our fill value and we need to set these rgb a values.

And luckily for us, the red green blue values of our image are actually saved in a value called this dot RGB eh array.

And in here we have different properties.

So zero is going to be are so we can say Con Star is equal to zero.

You could do the same thing, but we can do it far green, which is going to be one.

And again we have our blue, which is going to be too.

So now we have our red, green and blue taking care.

And for Alfa, we actually want to set this based on how far the animation is completed.

So we're just going to say one minus percent complete because this is between a value of zero and one.

So as soon as the animation starts will be zero and this is animation is done, it'll be one.

So that means our squares here will become slowly, more and more transparent as the animation goes on, which is exactly what we want now, in order to draw that, what we need to do is we could just call context dot fill.

This is actually going to draw that on to it for us.

Now, if we say that, go back to our index dot html and we want to set the data this particle type, this is just going to say what type of particle we want to use.

And we called this van.

Oh, snap.

So what is type that in?

And we're also going to come in here and set the reduction factor.

And this is just going to allow us to create more particles.

The smaller the value, the more particles would get.

It defaults to 35.

We're going to just set this to 10.

It depends on how powerful computer is, how low you can actually set this value.

So if we say that we click over here, you'll see that it still does the exact same thing.

Is it before?

And that's because we actually need to add this van.

Oh, snap to our project.

To do that, we just type in disintegrate and we just wanna call add particle type and we just pass it.

That function we just created, which is Stan.

Oh, snap.

Now if we say bet and click, you'll see it still doesn't work properly, and that's because we need this to be lower case.

It needs to match our function name.

So now if we say that and click, you'll notice it just disappears.

All of our particles are up in this corner, which you probably can't see, And that's not at all what we want.

And that's because we look into here.

We actually aren't updating any of our variables.

We're not updating our start position are in position.

We're not updating anything except for the actual Alfa value.

So we need to actually create some methods and some functions that are going to update that for us.

The first thing we need is we're gonna need some speed variables for how fast we actually want our particles to move.

So we can say speed X.

I just want to set that here to math dot Random is just going to give us a random value between zero and one, and we're going to the exact same thing for speed.

Why?

We're going to multiply this by negative one, because that'll make it move in the up direction because we want our particles to move up and to the right by default.

So now we have our Speed X and our speed.

Why we can come down here and we can say that our start X we just want it added so we could say plus equals to this top speed X.

This is just going to slowly make our start position on the X move more and more to the right.

As time goes on, we get the exact same thing.

But for why?

So we'll say Start why and speed y.

And now if we say that in Click, you'll see again, nothing happens.

And that's actually because this value should be RGB array, not RGB A array.

Now, if we say that and click, you'll notice are particles, slowly move up into the right, and we're getting a lot closer to what that fantasy like effect looks like.

But if you remember from earlier example, the particles actually shrunk in size as they moved, and they got faster as they move.

So we want to increment our speed so we can save this dive speed.

Why is going to be times equal to 1.7?

So it's going to get 7% faster every single time it goes through here.