Placeholder Image

字幕列表 影片播放

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

  • You can, of course always read the Wikipedia page,

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

  • Links to more about

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

  • look, it's already happening!

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

  • Let's be a little more methodical about this.

  • Let me actually start with,

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

  • Forget about the alpha.

  • 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 now,

  • we can see that there are actually three different sections

  • in a way, of this--

  • What is it called?

  • Say it with me, Sierpinski Triangle.

  • So this is what's amazing.

  • The Chaos Game this very simple algorithm,

  • will produce a perfect rendering of a fractal pattern.

  • This one, very famously is known as the Sierpinski Triangle.

  • Very little code,

  • I've got the Sierpinski Triangle right there.

  • (bell dings)

  • So this coding challenge is actually complete.

  • But it's not over.

  • I mean the video is going to end,

  • at some point when I stop rambling.

  • But let's think about some things that we could do.

  • For example, anytime you make something like this,

  • you might think to yourself,

  • what are some parameters that I could start tweaking?

  • Well, why should I start with only three seed points?

  • Why should I only go 50% of the way

  • each time there?

  • Why should I have an equal probability of

  • going to each one?

  • Aren't there some other things we could apply to this?

  • So, this is now your exercise.

  • Create your own version of this.

  • Could you make an array of seed points?

  • Could you vary the distance,

  • the percentage distance you go to each point?

  • Could you vary the probabilities of how you pick each point?

  • What else could you do with color?

  • How could you render this?

  • Could you connect the lines, could you use different shapes?

  • (gasps) What if you did this without a--

  • And you had to erase the background.

  • So you're actually like,

  • piling up all the points in this big array.

  • There's so many possibilities.

  • I'm going to come back

  • in a second part and at least do the part,

  • I'm going to refactor this

  • later, but not too much later.

  • Where I'm going to at least make this

  • an array of seed points,

  • and play around with that 50% value.

  • So I'm going to do that much.

  • Don't watch that video yet,

  • if it exists.

  • If it doesn't exist you can't watch it.

  • Try this on your own and then share with me

  • your results and then you'll see my extra

  • little step with this.

  • And that will be that.

  • Okay, muah, muah.

  • Oh, oh if you're looking for the code by the way.

  • Especially when I do something

  • in the p5 web editor,

  • you could just go to this particular URL,

  • which will also be in the video's description,

  • and I do have a page about this challenge

  • also on the codingtrain.com.

  • Okay, thanks and see you next time.

  • (bell dings)

  • (upbeat music)

  • (bell dings)

(train whistle toots)

字幕與單字

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

B1 中級

編碼挑戰#123.1。混沌遊戲第一部分 (Coding Challenge #123.1: Chaos Game Part 1)

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