- Hello and welcome to Coding Challenge:

the Chaos Game, part deux (says in French),

electric boogaloo (laughs),

I don't know what I'm talking about.

Thank you to Espen Larsen, @drcircuit on Twitter

for creating the "I Will Refactor This Later" song,

this coding challenge is in honor of that song,

because, guess what...

"Later" is now,

I will refactor this now.

So what I'm going to do in this coding challenge

is expand this idea of the Chaos Game.

Instead of merely creating this Sierpinski Triangle,

I'm going to make a version of this

where there could be more than three points, seed points,

and that, as the points move,

as the newly random point move moves

from point to point to point,

I might move by a different percentage than 50%.

So if you didn't watch the previous coding challenge

where I made this,

you could pause now and go watch that,

or you could just stay here with me right now,

let's be together, let's be friends on the Internet,

programming stuff, okay.

So the first thing that I wanted to refactor this,

I really want to play this song again,

but I'm not going to overdo it,

I'm going to use it sparingly,

otherwise people will get irritated and annoyed

and I'm sure I will hear about it.

The first thing that I wanted to do

is I am going to make a array called seed,

maybe I should call it seed points,

let's just call it points, I don't know,

let's call it points.

And instead of having ax, ay,

what I'm going to do in this array,

let's get rid of this.

First, I just want to recreate this exactly,

I am going to, say I'm going to have three points,

and I'm going to create a new point,

which is a vector,

I'm going to use vector createVector function

to make a new point anywhere randomly in the canvass.

I know I've run a little bit out of space here,

but that's fine.

Come on, a little bit further over,

wow, there's a space for a semicolon.

And then I'm going to say points.push(v), okay.

And then I'm going to have a point called current,

which is also going to be...

A vector, a random vector.

There we go, there we go.

So now what I can do is again,

I have just refactored this

to instead of having separate x, y variables

for all four points, I have an array

that keeps my three seed points

and I have my current point in,

all current points at separate variable

and both of those are p5-vectors.

A vector being an object that can hold an x, y, and z.

But I'm not going to use the z right now,

although, you could do this in 3D, oh, you should,

you should do this in 3D.

I'm not going to.

Alright, so then I'm going to say,

for (let p of points),

and I'm going to say, point(p.x, p.y);

so we should see, there we go.

Those are my first three seed points

and then what I'm going to do here is

random the length.

And this is actually now,

oh, you know what, I don't even need to do this,

guess what, the random function in p5,

I'm going to say like next equal to random function in p5

will give me a random object out of that array.

Now if I want to pick them with a different probability,

I'd have to do something different,

but here, this next is now going to be one of those

three points randomly.

And then all I need to do is say,

stroke, I'm going to still give it this color,

and then I'm going to say,

next.x = lerp, this.

So I'm lerping, but I'm going to lerp between next

and the current.

Oh, and current is the result of that.

So the current is the thing that's moving

and it's really doesn't matter,

but I like to think of it in this order.

Current is moving and I think there's actually

a lerp() vector function,

so I could do this in one line of code.

That's another "refactor this later-now" (laughs).

So there we go,

and then all I need to do

is draw the point,

all I need to do is draw that point...

(keyboard tapping loud)

And here we go, look at this, ta-dah!

Now, one thing I should probably do

is also reset it.

Let's actually, all of this stuff here,

is kind of the process of,

let's right a function of resetting,

like, I want, right now it's like resetting

every time I change the code,

because of the p5 editors configured it

to, like, relaunch the sketch,

but I think what I would prefer to do here

is right my own function called reset(),

this is a nice refactoring.

And I need to empty the array,

and I'm going to say points equals, here.

So this function reset()

will just sort of reseed the environment.

And I could do it whenever I click the mouse,

but just for right now, I'm going to say,

if frameCount modulus, like, 100, equals zero,

then reset().

So what that's going to do is every 100 frames, right,

because modulus of the number 100 will equal zero

any time the frameCount is divisible by 100

with a remainder of zero.

So you can see, over and over again, this is going to,

so, no, I'm, I'm here, I have refactored this.

But now that I have refactored this,

there are so many possibilities,

oh, this is exciting, okay.

So, for example, I could just do this.

No, oh, yeah, look.

Now, interestingly enough, I don't really get

a pattern that's super interesting to look at

with four points.

Kind of accidentally I sometimes am.

And do so what happens if have eight points.

Whoa, this is crazy.

Now, probably what I would want to do,

what might make sense for me to do,

is place these points around a circle,

just, I mean, it's interesting to have them randomly,

but I think I would prefer,

just to sort of figuring out what I want to with this,

to have all those points around a circle, right,

so you can think about it, actually,

this was a way of getting my equal lateral triangle

that I was looking for.

So what if I have eight points and then I get

some kind of like hexagon, octagon, septagon,

whatever the number of sides is,

based on the number of points.

Alright, so what I'm going to do here, actually,

I'm going to have a fixed set of points, right.

So the points are, I'm just going to do once in set-up.

And what I'm going to do is I'm going to use the constant.

Const n equals eight,

I know I could be using constants other place of the code,

and if you want to know more about consts,

I made a video about it

where I got a bunch of pics wrong, but you can watch,

so you might find a different resource for that.

But so, I just, now I'm making n points

and what I'm going to do is say the angle

is TWO_PI divided by, aye, that's a bad idea,

because I don't want to divide by zero.

So, alright, we'll say, um...

Oh, it's, I know what it is,

it's i times TWO_PI divided by n,

that's what it is, right,

because I want to have, I'm looking for,

if n is four, for example, I want zero degrees,

90 degrees, 180 degrees, 270 degrees.

It's probably going to go the other way,

because the screen is flipped, but that's the idea.

So now, what I'm going to do is say,

createVector at...

Some number like, let's just do 200

times cosine of the angle,

oh, you know what, I think there is p5.Vector from

p5.Vector fromAngle,

I think, is a function, angle.

So it's going to make a vector from that angle.

And then I can say V dot, um...

V dot

Multiply 100,

and that's working,

but I need to translate to width divided by two,

height divided by two.

And now we have these points in the center,

of course I also, if I wanted,

I need to do that here, okay.

So there we go, we can see now

I've created eight points around

and let's actually use, um,

let's make that a little,

ooh, why is this down here?

Ooh, oh, there's a weird mistake,

a goofy mistake happening.

Oh, because when I reset, err,

this is kind of, you know what I'm going to do?

The translator's fine, but it's bothering me,

I'm just going to make life easier on myself

and say, add, width divided by two,

hight divided by two,

I'm just going to move that to the center manually

by adding that to the vector, okay.

Now what I want to do is multiply it

by, like, width divided by two, or something.

Okay, great, ha, so now you see,

those are all my points,

we're still playing the Chaos Game.

Now what I want to do is I'm going to have

a variable called percent.

And I also, I just want to make, like, a lot more points

really quickly, so I can just sort of see the pattern.

And what I'm going to do now is,

I am going to try, I'm going to when I lerp,

I'm going to lerp by that percent

and let's try different values.

So let's try, so let's go back to point five

and this is what I get.

Let's try point two-five.

Interesting.

Let's try point one.

Let's try n of four,

point two-five.

(bell rings)

Alright, I'm back.

Nico Monsoon in the chat said,

"Try three, just to see if you didn't break anything."

So I made the point n equals,

I made n equal three,

with the percentage of point five,

and we could see I have the Sierpinski Triangle.

Actually, if you look on the Wikipedia page for Chaos Game,

you'll start to see a bunch of these.

"A point inside a square repeatedly jumps

"half of the distance towards a randomly chosen vertex,

"but the currently chosen vertex cannot be two places

"away from the previously chosen vertex."

so this is interesting, right?

So I could actually start to create

some of these patterns by modifying

how I pick a particular point.

So this one actually would be nice.

Let's do the pentagon one.

"A point inside a pentagon repeatedly jumps

"half of the distance,

"but the currently chosen vertex cannot be the same."

This is going to be an easy one for us to implement.

We just need to get a new random number

that's not the same as the previous one.

So, um, so let's go back here.

Let's first make this five, okay.