(train whistling)

I made this ridiculously terrible video

about how to make a GIF loop.

And you should really just go look at Golan Levin's

amazing resources.

And different artists that I've mentioned,

Saskia Freeke and Bees and Bombs,

who are doing wonderful things.

Then I made this video, which I actually kind of love

that makes a heart in processing.

Just using like a nice little math formula.

Look at that.

It's time to make a GIF loop of the heart

for Valentine's Day.

There I said it.

It's Valentine's Day, this is what we're doing.

Alright, so first that I need is for this

to always end where it started.

So I have an idea for doing that.

Which is that, if what I'm doing is I'm adding these,

I'm adding the vertices of the heart over and over again.

When I get to the end, all I want to do

is start deleting the ones from the beginning.

So I should go back to that idea of percent.

So let me actually open up my other thing.

So I'm going to open up the GIF loop code.

This is my design.

So what I need is this at the top.

Then I need all my drawing stuff.

And I'm going to put it in the render function.

And now the percent, the percent is going

to tell me what to do with a.

So, that angle.

I'm going to have to change something.

So let's just first do it this way.

A equals map, percent, which goes between zero and one

to between zero and two pi.

So right now, if I run this with record,

and let me close this.

This should just be, I've got my GIF loop.

Let me just move everything out of the way.

I've got my GIF loop here and I want record default.

So I don't want to record yet.

So now if I run this,

we can see it's making the heart.

Oh,

oh, right.

And then, okay, so that's the right idea

but it's not looping because ultimately,

I mean there's a bunch of things I could do.

Because I could say,

if I record it, I mean in a way I'm getting a loop,

but I want it to like shrink back down to zero.

So I need the size.

So basically I want percent, I want this to be like,

actually when percent is between zero and .5,

halfway through. I want to draw the heart.

So I'm going to say, this is weird.

But if percent is greater than .5, is less than .5,

less than or equal to .5. (laughs)

There's probably a better way way to do this.

But I'm going to do it this way right now.

I'm going to add points.

Otherwise, I want to remove the number of points

that I've added.

And I think it actually is just going to work

if I just say heart dot, how do I delete something out of,

I think if I just delete zero,

that'll be like the oldest one.

As I get, so let's try that.

(laughs)

That removed them all.

What's going on here?

Oh, but I still need to draw.

I always need to draw it.

Ahh.

So I'm always drawing it no matter what.

But I'm adding points for the first half

and removing points for the second half.

There we go!

There's my loop.

Yay!

Okay, so now, guess what?

I should make, add some colors and things.

Oh, it should beat.

People are saying it should beat.

Of course it should beat.

Okay, okay, we're going to add beating to it.

Okay, so there's no reason why the size,

the size is being controlled by this thing, r, here.

So actually, let's take this out.

Let's take this.

So this will make it small, right?

Right, so makes it small.

So I can control the size here just while I'm drawing it.

Because I could say r times, r times.

Great, so now what I want is the r to be,

so I want an angle to be mapped,

the percent between zero and one

and maybe between zero and two pi, but like times four.

I probably want it to beat like four times

within just the one.

So I'm going to just map that and then r equals map of sin

of that angle, which goes between negative one and one

to between like

height divided by 80 to height divided by 40.

So I think this would map the size to a sin wave

and the angle is getting mapped from the percent.

And so this would be

and it should be a perfect loop of it beating.

Okay.

I feel like I need to add more color and stuff to this

and it's kind of off-center.

Hmm, alright.

So let's see if this is a perfect loop.

I have no idea if it's a perfect loop.

It's weird, something was weird about it.

It's not deleting all the points.

Ha, this is crazy.

This is actually kind of a nice effect.

But I'm not deleting all of the points.

I did, and am I just getting some left over?

Hold on.

(bell rings)

Guess what?

The problem is I'm adding an extra,

I'm adding that last vertex twice.

Because I have less than equals there.

So this is actually as simple

as just getting rid of that equals there.

I just want to use percent is less than .5.

I'm sure somebody in the chat already said this.

But now you see this loops perfectly.

Let me add the heart beating back in.

So I had that from before where I had r

mapped to the result of a sine function.

And so if I do that,

I'm pretty sure this is a perfect loop still.

Is that beating too fast?

Slower beating, people are saying.

So to slow down the beating, I'm going to just do

two pi times two.

Is that better?

Anyway, you can work on, you can make (laughs)

your own version of this.

(laughs) This is fine for me right now.

I got to end this video.

I am now going to change record to true.

I'm going to hit run.

It's going to finish that.

I'm going to look in the folder

and I can see I have all the images there.

I'm just going to check the last one, which looks like that.

And the first one,

yeah, I think this will match up perfectly.

Which basically the first one is empty.

So I think coming all the way down to zero

and back up will work.

So the website that I used before,

although there's a variety of different ways

you can make a GIF stitched out of a bunch of images,

is this GIF maker, ezGIF.com/maker.

So I can click Choose Files and I go to my output directory

where I have all those.

I can hit command A, select all the files,

and then click Upload and make a GIF.

So it's now uploading all those images.

And we can see them all here now.

I could do all sorts of things to fuss with them.

And I'm curious to add this crossfade frames.

Let's try adding that.

Oh, that's a bad idea.

I don't know.

Let's make the delay time three one-hundredths of a second,

that's more like 30 frames per second.

And then it's not exact,

and then I'm going to click Make a GIF.

And then the cat is going to, going to wait for my GIF.

Hi, cat. Meow meow.

Make me my GIF.

Oh, and

my GIF is ready.

Yay.

Now I just do Save Image As heart GIF, there it is.

Thank you everybody. (lips smacking)

I love you, I hope you enjoyed

this special about using, special?

(laughs) This video about using math to draw a heart curve

and then animating it as an infinitely looping GIF.

And I just can't wait to see all of the different,

I just want to be flooded with heart GIFs.

Just flood me with heart GIFs.

(train whistling)

Make them 3D, make them rainbow colors, put stars in them,

and cupcakes and whatever you can think of.

I'll see you in a future coding challenge.

Goodbye. Mwah.

(upbeat music)