Placeholder Image

字幕表 動画を再生する

  • - I remember January 2019.

  • Do you remember January 2019?

  • Oh, it was a simpler time.

  • Something happened that month.

  • A video came out on the Internet.

  • This video was called, The most unexpected answer,

  • I'm looking it up, The most unexpected answer

  • to a counting puzzle.

  • And this video was from one of my favorite YouTube channels,

  • 3Blue1Brown, where I learn a lot of wonderful math stuff

  • and I get a lot of inspiration for stuff that I do.

  • And what this video was about

  • is it was about these two blocks.

  • There was a small block, and a big block.

  • And these blocks, they moved around,

  • they bounced into each other, they clacked.

  • It was like, the most beautiful clacking sound

  • I've ever heard.

  • And then they bounced into a wall,

  • and after awhile, just count up how many times

  • they're bouncing into each other,

  • and this weird thing happens, this number appears,

  • this number which is the digits of pi appears

  • based on how many times they're clacking into each other,

  • which is crazy.

  • Now, if you want to know why that occurs,

  • you should go and watch the 3Blue1Brown video series,

  • and even towards the end of that three part series,

  • 3Blue1Brown makes a connection to optics,

  • and there's so much beauty and wonder in there.

  • This is not a new concept,

  • you can find some other resources.

  • There's a wonderful paper from 2003,

  • I'm looking up the title of it now,

  • by G. Galperin called Playing Pool With Pi,

  • The Number Pi from a Billiard Point of View.

  • There's a Numberphile video,

  • and I'll also link to some other resources

  • where you can read about this particular phenomenon

  • and why it occurs in this video subscription.

  • But that's what not I do on this channel.

  • What I do on this channel is I code stuff.

  • So I am going to attempt in this coding challenge

  • to make my own version of 3Blue1Brown's

  • collision clacking magic wonderful thing,

  • and we're going to see like, can I really make this happen,

  • just in the browser and JavaScript,

  • and can I actually write some code that's accurate enough

  • to get the digits of pi?

  • And where does this all break down, and what happens?

  • So, let's code.

  • (whistle blows)

  • Now, to celebrate Pi Day,

  • I'm going to do something a little bit different.

  • I'm going to just start with a little bit of boilerplate code.

  • I kind of use the same stuff in so many of my examples,

  • maybe I can save you five minutes here

  • of retyping this part out.

  • So what I'm starting with is just a very basic

  • object-oriented system.

  • I have a class called Block,

  • and each Block has an x and y,

  • that's where it is in the canvas,

  • and it has a width, it's a square,

  • so the width and the height are the same.

  • And then when I want to draw it, I just draw it as an image,

  • and I've loaded one of my coding train characters.

  • The square character from the coding train.

  • I also have in here a little clack sound loaded

  • that I may or may not use,

  • and then, I have created just two blocks,

  • block1 appears at 100 with a size of 20,

  • block2 appears at 200 with a size of 150,

  • and then I am showing both those blocks.

  • Alright, so what do I need to do?

  • What I want to first do is give these blocks a velocity.

  • So let me go into the Block class and add a velocity,

  • I'm going to call it v.

  • And then I am also going to write a function called update

  • where I will say this.x += v.

  • So the idea here is it has a velocity,

  • and x changes by that velocity.

  • Then, I'll go back to the sketch,

  • and let me give them a velocity,

  • like the block1 is going to have a velocity of zero,

  • and block2 will have a velocity of negative one,

  • and then I should be able to say also here,

  • I can just call update for both of them.

  • Update, update.

  • V is not defined, did I really forget the this dot,

  • already, so already in this challenge?

  • I think that's what I did, I totally forgot this dot.

  • Oh, this dot this dot.

  • So now what I need to do is I need to figure out,

  • how do I check if the two blocks

  • have knocked into each other?

  • Okay, the way that I would do that,

  • let's write a function, I like to do everything

  • in the class when possible.

  • I'm going to write a function called collide,

  • and I'm checking if I'm colliding with another block,

  • call it other.

  • So I'm checking if this block

  • is colliding with some other arbitrary block.

  • So how do I know?

  • If this is block1 with an x and a width,

  • and this is block2, with an x and a width,

  • I know that they are not intersecting

  • if the left side of block2 is greater

  • than the right side of block1,

  • or if it was on the other side, right?

  • If the left side of block1

  • was greater than the right side of block2.

  • Otherwise, they must be intersecting each other.

  • And I know this is a really simple situation,

  • I don't need to check y's and heights,

  • because they're only moving along

  • this one-dimensional horizontal space.

  • By the way, the math is going to be a key concept here,

  • and where I'm getting to that,

  • if you know, you're like, why not the math?

  • Talk about the math!

  • So now I can say, I can look and basically say, like,

  • if this.x + w,

  • that's the right-hand side,

  • is greater than other.x, other.x, right?

  • Oh no, is less than, right?

  • Or, if this.x is greater than the other.x

  • + other.w,

  • and this has to be a this dot, alright?

  • So now, I'm going to say,

  • println, oh no, print, not collide,

  • not collide, otherwise,

  • print collide.

  • Let's see if I got this right.

  • So it's moving, it's moving,

  • oh, I got to call this function, that would be nice.

  • So I'm going to say block1,

  • 1.collide block2.

  • So I'm adding that in, and it's moving,

  • not collide, not collide, not collide, not collide,

  • not collide, not collide, it's going to collide.

  • It's colliding, it's colliding, it's colliding!

  • Eventually, it's going to get to the other side,

  • go to the other side, get to the other side,

  • not colliding anymore.

  • Okay, my algorithm was correct.

  • So, really if I want that,

  • I want that to just return true or false.

  • So what I'm going to do is,

  • I'm actually going to say,

  • I'm just going to, I could write return,

  • write return false here, but another way I could do this

  • is just say return not, not this expression.

  • This is a test to see if those two blocks

  • are colliding with each other.

  • Oof, alright.

  • If block1 collides with block2,

  • now what I want to say

  • is block1.bounce block2.

  • Alright, I want them to bounce off of each other.

  • So certainly at some point we're going to have to deal

  • with the fact that there's a wall here.

  • But right now I'm just looking at these two,

  • and what I want to do is I want to calculate

  • the new velocities from perfectly elastic collision.

  • So this has a velocity, this presumably also has a velocity,

  • maybe it's moving that way, maybe it's that way,

  • maybe it's at rest.

  • And, in an elastic collision, there's no friction,

  • there's nothing else here in this environment.

  • They're not like squishy things,

  • no momentum, no energy, nothing is lost.

  • So I need the formula for an elastic collision.

  • Luckily, I have that open right over here,

  • and then you can see this is a formula

  • that's following</