Thank you for having me here in this beautiful city On my talk.

It's cool.

Take on me.

Take me is actually in 1980 song.

Very catchy zone.

Very catchy.

Music with some amazing animations is by an Arabian man call, huh?

Um, the thing.

It's unknown really good at music.

Not going to talk about the catchy music.

But I'm going to talk about the war animations because of us, Like my life go a really ensuring making this kind of completely useless Animations is like, Hey, I could grab Harry Potter on use TSS radiance.

And there's something like that, because if you down, why wouldn't you so hot or Lola?

I'm ever my friend on developer.

By day, I'm protected.

Refuse less creativity and night.

I'm also marks a latex speaker on I also organized.

Yes, that's comforting, Tina.

So by doing my name is actually a lot.

But as long as he called me Eva Eva, or if I say okay, well, what is this thing?

This is something Go.

Rotoscoping is an animation technique that has more than 100 years old on this animation is no released to make it takes too much time.

Um, the thing is that it's really interesting.

And even though it has 100 years old and he began in the movies and cinema, he has eventually got him into the music video industry, especially with this song in 1985 but also in this another one by Green Day interests of the nine Lily Allen 2014.

I would not buy a Mordecai only in two years ago by tomorrow again into something.

Dean, I know I know less mentioned that Justin Bieber this year.

So how does it work?

Well, rotoscoping consistent recording a completely normal BBO on dropping on top of that.

So you have to draw from 15 to 25 images per second a lot.

Um, you can be drawing like for fire by worse than you actually play the video, and you have, like, three seconds off animation.

It's not much, but it will be the best three seconds off your life so you can turn something like the's, which lives really what is going on.

And they're suffering like these, which it looks amazing.

So right now you can do it rotoscoping.

We thought that we fought to show up on a welcome Bob.

We can actually do eating the browser.

So the thing gives, um, But two years ago, this video came out to school Hard time by Baltimore when I took a look at a thing.

If it was like this likable, that turns on you like maybe we could like thing what we can do right now in Web animations and improve later, see what else we can do.

The thing is, I kind of to get a look at what we have right now in the Web off traditional animation, because once again we keep on bringing things from traditional animation, from movies and from the cinema into the Web on.

It's really interesting how far we have got him, for example, we can do today is the emotions are motion graphics in the Web.

If you're into learning a stop motion, you should actually Google Rachel my words because she's an amazing teacher and she has so many videos online and courses as well.

Teaching how to make a stop.

Motion animation is on the Web, and when it comes to motion graphics, you can go.

Christiana, who is a really nice person.

How he does this wonderful, useless animations, A swell like a big, says spinner.

So when you're waiting for the website to loyal, but it looks like a Big Sur is great on.

Also, I have to mention Julia most saddle far problem mispronouncing her name on.

She actually did these great thing, which is kind of an motion graphic animation, but impurity assess.

So take a look at her go.

But if you come because it's amazing.

Still, my question is, can we go?

Father, can we do something else besides this kind off to traditional Imation's can be made of dust skipping on the Web.

Well, the answer will surprise you.

No, we can't.

And the reason why is because rotoscoping, it's something completely handmade.

It has, like the soul off the people who is throwing and I love my computer is called me never.

Of course he hasn't him, but it doesn't have a soul, so it's not the same.

You cannot really pretend to do something that the human hand can do, but anyway, we can also interact we the computer on.

If we take a look at music videos, we cannot interact with me sick videos.

It's like you watch it and that's it.

So there is a place for improvement.

There is a place to do something interesting in there.

We can say the basic Thea overto scoping and take it into the browser.

So if we take a look at this part of the BDO of heart tells by fire more, we can see that they're free layers.

We see a bathroom layer with kind of blue, one yell of moving things.

Then there is a second layer in that second layer with See these two people dancing on top of them.

We gotta rotoscoping.

We got this lines that are moving around.

And if we look at the back like behind the things we got this which is really funny to watch what they leave us.

Actually, they recorded this video.

They repair seat, so he sexually rivers.

They removed that green back room, feel it with this kind of yellow and blue on emissions.

Put themselves on on top of that, the other animations so we can do something like this.

We can begin with this.

We can remove their green background on up something else.

There's something called Chroma Key, and it's really common in movies like a Rangers.

So what they do?

Is they recording movie with a green or blue background?

White, green and blue are not because Esper should be well.

We can really use rare because our faces have a tendency to be read.

So we kept statutes either green or Blue Winchester, the true colors.

We don't usually have an artist scheme on off course it way.

Use the green background.

We don't wear green.

If we use live, we can wear please on once you got that when you got that blue or green background in a really good light on, I mean, really good luck on That means use, not natural light.

Natural light is like that label for animations.

If you have ever worked on and stop motion animation or even work on something like Chroma Key, you will understand the natural light.

It's horrible simply because these kind of animations take so much time that maybe you expend any tower's working on it on in those eight hours there ever spooked around the Somme, so somebody only shadows move on that issue disaster.

So we don't want really this kind off natural light.

We prefer the slights whenever we were with animations or in this case with Grandma Key.

So the missus chroma key.

Let's make girl monkey with the use of scum here because again we are in the web.

We can actually enjoy these.

So, too did these.

Where we need to do is to take the user's input camera on, take that important, put it into a video tag.

Now we cannot.

Eddie, you have a little video took, so we need to copy that into a compass on.

Then process that campus and we will do is remove the green or the blue and replace them with something else.

So first that take the youth has come around.

But to do this, we actually use get user media, which is really suitable to use any available almost in every browser.

This will return a promise and then we can work on it.

So we got our data with an idea of video.

We could be only streaming from the camera into that video.

And if it doesn't work, which us for?

Whenever a message on we get something like this, any words kind of Okay, So you got your being the avatar you are.

Step the the prompter says, would you allow using your video?

Perfect.

So this scope it out into a campus stag.

So we get to creator combats with an idea of commerce because I'm really creative.

Um then we basically allowed to the context we create a function like this.

So what this function will do is it will take all the information from our bbo from the top left corner onto the bottom right corner, and it will co p eight into our compass.

Now, if you only use these gold will have one issue that is that only we will see the first frame off the BDO Coben to the campus.

And then the video will keep on a streaming.

But they come us one refresh.

So we need to refresh the canvass all the time.

There are so many great performance talking this conference.

That's why minus no performance.

We are going to do a set time out of Syria, so redo.

It's the time of the seer.

We get something like this, we get the prompt.

Will you share your camera with these upside years on Then we get the video on the left, the original video and on the right, the campus, Um, something else.

We get my cut So it works.

It works better for Lee Anne Refreshes sold the time.

So next is to process the Kama sister, remove the green of the blue.

For that, we need to do something called Big some manipulation.

So we need to actually kind of remember a little bit.

About what?

It's a pixel.

Now, I know this is the front and conference, but let's take a closer look anyway.

So big, so is the tiniest part off a bill e o or an image like this.

Um, a big So how's information in this case or she be information?

So if we take a look at this being we are actually taken a look at this red blast screen blast this blue and all those free Have you return C spink on her?

She be goes from 0 to 255 0 being black on 255 being the strongest, rather stronger screen on the strongest flu.

So in this case, we got a really strong, rare, a kind of dark green on a kind off in the middle blue undersold through the Alpha Channel.

And I know these songs were because there is no such a thing US transparency and videos.

But anyway, when we asked for information and we'll return the Alfa two.

So what we will do right now is we will ask for every pixel information off every friend that our beer is getting.

And we will ask for the red value, the green value, lovely value on the alfa body.

And then we will turn that Alfa value into syrup, so that will be the trick.

So we find the green pig cells on with rhythm them to find the great pixels.

We need to take a look at the information off the video.

So to do that, we use getting much data, getting much that I would return all the information from every part of the BDO in a nurse e V a way blasted will return the heights on the wife of the video.

So when I counsel look that I get this, which is okay.

The with off the billiards.

480 Their height 480 that with a 640.

I'm here.

It is the 1.2 million array because yeah, Why wouldn't you need the 1.2 million?

All right, what is this?

1.2 million?

Because he seems like a random number.

It's actually the wife of the video multiplied the height of the video Multiply four because four is the number of information that you get from each pixel.

That right, the green, the blue on the alpha.

So if you open that, even this you open it again in a camp and again on the salary you get to the important part.

So in this part, it looks like run low numbers again.

But we can find a sequence.

The sequence is 255.

So we know that video doesn't have to inspire Insee.

So that must be the Alfa.

And if that is Thea, father means that we can identify the others is or should be a your should be here.

You should be a off every pig.

So beginning from the top left.