I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial

Channel:

The Coding Train

Subscribers:

1,740,000

Published on June 24, 2016 3:00:46 PM ● Video Link: https://www.youtube.com/watch?v=y7sgcFhk6ZM

Category:

Tutorial

Duration: 13:36

107,246 views

2,521

In Part I.4 of my Perlin Noise Tutorial, I graph the values of one-dimensional perlin noise and compare to randomness. Code: https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/perlin/graphing-1d-perlin-noise

p5.js Web Editor Sketches:
🕹️ Adding Y-axis: https://editor.p5js.org/codingtrain/sketches/nCYG2SCNq
🕹️ Noise Graph: https://editor.p5js.org/codingtrain/sketches/EZeHXBhei
🕹️ Noisy Sine: https://editor.p5js.org/codingtrain/sketches/M_kuAXwV2

🎥 Previous video: https://youtu.be/YcdldZ1E9gU?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
🎥 Next video: https://youtu.be/bKEaK7WNLzM?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM

References:
🔗 noise(): https://p5js.org/reference/#/p5/noise
🔗 random(): https://p5js.org/reference/#/p5/random
🔗 The Nature of Code: https://natureofcode.com/book/
🔗 NOC Github: https://github.com/nature-of-code
🔗 NOC Examples p5.js: https://github.com/nature-of-code/noc-examples-p5.js

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

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
✪ Nebula: https://go.nebula.tv/codingtrain
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 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
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

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

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#forbeginners #javascript #p5js