Name: Take on me, web browsers! by Eva Ferreira | JSConf Budapest 2019
Uploaded: 2020-03-28T16:35:24.000Z
Duration: 22 min
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Gerund

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

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

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 also marks a latex speaker on I also organized.

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

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.

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.

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

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.

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

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.

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

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.

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 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.

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 remove their green background on up something else.

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

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.

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.

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

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

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.