Placeholder Image

字幕表 動画を再生する

  • - It's time for a Coding Train bonus episode. (laughs)

  • (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)

- It's time for a Coding Train bonus episode. (laughs)

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

A2 初級

コーディングチャレンジ #134.2: ハートカーブGIFループ (Coding Challenge #134.2: Heart Curve GIF Loop)

  • 4 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語