Subtitles section Play video Print subtitles â™ª I will refactor this later you know â™ª - 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.