Placeholder Image

字幕表 動画を再生する

  • uh, say once again, coordinates.

  • Um, it's important Auto tune and the Internet will fix that.

  • Coordinates.

  • It's important.

  • It's the floor to guard your corner, Booth.

  • Hello and good morning.

  • I almost had that time, right?

  • I was gonna end of that song Cross fade into me My my Kazon.

  • Hello.

  • Hello.

  • I'm trying to be somewhat more professional this morning with my opening coating train logo and some music, which instead of me, just here like is the streams turning is a stream starting Oy.

  • Okay.

  • Hi.

  • So that this was my doing type.

  • Let me know how it went.

  • Welcome.

  • And good morning.

  • And welcome to the coating shoot.

  • I was doing so well.

  • Welcome.

  • And good morning.

  • No, it goes like this.

  • Good morning.

  • And welcome to the coding train.

  • My name.

  • I'm your host, Daniel.

  • Chief Bond.

  • And I am here every Wednesday, 10:30 a.m. Eastern to do some coding stuff on.

  • And actually, I'm really excited about today.

  • I recently released a few videos about making a gift.

  • I think, by the way, that these videos are getting tons of use just because we want to know whether how I'm gonna put out the word.

  • It's like, Oh, I feel like I really that wasn't my best work either.

  • That gift looped video, I feel like I went on and on and on at the beginning, and then in the end, it's just a rotating square.

  • Could have done so much better.

  • But alas, people seem to be enjoying it and watching it.

  • If you go on to Twitter and go to hash tag, gift train, gift train gift train, because these gifts are little gifts hearts out into the world.

  • If you go to gift gift train, you can see I'm just gonna go the latest here.

  • Um, wait a second.

  • I'm a little bit afraid to click on this one.

  • I'm sure it's fine, but you could see that people are sharing gifts that they've made, and I hope to see more of these.

  • This is a pretty interesting one by the composer of the I will re factor this later song very well liked, so please continue to share those in addition to sharing on Twitter.

  • I suppose if I ever got around to using Instagram share stuff with, you know, I have this high, this whole thing where I was going to switch over to using mastodons, and somehow I never was able to make that really happen.

  • But maybe I'll give that another try.

  • Um, but, you know, that's what spoiler alert.

  • Okay.

  • Uh, also you can also share things on the coding train website itself.

  • Here are four heart submissions that I will now share with you.

  • The 1st 1 I will share with you is love hearts by Unruh.

  • Ge has Ra So I guess I can click And everywhere I click it makes ah heart Look at this And they're like, Oh, oh, It's like ex tracing its contours Maur and Maur This is beautiful.

  • Excellent work.

  • I love it.

  • Let's look at the changing the Cassini oval to ah heart by Simon A different Simon than the usual coating train viewer Simon Tiger Ah, look at that.

  • I love that another beating heart.

  • I'm gonna make you make more coating challenges like hearts and stars and rainbows and things like that just brings me such happiness and joy.

  • Okay, That's beautiful work.

  • Uh, Rainbow heart.

  • Excellent use of the combining of the rainbow with the heart together.

  • Let's click on This is by Riaz lock our last car.

  • Um, here comes It's falling from the sky.

  • Oh, it's coming from the sides I think this one needs That is beautiful.

  • I love this.

  • I love the creative use the way people are using this sort of path of that formula heart curve creatively and having it be the boundaries of basically a particle system that's coming in really nice work on Let's look at one Maur heartbeat by copper France And here we go.

  • Look at that.

  • That is really cool.

  • So this is Look at this.

  • So you can see the cardio aid shape and the particular heart curve there and you can see it's beating back and forth between the two of them.

  • And this also is a wonderful This is a wonderful, um, reference thio wonderful illusion to the circle square shape morphing coding challenge that Golan Levin presented on this channel here.

  • So you could see this is more thing between two shapes the heart shape and the cardio aid shape.

  • To be sad to move away from hearts.

  • Today we're going to keep the heart.

  • We're going to keep the heart thing going.

  • All right, so thanks, everyone for joining.

  • I'm gonna get I'm gonna try to not have too much, um, exposition and just get right to the coding because I'm so excited about this topic.

  • If this happened spontaneously as if in a dream to me and yet it yet it's something that's been around for quite a while that people have been using as a technique.

  • And I would say a pioneer of this technique is Jacob Jacob.

  • I don't know how to say the last name in French and you can see this.

  • I don't know that this was made based on the fact that I did a heart curved coding challenge.

  • I can only suspicious I can.

  • I can be somewhat semi confidence suspicious that maybe it is somewhat impartially in a little bit inspired by my coding jobs simply by the date of February 15th.

  • Given that I did the coding challenge on, I think February 13 was my livestream last week because today is February 20th.

  • But when I want you to look at this and I want what I want you to blow what I want, what really blows my mind about this?

  • It might not be immediately apparent to you is This is not processing sketch a p five sketch running.

  • Presumably it might have been created with one of those things, but it is, in fact, a GIF.

  • Um, there is a little bit up.

  • What's amazing about this is there's a lot of randomness and randomness of this.

  • In this gift, it seems chaotic and random, and yet somehow it loops seamlessly.

  • But now that I look at it, I see this like slight movement of a jump.

  • But we can look Maur and Maur at Dionne's Twitter feed.

  • Let's look at this one similar idea, but this is a gift.

  • It is looping over and over again.

  • How I talked about in my gift looping challenge that the end point of a gift, the last frame of a gift.

  • If it matches with the first frame, it will appear seamless.

  • But how do you have something that's so random and chaotic and yet, somehow, accidentally or by design, ends with a frame at the end that matches the one from the beginning?

  • And this is exactly what I will present to you today in a coding challenge about creating a pearl in noise loop.

  • So before keep going and talk too much about this.

  • Let me there.

  • So this is another reference.

  • This is, I think, even more salient here.

  • Like this Particular.

  • Like, how in the world is this looping?

  • How is that looping?

  • Thea answer to this is if you read a Tien's article here all about Perla noise functions and this particular technique for how to animate noisy stuff with a nice trick.

  • So I'm gonna present to you my own way of doing this, which I suspect is exactly what's in there considering this.

  • I think I read this article probably in 2017 when it came out.

  • And then somehow yesterday in the middle of class and I t p here I was like, I invented this new idea, and then I was I messaged goal 11 I rented this new idea is like, uh, yeah, by the way, this is my P five jazz sketch that I made that I sent to you like, a year ago or six months ago.

  • That does exactly that.

  • So clearly I didn't invent that.

  • I just thought that I did.

  • I had remembered something, but I'm gonna go through this with you today, and I'm so excited about it because it's really gonna change for it's I think it's gonna open up a lot of interesting and unique creative possibilities for you.

  • And you could make hearts and rainbows with it.

  • Good that's gonna make.

  • And, of course, we're gonna need polar to Cartesian coordinate transformations.

  • Yeah, uh, I think I did show David SNI Snyder's for a heart gift.

  • But let me just make sure to give this a nice highlight, because this is what I love.

  • Something that I absolutely love the most is when I see different bits of code and examples that I've made get combined and re combined in unique and interesting ways.

  • And here is a nice owed to Valentine's Day with the heart curve and the 48 transform by David Snyder.

  • Hash tag, gift train.

  • Okay, um, and now Oh, no, uh, I wanted to keep that up.

  • Let's put that here.

  • I think I'm gonna attempt to do this in the p five Web editor, even though there is a somewhat significant bug that you are all aware of.

  • If you've watched my video, did I experience that in the bouncing DVD logo?

  • Let's make this.

  • Is that okay?

  • Too big too small.

  • Move this over a tiny bit.

  • Move this over.

  • Let's see if I do this.

  • Um, question is, I think I would like this to be a little bit bigger.

  • And if I D'oh 606 100 auto afresh.

  • Ground zero, Let's make this.

  • I know the camera went off.

  • I have I'm on a path to fixing this camera issue.

  • Don't worry.

  • Everything is gonna change for the code and train in the future.

  • Ah, welcome, New Member.

  • Cryptic.

  • So, by the way, if you like what I d'oh, there's no requirement to do this.

  • I will mention there is an opportunity to join as a YouTube member.

  • I also have a patriotic I'm not so sure about the patri on driving you out what to do about that?

  • But, um, you will get an invite to a slack channel.

  • I will, at some point, some about time, Mel, you some stickers and you will also have my thanks.

  • So thank you to New Member.

  • You get a little fancy icon, so I don't know anybody in the chat.

  • Who's a member?

  • I'm just curious.

  • I forget what it is, But your icon changes your little emoji icon changes based on how long you been a member, and I can't remember what I dot this stock characters, the 1st 1 they think the rainbow is the last one.

  • Maybe I had been a member for two years or something, so I can imagine I don't even had it for that long.

  • But I'm curious to see what those What those?

  • I set them up at one point.

  • All right, so I think, um um, I think All right, so is that okay?

  • This font size is that visible?

  • Andi, think about think about the all of the people around the world who are, like, on there on the bus or the subway on their way to work or school with their little tiny mobile device watching the coding train, they read my coat.

  • Uh huh.

  • All right, Um, so this is gonna be a coding challenge.

  • It's going to relate to a lot of different things.

  • So the two things that I want to mention our blobby this also relates to this and, um Perlin noise playlist coating train.

  • Um ah.

  • It's gonna happen here.

  • Okay, hold on.

  • a second.

  • Um, just give me a second here.

  • I want to be logged in as a different person.

  • One of these days, I'll fix this.

  • Um, it's fine.

  • Just give me a second here, everybody, uh, just Perlin?

  • No, it's where I have a pearl in noise playlist.

  • There it is.

  • Yeah.

  • Okay.

  • Uh, here we go.

  • All right.

  • So I don't know.

  • I think I'm gonna start with this.

  • What's one of these?

  • Are amazing, by the way.

  • I mean, look at that.

  • I don't think I should sleep with this because this is misleading.

  • I'm never gonna create anything so beautiful as a TN Jacobs, but I think I have this This this is definitely related to what I want to do.

  • Um, And where's the heart?

  • Yeah, for wherever you okay, here we go.

  • This I can lead with.

  • We need to make sure I have a white board working whiteboard.

  • But this this this is no good.

  • I got three markers here.

  • David, in the slack channel asks Dan, do you think you'll ever make a three d version of blobby?

  • I've been trying it since I saw the Blob video, and I can't figure it out.

  • Oh, I like this idea.

  • Yes.

  • In fact, we should make a three.

  • I mean, you would need the spirit, Kal geometry coding challenge.

  • So the spherical geometry coding challenge, combined with the blobby coding challenge is the path to do this.

  • And I would love to do that.

  • That's a great idea.

  • Uh, wait.

  • Trying to find a marker that will do us justice.

  • No.

  • Ha, ha.

  • I think I have found this is the marker which will be the marker for today.

  • How we doing on glare?

  • Let's, uh That's not causing the glare.

  • Is it this one?

  • That's definitely the glare.

  • That's better.

  • Okay, let's make sure this works.

  • Oh, that was the saddest thing ever.

  • You think somebody who has a YouTube gentle like hundreds of thousands of subscribers would bother toe find a marker before going?

  • And yet I can't seem to manage to get myself to do this.

  • Fortunately for me, I have a box here in this box you can't see.

  • It is full of markers.

  • We're gonna find what I need.

  • What I need is another box that's full of markers that are used up.

  • No, I can tell already okay.

  • Promising.

  • Very promising.

  • Ha.

  • There we go.

  • This one will do the job puller, noise loops.

  • This is the topic for right now, by the way, incidentally, it's also my intention to talk about JavaScript inheritance with prototypes and, yes, six classes.

  • So that will be the That's gonna be the boring stuff that comes later.

  • I don't know what's boring and what's not boring, but that's gonna come later.

  • Okay, let's make sure this camera has got half on hour of possibilities.

  • Uh, by the way, I just I'm not bothering with slow moving anymore with the chat somebody in.

  • Yes, it's the spherical and coordinate polar song.

  • Thank you.

  • Okay.

  • Weak mind for that suggestion.

  • I I haven't remembered in recent weeks to put slow mode on in the chat, and so now I'm kind of leaving it without slow mode in the hopes that the community on my, uh, my continuous presentation of hearts will keep the chat under control.

  • But please, if it becomes unwieldy or a problem for anyone, let me know, in particular those of you who are in the patron YouTube member slack group, you can let me know if you need me to turn on slow mode.

  • Yes, I am calling this polar noise loops.

  • Welcome to the Polar Express.

  • All right.

  • I don't know if that's a good name for it, but that's what I'm calling it.

  • All right, let's Let's get this started.

  • Time to do some coding.

  • Hello?

  • Okay.

  • I knew something went wrong.

  • Well done, Zanni Dolly Pee in the chat asks.

  • Hey, is there a fixed time when he goes live?

  • And in fact, there has never historically been a fixed time.

  • But there is a fixed time now and that fixed time is right now Every Wednesday, a 10:30 a.m. Eastern time shoots.

  • My mike clip is kind of broken.

  • Hopefully, this is going to hold.

  • I think it's gonna be okay.

  • Um, let's try that again, Tissues and I'm ready to go.

  • You better start treating the live streams as actual, like time on the internet and video supposed to just like I'm not really, because it's not part of the thing that will edit for later.

  • Whatever.

  • Hello and welcome to according challenge if you can tell me about this one.

  • So I found this gift the other day by eight yon Jakob, John Jacob with my American pronunciation and look at it look familiar to you.

  • It looks like a heart curve that I made it a coding challenge previously.

  • Now I can't say for sure whether this gift was made based on my heart curve coding challenge.

  • But I can say for sure that the work of a Tian is amazing and phenomenal and uses a special technique, one that I have recently rediscovered in a dream came to me the dream.

  • Have you been on the Internet at least since 2017 if not before that.

  • So what's going on here that's so fabulous and exciting is this chaotic scene, this scene of randomness and smoky heart beauty beauty is actually a perfect gift loop.

  • How is it that the end matches the beginning?

  • And this is something I talked about in my previous coding challenge gift loop where we looked at.

  • Okay, well, we could move something across the window.

  • We could rotate something, and as long as the last frame matches up with the first frame, it will loop.

  • But if it's all random and chaotic, how do you do that?

  • And so, um, there is a technique for doing this.

  • Golan Levin actually also has an example bit of code, which describes this in more detail, which I will show you later in this video.

  • But mostly what I want to do is highlight to you this blogger post from necessary Disorder.

  • It's yen from November 15th 2017 which explains this technique of creating gifts like this.

  • Here's another one.

  • How could this even possibly work?

  • And so to begin this discussion, I mean, hopefully we're gonna get to lots of me.

  • I could probably make videos on this topic for the rest of my life, but to begin this topic, I'm going to return to a previous coding challenge.

  • You may remember me from quitting challenges such as coding challenge number 36 blobby.

  • It's when I used to wear T shirts with this other logo on them to bring my coding challenges on by more gray hair there.

  • But I think it's the lighting or something.

  • Somebody once asked me if I dye my hair and I do not, but maybe I should I have no idea.

  • Anyway, that's not important.

  • Probably not gonna get edited out, you know, and Uh, okay, So what is the issue with blobby?

  • So I'm actually, even though I could just pull up that code, I'm gonna speed code blobby again.

  • You're gonna see Watch.

  • This is, like, two coating challenges and one so I'm going Thio.

  • What I'm gonna do is I'm just going to say, uh, let a equal zero is less than two pi.

  • I'm a turnoff to refresh for a second.

  • I'm working in the P five Jess Web editor, which I think would be a good demonstration of this on then.

  • This is supposed to say four I got So what I'm doing here, Just in case you're wondering, I'm writing a little four loop, and what I'm gonna do is I'm gonna use my polar to Cartesian coordinates song, and I'm going to say let x equal are Times co sign of that angle.

  • Let why equal are times sign of that angle and then I'm going thio, make up some value of r r is gonna be 100.

  • I'm gonna translate to the center of the window on dhe.

  • Then I am going to say begin shape.

  • I am going to say n shape and I'm going to set a vertex vertex at X y And I'm gonna say, uh, I spelled to buy with zero, which is really complaining to say a stroke.

  • 2 55 no, Phil.

  • And there we go.

  • Look, I just wrote the code for drawing a circle because this is a four loop.

  • I'm gonna go through all these different angles I'm gonna calculate I'm gonna change increment the angle on to keep the radius constant And I'm gonna set all the verses x y have a circle.

  • Now if our is random and this is basically what I did in blobby if I say random 50 to 100 look what we've got.

  • We've got this kind of, like, crazy, flickering thing that's almost that's kind of interesting onto itself.

  • And I could make this a little more evident by making the time step that not the time step, the delta angle, the amount of angle of the Mount of virgins.

  • I'm drawing fewer.

  • I could make sure it connects at the end by saying close and I could also just for right now saying no loop so we only get one of them.

  • So each time I run this sketch, I'm going to get a new random pattern.

  • Now, here's the thing.

  • This actually looks like it's a nice closed loop because it's all random.

  • It doesn't matter if the last Vertex doesn't match up with the first Vertex.

  • And, you know, it would be somewhat smart of me to be more thoughtful about what this delta angle is like.

  • Maybe it should be something that divides perfectly into two pyre, radiance equivalent of 360 degrees.

  • But again, I'm not gonna worry about that.

  • What I'm going to do is I'm now going to add Perla noise to this.

  • Now, if you've never heard of Pearl and noise before, I will refer you to a playlist where I talk about what Perla noises and how it works.

  • And a whole bunch of other videos related to this.

  • So go and watch those now, if you want, are also lead to some articles about Perla noise.

  • But I'm gonna assume knowledge of parole a noise for the purpose of this this coding challenge.

  • So right now what I'm gonna do is I'm gonna say let t equals zero.

  • Something used t as my offset through the one dimensional Pearl annoys space.

  • I'm gonna change that ex offset in a little bit, but let's just keep it a tea right now.

  • Then I'm going to say our is noise of tea times 100.

  • So, interestingly enough, let me.

  • We get a different size circle every time I run the sketch because we're getting a new, randomly seeded set of pearl annoys values, and I'm never moving through that time space.

  • So each vertex is exactly the same.

  • So what I want to do now is say in the Loop T plus equal some amount of delta.

  • So now because you look at this, the amount is changing, but it doesn't match up.

  • So let me clean this up a little bit by saying Map, let me use the map function, which I think it will make things a little simpler.

  • Perla noise always has a range between zero and one.

  • Let's I want that range to go between like 102 100 now so we can see.

  • Look at that now there's just this little every time I run it, you can see that the last pearl annoys value doesn't match the 1st 1 this is the problem.

  • This is getting at this idea of a perfect pearl annoys loop on.

  • And let's also have dealt a t t a mountain way moved through the pearly noise space.

  • Siri, Uh, what should delta t b.

  • Tumbleweeds?

  • We have, like, a tumbleweed animation.

  • And, like, the cricket sound effect going right now, that would be great.

  • All right, let me change that to this.

  • And you could see even if I move t faster and I get this kind of smoother, blobby like shape, it always has this artifact the last.

  • And by the way, if I took off, this closes will be more evident.

  • Why, right?

  • The last Vertex doesn't match up with the 1st 1 This is the problem.

  • So how are we gonna stop through?

  • So why?

  • Why does this happen?

  • So I have my title of this video right here.

  • Perlin, noise loops, Perla noise.

  • If we're talking about one dimensional pearl, annoys Perla noise values in a one dimensional space.

  • With this being the t access, the time access.

  • Although, really, I should call this like ex offset because it's like the X s offset.

  • This is maybe a graph of those values.

  • And if I'm arbitrarily going from zero to some fixed endpoint as I get to the end of that circle, whatever value I'd get here, which may be, let's say, if this is between, like, zero and one, maybe this is 0.3 and this is like 0.621 right?

  • They don't match up.

  • If I were to take this and twisted around into a circle, they don't match up.

  • There is another way to look at a space of pearl annoys values.

  • This is a way of looking at it in one dimension.

  • Let's now look at it in two dimensions.

  • So instead of having a one dimensional graph of pearl annoys values, I present to you a girl rid of pearl annoys values.

  • Now, if we think of this grid as fairly like low resolution, I'm gonna draw up.

  • I don't know why I made those dotted lines like this is like basically a five by five grid right now.

  • If I did my drawing correctly, the idea is right.

  • Each one of these represents some value between zero and one.

  • Now, in this two dimensional space, each one of these values represents eyes also a number between zero and one.

  • So I might have liked point to hear point through here and 10.0.0.31 here in 0.26 year 0.19 here.

  • Right.

  • Every single space has a value now, here in one dimension.

  • Any number in one dimensional space is quite similar to its neighbors.

  • And it only has two neighbors, a neighbor on the left and a neighbor on the right or neighbor after a neighbor.

  • Before here, each value has how many neighbors?

  • 12345678 It has neighbors above and neighbors below and neighbors to the right and neighbor diagonally down.

  • So the idea here is that What if I could walk around through a two dimensional Perlin noise to get space to get random values and always end up back where I started?

  • And why not just walk in a circular path?

  • I mean, that's kind of what I programming anyway.

  • So why not just do that?

  • What if I were to start here and get this pearl annoys value than this one?

  • This one?

  • This one?

  • This one This one This one This one This one this one, this one and this one and this one I would have 123456789 10 11 12 13 Random numbers.

  • And the last one is going to match up with the 1st 1 if I keep going so I could get those those random numbers over and over again, and that if there's a mountain over there, is so vast, it's going to appear like it is a continuous sequence of total randomness smooth with pearl annoys.

  • So this is the theory.

  • So let's now go and apply this theory to this particular blobby shape.

  • Um, so if there is, I see a siren going off alert polar noise on the whiteboard.

  • What does that mean?

  • Yeah, I should play the Pearl Annoys song.

  • I also see in the chat that temptation is saying voice and video get more and more decent over time.

  • I don't know how to resolve that.

  • What I can tell you is that I do correct for that after the fact.

  • So everything that I do in today's lives for the full Lifestream ends up archived on YouTube before ever.

  • Look, I'm meeting until the world ends And there's a lot of reasons why that might happen sooner than later.

  • But anyway, that aside Oh, are you?

  • It was probably more like that.

  • YouTube won't exist before the world ends.

  • But anyway, I don't What?

  • It is not.

  • This is not the discussion, but, um oh, but then I also edit out chunks and those do not and resync the audio if necessary.

  • Several people are typing.

  • I just want to know what the what?

  • The alert symbol and polar noise on the whiteboard.

  • Question mark.

  • Question Mark, if that was some sort of issue that I'm Oh, yes.

  • No.

  • I wrote in a polar noise on purpose.

  • I got it.

  • I wrote it as polar noise on purpose.

  • It should say polar pearly.

  • I don't know if you could write that out of you.

  • Mostly, Yes, I wrote in his polar on purpose.

  • Even it's a term that I made up.

  • That probably means nothing and is terribly misleading.

  • And everybody wants to complete.

  • All right.

  • I see.

  • Are we all satisfied now?

  • Okay.

  • Poor little Simon in the chat rights.

  • Poor lead noise.

  • That's actually really good.

  • Why isn't it?

  • Isn't it poor?

  • Are pearler Maybe it's pearl are noise anyway.

  • Okay.

  • So actually, before I come back here, I want Thio.

  • Let me just open up processing real quick.

  • It's the polar.

  • Um, I just want to grab something real quick, which is just give me a second here.

  • What am I looking for?

  • Not fixing flow.

  • I'm looking for math.

  • Basics isn't basics math, noise duty there ago.

  • Who?

  • Interesting.

  • Let me any comment This out.

  • There we go.

  • Okay.

  • Mud as well.

  • Cycle the cameras while I'm here taking a short break from the actual content.

  • And now I'm coming back.

  • So coming back to the computer, what I've opened up here is a processing sketch that is visualizing pearl and noise in a two D space.

  • So this is showing you us of the classic visualization of exactly this idea.

  • And in that visualization, each number on number between zero and one is a map to a pixel brightness.

  • So here you get it.

  • Let's try it again.

  • I really shouldn't put the sound board so close to my keyboard where I switch the camera.

  • Um, let me just go back all the way, because that was all right.

  • So before I get back to the blobby code.

  • What I have here is a processing sketch that is visualizing Perlin noise in a two dimensional space.

  • So this is a pretty sort of like classic visualization of to deeper Lanois as this cloudy like texture.

  • And this is literally, exactly this where each number each random Perlin noise value in the two dimensional space is represented as a pixel with a brightness value between zero and 2 55 And when you look at that, you get this cloud like pattern because the color seamlessly smoothly moves between white to black to gray, toe black to gray toe white.

  • So the idea here is what is what I want to do is walk around this space and pull those numeric values but map into something else besides a pixel value, and walking around in a circle is a nice way to create a loop.

  • But you don't necessarily have to have that be in the circle, all right, so let's go back to the blobby code.

  • Now.

  • There's a little It is a bit confusing about this because in addition to be walking around the Pearl annoys space in a circular path.

  • I also happen to be walking around the two D canvass and circular path to draw this circular shape.

  • So I'm kind of using the same idea, but with two different points of view.

  • Hopefully, that is something that makes sense to you.

  • Okay.

  • Um so what I want to change this is I no longer wanna have t What I want to have is ex offset.

  • I'm going to say Wanna have an axe offset and a why offset!

  • And I want to get the pearl in noise at X offset.

  • Why offset?

  • Okay, now, uh, T is not t is not t is not where I have to sell O t is moving on.

  • Let's took that up.

  • Okay, so this is now what I had before.

  • If the pearl if the ex all set in the UAE offset, right?

  • Basically, if what I'm doing is I'm asking for what is the pearl annoys value at this spot.

  • It's gonna give me some random value, and then I'm gonna make that the radius of the circle the blob shape as it goes all the way around.

  • So I want to start moving, but I actually don't wanna start.

  • You want to start over here, so I have to deal with the fact that I that I need to find this 0.0 is in the top left because I can't have negative values in the Pearl annoyed space.

  • This is a little bit of a tricky piece of this, but I want to use that same pulled her to Cartesian coordinate formula where I want to say ex offset equals co sign of that angle.

  • Why offset equals sine of the angle.

  • Now look at this.

  • I kind of got something, but it's weirdly symmetrical.

  • And the reason is that's exactly what I just alluded to I these ex offset and y offs that values are going between negative one and one.

  • And so, in fact, I'm trying to look at Perlin noise values over here, right?

  • And these this doesn't exist.

  • The pearl annoy spaces all positive.

  • So there's actually a very simple solution to this, which is just to add one like that, and suddenly woo Yeah, I think so.

  • And let me add the clothes back in and let's run this a bunch of times and we could see There we go.

  • We have this nice, random blobby shape where the end matches the beginning.

  • Now I want to do Let's do some more stuff here.

  • All right?

  • So first of all, I where what happened to that?

  • Like incremental.

  • What happened to T plus equal 0.1 Now I have X offset, Wilde said.

  • Why aren't I saying X offset?

  • Plus equal 1.1 y offset Political +11 Well, actually, the incremental is this.

  • It is the 0.1 hears co sign of the angle.

  • And in truth, I could have a separate variable fromthe one that's incremental ing in the loop because I could move through.

  • But I need to go all the way to two pi so that I don't want to do I think a way for me to vary this in a more flexible way is actually to use the map function.

  • So if I map co sign of a which goes between negative one and one and then map that to arrange between zero and two, we have and this is sign we have exactly what I had before, and I can keep.

  • I can keep rerunning the sketch, and I'm getting a new a new version of the shape.

  • But interestingly enough, what happens?

  • This is really now something that I should make a parameter.

  • So, for example, what if I were to say, Let me make this a global variable?

  • Let, um I'm gonna call this noise Max equal to, and I'm gonna put this here and watch what happens if I make this five versus 10 versus 1220 versus 0.1.

  • And look at this.

  • 0.30 point five.

  • Look at this.

  • This is really kind of interesting.

  • With just a little bit of noise.

  • I have what appears almost like a perfect circle, but it kind of looks like ah, human being like me with false.

  • I have lots of faults drew that circle.

  • It's got some slight so pearly noise can actually used as a nicely with a little subtle perla noise of making some perfect shape like a letter form or a circle or a square, have a little bit of wiggle to it that makes it seem more hand drawn.

  • So that's a nice thing to see.

  • The other thing we could see here very quickly is like, you know, it would make sense for me to create a slider, I'm going to say.

  • And this I'm using the P five dom library to do this, which is a really quick way.

  • I'm gonna create a slider which has arranged between, like, 50.1 and 10.

  • I'm gonna start it at, uh, zero, actually.

  • Let's make it between zero in 10.

  • I'm gonna start it.

  • Zero.

  • So I have the slider here now and then I want noise Max to equal noise Max to equal slider dot value.

  • So watch this.

  • Okay, That didn't work.

  • Create slider.

  • The range goes between zero and 10.

  • Hold on a sec.

  • Let's take this out.

  • Oh, I have no Lupin here.

  • No wonder.

  • Take out the no loop and now let me slide it.

  • We need to make that.

  • First of all, I need to give myself smaller time steps when moving the slider.

  • So let's do this.

  • Look at that.

  • Look how kind of like unfurls because it's the same noise space.

  • I'm just stretching or shrinking it.

  • That is a really imagine.

  • Now, if I oscillated that like along a sine wave had a super interesting and I could also make just out of curiosity could make this go toe like 100.

  • I should make it go to 11 if it goes to 11.

  • But really, it should go like 111 and watch this.

  • I guess it's hard to detect that settlements, but we could animate that more slowly over time.

  • So the slider isn't the best way of demonstrating that.

  • But you'll see a lot of possibilities here.

  • Another thing that I could demonstrate here.

  • Let's just put it at five to start books.

  • Uh, no.

  • It goes to five and then 0.1.

  • So all right, so another thing that I could demonstrate to you is interesting, like a always starts at zero because I'm going from 0 to 2 pi.

  • But if I am walking around the path of a circle, there's no reason why I couldn't start over here and then go around or start over here and then go around.

  • And why not?

  • Very that that would be like the phase you go back to my 48 rounds.

  • All of this stuff it's so crazily into related, It's amazing.

  • But if you go back to my 48 transform videos where we created these orbiting episode calls we have this concept of phase, which is where does that orbit start?

  • So let me show you another thing here.

  • Okay, Uh, what I'm gonna do is show you, uh, let me make a variable called phase.

  • We have that be zero.

  • I'm gonna have co sign of angle.

  • Plus Fay's sign of angle plus phase.

  • What do you think's going to happen if I increments phase?

  • Well, it looks like the shape is rotating.

  • I mean, it is rotating or it's not.

  • Rotating visually is rotating, but I'm actually just starting in a different point of the no it noise space, interestingly enough like And if I make that much smaller, you'll actually see that, like, smaller than the amount of Vergis is I have you start to see a wiggle between them so interesting.

  • Like I could make this 0.2, and that's gonna be even more apparent.

  • Look at that crazy weird wiggle as those Vergis ease adjust their pa spot.

  • And then I want to show you something even crazier, I think.

  • Let me put it back.

  • Let me sink it.

  • So this is like a nice, perfect rotation.

  • What if I only apply the phase two, the ex offset or the Y offset like different phases.

  • That is, well, it's kind of too fast.

  • So let me do like this, Like this is really weird.

  • You can sort of see.

  • It's almost like there's something crawling around the edge.

  • There's so much weirdness, stuff going.

  • So anyway, you see the sort of like exciting possibilities of thinking about pearl and noise values as one dimensional values that we might pull over time in a one dimensional fashion but actually pull them from the path of a circle in the two dimensional, pearl annoyed space.

  • Now what I happen to be doing in this is taking a very literal approach.

  • I'm taking those pearly noise, pat path values, walking around a circle and applying them to like the distance from the center of a circle over as drawing it.

  • So it's very like very literal, sort of like visual ization of Perlin always dies in a circle to the edge points of a circle.

  • But if you start to think of other ways, you could apply those values, the creative possibilities explode.

  • And so, in other words, if this is what I started with.

  • I have Perlin noise at the beginning.

  • Sorry.

  • I have Perlin noise values in one dimensional space, but they don't loop.

  • Why not take those looping values here along the path of a circle and then unfurl them back into this sort of one dimensional line and then use those to apply to any value in any visual ization to make a perfect If, Luke, that's the idea.

  • So I'm gonna just put that out there and putting this out into the universe.

  • I mean, I didn't put down the universe.

  • Lots of other people.

  • It's yen and Golan and many others.

  • I'm sure I'm forgetting to reference have done this for years.

  • So give that a try in the next video.

  • I'm gonna come back and actually do that.

  • So I'm gonna see if I could take this idea and just apply it to something.

  • Probably won't be that visually interesting, but this will hopefully give you lots of ideas of what you might make.

  • Okay, so thanks for watching this coding challenge where we now have this kind of blobby thing.

  • Oh, wait, wait, wait.

  • I should really have the third dimension here.

  • Uh, I'm trying to decide.

  • Should I make the third dimension?

  • This is so weird.

  • Um, yeah, I think I will.

  • Okay, let's add one more thing to this.

  • I think I can.

  • This it was not too long.

  • So far.

  • Let's have one more thing.

  • So first, let me take out this idea of phase for a second.

  • Just gonna comment that out.

  • Put it back to what It waas, which is just this.

  • Every time I run it, I get a new pearl annoys space.

  • And incidentally, the only reason why I'm getting a new pearl annoys space is because P five behind the scenes will see Perla noise with a random seed each time.

  • But I could actually control if I were to say, you know, noise seed and pick some arbitrary see value in random number Seeds is maybe a topic for another video.

  • Every time I run this, I'm going to get exactly the same shape each time.

  • So we just point that.

  • But there is something else.

  • There is another way I could animate this and it has to do with three dimensional Perla.

  • Noise and pearly noise can exist in any n dimensional space in p five and processing.

  • I think the functions that give it to you just support 12 and three dimensions.

  • But let's talk about how you might use three dimensions here.

  • So, for example, if this is my visual ization of pearl annoys in two dimensional space, that cloudy image well, I could make sort of like a cloudy set of cubes in three dimensional space.

  • But another way of thinking about it is have that third dimension be slices of an animation so I could show you the pearl in Illinois space overtime while incremental ng a Z value of Z offset show you Perla noise for an easy offset equal zero Kensi Offsetting was 00.1 point two points three and so that actually, all of those will have numbers.

  • Each one of these numbers is now has all of its neighbors uh, up and down and left and right.

  • And forward and backward are similar range of values.

  • So this is actually really easy thing for me to add.

  • I just need one more global variable called Z off.

  • This needs to be global, cause I'm not resetting it back every time through draw each time through drawn incremental in it.

  • And I could just add Z off right there to the pearl annoys function.

  • And then I could say z off plus equal some amount, like 0.1.

  • And you can see we get this wiggle.

  • I could make it 0.1 and I'm gonna move through the Illinois space much more slowly.

  • And once again, we could see, like there's all sorts of things I could do here like this could be 0.3, and this could be 0.1.

  • You know, there's so many parameters that you could explore here.

  • I think we've made actually a super interesting of shape for, like, a crazy animated game version of asteroids like Could imagine having Perlin noise giggling, oscillating, looping, noisy polar asteroids.

  • That's the thing.

  • You should make it anyway.

  • So I hope you find some variations for this.

  • Um and I look forward to see what you make and stay tuned for the next video.

  • A tourist shape?

  • Yes, a tourist shape.

  • Increased resolution.

  • Uh, all right.

  • I probably should have if I thought about this.

  • Made the stroke wait too, for it to be a bit more.

  • Give it a little more popular.

  • More zing.

  • You gotta have a thing coating train sponsored by thing thing.

  • I have an idea.

  • How hard is it gonna be?

  • Two.

  • Ah, Can I just get the mic?

  • Like I could just do this right?

  • Mike equals p five audio in.

  • And then I could just have, uh, this be, um does it get level?

  • No.

  • Get volume shoot five sound.

  • I just wanted to tie it to the sound real quick.

  • Um, audio end.

  • It's funny.

  • There's apparently there's a video about this work.

  • I'm wearing a tinfoil hat because I really, really mic input, my old mate.

  • Got to start.

  • My God, Get level p five dot audio in.

  • Okay.

  • What did I miss?

  • What I missed P five.

  • Got audio in.

  • Mike dot start mike dot Get level.

  • Do I not have the sound library?

  • Imported?

  • Thing was meant for me to just do one thing really quickly to make this fun, because it's cannot re property.

  • Start of undefined.

  • Hold on.

  • I was just there in the code.

  • Um p five audio in mike.

  • Got to start mike dot Get level mike dot Start.

  • Oh, I forgot to show this, but whatever.

  • Uh, okay.

  • I don't know.

  • What did I have wrong?

  • They're so weird.

  • I must have something spelled wrong.

  • Okay, Right.

  • Here we go.

  • Uh, and here we go.

  • Really?

  • It's not picking that up test.

  • Say once again, my whole idea of taking a little break.

  • Just putting design.

  • Oh, I forgot the new.

  • Okay.

  • Thank you.

  • Everybody knew P five audio.

  • How come?

  • Oh, uh, well Oh, it's just so quiet.

  • I should I should also have The fae is going.

  • So it's spoons.

  • Test 12 test 12 Oh, this has to test 12 Test 12 and then I don't know why I'm like trying to make something interesting out of this.

  • That's not my job.

  • I'm terrible at that.

  • Uh, let's do this.

  • It's the polar to Cartesian coordinates Song.

  • Here we go.

  • Say once again.

  • All right?

  • And we're back.

  • I probably should have probably done it saved.

  • I probably should put this back to what it was because this is Let me just do a duplicate on DDE.

  • That will be.

  • This will be the noise Luke audio in, just in case I'll publish.

  • This is Well, it's not like part of the coding challenge.

  • And let me just go file open.

  • Um, just go to this noise loop.

  • Let me get rid of the audio in thing, um, and put this back, uh, and put What is this now?

  • Yeah, why not?

  • I could leave the weird little background thing in.

  • Interesting.

  • I can't resist.

  • Language office.

  • Okay, stop.

  • I'm gonna stop.

  • I'm gonna stop.

  • I have to stop.

  • Okay.

  • Uh, can you check Twitter for generative arts?

  • I don't know what that means.

  • Let me save.

  • Have to stop.

  • And now what I want to do is, um, do this.

  • This is too frenetic.

  • I want something more soothing and relaxing.

uh, say once again, coordinates.

字幕と単語

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

B1 中級

ライブストリーム #169Perlin のノイズループ + JS の継承 (Live Stream #169: Perlin Noise Loops + JS Inheritance)

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