Coding Challenge

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

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

Other Parts of this Challenge:
📺 Polar Perlin Noise Loops:    • Coding Challenge #136.1: Polar Perlin...  

🎥 Previous video:    • Coding Challenge #135: Making a GIF L...  
🎥 Next video:    • Coding Challenge #137: 4D OpenSimplex...  
🎥 All videos:    • Coding Challenges  

References:
🖋️ Étienne Jacob's tweet:   / 1096403588069425152  
📓 Étienne Jacob's Blog Post: https://necessarydisorder.wordpress.c...
🔗 noise() reference: https://processing.org/reference/nois...
💻 ffmpeg: https://ffmpeg.org/
🗄 Perlin Noise: https://en.wikipedia.org/wiki/Perlin_...

Videos:
🚂 Blobby!:    • Coding Challenge #36: Blobby!  
🚂 Drawing with Fourier Transform and Epicycles:    • Coding Challenge #130.1: Drawing with...  
🚂 Heart Curve:    • Coding Challenge #134.1: Heart Curve  
🚂 GIF Loop:    • Coding Challenge #135: Making a GIF L...  
🎥 Perlin Noise:    • 13: What is Perlin Noise?  
🔴 Coding Train Live 169:    • Coding Train Live 169: Perlin Noise L...  

Related Coding Challenges:
🚂 #36 Blobby!:    • Coding Challenge #36: Blobby!  
🚂 #130 Drawing with Fourier Transform and Epicycles:    • Coding Challenge #130.1: Drawing with...  
🚂 #134 Heart Curve:    • Coding Challenge #134.1: Heart Curve  
🚂 #135 Making a GIF Loop in Processing:    • Coding Challenge #135: Making a GIF L...  

Timestamps:
0:00 Introduce coding challenge
0:16 Summarize the previous coding challenge 'Polar Perlin Noise Loops'
0:40 Visualize noise loop
1:20 Describe the goal of the coding challenge
2:06 Explain move from JavaScript to Java and Processing
2:36 Let's code
3:03 Compute values for a noise loop
4:19 Map values to position
5:04 Update the challenge with suggestions
5:52 Re-define the goal of the coding challenge
6:32 Find multiple noise values
7:52 Create a NoiseLoop class
9:20 Add a noise loop object to update the position
9:50 Define a value function to return noise values
11:54 Use noise loop to update the position
13:00 Change how noise values are initialized
15:00 Create a Particle class
15:55 Add multiple particle objects
16:47 Experiment with different parameters
19:55 Set up looping scene
20:22 Record Processing sketch
20:57 Create GIF with FFmpeg
22:50 Show GIF loop
23:09 Mention different noise algorithms
26:00 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/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 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-o...

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

#gifloop #perlinnoise #polarcoordinates #p5js #processing