字幕列表 影片播放 列印英文字幕 (train whistle blows) - Hello, I am here. It's February 13th, I am feeling the love. I would like to express my love for processing. My first programming love, my one true love, processing. And I'm going to express it by creating this. This is a famous shape in mathematics called the cardioid, if I'm pronouncing that correctly, cardioid like heart, it's kind of like a heart and today there might be some other videos after this one where I make all sorts of kind of heart patterns. But I just want to make this pattern. Now, if you want to learn more about this shape and where it appears in mathematics, I want to point out to you this wonderful YouTube channel called Mathologer. Mathologer has a video called times tables Mandelbrot and the heart of mathematics and my heart is with mathematics and processing and code and all that sort of stuff. Now I should also point out that rendering an animation of these times tables in processing has been done before and most notably by Simon Tiger and one of the things I love about processing this year is there's been this world wide set of processing community days. Recently in Amsterdam, Simon presented his work on creating this very large poster about the times tables at Processing Community Day Amsterdam. I was just at Processing Community Day New York over the weekend and my heart is definitely full of love and wonder with all the things people are doing with processing. So this video is dedicated to all of the people who are working on processing and p5.js and fellowships and everything. So, this shape, you can find it in looking at the ways light reflects around a circle. I mentioned the Mandelbrot set. You can see it right here as in this bulb. This first bulb of the Mandelbrot fractal set is a cardioid shape. And it's kind of amazing that it appears in this context of time tables. So, and I think if you watch the end of the Mathologer video there's this animation at the end and I was just like "whoa! That looks so cool!" I kind of want to show it to you now, but I'm just going to program it in and hopefully it will be at the end of this video, Cause somehow I'll program it. So let me talk about how this works: Happy February 13th everybody, I love processing. Okay. Now, let's say, and this is good timing, because in my course at NYU this week, just yesterday we were talking about polar coordinates, and I'm going to need to make heavy use of polar coordinates for this particular visualization. So we're going to start with a circle. And we are going to divide this circle equally into parts basically, almost like a pie chart. The way I'm going to represent that is just by equally spacing out a set of dots. I have one, I have two. Now I need eight more. So I need four along the top and four along the bottom. This is for me to get 10. So One, two, three No that's three! (laughs) One, two, three, four, one, two, three, four. So now, let me number them: Zero, one, two, three, four, five, six, seven, eight, nine. So I want to do times tables, meaning I want to multiply each one of these numbers by two and whatever number I get, then I want to connect it to that. So, two times zero is what? Zero, so that's just here. One times two is what? Two, so that connects here. Two times two is what? It's four. Three goes to six. Four goes to eight. Five goes to 10! There's no 10, well we wrap around, we use the modulo operator, so we use the remainder. Basically, if we keep counting, like this would be nine, 10, 11, 12. So five goes to 10, six goes to 12, seven goes to 14, and eight goes to 16. Nine goes to 18 et cetera. So you can see here, that this shape is sort of starting to emerge. So, let's first start by just creating exactly this. Alright, so, let me start writing some code. Circle! Hmm..ok so now what I need is a number of points. So let me call this the, what is this? The scale? The divisor? I don't know what to call this. Total points! (typing) - Just call it total. Alright. So, I'm going to make it a float, and let's keep it as an integer for right now. I'm going to change it to float in a little bit. You'll see why. So now I'm going to, I need to do a loop, and draw all those points. I want the center of my visualization, I want everything to be oriented around the center so I'm going to translate to the center width divided by two, height divided by two. And then this is where that polar coordinate thing comes in. I need to figure out, the way I'm going to find all those points, is, right there are how many slices of pie here? One, two, three, four, five, six, seven, eight, nine oh 10! How convenient. So each one of these angles is two PI divided by 10. So that's where each one of these points goes. So I'm going to say, this delta angle, I'll just call it delta, equals two PI divided by total. And then, another way I could do this is to just use map. I could say angle equals map I, which goes between zero and total, between zero and two PI. That might be an easier way. Then I don't actually need this delta. And then, I need a radius, which is I need to know, what is the radius of this circle that I'm visualizing? So, for that, let's just make the radius the width of the window divided by two. Let's call that r, which is the width of the window divided by two. And then I want to say x equals r times cosine of the angle. Y equals r times sine of the angle, and I will refer you to my video about polar coordinates to understand these particular formula. And then the next thing I want to do is draw a point. I'm going to make an ellipse, fill 255, ellipse at x,y... Oh! Oh! (bell dings) Thank you Ben Fry! I'm going to call this circle. There's a circle function now. 16. I love using these. There we go, look. You can see there's my 10 dots around the circle. Now I probably want to be able to see that circle, that would be nice too, so let me say, stroke 255, no fill, ellipse and the translate needs to come before drawing this. I just want to draw, ah no! It's a circle, it's a circle! At zero, zero, r times two right? Because the circle function expects the diameter, which is the radius times two. So now we can see. There we go! (blows kiss) - I have my circle with all my points. Now I need to do my math thing. I'm going to have a value, I'm going to call this N. So N is going to be: "what is the times amount that I am going to multiply each number by?" So there's a lot of different parameters in the system, and you can play with them to create all sorts of different kinds of patterns. Hopefully we'll see some of those by the time we get to the end. But right now, I'm going to make this a two times table to try to get that heart, that cardioid. So, I think I should call it factor. Let's call that factor. I'm going to put that up here. Int factor equals two. And I'm sure there's a nice way I could do all this together, but I'm going to do this as a separate loop. So now I'm going to do this again. Obviously I'm going to re-factor this later as I like to say. But what I want to do, is I want to say, a is I. I want to go from point a to point b which is I times factor. Those are essentially my indices of where I am connecting the lines. Zero goes from zero, one goes to two, two goes to four. Then I need a function, and actually, this could be really useful, for me to write a function that returns the p vector for any given index. So get vector for any given index. So basically I can say the angle is map that index, which goes between zero and total between zero and two PI. The vector equals a new P Vector at, and this should be a global variable, r. I cannot set the width up here, because it doesn't know what the width is. I'm going to make this r here, and then I'm going to say r equals width divided by 2. I could make that an argument to this function but I'm just going to keep it as a global variable. Make a new P Vector to r times cosine. Actually, P Vector class has something in it. P Vector from angle, angle. That will make the vector pointing in that direction and then I just want to multiply it by the r to set it to be that. So, I'm using some vector stuff here, which I realize is now maybe a little bit beyond the scope of if you were coming to this video just without knowledge of how the P Vector class works in processing. Or in p5, which there's a p5 Vector. It's just an object that has an x and a y. So it's a nice way for me to store the x and the y together, and I can make the x and y components from an angle, and then I can scale that by multiplying it by some radius. So it's really got that sort of polar coordinate thing built into it. So I'm going to multiply it by r and say return r. And then actually, since I'm here refactoring this, I can say right here, P Vector V equals, what did I call that function? Get vector based on I. Then I should be able to say, v.x, v.y. So I basically just took that code, and put it into a function because I'm probably going to need to do this quite a bit. And I don't want to return r, I want to return v. Ooh! I'm liking what I'm doing so far. (laughs) - I think this might actually work. Now I want to say get vector for I. Then get vector for I times factor. But guess what? It's not just I times factor. So first of all, this should be a P Vector, this should be a P Vector. It's not just I times factor, although I guess I could rewrite this function. It depends on where I want to put this. Actually I'm going to put it here.