(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. I need somewhere to deal with the fact that when I do six times two I get 12, but I really just want two,

because 12 divided by 10, is one, remainder two. So 12 modulo 10, is 2. The modulo operator, which I have a video, thank you Golan Levin, about modulo, is also linked now up there

somewhere in the corner of this screen, okay. So now, right here I

could just add that here: modulo total. So I don’t think I

actually drew those lines, but if this is still working that’s there. Now, I should be able to say: line a.x, a.y, b.x, b.y. There we go, it’s backwards! Wait it’s not backwards,

because I started over there. Interesting. So there’s a couple of things I could do. I could just call a scale

function to just flip it the other way. I mean, what’s backwards

what’s forward who knows? I’m just saying, in terms

of watching that Mathologer video, it was oriented

the other direction. I also feel like ours needs

to be a little bit smaller than the actual size of the window. So let’s make r equal, let’s

give it a little bit of buffer, like 16 pixels. That’s a little bit nicer to see. Again, my visual talent

skills are so nonexistent and I know people are watching

this who are designers with artistic vision and

you will make something beautiful out of this

and I can’t wait to see. Aha! I saw a chat message go by, which is really quite smart. Which is that, I could just

here, if this is the angle, this is the angle, all

I have to do is just, if I want it to start on the other side, I could just add PI being 180 degrees. Ooh! It looks right! Okay! Now, we’re getting somewhere. The mathologer uses the

number 200, I’m just going to, let’s go to 20 and see what we get. Ooh. That’s kind of interesting. Let’s go to 200. Whoa. There we go (bell dings) (blows kiss) – There is the cardioid. That is like beautiful, just on its own. And by the way, what’s

interesting about this, is this very similar if

not precisely the pattern you would see, if there

were a light source here and it reflected and bounced

around this particular particular circle. So, okay. Alright, it needs to be red, it needs to be oriented the other way, it needs to have an arrow through it. It needs to have a little

baby cupid flying by, lots of things. But I want to make this animation. So, there’s a bunch of

different things we could do. For example, this could be a variable. Let’s just look at that

really briefly, just to see. I’m going to say float. I’m

going to make it a variable here, equals 200. Sorry, int total equals map mouse x. I’m going to take the map function, mouse x goes between zero and width, and I’m going to map that

between zero and 200. Then I’m going to convert

that to an integer. So now, whoops. Oh! So then, good point, let’s

have this take a total. Then the get vector function

should have the total past N. Maybe there’s a different way of doing it, but now we can see basically,

based on the number of circles we can see, as I

move the mouse left and right, that increasing. So that’s one way I could animate this. I think it’s probably us to decide, a different way of animating this, which I will get to in a second, I think is possibly more interesting and it’s varying the factor. What happens if this

is a three times table? By the way, we could

just try that right now. So let me make this back to 200. Let’s make the factor 3. Look at that. Interesting. (lively music) – Breaking news, I’m

being told from the chat that this shape is called a nephroid. So this is a nephroid. If I would go to say, a factor four, look what I’ve got now. So this, and interestingly enough, we could actually make these

floating point numbers. Let’s just see if I have to

change anything in my code if I do that. I’m going to, I think. But, let’s see. So, I’m going to do this. Immediately, we’re stuck here, like these are no longer integers. So what if I make this a

float and this a float. Let’s have everything be floats. There we go. That worked. Let’s be sure about this. So that was factor three, lets

try factor two point five. Yeah, this is looking

like how it should look. This is actually doing

the same exact math, but it’s allowing for

the spaces in between. So what if I have two point two? That should connect with four point four. And we can do modulo also,

because seven point one would connect to 14.1 modulo 10. Sorry, seven point one

would connect to 14.2 modulo 10 would still be four point two. So this works with floating points. And now, we can create that animation. So what I’m going to do,

is I’m going to make this the global variable. factor. I’m going to start it at zero. Then I’m just going to

slowly over time say factor plus equals zero point zero one. Interesting. Oh! There’s the cardioid! There’s the nephroid. Isn’t that lovely and

beautiful and amazing? I just love this. Now, think of the possibilities. I have done the most basic thing, to just create this animation. At some point, it’s going

to get really crazy stuff is going to start to happen. But there’s so many other

parameters, there’s ways you could think about color here. I’m going to make a

javascript version of this that will run in the

browser that I will publish that you can look at, which is basically exactly the same code. I could look at this forever. I hope you enjoyed this. Dedication, long distance

dedication to my true love, the heart of mathematics and processing. (blows kiss) (energetic music) (bell rings)