I.2: Introduction - Perlin Noise and p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=Qf4dIN99e2w


Category:
Tutorial
Duration: 11:33
245,646 views
4,789

In this new multi-part Perlin Noise Tutorial, I show you what Perlin noise is and how it can be used in creative coding, more specifically with the p5.js library. In Part I.2 of this series, I introduce you to what Perlin noise is, how it's created and its history. Code: https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/perlin/intro-to-perlin-noise

πŸŽ₯ Next video: https://youtu.be/YcdldZ1E9gU?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM

References:
πŸ”— noise(): https://p5js.org/reference/#/p5/noise

Timestamps:
0:00 Welcome!
0:45 Random() and noise()
1:14 Perlin noise
2:00 Procedural textures
5:04 Perlin noise values over time
7:10 How is Perlin noise generated?
8:05 Cosine interpolation
9:36 Adding the octaves
11:30 Thanks for watching!

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



Other Videos By The Coding Train


2016-07-02Coding Challenge #27: Fireworks!
2016-06-30Coding Train Live Stream 48 - Computer Vision and Fireworks!
2016-06-30Coding Challenge #26: 3D Supershapes
2016-06-29Coding Challenge #25: Spherical Geometry
2016-06-28Live Stream #47 - 3D Supershapes and Spherical Geometry
2016-06-27Coding Challenge #24: Perlin Noise Flow Field
2016-06-26I.6: noiseDetail() - Perlin Noise and p5.js Tutorial
2016-06-24I.5: 2D Noise - Perlin Noise and p5.js Tutorial
2016-06-24I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial
2016-06-23I.3: noise() vs random() - Perlin Noise and p5.js Tutorial
2016-06-23I.2: Introduction - Perlin Noise and p5.js Tutorial
2016-06-22Live Stream #46: Perlin Noise and Flow Fields
2016-06-21Coding Challenge #23: 2D Supershapes
2016-06-2017.7: ADSR Envelope - p5.js Sound Tutorial
2016-06-1817.6: Sound Synthesis - p5.js Sound Tutorial
2016-06-17Live Stream #45: Sound Synthesis, Envelope and Supershapes
2016-06-1717.5: Adding Sound Effects - p5.js Sound Tutorial
2016-06-16Coding Challenge #22: Julia Set in Processing
2016-06-16Live Stream #44: Julia Set and Sound Effects with p5.js
2016-06-13Coding Challenge #21: Mandelbrot Set with p5.js
2016-06-11Live Stream #43: Mandelbrot Set with p5.js


Tags:
noise
perlin
series
perlin noise
terrain
tutorial
terrain generation
procedural generation
2d perlin noise
perlin noise processing
nature of code
processing perlin noise
p5.js
p5js
p5.js tutorial
p5js noise
p5js perlin noise
flow fields
perlin noise flow field
noise()
random()
randomness
javascript
creative coding