Placeholder Image

字幕列表 影片播放

  • (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.