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