- 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