字幕列表 影片播放 列印英文字幕 (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!