Placeholder Image

字幕列表 影片播放

  • Thank you very much.

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

  • So if I take a look at the first big soul, we get this value which is sequel to the surgery B A.

  • So I'll get there.

  • Is something like bluish.

  • Yeah, because it's 50 fire friend, 74 of blue and 86 off green off.

  • Sorry, 74 off green and 86 of Lucy's kind of bluish.

  • And it's really dark because those are really low values on the one off the alpha.

  • So let's go through all that data on Let's find the green pixels and we need to identify them.

  • We identify the red values, the green values on the blue values on dhe.

  • Then we ask if the green is greater than the blue and it was green is greater than the rail.

  • If that is the case, I'm going to turn the opacity value to syrup, and then I have to return this new information to our campus.

  • So this gets us something like this, which looks really bad.

  • I mean, it works, but we cannot really, really happy on celebrating because of that, So we need to improve it.

  • There are two things that are really wrong in their 1st 1 Is that right, that it's natural light?

  • That's why you're saying natural light decided the table.

  • You don't do natural light.

  • You can see that.

  • It's like a lot of fly coming from one side and nothing from the other.

  • Um, then we need to remove the colors on Lee.

  • If the green.

  • So we get the other 100.

  • Why?

  • Because that's even see.

  • Part of my hair has been taken away, and my fear is no green as far as I know, but hot.

  • It's round.

  • Um, basically, browns and greys have a value off bread breanna blue.

  • So even though if those values really low, the computer will still identify if someone has only one more picks off green and it will picket a screen, even the realism so whenever it issued, are whenever the value is too close to Ciro, we really cannot trust it.

  • So we won't remove values that are lower than 100 because those are dark values and we're not sure if they are really green off or if they are maybe rounds or graced.

  • So we get something like this in return, they gonna work better, which have now no natural light.

  • Um, we have to remove on Lee the greens if they are bigger than 100.

  • So as you can see, my fairest normally Cam, but there is something wrong with my T shirt.

  • I know what you're gonna say.

  • It's a hurry.

  • But the teacher is much recall.

  • Yes, but also is white on white has a tendency to taking a lot off the colors from the surroundings.

  • So I could either modify my cold or change my t shirt gets What?

  • I changed my T shirts.

  • That's why I'm running back today.

  • This is what I redeveloper with that tone.

  • So let's write alive.

  • Let's see.

  • So I got these.

  • Will you share your camera?

  • I got, like, off camera cycle.

  • They come here from the computer and they lend me this one.

  • So I'm going to use this camera, which is much wetter.

  • Ah, hear him?

  • So this is the baby on the left on the campus, on the right on I met this kind of dropped down where you're gonna select if you want to fill their green or blue using green greener.

  • So we could this when we open green.

  • When you can see snow.

  • How Words?

  • Because Marcone thank you On defeat Turn it into blue.

  • You can see the same.

  • But in all the fields of split or not, no longer green.

  • So that's very cool.

  • But let's make something even cooler, which are is basically invisibility cloak.

  • Because if you're like her bottom, why wouldn't you make an invisibility cloak?

  • So how does it work?

  • Well, you need to take a picture off your background without you.

  • So I'm going to move over here.

  • Mystic, this.

  • There you go.

  • I'm going to take a picture of that, general, and then I'm going to use that as a back room instead of the hard words.

  • So let's take this picture.

  • The one I shostak I'm going to cop it into are a much is fuller.

  • Right next to how words Let's go be the name.

  • Unless modify our beautiful CSS.

  • So a one longer It will not longer be how words will be Windows.

  • Some fan, um, sit so we can refresh now And we get that a slacker.

  • Any miche discredit.

  • Um, we're going to allow the camera.

  • Sadly, I use the right camera.

  • That's my question.

  • Yes, I use the right camera lives.

  • She's the other coming over here.

  • All right, we are fingering green.

  • So here, between on the thing you need to do.

  • It's like to cover yourself unless it it's pretty simple.

  • It's like it's some un invisible thank you very much.

  • It also worse.

  • We've blue.

  • Does he always?

  • Any time you get the chance to my getting Lee off yourself, it's like police whistle.

  • So a look which slows great.

  • The best dress you can get for a conference when you're an introvert.

  • So one final point over here, which is what happens if we want to make something else.

  • What happened this way don't leave.

  • Not only want to modify the backgrounds, that's my fault, but so more victory manipulation.

  • Um, I can Paramore video in this park that that they have.

  • The singer is dancing on the same time.

  • There are two Barschel suffer dancing as well.

  • With this thing moves so that its rotoscoping somebody actually draw that Gabi it right next to her so we can do something like that.

  • Um, I'm not going to dance.

  • That would be awkward.

  • Take notes with it dancing.

  • So we want to grab this gift off Taylor Swift.

  • We're going to remove the back room, and then we are going to copy Taylor Swift and then we get free Taylor Swift.

  • I I I also kind of shrink the jeweler team this week, so he gets a kind of nicer effect.

  • But you don't really need to do that.

  • So the copy dictators do it.

  • What do you do?

  • It's great.

  • Another campus, And then you position them with potential relative and absolute, um, them.

  • After you copy them, you need to make them think so.

  • What you need to make being.

  • It's not the green area because the green is gone.

  • You made to make being what it's left off the green.

  • So we used to have in If a statement, we are going to use the els.

  • So if where Reese left, um, it's not a green pixel.

  • What we are going to do is we're going to grab the zero value on their number to value on the Syria valuable number two are the information from the green and the blue.

  • So if he put a high value off green off brother um ano Hi, Molly of flu, what you get?

  • I kind of think so.

  • High Rev.

  • Plus high Blue give us Pink in their second and Taylor's We're finding the third Taylor Swift So you get something like this, which is their lives with dancing on a pink taylor the size on If you want to make it better, you can have Keaton's because they always make From this matter, Alan says, we have any child script conference.

  • He can only our logos, because why won't and year?

  • So I know it's not about the scraping, because again it's a computer isn't what the human during that critical, and he can't do a lot of stuff.

  • We can't really open your mind to whatever you want on the ones in your browser.

  • I mean, when I was a child and I used to like these kind of green screen things, I used to actually pirate movie Premiere and I will be after effects because I couldn't afford it.

  • No, it's like 15 so I no longer think that now I got my own software now, got the Russian, and I can do that.

  • We shot was great.

  • Thank you very much for listening.

  • I will leave you with this links.

  • If I were you, I wouldn't open the 2nd 1 on my phone because he crushed mine.

  • It's actually the only inversion off.

Thank you very much.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

對我來說,網絡瀏覽器!由Eva Ferreira | 布達佩斯JSConf 2019年 (Take on me, web browsers! by Eva Ferreira | JSConf Budapest 2019)

  • 4 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字