Website marketing using high authority backlinks from popular website's, find out more at webcentreplus.com or email colin@webcentreplus.com

## Coding Challenge #136.1: Polar Perlin Noise Loops

In this challenge, I follow the path of a circle in 2D Perlin noise space in order to use noise values that loop. #PerlinNoiseLoop

💻https://thecodingtrain.com/CodingChallenges/136-polar-perlin-noise-loops.html

🔗 Étienne Jacob’s tweet: https://twitter.com/i/status/1096403588069425152

🔗 Étienne Jacob’s Blog Post: https://necessarydisorder.wordpress.com/2017/11/15/drawing-from-noise-and-then-making-animated-loopy-gifs-from-there/

🎥 Heart Curve: https://youtu.be/oUBAi9xQ2X4

🎥 GIF Loop: https://youtu.be/nBKwCCtWlUg

🎥 Blobby!: https://youtu.be/rX5p-QRP6R4

🎥 Perlin Noise: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD

🎥 Fourier Transform: https://youtu.be/MY4luNgGfms

🚂 Website: http://thecodingtrain.com/

💖 Patreon: https://patreon.com/codingtrain

🛒 Store: https://www.designbyhumans.com/shop/codingtrain/

📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org

🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

source – For all your website needs, visit Spalding Web Design

#### 49 Responses to *Coding Challenge #136.1: Polar Perlin Noise Loops*

### Leave a Reply

You must be logged in to post a comment.

Great Video! I decided to add a 2d noise loop -> 3d noise to test my world map generation stuff I am working on.

great for debugging!

https://photos.app.goo.gl/aqrqgfw8VbNVKii59

Is there any possible chance you can arrange to teach professors and teachers how to make animations like this? Your graphics really help to understand Mathematics and Physics. I think it would help quite a lot in the class room!

I need perlin noise for my landmasses…

https://editor.p5js.org/alienzookeeper@gmail.com/full/qI-DXvoj-

During your explanation I had another idea. What if we take 1D perlin noise, then take the end points, draw a line between them, and then shear the entire graph, so the line stays perfectly flat.

Essentially, when we take the noise value, we subtract some amount from it. That amount ranges from the start point value at t=0 and the end point value at t=1.

Just simulating it in my brain, I don't think it would be noticeable

It looks like the perfect technique for modeling a realistic planet. Just apply the exact same technique to spherical coordinates instead of polar coordinates. Maybe add a couple octaves of additional noise or an underlying sine wave pattern to help create larger scale areas like continents. At any rate, it certainly gives me a better idea of where to start than anything else I've found. Thank you.

Schiff: Collision detection for perlin noise objects! I cant keep just treating my stuff as rectangles forever 😀

I was thinking about whether you could make a seamless 2-dimensional texture (there was a video were you used Perlin noise to create a vector field and had particles flow through it, but it had artefacts at the edges where the vector directions would change abruptly). My first thought was to use the surface of a 3D torus to give a looping 2d texture in the same way you're using the edge of a 2D circle to generate cyclic 1D noise here.

Then I twigged that the would cause distortion in the texture, since the outer edges of the Torus would sweep through a larger length of the noise pattern than the inner surface for the same angle. You could minimise it by turning the minor circle so it's tangent to the major circle rather than radial (so your torus would be flattened as if you sucked all the air out of it) but it'd still have a slight distortion to it unless you actually projected the circle onto the surface of a cylinder (sounds complicated, but probably just needs the coordinate calculations to come in the right order).

Part of me wonders if it would be simpler just to write a Perlin noise class that interpolates smoothly between the edges, but that would limit the scale of the noise to integer fractions of the screen space, and might cause issues if you wanted to create images with odd aspect ratios.

F# fable version (generating the .js) – up at https://github.com/ImaginaryDevelopment/giraffe-play

This would be cool to use to generate random terrain

Perlin noise is always positive

That made me really happy 🙂

Do a next challenge on Hilbert Curves and other space filling curves 🙂

thats an expensivized smoke render.

The mister rogers of computer science.

asteroids but they're blobs that reconverge into bigger blobs if they collide

7:09 lol furry

It's gif

Periodic sequences repeat at known intervals; or, misidentifying randomness: a short tutorial.

Says Perlin Noise, write polar noise. Confused

Skip to 7m28s for the answer

The heart isn't a perfect gif, I can see every time it restarts. Inside, top left, there's a jump every time it restarts and the frames don't match.

4:07 Pi is transcendental, there's no fraction that "

perfectly divides" Pi or its multiples.Never realized this was it's own concept. Used a very similar approach about 6 or 7 years ago to test attenuating light geometry. The renderer I was working on used calculated geometry to represent lights, everything from spheres, cones, toriods to exotic super shapes. After implementing improved perlin noise in HLSL, up to 4 dimensions I was itching to apply it all over the place in the renderer. One of the first things I did was sample noise space at each vertex of the geometry for the lights and passing that into my lighting equations as an attenuation of the radius. Made lights have the familiar imperfection we see in real life and when animated across time, made for very convincing incandescent light sources even though I kept the attenuation so small that the final image showed no more than a delta of 10 in RGB values. Didn't even occur to me while doing that, that I was playing with a rather interesting usage of perlin noise. Then again are there really any non-interesting uses of perlin noise?

As well as changing the Z-Offset, could you also move the centre of the circle (that is sampling values in 2D perlin noise)?

You could also play with that circle in other ways… Maybe use an oval and slowly change it's shape over time?

the question is why it has to be a 2D perlin noise instead of a simple 1D perlin noise which automatically starts and ends at the same point…

you can just interpolinate the perlin noise array after replacing the last value with a copy of the first value. The first and last component will always stay the same that way.

(for reference check out javidx9's video about perlin noise…)

Daniel furry confirmed.

What if you moved where you were getting your perlin noise valises from, instead of moving around the circle? Say, having the circle trace around another circle in the perlin plain? Seems like this might be a cool way to add some more “randomness” to the space without having repeats before the end.

14:20 – you eluded to an interesting challenge. You should create a program that creates a font based off of this noise so that each time you write down the letter "o" for example you'll get one of these subtly off circles that is constantly different, and then extrapolate that to the entire alphabet so when you type in your keyboard you get the computer "handwriting" your sentence. Each letter would look unique, similar to handwriting, whereas fonts each letter is made exactly equal.

Is GIV not GIVE

Man, I like emotion you put on this, you got a new subscriber.

How do you do perlin noise loops in 3D???

You would be a great teacher! I can tell it on the way you leave the mouse in the middle of the images you want to show.

How can you talk about 1 Demensions if you draw x and y axes so 6:35 thes Diagramms are both in 2 Demnsional Space

Wouldn't 4-dimensional Perlin noise allow you to loop the changing blob by using the same process that you use on x and y?

18:03 in he plays the cards and lures you in with that oneliner, your passion for code ignites "if……the creative possibilities expl…." o yeszz 🙂

Just asking…

What are the things JavaScript can actually be used for?

<im a noob>

First of all, you rock. Thank you for your videos. As a newbie, I feel overwhelmed, but inspired by your videos. I guess it's like someone learning to play the drums and watching Neal Pert thinking, 'I have a long way to go' and 'man, that's awesome' all at the same time. What is your advice to the noob? I am currently more than half way through the codecademy full stack web development course and plan to finish that, but was curious to hear from the community what "best practices" are recommend for new guys/gals.

Oh wow i tryed to make the same thing two weeks ago in python for planet generation !

You can't have negative values in the negative perlin noise space? Nope that is not true, perlin noise is designed to work in infinite space. You can also have a repeating pelin noise, so you don't really need to use 2D noise here. But 2D perlin is just there, so it is OK. But I also don't know if your environment really uses perlin noise, because it doesn't look like Perlin noise.

I made something very similar on CodePen a year ago: https://codepen.io/DonKarlssonSan/pen/WzbYBr

Omg, that's so amazing

So what language is this guys? Can somoeone give me a fast answer?

What if, when moving through 3D Perlin space, instead of looking at circles in x,y with increasing z, you looked at circular cross-sections of a torus? Then it’d definitely loop 😀

Please make visualization of blackhole using its formula, like interstellar

This is fantastic. Cyclic noise feels like the kind of thing a lot of people have wanted and I didn’t realize it existed without summing some sort of time-shifted noise function or some other mumbo jumbo. This is a super elegant solution!

I’m wondering if circles would be any better than, say, a square in this context. Surely any closed loop would have this property, but intuitively it feels like a circle is the “most random,” even though something like a square is less computationally taxing.

Also, it would be interesting to see what would happen if you put multiple shapes in a perlin noise “field” that acted as a displacement map. If you varied each vertex in a shape by the value of the noise at that vertex, i’d imagine you’d get a really cool effect by moving that shape around or varying the field in 3d.

Anyways, great video!

So a 3d perlin noise could be used to create a planet with random mountains, oceans, etc…, nice.

I love how human and practical your code is. We don’t have to talk about the semi colons

Потрясающе

I made a kind of rotating christmas tree modifying your code

https://editor.p5js.org/Bastien/full/4eVW4egA8

Love your channel. At first it felt to me as "obnoxious youtuber tries to teach basic programming techniques to people who never tried programming". But later you did such an amazing job with some advanced algorithms like quadtree and some machine learning you've earned a lot of my respect. Keep up the good work, dude!