- 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