Perlin Noise in Two Dimensions (p5.js)
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- In the fifth part of my Perlin Noise Tutorial, I demonstrate how to use two-dimensional Perlin noise in a p5.js sketch.
💻 Code: thecodingtrain...
💻 Code (web editor): editor.p5js.or...
🎥 Next video: • Perlin Noise Detail in...
🎥 All videos: • 13: What is Perlin Noise?
Links discussed in this video:
🔗 p5.js noise() reference: p5js.org/refer...
🔗 p5.js random() reference: p5js.org/refer...
🔗 The Nature of Code: natureofcode.c...
🔗 NOC Github: github.com/nat...
🔗 NOC Examples p5.js: github.com/nat...
Other videos mentioned in this video:
🎥 The Pixel Array - p5.js Tutorial: • 11.3: The Pixel Array ...
🚂 Website: thecodingtrain....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: / discord
💖 Membership: th-cam.com/users/the...
🛒 Store: standard.tv/co...
📚 Books: www.amazon.com...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
I don't think he ever sleeps the amount of content he produces is super human, and it's fanominal.
I do sleep! (i am just very slow at replying to youtube comments.)
@@wassupyo4775 no he clearly said fanominal
Danomenal - Superdan 🦸🏻♂️
Daniel: Codes noise.
Bitrate: Ight imma head out
6:23 Oh no Daniel is fading into the noise
Dan brings joy to coding like no other teacher i have ever come across
Worth mentioning that the reason switching the order of the X and Y for loops works is because in the line "var index = (x+y*width)*4;" width is multiplied by y before it's added to x. p5 doesn't know what X and Y means and isn't actually using the letters to decide direction.
Haha that sudden drop in quality around 5:55.
I guess youtube compression can't handle all those random pixels.
Yeah, this is a problem, oh well!
I didn't expect that quality drop to be that extreme! The problem is, that you can't compress random data. Compression always looks for some structure or repeating values, which you don't have in randomness.
th-cam.com/video/r6Rp-uo6HmI/w-d-xo.html
Again, brilliant explanation. Makes perfect sense.
watching this 6 years later in the beginning of the age of AI, I'm loving it! but I'm also pretty sure I'm going to loose my job and in all likelihood my life soon...so there's that, but in the moment this is good shit regardless for those of us so far behind :)
Was expecting an implementation of the 2d perlin noise function.
for real this is not at all a "perlin noise tutorial"
This is blowing my mind
5:55 You can see the video compression get corrupted as soon as that is on screen, haha
This video helped so much thank youuuuuuuuuuu
Hey I didnt see that link to the pixels video you talked about at 3:53, am I just missing it?
I believe it is this one - th-cam.com/video/nMUMZ5YRxHI/w-d-xo.html
This man is brutal
I'm trying to do this in Processing and get stuck at the RGB spot. The index variable (x + y * width) * 4 gave me an Index out of bounds: 4000 error so I tried putting the index into a variable and mapping it between 0 and 255 but that didn't work (mixture of floats and ints). I'm wondering what the * 4 in the index variable does and if there's a way to do this in processing or I should just bite the bullet and download p5.js
its different !when daniel use the [index+1][index+2][index+3][index+4],it mean r g b alpha,so when you use processing ,you dont need [index+1][index+2][index+3][index+4],only pixel[index] ,that is enough!
Watch the TH-cam algorithm struggle at 6:20 lol
6:07 INSTANT Reminder of Tom Scott's "Why noise and confetti ruin TH-cam video quality" video.
Immediate edit: it's actually called "How Snow and Confetti Ruin TH-cam Video Quality".
0:57 I nearly fell off my chair
Instead of using "pixelDensity(1)", would it be a stupid idea just to double "width" and "height" when coding for loops?
like: for (var x = 0; x < width*2; x++) { for (var y = 0, x < height*2; y++) { } }
Daniel, im trying to do this on processing and when i call the array pixels i got this error:
Could not run the sketch (Target VM failed to initialize).
For more information, read revisions.txt and Help ? Troubleshooting
Saying Indexoutofbounds: 40000
Yes me too, I tried mapping the index to a new variable between 0 and 255 but because some of the outputs would be floats and some ints, processing could not parse. Booo.
the pixels array works differently in processing and p5.js. the code in the for loops should read the following for processing:
int index = (x + y * width);
pixels[index] = color(random(255));
for further reference on the processing pixel array, there is a video by the same creator titled "10.4: Pixels! (The Pixels Array) - Processing Tutorial"
its different !when daniel use the [index+1][index+2][index+3][index+4],it mean r g b alpha,so when you use processing ,you dont need [index+1][index+2][index+3][index+4]like this ,only pixel[index] ,that is enough!
@@asdfasdf-tp7fm this fixes it, thank you!
I need to meet you, Dan.
I tried just now the whole thing in eclipse and got very disappointet. No Noise Funktion, no helpful Code or tutorials. I should really chanche Development enivornment
gist.github.com/indy/296676
Java implementation of perlin noise. Have fun.
thank you
It doesn't matter how much you try to tell me you're 3D, my screen is 2D and therefore so are you.
Compression nightmare
Sir, I want to die. I smoke indoors and that overheats my PC and I feel very alone f
Preparation is a big part of success. What would happen if you scripted this and had all your materials organized and ready to go?
Aradhya Makkar This TH-camr has the possibility to do really great things for many people. I would like to help him turn on more people and not turn off a whole bunch of other people who are interested. As for creepy, you might look into your own question.
piss off
Aradhya Makkar Well, you have made your education level obvious. Good luck with your learning.
I think the spontaneous nature of these videos are big part of their success, and if they become scripted they'll lose their spirit. I for one enjoy them a lot, and watching Dan in action gives a very nice in-depth look at his thinking process and his problem solving techniques.
I just learned some basic Blender last month and have seen the "noise texture" in it. After watching these videos I came back to check the Blender document. They are Perlin noises! Now I have deeper understanding of the function in Blender (octave, fractal...) and it's wonderful. :-)
Sometimes I feel stupid because even Dan explains it fundamentally I still don't fully get it but Dan teaches really well then by replaying and some more thinking eventually I still do get it more and more. If it's just some wordy explanation on wiki, that probably wouldn't happen / takes 10x more time for me to get. Very grateful for this channel!
I know this feeling and feel it all the time, don’t feel stupid you are learning!
Stunning bitrate on that white noise hahaha
3:50 i feel like a recursion function... I came here from a coding challenge to understand perlin noise, now I'm being send to another course of understanding :D
Teacher: You can't hear images
Me at 6:22 with 0 volume: *Noise Noises*
Shiffman's video on manipulating pixels using p5.js: th-cam.com/video/nMUMZ5YRxHI/w-d-xo.html
How can I get the p5 icon as your desktop?
I wonder ...
not sure why youtube keeps dropping my res to 240... but its super annoying.. cause i really need to figure out how this works.. and my connection is A+....
fun fact: a good deal of the noise you'd experience from the TV is a result of the Cosmic Microwave Background - you are/were watching the afterglow of recombination 300,000 years after the birth of the universe.
bro that frustrated sigh because his pen is not working :( really gets to me seeing this guy not happy in every way...
You are the man!!! Thanks a lot
Could you expand this guide to a simple map generation in 2D? Using Water, Grass and mountain tiles? Based on the Z level (Just draw squares with colors) Please
great suggestions.
Forgot to mention this would be top down perspective. And if its not to much, how would you save a map generated? Write a multi-dimensional array to a file?
Greaaaat
If you take a snapshot of this television-noise (by activating noLoop()) - why does every pixel look like black, white and grey?
I expect there to be random colors, as we set the r,g,b values of every pixel to random.
I know that a mixture of every color just results in grey, but I thought every pixel over here should have a unique color...
Or is it an optical illusion? - and there are in fact different colors?
ah got it :)
-> we always assign the same value to r, g & b
like r = 10, g = 10, b = 10
or r = 230, g = 230, b = 230
and that always results in a different grey tone.
Request! I need to make a series of, let's call them buttons, each button will have the same base (an ellipse). But each button has a different icon overlaying the ellipse and a different effect when clicked but the effect generates from beneath the ellipse. In other words, you click the first button and a bunch of lines shoot out from underneath, the second button something different, etc. All of this in one huge canvas with the buttons all lined up on a grid.
You can ask here! github.com/CodingRainbow/Rainbow-Topics/issues
I figured it out. Thanks though. In my stupidity, it never occurred to me that having multiple small canvases achieves the same goal.
You don't really need an xoff and yoff variable. Just use x*inc and y*inc for the noise function.
ah, good point!
yeah, that part was throwing me off for a minute
is the code create noise or the nose create code.....
Excellent explanations 😊Thank you🕊
isn't noise vs time already 2d? it isn't x vs y like classical cartesian but 2d nontheless
I like watching you do your little moonwalk to the dry erase board.
8:05 looks kinda like wood texture
Did he record all the videos on the same day? lol
rip bitrate when showing random noise
whoa your videos are pure gold dan
so... basically when drawing a 1d perlin noise, the left/right axis is the time, but when thinking about 2d perlin noise, the third dimension is time?
Instead of "time", saying "terrain height" would be much better for visualizing it in your head for the 2D Perlin noise. You want the height at some x,y coordinate, and the rendered image is viewed from the topdown like you're inside an aircraft. For the 1D version, you want the height at some x coordinate, which you can also think of as a slice of the terrain in the 2D version.
this guy is so happy doing his job
Now I know how dune is made.
0:56 XD
Thank you
Hi,
I did the following code on a Core i7 laptop with an Nvidia card and am getting about 11-12fps. Is this normal for processing? Should I do something to optimized the code? Thanks!
float xOff = 0;
float yOff = 10000;
float start = 0;
void setup()
{
size(1024, 768, P2D);
}
void draw()
{
println(frameRate);
loadPixels();
for (int y=0; y
+bkf did you try without P2D? Pixels can sometimes be slower in OpenGL depending on your graphics card. You can also investigate PShader. Finally just lowering the resolution in size() will massively increase speed.
Thanks for the tips. Without P2D is about the same. I will look into PShader. I'm guessing that Processing is not the best tool for doing real-time rendering that requires full-screen updates, but rather renderings with more manageable screen updates.