Coding Challenge #136.1: Polar Perlin Noise Loops

Channel:

The Coding Train

Subscribers:

1,740,000

Published on February 25, 2019 2:37:29 PM ● Video Link: https://www.youtube.com/watch?v=ZI1dmHv3MeM

Duration: 22:02

185,593 views

5,022

In this multi-part coding challenge I show how to use a noise field and polar coordinates to create a perfect GIF loop. Code: https://thecodingtrain.com/challenges/136-polar-noise-loops

p5.js Web Editor Sketches:
🕹️ Polar Perlin Noise Loops: https://editor.p5js.org/codingtrain/sketches/sy1p1vnQn
🕹️ Perlin Noise GIF Loops: https://editor.p5js.org/codingtrain/sketches/acy80YV86

Other Parts of this Challenge:
📺 Perlin Noise GIF Loops: https://youtu.be/c6K-wJQ77yQ

🎥 Previous video: https://youtu.be/nBKwCCtWlUg?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/3_0Ax95jIrk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🖋️ Étienne Jacob's tweet: https://twitter.com/i/status/1096403588069425152
📓 Étienne Jacob's Blog Post: https://necessarydisorder.wordpress.com/2017/11/15/drawing-from-noise-and-then-making-animated-loopy-gifs-from-there/
🔗 noise() reference: https://processing.org/reference/noise_.html
💻 ffmpeg: https://ffmpeg.org/
🗄 Perlin Noise: https://en.wikipedia.org/wiki/Perlin_noise

Videos:
🚂 Blobby!: https://youtu.be/rX5p-QRP6R4
🚂 Drawing with Fourier Transform and Epicycles: https://youtu.be/MY4luNgGfms
🚂 Heart Curve: https://youtu.be/oUBAi9xQ2X4
🚂 GIF Loop: https://youtu.be/nBKwCCtWlUg
🎥 Perlin Noise: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD
🔴 Coding Train Live 169: https://youtu.be/7k-iJyHq7-k?t=1345s

Related Coding Challenges:
🚂 #36 Blobby!: https://youtu.be/rX5p-QRP6R4
🚂 #130 Drawing with Fourier Transform and Epicycles: https://youtu.be/MY4luNgGfms
🚂 #134 Heart Curve: https://youtu.be/oUBAi9xQ2X4
🚂 #135 Making a GIF Loop in Processing: https://youtu.be/nBKwCCtWlUg

Timestamps:
0:00 Introduce coding challenge
1:35 Let's code
1:45 Recreate coding challenge 'Blobby'
4:18 Add Perlin noise
5:25 Highlight the artifact in the blobby shape
6:30 Illustrate Perlin noise in one dimension
7:18 Explain Perlin noise in two dimensions
8:24 Walk noise space in a loop
9:20 Visualize noise space in two dimensions
10:16 Implement noise in two dimensions
11:41 Refine how noise values change over time
12:21 Experiment with different parameters
14:28 Update how noise values change
17:25 Consider creative possibilities
19:04 Additional notes on the noise space
19:21 Explain noise seed
19:47 Introduce noise in higher dimensions
21:28 Conclude coding challenge

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
💖 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

#gifloop #perlinnoise #polarcoordinates #p5js #processing