- I love you! (laughs)

I'm here to make some mathematical hearts,

look at these formulas, if you plot these formulas,

you get a heart, I mean what could be better than that?

This one here might be my favorite,

although this one here is kind of interesting, look at this.

So we could try any of these,

but I actually want to try something

a little bit different here, I mean

I'm looking at this, and I know what formula they are so,

what I'm about to do is in no way magic whatsoever,

but I want to try to get a little bit of an intuition

for why that crazy formula makes a heart shape,

and how you might, basically, design your own

parametric equations to generate different patterns,

so there are a variety of different techniques for this,

oh look, rotated cardioid, oh I love the cardioid.

I have a whole video about the cardioid,

and we could just graph the cardioid

just with like one minus sine of theta, uh!

So many ways we could make the cardioid.

But, let's go to processing, my happy place,

my love, my true love, processing.

Can I put like emojis in the comments?

No, I cannot put emojis in the comments, it's so sad!

What did we do before there were emojis?

Like, this right?

Okay, now that we've gotten that out of the way,

that was very important, let me go back to the curve thing.

So, first thing that I want to do is,

this is going to be a lot easier if I think of

everything as oriented around the center of the window,

so I'm going to translate, the origin's in the top-left,

I'm going to translate to the center.

By the way, this channel, I shouldn't

call it the Coding Train, I should just call it,

Here's Another Example of Things

You Can With Polar Coordinates. (laughs)

Like basically every video I make is the same.

But, maybe that's the theme for this week,

so now what I want to do is I want to loop around

all of the points of a circle.

You'll see why in a second, I want to basically,

I want to say, for float a, which stands for angle,

I'm going to start at zero, I'm going to go all the way

up to two pi and I'm going to go by some increment,

I'm going to pick that arbitrarily,

although there might be reasons

why I want to pick different increments at some point.

So I'm going to have every angle from zero to two pi,

and I'm also going to make up a variable called r,

which is kind of like radius,

let's just set it to 100 right now.

And I'm going to say, once again,

here we go, sing it with me, it's the

♪ Polar to Cartesian coordinates song ♪

Autotune and the internet will fix that for me.

R times cosine of the angle,

y equals r time sine of the angle.

What I want to do here is I'm going to say no fill,

and stroke 255 and begin shape

because what I want to do is create my own custom shape

based on all of these points

oriented around the circular path.

Hopefully this will all start to make more sense to you,

so then I can call vertex, x, y, and then I can say endShape

and I can run this, and you have this, a circle, ta-da!

I have made a circle, the circle,

and by the way, if I would've changed

this increment value to something much higher,

you can sort of, well let's make it much more extreme.

You can see here like, I'm actually just moving around

the edges of a circle, and if I thought more

carefully about like two pi divided by six

then I might have a hexagon,

all sorts of possibilities like that right?

Two pi divided by six, there we go,

nice little hexagon there, but this is not what I'm doing.

I am just tracing the contours of the circle.

Now, here's the thing, I can start to

futz with these equations for example,

what if I wanted IT to pinch a little bit?

So interestingly enough, what if I say like,

cosine of a times cosine of a, let's see what that does.

Oh, weird, so you can see what that's done,

squaring the value, so it's kind of

squishing it a little bit along the x-axis,

but of course, everything's on the right side

'cause if I square a negative I get a positive.

But I could go to the third power,

so why don't I say power of cosine of the angle,

to the third power, look at this,

so you could see that even just doing that

gets me this diamond-like quality.

So that, could that's really working

for the bottom of the heart, in a way that's

the bottom of the heart, but I need to change the top.

So I need to think about what I'm doing with the y,

so again, I'm just kind of, this is very, in many ways,

similar to my Fourier transform epicycle of videos,

they're like conceptually tied here,

in that I'm messing with the oscillating values

as I move around this kind of circular path.

Now, let's do something else like let's say,

well what if I take sine, and for the y value,

what if I kind of multiply itself

by sine of the angle, but have like the frequency doubled?

So if I do this, right?

Well that's interesting, look

what kind of shape I get there, hm.

What if I multiply it by like a much more extreme amount,

like five, whoa look at that.

So things are starting to happen.

And probably actually what would be much smarter

for me to try to visually demonstrate this,

I have to think about this, would be to animate

the process of this and actually show

the separate Xs and Ys moving,

similar to the Fourier transform videos.

Alright I think it's time for me probably

to just put the formula in.

It's sort of interesting to explore

the different possibilities here,

but ultimately, if I'm seeing this equation,

what I want is, these interesting numbers right?

Well I'll get to that in a second.

But let's do cosine of t, oh minus, minus, minus!

I don't want to multiply this stuff together,

losing my mind here, so I want to subtract out,

ah yes, so as I'm getting to the top, depending,

okay so this makes sense, so let's actually

put this stuff in, let's change this to cosine,

let's change this to sine right?

No let's change this to sine, sorry,

let's change this to cosine, 'cause I've already done that.

And then I'm going to say cosine and this is like I've got,

a two, a three and a four.

Two, minus a three, minus a four.

So we can see what's going on here,

but, I need to, you can see that it's now actually

a little bit more squished at the bottom than at the top,

and so what might be interesting here

is to think of you know this as,

well if this is r then maybe I want r time two times this.

Whoa, look at that, because now when it comes (mutters)

but you can start to see the heart oh but it's upside down.

So I kind of want negative one times the whole thing

because of the way the processing coordinate system is.

We can see look, I'm kind of getting a heart there

but I've gone too extreme, so,

I should probably get rid of this r thing,

let's just make r one and use the actual numbers.

So, the actual numbers in the formula are 13, five, two.

So I can say, 13, five, whoops,

five times, oh, 13, five, two,

and then cosine of four a, just has,

is not multiplied by any factor.

So now if I do this, put too many parentheses here, this,

there we go, now look, there's the heart

oh muah, I love you heart! (laughs)

And then, now I can scale it up by a factor.

I mean I could just use the scale function,

but I could have you know, basically scale it by 10,

and I could say negative r times that,

and there we go, so now we have made the heart,

let's animate it, this one's very silly,

my whole like trying to walk into this formula,

really I just want to like look it up,

but let's animate it, let's have it

trace the path of a heart, 'cause that'll be really nice.

So what I'm going to do now is I'm going to create

an array list of P vector objects,

so if I were doing this in JavaScript,

this would be a much simpler just plain array.

And then, what I'm going to do is I am going to

not have this loop anymore but rather

have a global variable called a,

and I am going to do the same exact thing.

But I'm going to say here, did the for loop, sorry,

the for loop will be for every Pvector,

v in the heart, draw vertex at v dot x, v dot y.

And then, what I'm going to do is each time through draw,

I'm going to make a new vector,

I'm going to say, heart dot add new Pvector

at some x and y and then I'm going to

increase the angle by a little bit.

So here we go.

Muah, bing!

(claps) Yay!

Okay, so I made a heart, with math!

I mean this makes me so happy.

Ah, my artistic talent is not existent,

but let's at least make the stroke weight a little thicker.

Let's add a fill, so I'm going to give me a nice red color,

and I feel like it should be like a little bit more,

a little darker and a little pinkish,

so let's try that, and let's make sure

I add close here so it closes the shape.

Whoa, oh look at that, oh no no no no no.

I do not want close, I specifically do not want close.

Yes, that's what I want and now we are making this heart.

Yay, I made a heart! (laughs)

(train horn tooting)

So I challenge you to go and look at

these other formulas and try them.

Simon Tiger has shared with me

a ton of other formulas, maybe I'll see

if any of those I want to try but,

you find a formula and make your own heart,

could you do it in 3D?

I bet you could make a 3D heart, all sorts of stuff,

and share that with me.

Coding hearts, hashtag coding hearts, coding love

for this wonderful, any day of the year,

we could be makin', we should be makin' hearts

all day of the year, no reason

to just do it in February when it's cold outside

and there's like snow and sleet and everything,

anyway I love you, thanks for watching

the Coding Train, and I'll see ya soon.

(ding) (upbeat music)