How to Graph Perlin Noise with p5.js

References:

Timestamps:
0:00 What are we doing?
1:20 Why are the x and y values equal?
2:20 Using two x offset values
5:02 Graph the values
9:05 Add an increment variable
9:46 Moving across the Perlin noise space
12:00 Noisy sine example

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#forbeginners #javascript #p5js

[lilcoderman]

Jesus christ, this might be the best thing I've seen on youtube in a while.

[scorpionlair]

OMG I have to say you are by far the most entertaining programmer I've ever watched!!!! <3 please keep up the awesome vids!!!

[richardjamesbunker]

Omg! The Perlin Noise performance is in this video!!!! My past self was not sure if you'd deliver! Thank you.

[ajgubi]

This video unlocked new dimensions in my

[eyjsrjcehbzvjbvse]

Your smile is really contagious and it really gives me confidence and courage to help me pass the early learning stage. I'm so lucky finding you. Thank you so much!

[munzin]

I love the way you explain things especially your visual style of explaining mathematical concepts with your child like quality. I absolutely love it

[syedbaryalay]

The only programming videos i enjoy, keep going like that

[TM-uiwx]

I love the random interpretive dance. Question: What does perlin noise sound like if I were to play it as a waveform?

[drumbum]

3:11 when dan starts coming out of his shell for the first time haha

[joseph]

Super useful the 'bee like' motion was exactly what I wanted

[madnessmyth]

This guy is so good! i can feel like i can program in this programming language just from watching! and i still haven't touched programming in js! it looks so easy to learn because of this guy!

[goldthumb]

Wow, the amazing background mountains/terrains coming out of 1D Perlin Noise.

[ankita-mishikar]

Loved the perlin Dance. He is always so happy teaching.

[notarobot]

We need more Perlin Noise!
You rock. You weird, weird man.

[jacobhaig]

My first javascript program. I know a decent amount of C++, C#, and java, but this is a good start for my first program in p5*!

var width;
var height;
var incr;
var arrx = [0, 0, 0, 0, 0];
var arry = [0, 0, 0, 0, 0];

function setup() {
width = windowWidth, height = windowHeight;
incr = 0;
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(201);
fill(51);
arrx.push((noise(incr) * width));
arry.push((noise(incr - 1) * height));
for (var x = arrx.length - 7; x < arrx.length; x++) {
line(arrx[x], arry[x], arrx[x + 1], arry[x + 1]);
stroke(incr * 4 % 255, incr * 2 % 255, incr * 1.5 % 255);
strokeWeight(min(sqrt(x), 10))
}
frameRate(10);
incr += 0.02;
}

[AmishRanpariya]

8:55 this is exactly same terrain as hill climbing gaming have !!!

[RobertPodosek]

Dude! You are so awesome, I'm having so much fun. I installed p5js w/the embedded server in vscode and amh aving a blast following along. Love your enthusiasm.

[alexlangevin]

Your videos are a fun way to learn coding. Thanks a lot!

[ibrohimbekrustambekov]

Hi Daniel Shiffman! I am a student on Khan Academy! And it is stimulation to note that they run their tutorials based on your book "Nature of Code". And after watching this video, I have one idea, I live in Tashkent, Uzbekistan, so the United States is far away from my country, but after watching your videos about Peril Noice. I would love to find out that your lessons on You Tube will be added to Khan Academy. Advanced JS: Natural Stimulations Unit! Please, if you read this comment leave the link for the music that you displayed in this video. I love it. Thanks a lot for your efforts, I appreciate it!

[memaluna]

Eres el mejor! Saludos desde Argentina!!