- 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!