 ## 字幕列表 影片播放

• (train whistle toots)

• - Hello, welcome to A Coding Challenge,

• The Chaos Game!

• So this is the Chaos Game playing out right behind me.

• This is actually code that I wrote at this

• wonderful event that I recently got the chance to attend,

• called ThinkerCon.

• Thank you to the organizers of ThinkerCon:

• Destin Sandlin, Henry Reich, Emily Graslie, Sabrina Cruz,

• and Robert Krulwich.

• Links to their information and websites in

• this video description.

• This was like a mind blowningly awesome event.

• And while I was there,

• I programmed in front of people,

• underneath a rocket, a Saturn Rocket depicted here,

• with James Schloss.

• Now I never met James Schloss in person before,

• but you might remember that I used James Schloss's

• YouTube channel as inspiration for other videos.

• Like the tesseract over here.

• So James and I, I think he used like Julia and VI.

• But I programmed this Chaos Game algorithm,

• in the p5 web editor and that's exactly what I'm

• going to do right now!

• In homage to the wonderful time I had at ThinkerCon.

• So, what is the Chaos Game?

• So first of all, I would recommend this Numberphile video

• about the Chaos Game for background.

• It's an inner process of picking random points,

• and doing some math with those points,

• and seeing what happens afterwards.

• So, rather than try to define it.

• very tempted to do a dramatic reading of it.

• I'm just going to describe to you how it works

• over here on the whiteboard.

• Let's say we have a two dimensional plane.

• This is a two dimensional plane,

• and what I'm going to do,

• is I'm going to start with a set of seed points.

• And maybe I'm going to put those points in as

• an equilateral triangle.

• But, as you'll see eventually, at some point.

• I could have four seed points, five seed points.

• I could put them anywhere.

• And then what I'm going to do,

• is I'm going to play the Chaos Game.

• And the first thing I'm going to do is

• pick a random point on the wall.

• Here we go.

• (marker clicks against board)

• Wa-hoo!

• (chuckles)

• That worked the first try earlier,

• I was doing another take

• and I had to do that like six times.

• I'm very lucky now.

• Okay, so.

• This is my first random point.

• Now what I'm going to do, is I need to pick

• a random number.

• 1, 2, or 3.

• A, B, or C.

• 0, 1, or 2.

• How do I do that?

• Do I have a--

• I don't know from my--

• Oh! I have a book of random numbers!

• 5, 4, 1, 5, 7.

• So why don't we do 7 modulus 3.

• Right, 7 divided by 3 is 2, remainder 1.

• So I picked a 1!

• 0, 1, 2.

• So, if this was 0, this was 1, this was 2.

• What I'm going to do now,

• is move halfway to this point.

• And now I have another point.

• Ah-ha!

• Okay.

• Now, pick another, another random number.

• 9, 8, 8, 1, 8.

• So I'll just use the last digit, 8 modulus 3 is,

• 8 divided by 3 is 2, remainder 2.

• So 0, 1, 2

• So now, I'm going to go halfway to this point.

• And I could keep doing this over and over again.

• And if you watch the Numberphile video,

• you'll see somebody do this, actually physically with...

• Rulers and pens and all sorts of artistic talent.

• I have none of those things. (chuckles)

• But I do, know a little bit about programming.

• And so, this is something I can program.

• So let's go actually program this,

• and then see what happens.

• Alright, so I'm going to use the p5.js web editor.

• I think this is a simple enough project.

• I'm going to go here.

• I'm just going to go to the editor homepage, here.

• And I'm going to name this Chaos Game 1, save.

• Alright, so let's start this off.

• So, I've got my two dimensional canvas.

• What I need first are those seed points.

• So I'm going to do this in a very simple way,

• and then... ("Refactor" by Espen Sande Larsen)

• ♪ I will refactor this later you know

• ♪ I will refactor this later

• ♪ I will refactor this later you know

• ♪ I will refactor this later

• Alright, thank you by the way

• to Espen Larsen, drcircuit on Twitter,

• who created the "I'll refactor this later" song,

• which is like my new favorite thing in the whole world.

• Espen's music in this video's description.

• So I'm creating these 3 points.

• You know what, I'm going to put them in a random spot.

• I'm going to make the seed points themselves,

• actually random.

• Why not, right?

• So I'm going to have a point A,

• point B,

• and a point C.

• So I need, 3 points.

• A X.

• Am I standing in front of the code?

• I kind of am.

• So let me move this over,

• and let me move this over.

• Let me just use a window width

• and window height,

• so I cover the whole thing,

• and then I'm going to make it a black background.

• I'm going to move this a little bit over.

• I think we're good!

• Alright, so what I want to do now,

• is let me draw those points.

• So I'm going to say stroke 255, strokeWeight 8.

• So I just want to see those points A X,

• I just want to see them.

• So, we should see...

• 3 points now.

• How come I don't see any points?

• Because I am drawing the background,

• over and over again in draw.

• Let's do this here.

• Okay.

• So every time I run this sketch,

• I am going to now have three new points.

• So now, let's play the Chaos Game.

• So what I am then,

• I need kind of a global X Y.

• I need a global X Y,

• and what I'm going to do with that,

• is I'm also going to

• have X Y be some other random point,

• and what I'm going to do in draw,

• is say stroke.

• Let's make it like a nice RGB color,

• and I'm going to draw point it X Y.

• And we can see, okay there it is.

• Every time I run this,

• I have my three seed points,

• and I have this new pink dot, which is the X Y.

• So now, what do I need to do?

• What I need to do, is I need to say

• let me pick one of those three points,

• and move halfway there.

• So the first thing I need to do here,

• is just pick a random number.

• 1, 2, or 3, right?

• But this is going to give me a floating point number.

• So what I want to say now actually is

• floor that, which will take off the decimal place,

• and then, if I get a 0, I'm going to do one thing,

• otherwise, if I get a 1, I'm going to do another thing.

• And I know, I know there's, but just remember--

• ("Refactor" by Espen Sande Larsen)

• ♪ I will refactor this

• I know, I'm overusing this sound effect right now.

• But it's the first day, I have to use it!

• ♪ I will refactor this later

• ♪ I will refactor-- ♪

• It's just, it makes me so happy.

• You know

• ♪ I will refactor this later

• So if I pick 0,

• what I want to do is move halfway,

• I want to move halfway,

• right to this point.

• Guess what?

• I could use some math, right.

• I could take the X of this, the X of this.

• Divide it by 2, I've got a new X.

• There is actually a function in p5,

• called lerp.

• Lerp stands for linear interpolation.

• Meaning, interpolate from one number to the other

• in a linear fashion, by some amount.

• So if I want to linearly, I don't know if that's a word

• don't say that.

• If I want to linear interpolate, if I want to lerp

• from this point to this point, by .5.

• Watch what I get to do.

• 50%, that's halfway there.

• So I'm going to say X = lerp x, ax, .5.

• And I'm going to do the same thing for Y.

• And then I'm going to do.

• A here, I'm going to do with bx,

• The Chaos Game is already happening over here.

• Look, now I only have two points.

• So you can see all the points end

• up on just that one line, right.

• Every time I restart this, all the points end up going

• between point A, points 0 and 1.

• But now, let's make some magic happen.

• Whoops!

• Let's do the last possibility.

• Let's plug in the seed,

• and see what happens.

• Okay.

• Here we go.

• What's going on?

• Do I see some pattern emerging here?

• Well, I am playing the Chaos Game.

• This looks like it could be kind of familiar.

• a perfect equilateral triangle.

• So actually, this won't be an equilateral triangle

• but, it'll be simpler.

• Let me just put these seed points at the corners.

• So I'm going to put these seed points at the corners,

• and then we're going to see what happens.

• So we can start to see something emerging here.

• This pattern that's emerging.

• It's happening kind of slowly.

• So what I might like to do.

• A couple of things I might like to do.

• First of all, I'm going to make the points

• a little less thick.

• Then, I'm also going to give them

• a little bit of alpha.

• Again, I have no artistic talent.

• So I shouldn't do what I'm doing.

• And then I'm going to draw,

• 100 of them, each time through draw.

• There we go.

• There we go.

• Look what's happened.

• Oh, it's so pretty!

• It's so beautiful!

• Alright.

• Oh, and you know what we could do, which is fun?!

• Why not?

• What happens if I give it different colors.

• Like here,

• if I pick 0, let's try this one color.

• If I pick 1, let's try a different color.

• And we can see