I.5: Perlin Noise - The Nature of Code

[@vinotinto8547]

The way you share your knowledge is priceless !

[@matthieubatard4641]

12:00 so funny your head follows the ball

[@ramseshendriks2445]

sure!

[@khoaang6039]

haha!

[@KundoKun]

perlin head

[@erin1569]

Omg, it's sentient! noise(t) is much more powerful than he admits!

[@escape0707]

What? I came from google to learn Perlin noise for finishing my p5js assignment. I watch at your enthusiastic lecture then feel something familiar. I scroll down and see your funny-lovely avatar which I first saw when installing your vscode extension: p5js snippets when setting up my IDE a month ago. What a coincidence! Thank your for sharing your knowledge and the enthusiasm!

[@GregoryTheGr8ster]

TRON was the most magical movie of all time! I saw it when it came out in 1982 (a truly enchanted year!), and I have been trying to "beam" myself into a computer ever since. But I can't make it work. I'm becoming disillusioned! Yet every time I hear about TRON, it revives my interest in digitizing myself and experiencing the fascinating world on the inside of the computer.

[@snowman7514]

he has this mad scientist nerd energy that im totally in love with

[@MeriaDuck]

I may consider myself a seasoned java programmer; using it for business programming since about the year two thousand. Yet using processing and following this series is really a lot of fun! 100 colorful bubbles are now moving merrily up and down on the screen :-)

[@sandybathwater8385]

I've come up with a version of this a couple of times over the years... seems like something many would stumble upon. My idea was to use a variable aside from the point, I called it velocity. I would increment the velocity by a small random amount continuously. ie: velocity += ((random - 0.5) * 0.001) --and then add that 'jiggle' to the point. Gave me very organic color shifts and random "drunken bee" motion... using that velocity thing in less random ways is also a great way to get simple physical type motion really easily.

[@ilustrado7291]

Wow, I never thought that the founder of the 'Perlin Noise' is an NYU professor (thought he's from the 18th century or something). Hopefully, we'll have something like "Shiffman Methodology" or something in the near future.. hehehehe.. Aw yeas.

[@pepsalt]

Shiffman noise

[@laurisstilllearning1483]

Reincarnation. Itsa lie!

[@WvLeegoard]

It's actually called "Shiffman's Theory" and it goes over the principle of how likely it is that a video will be redone based on the original creator's satisfaction of said video AND the degree of gratitude that is received from content receivers (viewers). Still waiting on a video that explains this better tho. ^^

[@Sparrow420]

Yeah, cuz it was real handy with all the computers back then... *raises eyebrow*

[@coolkemps7846]

how would he be form the 18th century he developed this algorithm because he was frustrated while making a computer generated image in 1997 or something

[@joskejef]

He Daniel, thanks for the emotion and energy! Coding videos can use some;) Just started reading on your site. Great great stuff! We are having a seminar (here in the design-school in Cologne) about code and nature, using processing. I was introduced to coding in the nicest way possible. Keep going!

[@TheCodingTrain]

+David Martens so glad to hear, thanks for watching!

[@jeffreycordova9082]

I liked the high level explanation! I have a feeling I'll be watching a few more of your videos.

[@TheCodingTrain]

+Jeffrey Cordova Great, keep me posted on how it goes!

[@hammettl]

Great video Mr. S. This way of describing perlin noise really helped me wrap my mind around the concept.

[@oigroigz21]

Very interesting. Didn't know about the noise() function, I used handcoded techniques to smooth-down ugly randomness. This will save lots of code.

[@EmpuzeUK]

Just wanted to say, if you were my lecturer in uni I'm sure I would have got better grades! Top video mate, good explanation and kept it entertaining

[@yixiliu6181]

love ur videos so much that I recommend them to friends(who don't code) to watch for fun

[@RedEyedJedi]

How cool is it that Ken Perlin works in your building :)

[@EthanReadsHisBooks]

This guy's dopamine levels...y'know? I hope everything in his life are always this exciting.

[@Loaderdani]

Thank you from Code Bullet for explaining perlin noise.

[@007JackTR]

Mapping the Perlin Noise is pretty cool too, normal distribution!!

[@bitxuro]

How to Perlin noise: call noise(). Ok, I learn a lot...

[@davthemillionth]

Yeah, same. I use python so this vid was useless!

[@jeeematerial9666]

Bro he literally explained what is perlin noise. Everything comes from this

[@shihyuehjan3835]

Cool, it's help me study the nature of code! btw are you shiffman?

[@dopplermonk]

Hi Daniel, Just watched this video. Very entertaining - you seem like a warm hearted human being hehe :) Thanks a lot for sharing! Lasse

[@bjornsundin5820]

are you swedish lol

[@sallerc]

Många svenskar här, grym kanal :)

[@brianlink391]

Great energy, you really understand the math and its thought. Could you explain the noise function? Not so much its implementation but how and why it works? Thanks, Brian -------- The only thing that limits your vision is how far you can see.

[@parthhingu1525]

Brian Link can you say me which language coding is use this person??

[@parthhingu1525]

Brian Link I didn't know!!!

[@nekosalad8308]

i wish you could explain how perlin algorithm works.

[@lokeshisrani8827]

Well, he has it explained in his Perlin Noise series.

[@adrycough]

use magical black box function and interpolate the octaves, then map to array with visual representation waalaaa

[@WafflestheGreat]

Thanks so much! I came from Khan Academy, I couldn't understand it much until I actually watched a video instead of reading it xD

[@TheCodingTrain]

+Waffles the Great glad to hear!

[@albertomedinarobredo]

Same here!

[@ramseshendriks2445]

me to!

[@ianwilkey6214]

Great explanation! Thank you, man!

[@HollowBit]

Fun and well explained, just wish I could see the noise and map functions.

[@TheCodingTrain]

Can you be more specific? Is there something missing from the video or are you looking for links to those functions in the processing reference?

[@HollowBit]

+Daniel Shiffman I just want to know how the functions work instead of just using them. Do you have any pseudo code or any actual code that I could see to get a better understanding?

[@HollowBit]

+Vediogames - Official Oh this is a built in function in Processing. I bet I can find it on my own. Thanks for the video again.

[@TheCodingTrain]

+Vediogames - Official ah i see! The map function is simple and you can find it in the source code: github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L4817 Perlin noise is a bit tricker, I would suggest this article: freespace.virgin.net/hugo.elias/models/m_perlin.htm

[@HollowBit]

+Daniel Shiffman Thank you!

[@mchfphr]

I guess you know that by now, but I'm going to say that anyway - your videos are really helpful and interesting! This video inspired me to build a 2D random terrain generator and it looks pretty cool. Thanks a lot :)

[@TheCodingTrain]

Awesome, thanks for the nice feedback!

[@wishcraft4u2]

Why, if you increment the parameter by one, does the noise value even change randomly at all? I thought that at integers perlin noise was always 0? I suppose the noise function in processing has some modification that makes it random if you iterate over integer values? Also it really would help if there were more accessible explanation of how perlin noise actually works, as in, what the algorithm is. This video does a great job explaining what it ends up doing, but it doesnt go into how it works. I've found some articles online intending to "explain" but they really do a poor job... Not explaining terms that will be unknown or confusing to 99.5% of people (why say "slope" when you can say gradient, why explain "linear interpolation" to the plebs, etc...), just not give formulas let alone worked out examples at crucial points, even an instance of an article giving the formula with an arrow pointing to it and then some text saying where I wrote this it should be that, Im not kidding. Sometimes it feels as if this is some mechanism of social closure, as if people are psychologically inhibited from explaining this kind of thing to people not already in the know anyways. It's very discouraging.

[@pablolambert7095]

does this help? kzbin.info/aero/PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD

[@mrbigheart]

dude, awesome content and delivery! :D keep it up!!

[@DasCartoonLand]

you got the best explanations! thanks a lot

[@aranyawaasii]

so how (in layman's terms ...) is this different from Brownian motion? or some other garden variety of low pass filtered filtered noise? (i have no technical knowledge of this but i have spent a bit of time stuffing around with audio code, & i'm just exploring video for the first time. enjoying your high quality content, although perhaps the jocularity could be dialled back a little, but hey, that's just me ... )

[@ganapathysubramaniam]

Hi, I love your videos..thanks for making them so fun. I have a question about Perlin noise generator when it comes to "multiple streams". when I have two or more applications that need independent streams of noise .. how do we do it? is there a way we can have multiple instances of this generator each working in its own smooth realms?

[@DavidDaybreakASMR]

//Here's a cute little spray painting applet using the mouse position and Perlin noise. //Have fun! Blotch p; void setup() { size(600, 600); background(255); p = new Blotch(); } void draw() { p.paint(); p.display(); } class Blotch { float x = width/2; float y = height/2; float z; float t = 0; void display() { fill(x/2,y/2,100*(sin(t))); noStroke(); ellipse(x, y, 10,10); } void paint() { float z = noise(t); float r = noise(t); z = map(z, 0, 1, 0, 200); r = map(r, 0, 1, 0, 200); x = mouseX-20 + random(z); y = mouseY-20 + random(r); x = constrain(x, 0, width -1); y = constrain(y, 0, height -1); t+= 0.2; } }

[@programming3218]

Damn, you're at NYU bruh I had no idea!

[@RedEyedJedi]

NYU must be the best university in the world. I don't care about ratings and all that rubbish. NYU has Dan Shiffman and Ken Perlin in the same building!!! and if this is anything to go by, the level of professors at NYU, must be out of this world. Lucky students.

[@MoonJumpMania]

It would've been pretty cool if you could've gotten Ken Perlin to join you in this video.

[@tenaciousdeathmeatal]

I was curious about the map function because it seems to work different I c++ as a pose to java, I do believe if I understand the reading right, Javas map function does more than one thing.

[@tshichan]

×) i am not lying if i say i love you man , you are incurably awesome keep going

[@sohaibarif2835]

Here is something I made with perlin noise by mistake. imgur.com/cOPKHeg

[@rickdellis_]

Here's the thing I created that led me here, if anyone is wondering: kzbin.info/www/bejne/p2XMeZZqnqqNec0 I ended up here after going down a Nerd Rabbit Hole to figure out why something I made in Trapcode Particular looks so good and why it moves the way it does. Perlin Noise is used in TP's turbulence field which is the driving force behind the motion in that piece. Look, I'm a motion graphics artist and not a coder. I've just fallen into a fascinating world I didn't even knew existed!

[@TheCodingTrain]

Welcome! What you made is beautiful!

[@menso3852]

9:15 how come the circle moves if T and noise is still 0? The map() would always map 0 to 0 right? I don't get it.

[@derkach7907]

Great video but the frames shot kinda feel like 40 fps. Or some motion blure.

[@DigitalMonsters]

The problem with not really understanding this stuff while trying to implement it is you don't know if you're getting the correct behaviour. Like I don't have a clue if my perlin noise random walker is really working correctly >_>

[@ajkdrag]

I absolutely love your videos and your style of teaching!!!! One question--> On applying Perlin noise to the Random walker example from one of your previous videos, it turned out that the random walker is biased towards the (-ve,-ve) quadrant, i.e bottom left quadrant. Any explanations.

[@lucanghuang8201]

I like your video a lot! But sometimes I just don't know if you are high or nervous.

[@gabrieltanguay6578]

so you just actualy use a Function that already exist ? can you show the Noise function ?

[@mrkakotube]

I thought the perlin noise function was deterministic (I learned a little of perlin noise first in Khan Academy), meaning each time i run the program with the same values for t, the walker should do the same. But that is not the case here!

[@mohamedalezzabi2712]

Thank you, this is great

[@christopher8116]

There is no width or height variable, where did they come from within the processing code ?

[@unknown-bx8my]

What is noise and map built-in functions?

[@Vitonolable]

I am curious why it went back to 60 fps at 10.38

[@jayp6955]

"Vectors are a place where we'll be comfortable and be on a *directed path*" pun intended?

[@DlcEnergy]

Is there a tutorial on the algorithm in the noise function? If anyone has a link to some example code, or whatever, that'd be awesome...

[@TheCodingTrain]

+DLC ENERGY this is a good one: freespace.virgin.net/hugo.elias/models/m_perlin.htm

[@DlcEnergy]

Daniel Shiffman just wondering... does that page explain everything i would need to know, to create a noise function, like you did... (based on the random seed, and getting the same output nomatter what, based on the time step?)

[@TheCodingTrain]

+DLC ENERGY no, if you are looking for specifics related to my video then I would go here: natureofcode.com/book/introduction/ Look for the section on Perlin Noise.

[@Shockszzbyyous]

I made a rainbow perlin thingy! :D

[@MrGoatflakes]

linky link.

[@GorgeousPuree]

I didn't understand what "x = map(x, 0, 1, 0, width)" means :(

[@kappa229]

Always thank you ;)

[@304nokia]

It’s sad that there is no explanation of how the noise internals work. Anyone can use a function.

[@dimitriskoutris6139]

Saw the dance in the thumbnail insta hit play :)

[@ajinkyax]

which part of book covered this ? :)

[@SeptillionSeven]

I'd use this, but scratch has no perlin noise block :/

[@DanielGonzalez-rf9go]

how can i import noise() to p5 cause i had this problem ReferenceError: noise is not defined (sketch: line 4), and thanks for the great videos.

[@TheCodingTrain]

It's there! See the examples here: github.com/nature-of-code/noc-examples-p5.js

[@stanger8992]

... it's pretty obvious how to use already implemented function. This video is very well made, but not informative at all.

[@coffeedude]

Yes I was looking for an explanation on how it works to implement it in another software

[@julianabhari7760]

I'm programming this in Java, how do you create the noise function? Is it just a normal function with an int parameter and it returns a ran between 0 and 1?

[@TheCodingTrain]

+Julian Abhari You can view the source code for the noise function here: github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5037

[@Nougator]

2:12 People watching 2020: the end is near.

[@techtycho4752]

What name of program you use :p

[@007LvB]

how does this video help? You just type a magic word "noise", and then you have perlin noise... what about showing the formula for this function? For not clarifying this concept I will -1.

[@TheCodingTrain]

Try this playlist which has more detail! kzbin.info/aero/PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD

[@007LvB]

Well thank you - I didn't expect a reply at all, but it is very nice of you. I will definitely check this out. Thanks!

[@mikhail_from_afar]

Is there Perlin noise library for Python?

[@SuperToughnut]

But what does the noise function do?

[@fisheatsyourhead]

creates non-smooth noise like he mentioned at the beginning at a given point (x) which is akin to time on his graph.

[@vladkilll]

Hey is there a p5.js version somewhere?

[@samim.5091]

from 11:30 I can't stop staring at your lower neck as it gets transparent. Great video, thanks!

[@manualvarado2212]

So i randomly modified my Walker class from the random walker like this and now i am dying: float x; float y; float t; public Walker() { x = 0; t = 0.01; } void Step() { t = t + 0.01; x = x + 0.1; y = noise(sin(t)); y = map(y, 0, 1, height / 2, height); } void Render() { ellipse(x, y, 2, 2); }

[@MassimilianoCerioni]

Thank you!

[@achihabhalib7435]

Helpful and informative, but maybe a bit less drama is better? Still a big thumb up tho

[@tenaciousdeathmeatal]

In c++ it only does half of the equation,

[@dmcg7900]

Don't worry, once we get to vectors we'll be on a directed path. No pun intended...

[@FredoCorleone]

This is incredible! :O

[@saunaksingha9288]

You are smarter than the professor in money heist

[@dariusduesentrieb]

Everything's gonna be okay

[@nagesh007]

Thanks

[@MattVarner]

It's almost like his mind is being interrupted periodically by the light chaos of a Perlin noise solution. :: drops pen in smooth intervals ::

[@proxy1035]

kinda disapointed that he didn't recreate the perlin noise function, because that is why i clicked on this :c

[@froop2393]

wow... this video explains... nothing 😥

[@zert3622]

(prevx + currx)/2

[@citizenfoffie7605]

This guy sounds like kid friendly Michael reeves.

[@DarkRedman31]

That's what the function noise does that is interesting, here you don't really explain

[@JamesSmith-gy3bj]

Here's the map() video: /nicMAoW6u1g

[@bl1398]

how come you said VAAAAAHse and not VAAAYZE? In the UK we say it the first way. I thought americans said it the latter.

[@Kitulous]

Blah123 accents, my friend, accents. You can think of them as another example of randomness. One person says "day-tuh" and "vah-se", second one says "duh-tuh" and "vah-se", third one says "day-tuh" and "vay-ze". It's all the product of a randomness (actually, it depends on a state or even a city Dan lives in).

[@NomTom]

2:13 not so sure anymore

[@greatgamegal8193]

You use "variable = variable + value" a lot when you could just do "variable += value"

[@Lord_Poyo]

Not all languages allow the "+=" modifier, so when trying to teach to a general populace it is better to show something conceptually. Everyone knows how "a = a + b" works, but not everyone knows how "a += b" works, even if it SHOULD be common knowledge.

[@oliverwindall]

Wow

[@southeastdogeanese6741]

Ok good tutorial but I don't trust a floating head

[@Ishaan_Garud]

*I'm actually only 12 years old*

[@miscellaneus1100]

What is the difference between perlin noise (in Processing) and brownian motion(used in SuperCollider)? P.S.: your tutorials are great, I learned to code with your videos, Thanks!!! emanuelecaro.github.io/process15

[@mond2440]

Good explaination. Would appreciate it more if you are more to the point. The little moments of silliness destroyed my short attention span.

[@zed9zed]

To each their own, but this hyper exaggerated delivery wears me out and distracts from the real content.

[@hamzamughal1354]

Oh my God the knowledge you have and your age i mean you should be around 60 and also how you maintain your hair?

[@TheSuikoEnjoyer]

I wish you had the ability to actually explain something.