Placeholder Image

字幕列表 影片播放

  • Good morning.

  • I think I am alive.

  • Do you hear me To hear the soft sounds of the ukulele in the background?

  • I'm wondering because when I tested uh oh, no.

  • You're not hearing the ukulele.

  • Oh, definitely not.

  • Okay, now you know what's wrong?

  • Uh, my voices coming through, but well, then I will fix this.

  • This is very important.

  • Quite possibly the most important thing of the day.

  • Um, on DDE Here we go.

  • Uh oh.

  • No, e you're just hearing it through my mic.

  • So I should have fixed this before I start.

  • This is terrible.

  • Somebody.

  • Eventually, when this gets published, put in the A cup in.

  • I'll put a pin comment for the time code where this actually starts Way Just see something here.

  • Wait.

  • No, no, no, no.

  • Yes.

  • Okay, there we go.

  • Through multi output device.

  • I just start this over old.

  • I'm gonna stop and fixed this.

  • People can't hear me either.

  • Hold on voice.

  • Oh, I hold on time out and stopping this.

  • Oh, you hear me?

  • OK, half asleep.

  • But I started this life stream.

  • You could hear me.

  • Okay, Okay.

  • But I just want to fix this sound thing way.

  • Oh, I fixed it.

  • Just always forget how to do this.

  • Okay, let's start over.

  • Hello.

  • Good morning.

  • Welcome to coating train with me, Daniel Schiffman.

  • Um, so I'm a little bit half asleep today.

  • I don't usually stream in the morning.

  • It's not even really the morning.

  • Frankly, it's 10.

  • 40.

  • I've been awake for, like, at least four hours.

  • Get up very early, but, uh, it's been a very long week.

  • I probably should, like stream on Monday.

  • Not that my weekends air, so rest ful.

  • But I'm excited to be here.

  • I am ready.

  • I got like, a scratchy throat like a cold kind of.

  • It's getting, like, chilly in New York.

  • It's like it was like the summer than it was sort of the fall for, like, one day Inter.

  • Practically so.

  • But I'm excited to be here and do some coding stuff.

  • I want to see if I have anything to cover here.

  • Simon is asking if I saw his suggestion.

  • Yes, Simon has given an excellent suggestion for Doctor he drum, which is a cube with faces connected up.

  • I would definitely like to get to that at some point, but I don't know if I'll get to that today.

  • I am.

  • I'm excited to premiere something.

  • Wait a second.

  • Uh, I have to wait till I get a message.

  • Like I have to create the fake scenario.

  • Um, for the thing that I want a premiere, Wait a second.

  • Breaking knows news.

  • Breaking knows this is not going well.

  • How do I turn my brain on?

  • There's gotta be a way to turn my brain on.

  • You know what I think is a way to turn my brain on coding?

  • Let's just get started.

  • So one of the things that I want to do today, um, and let me, um let me go to seven segment display.

  • Actually, you know what?

  • Let's let's take a moment here and go to the coding train website.

  • You know what?

  • I think the website might be broken because it's supposed to show I think a note here when I'm live streaming and the most recent live stream that it's showing is for March 14th.

  • So October Festival wants to help fix this on the web site.

  • That would be a good thing to fix.

  • Um, but I want Thio.

  • Come here for a second, Okay?

  • So I recently did a coding challenge.

  • Seven segment display.

  • Um, and look at this.

  • This has been really successful, in my view, in the sense that it inspired a lot of creative possibilities.

  • One that I really want to look at.

  • She can I just do a search on Twitter without logging in?

  • Maybe I can log in as the coding train.

  • Yep.

  • That was an easy way to do it.

  • And there we go.

  • This is actually what I'm looking for.

  • A love this from Sebastian Vein node.

  • Uh, seven segment display combined with p five Js and matter.

  • Duchess.

  • Many here.

  • Um, let's click on.

  • Let's actually click on all of them.

  • Why not?

  • Let's just look through all of them really quickly.

  • All right, so we've got this one.

  • We've got time, Maybe.

  • I don't know.

  • Cool.

  • I love that.

  • Okay, so this is wonderful, because this is exactly what Tom Scott talked about in his video About seven seconds display.

  • Looking up, using a regular expression to figure out what is the longest word you can display in a seven segment display.

  • We've got super transcend den dol maybe, um, and so we could choose the color of the display.

  • That's a really nice feature.

  • I really should be crediting the people here, so it probably click on them one at a time.

  • Here.

  • This is from Tom Seeley Source code Here.

  • Thank you.

  • Tom Seeley.

  • This is one from bl four score.

  • Um, and look at the time in the wrong page.

  • Um, this is nice.

  • It's interactive.

  • This is relates to something that I want to do today.

  • We've got another clock from Wimar shippers.

  • I love this.

  • Oh, look at this.

  • And guess what.

  • This is actually a new feature of the P five Jess Web editor.

  • Now, when you share your sketch with the full u R l uh, you get a little like, um, bar on the top that has the p five logo, the name of your sketch and a credit.

  • So by Willie Worry ge, you can still get a view, actually, So let's see if we can do this.

  • Well, if you go to file share, um, full screen, there is still a full view without it, which is would be in bed.

  • So if we go here, um and I switched to in bed.

  • There's still a full view without the P five information.

  • All right, so now we also have another clock from Swifty Turtle.

  • Excellent name.

  • This is lovely.

  • Great work.

  • We have a seven segment display from Tony Stark.

  • Hey, Tony Stark.

  • Thanks for contributing to the coating train.

  • Um, look at this with the segments defined the binary stuff to find.

  • I know this is Ah, Let's see if we can read a bit more about what?

  • This is from Prasad Panda decoder app.

  • So this is maybe an app that's helping you figure out the encoding and decoding of the binary stuff, the binary numbers and how those are represented on the seven segment display itself.

  • We've got a processing seven segment display, so I should really just to be a good person.

  • Let's let's actually run this code.

  • This is the one thing that's a little bit tricky.

  • It's a little bit harder.

  • This is just actually a raw port, so I don't actually know.

  • So we need to run this.

  • This looks like it's just raw port.

  • Thank you for that on dhe.

  • Then we've got the object oriented re factoring eso this.

  • Let's take a look at this because I have to say I take this as a badge of honor, but most people are very nice to me in the comments, but, um, I get a lot of the negative comments that I get, which, honestly, view is negative.

  • Are your code is terrible, It's messy.

  • It's disorganized.

  • You should.

  • You're teaching your variable names or bad you should be teaching good code practices and fair criticism.

  • Guilty as charged.

  • But one of the things that I like to emphasize and that's part of my process, which I recognized maybe isn't for everybody is that messiness is part of playful experimentation.

  • Now you're right.

  • Software development requires care and time and thoughtful engineering commenting code organizing code.

  • These are valuable and important skills, but sometimes you want to play around, make up an idea, and I also view it as a prompt to the viewer to think about what I've done with my code and make and change it to work for you, and that could mean organize it.

  • But I do aspire.

  • Thio, you know, teach good practice and also use good practices myself on this channel.

  • So we'll see.

  • Maybe I'll maybe I'll get better point taken.

  • All right, so let's look at this one that I really want to look at the code for this one.

  • So one of the things I can probably do, actually, I think if I just click here in this new view, it will take me to the page with code, and we could see Look at this.

  • We've got a segment class, an off collar on off color and on color, A length and a with an estate.

  • So this is really nice.

  • Look how nicely documented this is.

  • So this is a sort of format for self documenting CO comments which will can be generated into ah, documentation page display the segment set on set off.

  • This is lovely.

  • Now, let's see if we look here when we see there's even now a seven segment display class which has a set of segments in them.

  • It initialize is them.

  • Uh, it has hex code.

  • Look at this.

  • This is really excellent work.

  • This'd excellent work.

  • Who did this Brew owls And no, thank you so much.

  • So all of you were looking for a more thoughtful, re factoring and reorganization of my quick and dirty seven seconds way.

  • This is a great one to look at and you can see now the main program is just making news seven seconds.

  • But look at this.

  • Let's see if we can even figure out to make two of these.

  • Like, how hard would it be now if I say let's make two of them So I'm gonna say Create canvas 604 100 Now this, of course, should use an array.

  • But let's just say I want to put two next to each other and I make two of them and I want to display a digit update.

  • You know, these air counting and maybe I want to also display a digit.

  • Maybe I'll say like 10 minus index or something.

  • Now what's going on here?

  • I don't actually see two of them.

  • So this is where I might offer an idea for improvement, which is that the, um, the offset vector is hard coded here.

  • So what if I were able to give it an X and a Y, then I could add the X and Y here, then under in sketch, I could say Let's have one at, like zero zero comma zero and let's have one at 100 comma zero now, interestingly, have still not seeing two of them.

  • Let's see, like right.

  • Why don't I see two of them?

  • Well, let's take a look at how it's drawing the offset Vector whips in seven segment display.

  • This is, like, kind of a private variable here, but it must be used somewhere.

  • Where is it Used?

  • Uh, somewhere in, maybe.

  • Like a draw.

  • Function.

  • Right.

  • Transform.

  • Look at this top.

  • Oh, there's all these transforms.

  • Whoa, This is crazy.

  • Kind of unbelievable.

  • Wow, Generate display.

  • Okay, okay, here's what we need.

  • We need a push here and a pop here.

  • That's my guess.

  • Because my guess is that the generate display function is not self contained.

  • All these translations that happen here are affecting other ones.

  • Do transformations.

  • That seems reasonable.

  • Now, why aren't I still seeing two of them?

  • Um 12 All right, so let's see here.

  • Zero.

  • Let's see, Let's try to figure out what's going on.

  • We have to debug us a bit more.

  • Let's change the on color, huh?

  • So weird.

  • Why?

  • Why are my changes not taking effect on color?

  • Stroke on color, off color.

  • Interesting.

  • Um, let's go back to just formed by foreigners bother me that it's off the, uh and now let's do 100.

  • So it moved this both of them over.

  • So also interestingly Oh, you know what?

  • How where is the background being drawn?

  • Let's I think there's also an issue with this, which is a problem, which is that the background is being drawn here in update.

  • So this is a problem.

  • Because when the way I think about object oriented programming is that I only want the object to know about and do things that are part of that object itself and background is not part of the object, background is part of the world.

  • So this really needs to come out, uh, and be here and draw and look at this now.

  • Now we have successfully, you know, maybe made two of them.

  • What's so now?

  • We got two of them, so that's good.

  • I've got to seven segment this place.

  • Why did my change of the color not actually take effect?

  • That's a little bit weird.

  • It's not a super important detail, but I'm curious.

  • Oh, because there's a set and a set on color.

  • So somewhere else the color is being set on DSO.

  • Presumably that's happening.

  • Ah, here.

  • It's actually here.

  • So it's interesting that this is a bit I mean, it's nice that that's there, but the color is actually being set in the display itself.

  • So, for example, if I were to change this now, we're going to see we're going to see it now.

  • Blue.

  • Okay, So anyway, I'm sorry I went off on a bit of attention here.

  • Looking at this project I'm gonna save This is well, uh, one thing.

  • It would be nice if the p five editor could keep track of where this came from, but I'm gonna I'm gonna do that myself.

  • This was from, uh, object.

  • Ordinary fracturing.

  • So let's buy Bruel.

  • So let's a credit, Bruel.

  • Ah, And over here.

  • So if anyone wants to take a look at this, um, revised from Bruel just here.

  • And also, let's credit this Get home page.

  • All right, so this is the thing.

  • This is really this is that Here's an important tidbit that I believe in with all of my heart and soul.

  • And if I ever make him a stake in this realm, please let me know, um, open source is a thing, and I encourage my students, for example, to use open source code examples in the creation of a project and whatever the license might be right, you might find license like open source.

  • Licensing is a big A topic unto itself that would be lovely to discuss in depth.

  • Some open source licences require attribution.

  • Some have restrictions on what you can use the code for whether commercial or non commercial purposes.

  • Some require share back like if you make a change of to share that change back.

  • But some open source license is notably like the M I T license and the BSD license are very permissive.

  • Meaning yeah, I don't I make no warranties with this code whatsoever, and you do what you like.

  • Anything goes.

  • However, I feel that it is good practice to no matter the license, credit your sources so there are some situations where that certainly required.

  • But even if it's not required, I wouldn't want to build on top of somebody else's code educational material, even if it's open source without crediting it back.

  • So that's something that I always try to remember to do and I would encourage you as you make projects to always credit back.

  • All right, So, uh, I will This will get hopefully left somewhere in the video's description.

  • Maybe somebody who has privileges can share this in the chat right now.

  • Actually, one thing that I wanted to also mention housekeeping wise is there have been some recent improvements to the coating train website, which is pretty much a community project.

  • Ay, ay.

  • Dio would like to apologize that there are a lot of open pull requests and issues.

  • I really need to do a better job of maintaining this community project.

  • And I'm hoping to figure out ways in the future to get more people involved in that maintenance.

  • But one of the new things that happened recently I'm going to pull requests and closed is, um look for this.

  • Ah, Web editor might be further down here.

  • Let's look for this Web.

  • Let's try looking like this.

  • Yes.

  • Add Web editor to Video page.

  • So this is a feature that adds an option to include a link to a coding challenge, our tutorial with the Web editor.

  • So if I look at any Web page, for example, this seven segment display one.

  • Let's come back to this.

  • Here you can find weird.

  • Was it broken?

  • Hey, we're the buttons.

  • There should be like buttons to like down low.

  • I wonder if we broke something.

  • Um, I did 10 minus in that people are a little done of getting a note from the chat.

  • 10 minus index is causing a bit of a problem with this, which is that 10 minus zero is 10.

  • And I want to go from nine down to zero.

  • So this should really be, uh, 10 minus index minus one.

  • That should do the trick.

  • Right.

  • 321 Not.

  • Yeah.

  • There we go.

  • Okay.

  • Thank you for that.

  • Back to what I was saying.

  • Weird.

  • Where did it go?

  • Let's go to a different challenge.

  • Like, for example, Um, let's go to coding challenges.

  • And let's go to, like, this one also.

  • Let's go here.

  • Okay, so this one is, has it?

  • I don't know why it wasn't showing up.

  • And now there's two rows of buttons, which is weird.

  • Some stuff got messed up.

  • Hey, people feel free to file, get up issues and pull requests, but, um So what's supposed to happen here is that there is a link to view the code, which, if I click here, will take me to the get hub page that has the actual code.

  • There is a link to download the code, which, if I click that will just trigger an automatic download of the code as a zip file.

  • This is processing.

  • Then there's live.

  • Example now live.

  • Example.

  • This is not active.

  • Live Example should point to the P five j s version that runs in the browser, and I'm not sure why there isn't one for the Lisa Duker delicious Zuker curve table, but there's also this.

  • Oh, and look at this.

  • This now view code points to the P five.

  • Jess Web editor one right, which was a new feature.

  • And this one points to the web editor Live version.

  • Look, Att that.

  • So I gotta clean this up, figure out what should be here and what shouldn't Probably This should be.

  • I'm thinking about it.

  • Um, view code is always nice to go to some get hub.

  • Repo download code is nice to have.

  • Right, So this gives you a zip and then, um, I would say the live example, I should probably go to the P five Jess Web editor if it's there, or or get hub pages.

  • U R l If there's no p five just Web editor or than nothing, it's deactivated.

  • If there is no life example, So and so this might be processing or or P five.

  • This would also be processing or p five.

  • But this live example would always be p five.

  • So this is the implementation when he conscription got this and file.

  • This is a good hump issue.

  • And then what I could use help with actually is going back in all the old challenges that don't have a P five Web editor version of them actually creating them.

  • Now here's the thing in order from for you to do this, though, I need to give you access to the coding train P five Web editor account because I think it would be nice for this to show up under the under the coding train account.

  • I mean, that's what I'm thinking.

  • So you might have to get in touch.

  • Maybe somebody who's in the patron group or the Slack channel can help with that specifically.

  • Okay, Don't tell me It's like, OK, it's only 11.

  • All right, um, really slow getting started today.

  • So let me talk about what's on the horizon here.

  • Um, let me I should sign in.

  • Maybe there's, I don't know, She probably sign in as myself when I look at the YouTube page.

  • But let me just see you.

  • Is that playlist public yet?

  • So a couple things.

  • Let me mention if you hadn't noticed.

  • Uh, my friend Calichman Also, because I have you to premium eyes.

  • This is a non story is is capable of, um look okay.

  • No, thanks.

  • I'm good.

  • I okay.

  • Sorry.

  • Sorry for that digression there with an ad.

  • Um, so recently.

  • Hello?

  • Well, um, the video tutorial with Nabeel Hussain was published.

  • This was this is an edited version of a live stream.

  • So if you are interested in learning how to train long short term memory network with tensorflow and then running that in the browser, this came out.

  • I also wanted to just alert you to some a text.

  • That mobile added to the description related Thio taking about data and ethics and responsibility.

  • So I encourage you to read through this description here.

  • Um, so I want to note that that was published.

  • Now what I'm also looking for tow them to a new is Let's see created playlist.

  • I think it's not a public playlist yet.

  • Let me look over here and see if I can switch that.

  • Give me a second.

  • Um, people are telling me to install ad blocker.

  • Um, okay, what is?

  • Let me look at this Playlists.

  • Might as well make this a public playlist that people want Thio get started looking at this stuff and it playlist.

  • I think this is where I would do this unlisted at it.

  • Ah.

  • What?

  • How do you change a public?

  • Okay, let's make this public right now.

  • Okay, So now if I refresh this, I haven't released these videos yet.

  • I'm still working on the captions and various elements, but if I go here, um, hello, I there is now Session 12.

  • I have released Session 12 word Tyvek with three video tutorials.

  • These air edited from last week's live stream.

  • So if you want to get started looking at this stuff, I'm gonna hopefully continue my discussion of words avec today.

  • All right, All right.

  • Now it's time to have some fun.

  • One of the things that I know that's a black screen right now.

  • I will fix that in a second.

  • One of the things that I did with the seven segment display is in the seven segment display I picked up Hexi Decimal Numbers Racer, This is a paper towel.

  • Where's my nice eraser?

  • I picked up Hexi decimal numbers from the, uh, from the Wikipedia page about seven segment display.

  • And I converted those hex Immel decimal numbers in tow, binary sort of and did bit shifting and bit masking on them.

  • And I kind of glossed over on a hand, waived the explanation of bit shifting and bit masking.

  • And one of the comments I got was I didn't understand the bits part.

  • So what I'm gonna do today is, you know, I thought like a Let me just do like a one minute binary numbers tutorial.

  • I think those kinds of things exist on YouTube already on probably are better than what I could do because they're explainer videos with animations and sort of thoughtful diagramming.

  • And so what I thought that I would do is due to coding challenges around binary numbers today, and I would basically make an interactive display to convert from binary numbers two decimal numbers and back.

  • And then I would explain what binary numbers are and then also look at bit shifting and bit masking as part of this.

  • So I don't That's exactly the entire plan that I have.

  • I didn't try coating any of this in advance.

  • So this is what I'm going to do.

  • And I think that doing this in the Web editor will be fine.

  • There's definitely some complicated aspects of this.

  • Let me close all these windows home.

  • Save this.

  • There's an issue.

  • By the way, A current open issue with the P five Web editor is that if you rename a sketch even if you saved it, it really thinks that you didn't save it, but how it used to go.

  • I'm used to that.

  • Okay, So binary numbers based too, and bits and bytes.

  • Okay, let me get the chat open here to make sure I haven't missed anything.

  • Um, and welcome new member breaking news.

  • This is another breaking is Let me credit these people who made these breaking news things.

  • Tristen.

  • Thank you.

  • To Tristan, new member who made this wonderful.

  • Let me find who made these breaking news Things.

  • Uh, so, Nicole.

  • Thank you.

  • Thio soundcloud dot com slash nick ram stead slash shift men breaking news Rams that remain visible money.

  • And then there's another one.

  • Uh, I have to find it.

  • Uh, let's see.

  • Uh, let's see.

  • Let me find this under community.

  • Um, which video is this?

  • Breaking news?

  • Oh, no, don't I just searched breaking news on get, huh?

  • By accident.

  • I mean, uh, I'm looking at my YouTube comments.

  • Don't get up.

  • Okay.

  • Zak Solomon on live stream number.

  • Um, Lifestream number Internet.

  • It's so slow.

  • I won't even tell Mae which number it iss Liszt.

  • Remember 1 56 Let's see if this comes up.

  • Live stream videos.

  • Lifestream 1 56 Meet the Landers.

  • The revolutionary new standing is from featuring the latest in high tech advancements.

  • The Landers set up in just minutes and come with Thank you very much.

  • Um, all right.

  • Where are you?

  • Zak Solomon?

  • There was a comment here about breaking news.

  • Let's get that ad fine.

  • It's a job here.

  • Uh, soundcloud soundcloud dot com Solo mas slash coating train breaking news.

  • Oh, it's gone here we go.

  • So this one thank you.

  • To Zack made this one.

  • I'm I'm here for all of your coding.

  • Trade breaking news, that other sound effects that I could use throughout these live streams.

  • All right.

  • Sorry for that.

  • Digression.

  • I am getting myself ready for the coding challenge beginning of today.

  • Okay.

  • Um all right.

  • Hello.

  • My life talking.

  • Yes.

  • Going great.

  • This coding challenge is brought to you by water.

  • I have water today, and I didn't last time.

  • My throat is killing me after my life street.

  • Okay?

  • She rose is a water.

  • I drink it and then I have to go pee, which is what I feel like I have to do right now, but I'm going to do this coding challenge nonetheless.

  • Uh ha.

  • He dino asks, Can I code my data structures?

  • Homework in p five.

  • I would love to know if that's what I mean.

  • Certainly you can do data structures in p five, which is just a library for javascript, and you can create data structures in javascript and visualize them with p five.

  • But I don't know what your homework is exactly.

  • So your homework is creating linked list in c++ then doing it.

  • P five won't do you a lot of good, but, um, I have some videos where I do different data structure stuff in javascript, and that will help you.

  • All right, um, let's begin.

  • Hello.

  • Welcome to a coding challenge by Neary Numbers.

  • All right, so, uh, wait, hold on.

  • I want a reference.

  • The seven segment display.

  • Uh, Schiffman Coding train.

  • This really should come up.

  • Here we go.

  • This is making me crazy.

  • Uh, okay.

  • Um okay.

  • Hello.

  • Welcome to a code and challenge.

  • Now, I recently did a coding challenge Number 117 about the seven segment display.

  • And there was weird code in there like this.

  • Like, vow.

  • Greater than greater than shift ampersand 10 my goodness.

  • What is this?

  • I did something called bit wise Operations.

  • This is actually a bit shifting and bit masking.

  • And let me tell you, I did not explain it well at all in the video.

  • If I scroll down, look at the comments.

  • So money of the comments were I did not understand that pit shifting stuff.

  • So I've decided to do two coding.

  • Challenge is the 1st 1 I'm doing right now about binary numbers.

  • So if you don't even know what binary numbers are, you're in the right place If you want to.

  • Kind of think about maybe a creative project you might make around binary numbers like a clock, that is the time is displayed in binary were also in the right place.

  • I am going to try to in this coding challenge, make a What am I doing?

  • I can't just start over.

  • This is my one Mulligan, which I say every time.

  • Now the coding starts.

  • Uh, okay.

  • Okay.

  • Come on.

  • Energy, energy, excitement, Happiness.

  • Goading time.

  • Hello.

  • Welcome to a coating challenge about buying Mary numbers.

  • Now, I previously did a coding challenge number 1 17 about the seven segment display as displayed right there.

  • And I had some weird code, innit?

  • Like bow greater than greater than shift ampersand one.

  • What eyes is that?

  • Well, this is a bit shifting operation, and this is a bit masking operation, and I sort of explained it, but not really in that video.

  • In fact, I explained it rather terribly kind of glossing over it, and I got a ton of comments, one with a few comments.

  • The ratio of of the percentage of comments.

  • Don't go up on all these tangents.

  • Editing is a thing.

  • Editing is the thing.

  • Last time last time, I just I think I have tea.

  • I'm going to make it through this.

  • We just gotta get going.

  • That's really tortures the live viewers that the chat will be full of rage again.

  • Wow.

  • Somebody every I don't usually do this many retakes, but today it just happening.

  • Okay?

  • Previous one was better.

  • Oh, it's the fake energy and enthusiasm.

  • Ah, my goodness.

  • All right, really energy.

  • This is authentic energy and enthusiasm.

  • I am genuinely excited to talk about binary numbers.

  • Don't.

  • Hello and welcome to a coded challenge.

  • This coding challenge is a coding challenge about buying Mary numbers.

  • Okay, why am I doing this?

  • Well, previously, I did a coding challenge called the seven segment display where I made the seven second display in order to make it, I did these weird operations with this greater than greater than in this ampersand.

  • And these operations are done his bit shifting and bit masking.

  • It really did not explain those concepts well or even at all in that challenge, and I got a bunch of comments saying I didn't understand the whole bits part.

  • So let me go backwards here in time t travel back in time or forward or whatever.

  • I'm just gonna do a video which explains binary numbers.

  • I'm gonna do to two challenges.

  • One to just explain binary numbers and two to actually explain.

  • Bit shifting a bit masking.

  • So first, uh, but I need to make these a coding challenge.

  • So what I'll actually do?

  • Let me try.

  • I think what might make sense is to build a little visualization system where if I type in a number of decimal number A regular number, I'll talk about what a decimal number isn't a second.

  • Then I see it in binary.

  • And maybe I could click on the binary number and change the bits and then haven't converted back and decibel.

  • That's what I'm gonna try to do.

  • So Okay, so, uh, if you never heard about binary numbers welcome.

  • I am going to attempt to explain first of all before even explained binary numbers.

  • We've gotta understand this concept of a base.

  • The base A number A number system, like a base 10 or a base 16 or a base 64 base, too.

  • A number system.

  • The base refers to the number of possibilities of digits that you can use to encode a particular number.

  • And it could be more than digits if we get beyond 10.

  • For example, so we taught based 10 with our 10 fingers and 10 toes is the way we traditionally think about numbers 10 or deca deck.

  • And that's why we call this decimal numbers.

  • So base 10 is decimal numbers.

  • There are 123456789 I count that wrong.

  • 123456789 10 10 digits.

  • When we get up to nine, right, we're counting up to nine.

  • The next one.

  • We have to go back to zero and then add an extra spot.

  • Then go to 11.

  • I'm going off the off.

  • The what now?

  • Could have base too.

  • Based too, is binary two possibilities by zero one one 011 This is me counting in binary 100 Right, Because I only have and I could sort of add zeroes here.

  • I only have two possible digits for each spot in my numbering system.

  • So this is binary now.

  • Other well known encoding systems like Based 16 or hex a decimal allow for wallow for 16 and, well, how can we have more than 10 well in Hexi Decimal when you get after nine, get the letter A.

  • Then B, then see the d E N f.

  • So you've got 16 possible digits.

  • That's why if you see something like this, f f this is a hex, a decimal number thinking.

  • I'm thinking, I'm thinking Okay, So the reason why this is important in computing is that computers actually store everything in memory, as in binary.

  • Ah, single spot for a single binary number is called a bit.

  • So we could say that if I were to imagine the computer's memory as a sequence of slots, each slot can have a zero or a one in them.

  • 2345678 Now eight bits is referred to as a bite.

  • So when you hear somebody say, this file takes takes up like 3000 kilobytes, well, a kilobyte is a certain amount of bites with a certain amount of bits.

  • Let's talk about how many spots in the computer's memory or required to store this information.

  • So I'm so tired today, thinking a break for a second.

  • I'm just looking at the chat.

  • I kind of want to start over again.

  • All right.

  • So you might have noticed when you were learning programming or P five or different things that, like, why there's so many situations where there are 256 possibilities, right the red for if you're gonna set the color of a shape you're gonna draw the range is between zero and 2 55 which is actually 256.

  • Possibilities were, interestingly enough, right?

  • What is the binary representation of 256?

  • It is if I just come back here and create another set of slots.

  • 11111111 All the bits being on in in a single bite is 256 counting from 0 to 2 55 It's actually 2 55 Excuse me, but it's the 256 possibility.

  • Counting from 0 to 2 55 is something you could d'oh within a single bite.

  • This is why many systems air optimized toe work with powers of two 248 16 32.

  • This is native to how the computer stores information.

  • So that seven segment display that looked like this it was designed to have eight possible options.

  • Because it could be the how the display is shown rendered can be configured in a single bite.

  • Right?

  • Is this spot a zero or a one?

  • That means that maybe this is either owner off.

  • What about this one on or off?

  • Now?

  • It's weird that it's called seven segment, cause why isn't it an eight thing with display?

  • Should be eight segments.

  • Well, that's because it also has an extra seven segments, but an extra spot for the decimal point.

  • Okay, so that's some background on buying ery numbers.

  • All right, so the next thing I'm gonna do here and edit this part out is, uh, write an algorithm, OK?

  • All right.

  • Okay.

  • I've got an idea.

  • So let's go back over to the computer for a second, because actually, Java script itself.

  • If I just, like, open up a consul here in the browser has functions in it to convert between decimal numbers and binary numbers.

  • What is the decimal representation of this binary number?

  • for example, what is the binary representation of this decimal number four turn?

  • That's really what I'm doing in this coding challenge.

  • I want to write an algorithm that can convert back and forth.

  • Now, you don't need to do this in Java script because Java script will do this for you.

  • So, for example, if I were Thio, if I were to have a binary number, I'm gonna call it Numb equal, and I'm gonna put it in quotes like as a string.

  • What was that number?

  • It was 01011010 I can use the JavaScript built in function parse int.

  • Give it that number.

  • And I must explain what base is that number in?

  • And that is and it's gonna give me the decimal equivalent 90.

  • So remember I said how?

  • Um, remember how I said F f is a number and Hexi decimal Well, I can now say parse int numb in base 16 255 right FF is 255.

  • And by the way, let's actually let's say parse into 12341234 That's also to 55.

  • So the parson function will take the string the text representation of any number of any base and convert it to decimal as long as you give it the second argument base, which is also sometimes referred to as Ray Dicks.

  • Is that you pronounce that?

  • I don't know.

  • Now what if you want to go the other way around?

  • Like what if I have the number 2 55 and I want to get that especially it's telling me here.

  • What if I want to get that?

  • What if I want to get that number in its binary representation?

  • Well, the two string method will do that, and I can actually give that a base or race If I say to 55 to string.

  • Actually, I just say to string, it's actually gonna give me an error because it's like you can't call a function on a primitive value like a number.

  • Luckily, if I put that in a variable, I could say numb to string.

  • Whoops, numb to string and I get the string 2 55 And now if I were to say num to string bass too, I get the binary representation so and I can also I could do this.

  • By the way, I think I put it in parentheses or something like that.

  • I will get that.

  • So now we've seen how javascript could do all this for you automatically.

  • Now's the time for me finally, to write some code.

  • I could just use that.

  • But I'm gonna be I feel like writing my I feel like learning about how this binary stuff works in a slightly more deep way.

  • So I'm gonna write my own algorithms to convert back and forth, and I'm also gonna create a visual system to make that interactive pause for a second.

  • And, of course, the chat is talking about whether 1000 bits is a kilobyte or 1000 24 bits is a kilobyte.

  • That's why I didn't actually say either way.

  • Um, let me get that.

  • I lost the chat here.

  • Um oh dot dot What is the dot dot mean Alka?

  • Um X or thank you.

  • Simon is also have a sound.

  • Great, but maybe it's not breaking news.

  • Breaking news from the chat.

  • Where's the company from?

  • Uh, it's a decimal, Followed by a dot Oh, how weird.

  • That's the weirdest thing I have ever seen What does that work?

  • So that works.

  • That's so weird.

  • Um, Okay.

  • Octel.

  • Yeah.

  • I wanted to mention that you could make up any.

  • All right.

  • Okay.

  • Where is my race?

  • Okay.

  • All right.

  • So let's look at how this works.

  • First of all, I'm not.

  • You know what I'm doing in this video?

  • It's just working, worrying about binary numbers and decimal numbers.

  • But it would be interesting to create your own as it challenged you after you watch this or just go do it right now.

  • Right?

  • A function that takes two numbers in in any arbitrary base and our one number in any arbitrary base and converted to any other arbitrary basis.

  • Because even though I talked about decimal or Hexi decimal or binary, we could just make a bet.

  • We could say base five or base three like base three would be 0123 10111213 So hard to do 2021 Right.

  • That's based space for not base three.

  • This is base for because there's four possible combination digits combinations.

  • Okay, so but what I want to do here is if we're in binary that easy.

  • And the easy way to start is too.

  • The easy way to start is to look at converting between binary and desk.

  • Binary two decimal will also do decimal toe binary.

  • But let's start with binary to decibel.

  • Okay, s 00 I'm just gonna make a little table manually.

  • Is 01 is one 10 is to 11 is 3100 then is for you.

  • Noticed something here we've got Sorry.

  • What's important here is we've got zero.

  • Well, hold on.

  • It's a little bit confusing here in the way.

  • Yeah.

  • Yes.

  • Sorry.

  • What's important here is what's important here.

  • Is this one.

  • This too?

  • And this four.

  • Look at the pattern.

  • Here.

  • One is a 110 is a 2100 is a four.

  • Can you guess what 1000 is going to be now?

  • Guess what?

  • It's eight.

  • Each bit represents the amount in decimal.

  • Each story each bit represents a power of two.

  • This is 2 to 0.

  • That's two to the one.

  • That's two to the 22 square.

  • This is two to the three.

  • So what we can actually do to convert from binary two decimal is used.

  • This pattern here is this is this first binary digits, zero or one.

  • So hold on.

  • Actual plans.

  • Practice this.

  • Let's go back to that number.

  • I think it was 94.

  • Boy, I think it was this.

  • I don't know if it wasn't that I think it was this.

  • So this is the way we could do it.

  • Basically, each one of these spots.

  • This is 2 to 0.

  • This is two to the one.

  • That's two.

  • The two.

  • That's two to the three.

  • That's two to the fore.

  • Heads to to the five.

  • This is two to the six.

  • This is two to the seven, right?

  • So now, zero times this is 01 times.

  • This is too zero times.

  • This is zero.

  • One times.

  • This is eight.

  • One time.

  • This is 16.

  • We got zero here.

  • What's what's 8 16?

  • 32?

  • This is 64 then this is zero.

  • So now I can add all this up.

  • 64 plus 16 plus eight plus two.

  • We've got 20.

  • Carry the +29 90.

  • Look at this.

  • We have now converted between buying a representation and decimal.

  • Okay, let's go.

  • Now.

  • and write the code to actually do this.

  • And also let's visualize it.

  • All right.

  • So let's start with just a number which equals 01011010 OK, and now we're going to write a function called binary two decimal a decimal, and it's going to take a value.

  • And what I need to do is just loop over all the digits.

  • And again, there's all sorts of fancy ways we could probably one line of code with a higher order function, but we're gonna do this in the long winded way to really understand it.

  • I equals zero.

  • I is less than val dot length, I plus plus.

  • Actually, here's the thing.

  • If my death binary number is a string, I actually want to start at this digit first, right?

  • Because I want I don't think this could be any given length, but I want I want to add things, starting counting it.

  • Zero.

  • So what I might do here is actually say now the index equals value dot length minus, I minus one, right?

  • So let's say there's eight of them.

  • I when I zero I want to look at the seventh when I is one.

  • I want to look at the six.

  • When I was two.

  • I wanna look at the fifth.

  • So we've got this now All I need to say is, um let me get the bit.

  • Is a value car at, um I Sarkar at Index, I want to get that.

  • Is it a zero or one?

  • And I also need to turn it into a number.

  • Just continues parts into for that which by default, will turn into a 01 in decimal without any.

  • And then I'm going to say on I need a sum.

  • Some equals zero.

  • Then I'm gonna say some plus equal power two to the power times bit.

  • So I'm basically doing exactly this.

  • I am saying four when I zero go to this bit, which is the last character in the string, and then multiply it by times two to the ice power shoot, then multiplied by two to the AIF power.

  • Okay, then when that's all done, I'm going to return, son.

  • All right, Now So we could test this idea out like I could just say now, a console log, binary two decimal.

  • No.

  • And look, we've got 90 down here This It's just like a 45 minute video so far, where all I did was convert one number Thio. 00:57:55.000 --> 00:58:

Good morning.

字幕與單字

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

B1 中級

直播#157:二進制數字和位移位 (Live Stream #157: Binary Numbers & Bit Shifting)

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