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