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!