- Hello, and welcome to a Coding Challenge.

Woof! (gasps)

If you can't tell, I'm really excited about this one,

so I found this GIF the other day by Etienne Jacob,

Etienne Jacob with my American pronunciation,

and look at it.

It might look familiar to you.

It looks like that heart curve

that I made in a Coding Challenge previously.

Now, I can't say for sure whether this GIF was made

based on my heart curve Coding Challenge,

but I can say for sure that the work of Etienne

is amazing, and phenomenal, and uses a special technique,

one that I have recently rediscovered in a dream.

It came to me in a dream, (giggles)

and yet it's 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

is actually a perfect GIF loop.

How is it that the end matches the beginning?

And this is something I talked about

in my previous Coding Challenge, GIF loop,

where we looked at, ah-kay, well,

we can move something across the window.

We can 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 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 blog post from Necessary Disorder,

Etienne, from November 15th, 2017,

which explains this technique of creating GIFs like this.

Here's another one!

How could this even possibly work?

And so to begin this discussion,

I mean, hopefully we're going to get to lots,

I mean, I could probably make videos on this topic

for the rest of my life, (giggles)

but to begin this topic

I'm going to return to a previous Coding Challenge.

You may remember me from Coding Challenges

such as Coding Challenge number 36, blobby.

It's when I used to wear T-shirts

with this other logo on them during my Coding Challenges,

so what is the issue with blobby,

so I'm actually, even though I could just pull up that code,

I'm going to (fingers snap) speed-code blobby again.

You're going to see, watch,

this is like two Coding Challenges in one,

so I'm going to what I'm going to do is I'm just going to say,

let a equal zero,

a is less than TW0_PI,

and what I'm going to do is

I'm going to use my polar-to-cartesian coordinate

♪ Song ♪

and I'm going to say let x equal

r times cosine of that angle.

Let y equal r times sine of that angle,

and then I'm going to make up some value of r.

r is going to be 100.

I'm going to translate to the center of the window,

and then I am going to say beginShape.

I am going to say endShape, and I'm going to set a vertex,

vertex at x, y, and I'm going to say,

and I spelled TWO_PI with a zero,

which is really complaining.

I mean, I'm just saying, stroke 255, and noFill,

and there we go.

Look, I just wrote the code for drawing a circle

because this is a for loop,

I'm going to go through all these different angles.

I'm going to calculate.

I'm going to increment the angle.

I'm going to keep the radius constant,

and I'm going to set all the vertices x, y of the circle.

Now, if r 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,

and that's almost, that's kind of interesting unto itself,

and I could make this a little more evident

by making the time step,

not the time step, the delta angle, the amount of angle,

the amount of vertices I'm drawing, fewer.

I could make sure it connects at the end by saying CLOSE,

and I could also, just for right now, say noLoop

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 I, 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_PI,

or the radians equivalent of 360 degrees,

but again, I'm not going to worry about that.

What I'm going to do is

I'm now going to add Perlin noise to this.

Now, if you've never heard of Perlin noise before,

I will refer you to a playlist

where I talk about what Perlin noise is, and how it works,

and a whole bunch of other videos (giggles) related to this,

so go and watch those now if you want,

or I also link to some articles about Perlin noise,

but I'm going to assume knowledge of Perlin noise

for the purpose of this Coding Challenge,

so right now, what I'm going to do is

I'm going to say let t equal zero,

so I'm going to use t as my offset

through the one-dimensional Perlin noise space.

I'm going to change that to x offset in a little bit,

but let's just keep it at t right now.

Then I'm going to say r is noise

of t 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 Perlin noise values, (sighs)

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 you now you can see look at this,

ew, the amount is changing, but it doesn't match up,

so first of all, let me clean this up a little bit

by saying map, let me use the map function,

which I think will make things a little simpler.

Perlin noise always has a range between zero and one,

and let's say I want that range

to go between like 100 and 200 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 Perlin noise value

doesn't match the first one.

This is the problem.

This is getting at this idea of a perfect Perlin noise loop,

and let's also have delta t,

the way I move through the Perlin noise space.

Siri, what should delta t be?

(crickets chirping)

(computer boops)

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 close, this will be more evident.

Why, right?

The last vertex doesn't match up with the first one.

This is the problem,

so I have my title of this video right here,

Perlin Noise Loops.

Perlin noise,

if we're talking about one-dimensional Perlin noise,

Perlin noise values in a one-dimensional space,

with this being the t-axis, the time axis,

although really I should call this x offset,

'cause it's like the x 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 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 twist it around into a circle,

they don't match up.

There is another way

to look at a space of Perlin noise 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 sort of one-dimensional graph

of Perlin noise values,

I present to you

a grid of Perlin noise values.

The idea is each one of these represents some value

between zero and one.

Now, in this two-dimensional space,

each one of these values represents,

uh, is also a number between zero and one,

so I might have like 0.2 here, 0.3 here, and 0.31 here,

and 0.26 here, and 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 a neighbor after and a neighbor before.

Here, each value has how many neighbors?

One, two, three, four, five, six, seven, eight.

It has neighbors above, and neighbors below,

and neighbors to the right, and neighbors 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'm programming anyway,

so why not just do that?

What if I were to start here

and get this Perlin noise value, then this one,

then this one, then this one, then this one,

then this one, then this one, then this one, then this one,

then this one, then this one, then this one,

then this one?

I would have one, two, three, four, five, six,

seven, eight, nine, 10, 11, 12,

13 random numbers,

and the last one is going to match up with the first one

if I keep going,

so I could get those random numbers over and over again,

and if the amount of numbers there is so vast,

it's going to appear

like it is a continuous sequence of total randomness,

smoothed with Perlin noise,

so this is the theory,

so let's now go and apply this theory

to this particular blobby shape,

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 a pretty sort of like classic visualization

of 2-D Perlin noise as this cloudy like texture,

and this is literally (giggles) 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 255,

and when you look at that you get this cloud-like pattern

because the color seamlessly, smoothly moves between white,

to black, to gray, to black, to gray, to 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 them to 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