title
Coding Challenge #136.1: Polar Perlin Noise Loops

description
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

detail
{'title': 'Coding Challenge #136.1: Polar Perlin Noise Loops', 'heatmap': [{'end': 226.863, 'start': 194.492, 'weight': 1}, {'end': 389.035, 'start': 357.141, 'weight': 0.705}, {'end': 1007.522, 'start': 964.133, 'weight': 0.735}], 'summary': 'Explores various topics including discovering a heart curve gif, creating seamless gif loops and random patterns with perlin noise, explaining perlin noise in one and two dimensions, applying perlin noise theory to create random blob shapes, using functions for shape manipulation, and visualizing and animating perlin noise with creative possibilities.', 'chapters': [{'end': 41.901, 'segs': [{'end': 41.901, 'src': 'embed', 'start': 0.899, 'weight': 0, 'content': [{'end': 2.808, 'text': 'Hello, and welcome to a coding challenge.', 'start': 0.899, 'duration': 1.909}, {'end': 6.552, 'text': "I'm excited about this one.", 'start': 5.691, 'duration': 0.861}, {'end': 11.215, 'text': 'So I found this GIF the other day by Etienne Jacob.', 'start': 6.652, 'duration': 4.563}, {'end': 14.537, 'text': 'Etienne Jacob with my American pronunciation.', 'start': 12.075, 'duration': 2.462}, {'end': 14.997, 'text': 'And look at it.', 'start': 14.597, 'duration': 0.4}, {'end': 16.458, 'text': 'It might look familiar to you.', 'start': 15.017, 'duration': 1.441}, {'end': 19.74, 'text': 'It looks like that heart curve that I made in a coding challenge previously.', 'start': 16.738, 'duration': 3.002}, {'end': 24.524, 'text': "Now I can't say for sure whether this GIF was made based on my heart curve coding challenge.", 'start': 19.76, 'duration': 4.764}, {'end': 31.408, 'text': 'But I can say for sure that the work of Etienne is amazing and phenomenal and uses a special technique,', 'start': 24.904, 'duration': 6.504}, {'end': 34.23, 'text': 'one that I have recently rediscovered in a dream.', 'start': 31.408, 'duration': 2.822}, {'end': 35.471, 'text': 'It came to me in a dream.', 'start': 34.29, 'duration': 1.181}, {'end': 39.417, 'text': "And yet it's been on the internet at least since 2017, if not before that.", 'start': 35.831, 'duration': 3.586}, {'end': 41.901, 'text': "So what's going on here that's so fabulous and exciting?", 'start': 39.677, 'duration': 2.224}], 'summary': "Comparing a gif to a heart curve coding challenge, discussing etienne jacob's work and a special technique rediscovered in a dream.", 'duration': 41.002, 'max_score': 0.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM899.jpg'}], 'start': 0.899, 'title': 'Discovering a heart curve gif', 'summary': 'Discusses the discovery of a gif resembling a previously made heart curve in a coding challenge, highlighting the amazing and phenomenal work of etienne jacob and a special technique rediscovered in a dream.', 'chapters': [{'end': 41.901, 'start': 0.899, 'title': 'Coding challenge excitement!', 'summary': 'Discusses the discovery of a gif resembling a previously made heart curve in a coding challenge, highlighting the amazing and phenomenal work of etienne jacob and a special technique rediscovered in a dream.', 'duration': 41.002, 'highlights': ["The GIF found by the speaker resembles the heart curve created in a previous coding challenge, indicating a potential influence on the GIF by the speaker's work.", "Etienne Jacob's work is described as amazing and phenomenal, emphasizing the speaker's admiration for his technique and creativity.", 'The speaker mentions rediscovering a special technique in a dream, suggesting a personal connection to the creative process and highlighting the mysterious nature of inspiration.']}], 'duration': 41.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM899.jpg', 'highlights': ['The GIF resembles the heart curve from a previous coding challenge, indicating potential influence.', "Etienne Jacob's work is described as amazing and phenomenal, emphasizing admiration for his technique.", 'The speaker mentions rediscovering a special technique in a dream, highlighting the mysterious nature of inspiration.']}, {'end': 389.916, 'segs': [{'end': 102.775, 'src': 'embed', 'start': 41.901, 'weight': 0, 'content': [{'end': 50.554, 'text': 'is this chaotic scene, this scene of randomness and smoky heart beauty, is actually a perfect GIF loop.', 'start': 41.901, 'duration': 8.653}, {'end': 54.079, 'text': 'how is it that the end matches the beginning?', 'start': 51.235, 'duration': 2.844}, {'end': 61.047, 'text': 'And this is something I talked about in my previous coding challenge GIF loop, where we looked at okay, well, we can move something across the window,', 'start': 54.099, 'duration': 6.948}, {'end': 65.553, 'text': 'we can rotate something, and as long as the last frame matches up with the first frame, it will loop.', 'start': 61.047, 'duration': 4.506}, {'end': 71.279, 'text': "But if it's all random and chaotic, how do you do that? And so, There is a technique for doing this.", 'start': 65.793, 'duration': 5.486}, {'end': 78.822, 'text': 'Golan Levin actually also has an example bit of code which describes this in more detail, which I will show you later in this video.', 'start': 71.939, 'duration': 6.883}, {'end': 88.126, 'text': 'But mostly, what I want to do is highlight to you this blog post from Necessary Disorder, Etienne, from November 15th 2017,', 'start': 79.362, 'duration': 8.764}, {'end': 91.747, 'text': 'which explains this technique of creating GIFs like this', 'start': 88.126, 'duration': 3.621}, {'end': 92.428, 'text': "Here's another one!.", 'start': 91.807, 'duration': 0.621}, {'end': 95.049, 'text': 'How could this even possibly work?', 'start': 93.488, 'duration': 1.561}, {'end': 99.573, 'text': "And so to begin this discussion, I mean hopefully we're going to get to lots of.", 'start': 95.71, 'duration': 3.863}, {'end': 102.775, 'text': 'I mean I could probably make videos on this topic for the rest of my life.', 'start': 99.573, 'duration': 3.202}], 'summary': 'Technique for creating perfect gif loops from chaotic scenes discussed with reference to coding challenge and blog post.', 'duration': 60.874, 'max_score': 41.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM41901.jpg'}, {'end': 226.863, 'src': 'heatmap', 'start': 194.492, 'weight': 1, 'content': [{'end': 201.215, 'text': "I'm going to calculate, I'm going to increment the angle, I'm going to keep the radius constant and I'm going to set all the vertices x,", 'start': 194.492, 'duration': 6.723}, {'end': 201.675, 'text': 'y in the circle.', 'start': 201.215, 'duration': 0.46}, {'end': 207.898, 'text': "Now, if r is random, and this is basically what I did in blobby, if I say random 50 to 100, Look what we've got.", 'start': 201.735, 'duration': 6.163}, {'end': 211.379, 'text': "We've got this kind of like crazy flickering thing.", 'start': 208.098, 'duration': 3.281}, {'end': 213.5, 'text': "And that's kind of interesting unto itself.", 'start': 211.459, 'duration': 2.041}, {'end': 223.302, 'text': "And I could make this a little more evident by making the time step, not the time step, the delta angle, the amount of vertices I'm drawing, fewer.", 'start': 213.78, 'duration': 9.522}, {'end': 226.863, 'text': 'I could make sure it connects at the end by saying close.', 'start': 224.243, 'duration': 2.62}], 'summary': 'Calculating vertices in circle with random radius creates interesting flickering effect.', 'duration': 32.371, 'max_score': 194.492, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM194492.jpg'}, {'end': 389.035, 'src': 'heatmap', 'start': 287.644, 'weight': 4, 'content': [{'end': 291.346, 'text': "I'm going to change that to x offset in a little bit, but let's just keep it at t right now.", 'start': 287.644, 'duration': 3.702}, {'end': 295.108, 'text': "Then I'm going to say r is noise.", 'start': 291.826, 'duration': 3.282}, {'end': 299.032, 'text': 'of t times 100.', 'start': 296.491, 'duration': 2.541}, {'end': 308.296, 'text': "So, interestingly enough, we get a different size circle every time I run the sketch because we're getting a new,", 'start': 299.032, 'duration': 9.264}, {'end': 311.057, 'text': 'randomly seeded set of Perlin noise values.', 'start': 308.296, 'duration': 2.761}, {'end': 317.759, 'text': "And I'm never moving through that time space, so each vertex is exactly the same.", 'start': 313.238, 'duration': 4.521}, {'end': 325.363, 'text': 'So what I want to do now is say, in the loop, t plus equal some amount of delta.', 'start': 317.819, 'duration': 7.544}, {'end': 326.363, 'text': 'So now you can see, look at this.', 'start': 325.403, 'duration': 0.96}, {'end': 330.025, 'text': "The amount is changing, but it doesn't match up.", 'start': 327.604, 'duration': 2.421}, {'end': 333.526, 'text': 'So first of all, let me clean this up a little bit by saying map.', 'start': 330.285, 'duration': 3.241}, {'end': 337.068, 'text': 'Let me use the map function, which I think It will make things a little simpler.', 'start': 333.546, 'duration': 3.522}, {'end': 339.129, 'text': 'Perlin noise always has a range between 0 and 1.', 'start': 337.108, 'duration': 2.021}, {'end': 342.671, 'text': "And let's say I want that range to go between 100 and 200 now.", 'start': 339.129, 'duration': 3.542}, {'end': 344.213, 'text': 'So we can see, look at that.', 'start': 343.292, 'duration': 0.921}, {'end': 351.537, 'text': "Now there's just this little, every time I run it, you can see that the last Perlin noise value doesn't match the first one.", 'start': 344.273, 'duration': 7.264}, {'end': 352.818, 'text': 'This is the problem.', 'start': 351.577, 'duration': 1.241}, {'end': 355.9, 'text': 'This is getting at this idea of a perfect Perlin noise loop.', 'start': 352.858, 'duration': 3.042}, {'end': 361.884, 'text': "And let's also have delta t, the way I move through the Perlin noise space.", 'start': 357.141, 'duration': 4.743}, {'end': 365.767, 'text': 'Siri, what should delta t be?', 'start': 362.765, 'duration': 3.002}, {'end': 378.505, 'text': 'So let me change that to this, and you can see, even if I move t faster and I get this kind of smoother, blobby-like shape,', 'start': 371.479, 'duration': 7.026}, {'end': 379.987, 'text': 'it always has this artifact.', 'start': 378.505, 'duration': 1.482}, {'end': 389.035, 'text': "The last, and by the way, if I took off this close, this will be more evident why, right? The last vertex doesn't match up with the first one.", 'start': 380.307, 'duration': 8.728}], 'summary': 'Using perlin noise to create dynamic shapes with range adjustments and loop artifact identification.', 'duration': 74.24, 'max_score': 287.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM287644.jpg'}], 'start': 41.901, 'title': 'Creating seamless gif loops and random patterns with perlin noise', 'summary': 'Explores the technique of creating perfect gif loops and using perlin noise to create random patterns, highlighting a blog post from necessary disorder and demonstrating the variation of circle size and shape with each run.', 'chapters': [{'end': 126.735, 'start': 41.901, 'title': 'Creating perfect gif loops', 'summary': 'Explores the technique of creating perfect gif loops, discussing how random and chaotic scenes can still match the beginning and end, and highlights a blog post from necessary disorder explaining this technique.', 'duration': 84.834, 'highlights': ['Golan Levin has an example bit of code which describes the technique of creating perfect GIF loops.', 'The chapter talks about a blog post from Necessary Disorder explaining the technique of creating GIFs with random and chaotic scenes.', 'The author plans to return to a previous coding challenge to illustrate the technique of creating perfect GIF loops.', 'The chapter discusses the challenge of creating perfect GIF loops with random and chaotic scenes.', 'The author expresses the desire to make videos on this topic for the rest of their life.']}, {'end': 389.916, 'start': 126.855, 'title': 'Creating random patterns with perlin noise', 'summary': 'Discusses using perlin noise to create random patterns by mapping the noise values to the vertices of a circle drawn using a for loop in processing, demonstrating how the size and shape of the circle vary with each run and the challenges faced when trying to achieve a seamless loop.', 'duration': 263.061, 'highlights': ['The size and shape of the circle vary with each run due to the use of randomly seeded Perlin noise values, demonstrating the randomness and variation achieved through the Perlin Noise technique. The size of the circle changes with each run due to the use of randomly seeded Perlin noise values, showcasing the randomness and variation achieved through the Perlin Noise technique.', "Challenges faced in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle. The challenge arises in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle.", "Discussion on using the map function to adjust the range of Perlin noise values and the impact on the circle's appearance, demonstrating the manipulation of noise values to control the visual output. The map function is used to adjust the range of Perlin noise values, showcasing the manipulation of noise values to control the visual output of the circle."]}], 'duration': 348.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM41901.jpg', 'highlights': ['The chapter discusses the challenge of creating perfect GIF loops with random and chaotic scenes.', 'The chapter talks about a blog post from Necessary Disorder explaining the technique of creating GIFs with random and chaotic scenes.', 'Golan Levin has an example bit of code which describes the technique of creating perfect GIF loops.', 'The author plans to return to a previous coding challenge to illustrate the technique of creating perfect GIF loops.', 'The size and shape of the circle vary with each run due to the use of randomly seeded Perlin noise values, demonstrating the randomness and variation achieved through the Perlin Noise technique.', 'The size of the circle changes with each run due to the use of randomly seeded Perlin noise values, showcasing the randomness and variation achieved through the Perlin Noise technique.', 'The map function is used to adjust the range of Perlin noise values, showcasing the manipulation of noise values to control the visual output of the circle.', "Challenges faced in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle.", "The challenge arises in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle.", 'The author expresses the desire to make videos on this topic for the rest of their life.']}, {'end': 546.867, 'segs': [{'end': 484.773, 'src': 'embed', 'start': 438.442, 'weight': 0, 'content': [{'end': 442.363, 'text': 'There is another way to look at a space of Perlin noise values.', 'start': 438.442, 'duration': 3.921}, {'end': 444.563, 'text': 'This is a way of looking at it in one dimension.', 'start': 442.623, 'duration': 1.94}, {'end': 447.824, 'text': "Let's now look at it in two dimensions.", 'start': 445.023, 'duration': 2.801}, {'end': 458.626, 'text': 'So instead of having a sort of one-dimensional graph of Perlin noise values, I present to you a grid of Perlin noise values.', 'start': 448.424, 'duration': 10.202}, {'end': 463.287, 'text': 'The idea is, right, each one of these represents some value between zero and one.', 'start': 459.147, 'duration': 4.14}, {'end': 470.486, 'text': 'Now in this two-dimensional space, each one of these values represents, is also a number between zero and one.', 'start': 463.668, 'duration': 6.818}, {'end': 476.269, 'text': 'So I might have like 0.2 here, 0.3 here, and 0.31 here, and 0.26 here, and 0.19 here.', 'start': 470.506, 'duration': 5.763}, {'end': 478.41, 'text': 'Every single space has a value.', 'start': 476.809, 'duration': 1.601}, {'end': 484.773, 'text': 'Now here, in one dimension, any number in one dimensional space is quite similar to its neighbors.', 'start': 478.43, 'duration': 6.343}], 'summary': 'Exploring perlin noise values in one and two dimensions with values between zero and one.', 'duration': 46.331, 'max_score': 438.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM438442.jpg'}, {'end': 544.166, 'src': 'embed', 'start': 510.508, 'weight': 2, 'content': [{'end': 513.931, 'text': 'to get random values and always end up back where I started?', 'start': 510.508, 'duration': 3.423}, {'end': 517.443, 'text': 'And why not just walk in a circular path?', 'start': 515.361, 'duration': 2.082}, {'end': 520.047, 'text': "I mean that's kind of what I'm programming anyway.", 'start': 517.464, 'duration': 2.583}, {'end': 521.068, 'text': 'so why not just do that?', 'start': 520.047, 'duration': 1.021}, {'end': 527.374, 'text': 'What if I were to start here and get this Perlin noise value, then this one, then this one, then this one, then this one, then this one,', 'start': 521.388, 'duration': 5.986}, {'end': 531.017, 'text': 'then this one, then this one, then this one, then this one, then this one, then this one.', 'start': 527.374, 'duration': 3.643}, {'end': 536.262, 'text': 'I would have one, two, three, four, five, six, seven, eight, nine, 10, 11, 12, 13 random numbers.', 'start': 531.318, 'duration': 4.944}, {'end': 544.166, 'text': 'And the last one is going to match up with the first one if I keep going.', 'start': 540.385, 'duration': 3.781}], 'summary': 'Consider using circular path to generate 13 random numbers with matching first and last values.', 'duration': 33.658, 'max_score': 510.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM510508.jpg'}], 'start': 390.556, 'title': 'Perlin noise', 'summary': 'Explains the concept of perlin noise in one and two dimensions, emphasizing the difference in neighboring values and the idea of walking in a circular path to obtain random values.', 'chapters': [{'end': 546.867, 'start': 390.556, 'title': 'Perlin noise explained', 'summary': 'Explains the concept of perlin noise in one and two dimensions, emphasizing the difference in neighboring values and the idea of walking in a circular path to obtain random values.', 'duration': 156.311, 'highlights': ['The concept of Perlin noise is explained in one and two dimensions, highlighting the difference in the number of neighbors and the idea of walking in a circular path to obtain random values, with a total of 13 random numbers obtained in a circular path.', 'In one dimension, each value has two neighbors, while in two dimensions, each value has eight neighbors, emphasizing the difference in neighboring values and the complexity of the two-dimensional space.', 'The chapter also illustrates the idea of walking in a circular path to obtain random Perlin noise values, ensuring that the last value matches up with the first one, demonstrating the concept of looping through random numbers.']}], 'duration': 156.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM390556.jpg', 'highlights': ['In two dimensions, each value has eight neighbors, emphasizing the complexity of the two-dimensional space.', 'The concept of Perlin noise is explained in one and two dimensions, highlighting the difference in neighboring values and the idea of walking in a circular path to obtain random values.', 'The chapter illustrates the idea of walking in a circular path to obtain random Perlin noise values, ensuring that the last value matches up with the first one.']}, {'end': 741.519, 'segs': [{'end': 589.024, 'src': 'embed', 'start': 546.887, 'weight': 0, 'content': [{'end': 554.329, 'text': "And if the amount of numbers there is so vast, it's going to appear like it is a continuous sequence of total randomness smoothed with Perlin noise.", 'start': 546.887, 'duration': 7.442}, {'end': 555.309, 'text': 'So this is the theory.', 'start': 554.369, 'duration': 0.94}, {'end': 560.771, 'text': "So let's now go and apply this theory to this particular blobby shape.", 'start': 555.609, 'duration': 5.162}, {'end': 568.214, 'text': 'So before I get back to the blobby code, what I have here is a processing sketch that is visualizing Perlin noise in a two-dimensional space.', 'start': 561.351, 'duration': 6.863}, {'end': 574.577, 'text': 'So this is a pretty sort of classic visualization of 2D Perlin noise as this cloudy-like texture.', 'start': 568.514, 'duration': 6.063}, {'end': 578.499, 'text': 'And this is literally exactly this.', 'start': 575.097, 'duration': 3.402}, {'end': 589.024, 'text': 'where each number, each random Perlin noise value in the two-dimensional space is represented as a pixel with a brightness value between 0 and 255.', 'start': 579.079, 'duration': 9.945}], 'summary': 'Perlin noise theory applied to 2d space, visualized as cloudy-like texture.', 'duration': 42.137, 'max_score': 546.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM546887.jpg'}, {'end': 692.8, 'src': 'embed', 'start': 651.972, 'weight': 3, 'content': [{'end': 655.854, 'text': 'And I want to get the Perlin noise at X offset, Y offset.', 'start': 651.972, 'duration': 3.882}, {'end': 659.237, 'text': 'So this is now what I had before.', 'start': 656.295, 'duration': 2.942}, {'end': 661.899, 'text': 'If the X offset and the Y offset right.', 'start': 659.717, 'duration': 2.182}, {'end': 668.884, 'text': "basically, if what I'm doing is I'm asking for what is the Perlin noise value at this spot,", 'start': 661.899, 'duration': 6.985}, {'end': 677.134, 'text': "It's going to give me some random value and then it's going to make that the radius of the circle, the blob shape as it goes all the way around.", 'start': 670.532, 'duration': 6.602}, {'end': 678.135, 'text': 'So I want to start moving.', 'start': 677.334, 'duration': 0.801}, {'end': 679.295, 'text': "But I actually don't want to start here.", 'start': 678.155, 'duration': 1.14}, {'end': 680.536, 'text': 'I want to start over here.', 'start': 679.415, 'duration': 1.121}, {'end': 686.818, 'text': 'So I have to deal with the fact that I need to find this point if 0, 0 is in the top left,', 'start': 680.896, 'duration': 5.922}, {'end': 689.399, 'text': "because I can't have negative values in the Perlin noise space.", 'start': 686.818, 'duration': 2.581}, {'end': 691.399, 'text': 'So this is a little bit of a tricky piece of this.', 'start': 689.419, 'duration': 1.98}, {'end': 692.8, 'text': 'But I want to use that same.', 'start': 691.68, 'duration': 1.12}], 'summary': 'Using perlin noise to generate blob shape with x and y offsets.', 'duration': 40.828, 'max_score': 651.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM651972.jpg'}, {'end': 741.519, 'src': 'embed', 'start': 715.839, 'weight': 5, 'content': [{'end': 720.984, 'text': "And so in fact, I'm trying to look at Perlin noise values over here.", 'start': 715.839, 'duration': 5.145}, {'end': 723.582, 'text': "Right, and this doesn't exist.", 'start': 722, 'duration': 1.582}, {'end': 725.403, 'text': 'The Perlin noise space is all positive.', 'start': 723.622, 'duration': 1.781}, {'end': 729.748, 'text': "So there's actually a very simple solution to this, which is just to add one.", 'start': 725.944, 'duration': 3.804}, {'end': 731.87, 'text': 'And let me add the close back in.', 'start': 730.168, 'duration': 1.702}, {'end': 736.334, 'text': "And let's run this a bunch of times, and we can see, there we go.", 'start': 733.852, 'duration': 2.482}, {'end': 741.519, 'text': 'We have this nice random blobby shape where the end matches the beginning.', 'start': 736.374, 'duration': 5.145}], 'summary': 'Adding one to perlin noise values creates a random blobby shape with matching end and beginning.', 'duration': 25.68, 'max_score': 715.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM715839.jpg'}], 'start': 546.887, 'title': 'Applying perlin noise theory and creating random blob shape', 'summary': 'Explores the application of perlin noise theory to visualize a cloud-like texture in a 2d space and creating a random blob shape by adjusting offsets and dealing with negative values, achieving a symmetrical result.', 'chapters': [{'end': 624.736, 'start': 546.887, 'title': 'Applying perlin noise theory', 'summary': 'Explores the application of perlin noise theory to visualize a cloud-like texture in a two-dimensional space, representing random perlin noise values as pixels with brightness values between 0 and 255, and the idea of mapping those numeric values to something else besides a pixel value.', 'duration': 77.849, 'highlights': ['The chapter explains the theory of Perlin noise and its application to visualize a cloud-like texture in a two-dimensional space.', 'It discusses the representation of random Perlin noise values as pixels with brightness values between 0 and 255.', 'The idea of mapping numeric values from Perlin noise to something besides a pixel value is explored.']}, {'end': 741.519, 'start': 624.736, 'title': 'Creating random blob shape with perlin noise', 'summary': 'Explains the process of using perlin noise to create a random blob shape in a 2d canvas by adjusting x and y offsets, dealing with negative values, and adding one to the noise space to achieve a symmetrical result.', 'duration': 116.783, 'highlights': ['Using Perlin noise to create random blob shape The chapter explains the process of using Perlin noise to create a random blob shape in a 2D canvas.', 'Adjusting X and Y offsets The chapter discusses the adjustment of X and Y offsets to determine the Perlin noise value at specific spots.', 'Dealing with negative values in the Perlin noise space The chapter addresses the challenge of dealing with negative values in the Perlin noise space and the need to find a specific point when 0, 0 is in the top left.', 'Adding one to the noise space to achieve a symmetrical result The chapter presents the solution of adding one to the Perlin noise space to achieve a symmetrical random blob shape.']}], 'duration': 194.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM546887.jpg', 'highlights': ['The chapter explains the theory of Perlin noise and its application to visualize a cloud-like texture in a two-dimensional space.', 'Using Perlin noise to create a random blob shape in a 2D canvas.', 'The idea of mapping numeric values from Perlin noise to something besides a pixel value is explored.', 'Adjusting X and Y offsets to determine the Perlin noise value at specific spots.', 'The chapter addresses the challenge of dealing with negative values in the Perlin noise space and the need to find a specific point when 0, 0 is in the top left.', 'Adding one to the noise space to achieve a symmetrical result.']}, {'end': 1035.63, 'segs': [{'end': 822.141, 'src': 'embed', 'start': 795.405, 'weight': 0, 'content': [{'end': 800.778, 'text': 'we have and this is sine we have exactly what I had before.', 'start': 795.405, 'duration': 5.373}, {'end': 807.499, 'text': "And I can keep, I can keep rewriting the sketch and I'm getting a new version of the shape.", 'start': 801.218, 'duration': 6.281}, {'end': 812.76, 'text': 'But interestingly enough, what happens, this is really now something that I should make a parameter.', 'start': 807.759, 'duration': 5.001}, {'end': 817.901, 'text': "So for example, what if I were to say, let, I'm going to make this a global variable.", 'start': 813.1, 'duration': 4.801}, {'end': 822.141, 'text': "Let, I'm going to call this noise max equal two.", 'start': 818.341, 'duration': 3.8}], 'summary': 'Experimenting with sketch to generate shape variations, considering making a parameter like noise max equal to 2.', 'duration': 26.736, 'max_score': 795.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM795405.jpg'}, {'end': 905.341, 'src': 'embed', 'start': 876.57, 'weight': 1, 'content': [{'end': 880.472, 'text': "I'm going to say, and this I'm using the p5 dom library to do this, which is a really quick way.", 'start': 876.57, 'duration': 3.902}, {'end': 890.018, 'text': "I'm going to create a slider which has a range between like 0.1 and 10, and I'm going to start it at actually, let's make it between zero and 10,", 'start': 880.712, 'duration': 9.306}, {'end': 891.499, 'text': "and I'm going to start it at zero.", 'start': 890.018, 'duration': 1.481}, {'end': 900.684, 'text': 'So I have the slider here now, and then I want noise max to equal, noise max to equal slider.value.', 'start': 892.039, 'duration': 8.645}, {'end': 902.325, 'text': 'So watch this.', 'start': 901.845, 'duration': 0.48}, {'end': 905.341, 'text': "Okay, that didn't work.", 'start': 904.42, 'duration': 0.921}], 'summary': 'Using p5 dom library to create a slider with a range from 0 to 10, setting noise max to equal the slider value.', 'duration': 28.771, 'max_score': 876.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM876570.jpg'}, {'end': 1007.522, 'src': 'heatmap', 'start': 964.133, 'weight': 0.735, 'content': [{'end': 965.714, 'text': 'So let me show you another thing here.', 'start': 964.133, 'duration': 1.581}, {'end': 972.839, 'text': "Okay, what I'm going to do is show you, so let me make a variable called phase.", 'start': 967.235, 'duration': 5.604}, {'end': 974.941, 'text': 'Let me have that be zero.', 'start': 972.859, 'duration': 2.082}, {'end': 980.065, 'text': "I'm going to have cosine of angle plus phase, sine of angle plus phase.", 'start': 975.441, 'duration': 4.624}, {'end': 987.658, 'text': 'What do you think is going to happen if I increment phase? Well, it looks like the shape is rotating.', 'start': 981.005, 'duration': 6.653}, {'end': 989.399, 'text': "I mean, it is rotating, or it's not rotating.", 'start': 987.738, 'duration': 1.661}, {'end': 990.679, 'text': "I mean, visually, it's rotating.", 'start': 989.419, 'duration': 1.26}, {'end': 993.98, 'text': "But I'm actually just starting at a different point of the noise space.", 'start': 990.899, 'duration': 3.081}, {'end': 998.321, 'text': 'Interestingly enough and if I make that much smaller,', 'start': 994.44, 'duration': 3.881}, {'end': 1003.202, 'text': "you'll actually see that smaller than the amount of vertices I have you start to see a wiggle between them.", 'start': 998.321, 'duration': 4.881}, {'end': 1007.522, 'text': "So I could make this 0.2, and that's going to be even more apparent.", 'start': 1003.542, 'duration': 3.98}], 'summary': 'Demonstrates visual rotation with phase increment, reveals wiggle at smaller phase size.', 'duration': 43.389, 'max_score': 964.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM964133.jpg'}, {'end': 993.98, 'src': 'embed', 'start': 967.235, 'weight': 3, 'content': [{'end': 972.839, 'text': "Okay, what I'm going to do is show you, so let me make a variable called phase.", 'start': 967.235, 'duration': 5.604}, {'end': 974.941, 'text': 'Let me have that be zero.', 'start': 972.859, 'duration': 2.082}, {'end': 980.065, 'text': "I'm going to have cosine of angle plus phase, sine of angle plus phase.", 'start': 975.441, 'duration': 4.624}, {'end': 987.658, 'text': 'What do you think is going to happen if I increment phase? Well, it looks like the shape is rotating.', 'start': 981.005, 'duration': 6.653}, {'end': 989.399, 'text': "I mean, it is rotating, or it's not rotating.", 'start': 987.738, 'duration': 1.661}, {'end': 990.679, 'text': "I mean, visually, it's rotating.", 'start': 989.419, 'duration': 1.26}, {'end': 993.98, 'text': "But I'm actually just starting at a different point of the noise space.", 'start': 990.899, 'duration': 3.081}], 'summary': 'Demonstrating the effect of incrementing the phase variable on the rotation of a shape in the noise space.', 'duration': 26.745, 'max_score': 967.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM967235.jpg'}], 'start': 741.579, 'title': 'Using functions for shape manipulation', 'summary': 'Covers using the map function to vary cosine and sine values, exploring perlin noise for subtle shape variations, and demonstrating phase variation and rotation using sine waves. it also showcases the effects of parameters like noise max and phase adjustments on resulting shapes.', 'chapters': [{'end': 855.196, 'start': 741.579, 'title': 'Using map function to vary cosine and sine values', 'summary': 'Explores using the map function to vary the values of cosine and sine, demonstrating how different parameters like noise max can affect the resulting shape.', 'duration': 113.617, 'highlights': ['By utilizing the map function to adjust the values of cosine and sine, the transcript demonstrates the flexibility in varying the shape by changing parameters like noise max.', 'The speaker explains the importance of using a separate variable for incrementing in the loop, highlighting the significance of the .1 incrementer and cosine of the angle.', 'The chapter discusses the impact of different values for the global variable noise max, showcasing the resulting variations in the shape, such as achieving a near-perfect circle with just a little bit of noise.']}, {'end': 927.635, 'start': 855.196, 'title': 'Using perlin noise for shape manipulation', 'summary': 'Explores the use of perlin noise to add subtle variations to perfect shapes such as letters, circles, and squares, and demonstrates the creation and manipulation of a slider with the p5 dom library to control the noise space, showcasing its effect on the shape.', 'duration': 72.439, 'highlights': ['The chapter showcases the use of Perlin noise to add subtle variations to perfect shapes such as letters, circles, and squares, enhancing their appearance with a hand-drawn aesthetic.', 'The demonstration of creating and manipulating a slider with the p5 dom library to control the noise space provides a quick and interactive way to observe the effects of noise manipulation on shape appearance.']}, {'end': 1035.63, 'start': 928.175, 'title': 'Phase variation and rotation demonstration', 'summary': 'Discusses the demonstration of phase variation and rotation using sine waves, showcasing how changing the phase affects the rotation and creating a visually apparent wiggle by adjusting the phase smaller than the amount of vertices.', 'duration': 107.455, 'highlights': ['By incrementing the phase, the shape appears to rotate, visually demonstrating the impact of phase variation.', 'Adjusting the phase smaller than the amount of vertices creates a visually apparent wiggle between the vertices, with a notable effect when set to 0.2.', 'Applying the phase to only the X or Y offset produces a visually strange and intriguing effect.']}], 'duration': 294.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM741579.jpg', 'highlights': ['The chapter discusses the impact of different values for the global variable noise max, showcasing the resulting variations in the shape, such as achieving a near-perfect circle with just a little bit of noise.', 'The demonstration of creating and manipulating a slider with the p5 dom library to control the noise space provides a quick and interactive way to observe the effects of noise manipulation on shape appearance.', 'By utilizing the map function to adjust the values of cosine and sine, the transcript demonstrates the flexibility in varying the shape by changing parameters like noise max.', 'By incrementing the phase, the shape appears to rotate, visually demonstrating the impact of phase variation.']}, {'end': 1310.855, 'segs': [{'end': 1143.962, 'src': 'embed', 'start': 1056.003, 'weight': 0, 'content': [{'end': 1061.046, 'text': 'but actually pull them from the path of a circle in the two dimensional Perlin noise space.', 'start': 1056.003, 'duration': 5.043}, {'end': 1065.629, 'text': 'Now, what I happen to be doing in this is taking a very literal approach.', 'start': 1062.106, 'duration': 3.523}, {'end': 1076.018, 'text': "I'm taking those Perlin noise path values, walking around a circle, and applying them to the distance from the center of a circle as I'm drawing it.", 'start': 1065.949, 'duration': 10.069}, {'end': 1082.323, 'text': "So it's a very literal visualization of Perlin noise values in a circle to the edge points of a circle.", 'start': 1076.058, 'duration': 6.265}, {'end': 1090.706, 'text': 'If you start to think of other ways you could apply those values, the creative possibilities explode.', 'start': 1083.684, 'duration': 7.022}, {'end': 1098.287, 'text': 'And so in other words, if this is what I started with, I have Perlin noise at the beginning.', 'start': 1091.126, 'duration': 7.161}, {'end': 1103.128, 'text': "Sorry, I have Perlin noise values in one-dimensional space, but they don't loop.", 'start': 1099.487, 'duration': 3.641}, {'end': 1118.132, 'text': 'Why not take those looping values here along the path of a circle and then unfurl them back into this sort of one-dimensional and then use those to apply to any value in any visualization to make a perfect GIF loop?', 'start': 1103.568, 'duration': 14.564}, {'end': 1119.112, 'text': "That's the idea.", 'start': 1118.392, 'duration': 0.72}, {'end': 1121.253, 'text': "So I'm going to just put that out there.", 'start': 1119.672, 'duration': 1.581}, {'end': 1122.393, 'text': "I'm putting this out into the universe.", 'start': 1121.273, 'duration': 1.12}, {'end': 1123.513, 'text': "I mean, I didn't put it out into the universe.", 'start': 1122.413, 'duration': 1.1}, {'end': 1128.655, 'text': "Lots of other people, Etienne and Golan and many others I'm sure I'm forgetting to reference, have done this.", 'start': 1123.733, 'duration': 4.922}, {'end': 1132.256, 'text': 'for years, so give that a try.', 'start': 1129.335, 'duration': 2.921}, {'end': 1134.497, 'text': "In the next video, I'm going to come back and actually do that.", 'start': 1132.316, 'duration': 2.181}, {'end': 1138.319, 'text': "So I'm going to see if I can take this idea and just apply it to something.", 'start': 1134.697, 'duration': 3.622}, {'end': 1143.962, 'text': "Probably won't be that visually interesting, but this will hopefully give you lots of ideas of what you might make.", 'start': 1138.539, 'duration': 5.423}], 'summary': 'Visualizing perlin noise values in a circle, exploring creative possibilities and aiming for a perfect gif loop.', 'duration': 87.959, 'max_score': 1056.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM1056003.jpg'}, {'end': 1249.823, 'src': 'embed', 'start': 1217.853, 'weight': 1, 'content': [{'end': 1222.614, 'text': 'But another way of thinking about it is have that third dimension be slices of an animation.', 'start': 1217.853, 'duration': 4.761}, {'end': 1234.918, 'text': 'So I could show you the Perlin noise space over time while incrementing a z value a z offset and show you Perlin noise, for at z offset equals zero,', 'start': 1222.974, 'duration': 11.944}, {'end': 1237.999, 'text': 'then z offset equals 0.1, then 0.2, then 0.3..', 'start': 1234.918, 'duration': 3.081}, {'end': 1240.9, 'text': 'And so that actually, all of those will have numbers.', 'start': 1237.999, 'duration': 2.901}, {'end': 1249.823, 'text': 'Each one of these numbers now has all of its neighbors up and down and left and right and forward and backward are similar random values.', 'start': 1241.22, 'duration': 8.603}], 'summary': 'Perlin noise space displayed as animation with z offsets, demonstrating neighbor relationships.', 'duration': 31.97, 'max_score': 1217.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM1217853.jpg'}, {'end': 1310.855, 'src': 'embed', 'start': 1286.16, 'weight': 5, 'content': [{'end': 1288.642, 'text': "You know there's so many parameters that you can explore here.", 'start': 1286.16, 'duration': 2.482}, {'end': 1295.326, 'text': "I think we've made actually a super interesting shape for like a crazy animated game version of asteroids.", 'start': 1288.662, 'duration': 6.664}, {'end': 1301.769, 'text': 'Like you can imagine having Perlin noise jiggling, oscillating, looping, noisy, polar asteroids.', 'start': 1295.366, 'duration': 6.403}, {'end': 1303.09, 'text': "That's a thing you should make.", 'start': 1302.05, 'duration': 1.04}, {'end': 1305.812, 'text': 'So anyway, so I hope you find some variations for this.', 'start': 1303.671, 'duration': 2.141}, {'end': 1309.554, 'text': 'And I look forward to seeing what you make.', 'start': 1307.873, 'duration': 1.681}, {'end': 1310.855, 'text': 'And stay tuned for the next video.', 'start': 1309.834, 'duration': 1.021}], 'summary': 'Explore parameters for creating a game version of asteroids with perlin noise jiggling, oscillating, looping, noisy, polar asteroids. stay tuned for the next video.', 'duration': 24.695, 'max_score': 1286.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM1286160.jpg'}], 'start': 1036.329, 'title': 'Visualizing and animating perlin noise', 'summary': 'Explores visualizing perlin noise values in a circle and unfurling them back into one-dimensional space to make a perfect gif loop, presenting exciting creative possibilities. additionally, it discusses the concept of animating perlin noise in 3d space, using a global variable for z offset to incrementally show perlin noise space over time and highlighting the potential for creating animated game shapes such as asteroids.', 'chapters': [{'end': 1143.962, 'start': 1036.329, 'title': 'Visualizing perlin noise in a circle', 'summary': 'Explores visualizing perlin noise values in a circle and unfurling them back into one-dimensional space to make a perfect gif loop, presenting exciting creative possibilities for various visualizations.', 'duration': 107.633, 'highlights': ['The chapter explores visualizing Perlin noise values in a circle and unfurling them back into one-dimensional space to make a perfect GIF loop, presenting exciting creative possibilities for various visualizations.', "The approach involves applying Perlin noise path values to the distance from the center of a circle as it's being drawn, providing a literal visualization of Perlin noise values in a circle to the edge points of the circle.", 'The speaker mentions the possibility of applying the looping values along the path of a circle and then unfurling them back into one-dimensional space to create a perfect GIF loop.', 'The speaker encourages the audience to try the ideas and references other individuals who have been working on similar concepts for years.']}, {'end': 1310.855, 'start': 1144.482, 'title': 'Animating perlin noise in 3d', 'summary': 'Discusses the concept of animating perlin noise in 3d space, using a global variable for z offset to incrementally show perlin noise space over time and highlighting the potential for creating animated game shapes such as asteroids.', 'duration': 166.373, 'highlights': ['The concept of animating Perlin noise in 3D space is introduced, utilizing a global variable for z offset to incrementally display the Perlin noise space over time. Introduction of animating Perlin noise in 3D space, utilization of z offset as a global variable, incremental display of Perlin noise space over time.', 'Potential for creating animated game shapes, such as asteroids, using Perlin noise variations. Highlighting the potential for creating animated game shapes, specifically asteroids, using Perlin noise variations.']}], 'duration': 274.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ZI1dmHv3MeM/pics/ZI1dmHv3MeM1036329.jpg', 'highlights': ['Explores visualizing Perlin noise values in a circle and unfurling them back into one-dimensional space to make a perfect GIF loop, presenting exciting creative possibilities for various visualizations.', 'The concept of animating Perlin noise in 3D space is introduced, utilizing a global variable for z offset to incrementally display the Perlin noise space over time. Introduction of animating Perlin noise in 3D space, utilization of z offset as a global variable, incremental display of Perlin noise space over time.', "The approach involves applying Perlin noise path values to the distance from the center of a circle as it's being drawn, providing a literal visualization of Perlin noise values in a circle to the edge points of the circle.", 'The speaker encourages the audience to try the ideas and references other individuals who have been working on similar concepts for years.', 'The speaker mentions the possibility of applying the looping values along the path of a circle and then unfurling them back into one-dimensional space to create a perfect GIF loop.', 'Potential for creating animated game shapes, such as asteroids, using Perlin noise variations. Highlighting the potential for creating animated game shapes, specifically asteroids, using Perlin noise variations.']}], 'highlights': ['The concept of animating Perlin noise in 3D space is introduced, utilizing a global variable for z offset to incrementally display the Perlin noise space over time. Introduction of animating Perlin noise in 3D space, utilization of z offset as a global variable, incremental display of Perlin noise space over time.', "The approach involves applying Perlin noise path values to the distance from the center of a circle as it's being drawn, providing a literal visualization of Perlin noise values in a circle to the edge points of the circle.", 'Explores visualizing Perlin noise values in a circle and unfurling them back into one-dimensional space to make a perfect GIF loop, presenting exciting creative possibilities for various visualizations.', 'The chapter discusses the impact of different values for the global variable noise max, showcasing the resulting variations in the shape, such as achieving a near-perfect circle with just a little bit of noise.', 'The demonstration of creating and manipulating a slider with the p5 dom library to control the noise space provides a quick and interactive way to observe the effects of noise manipulation on shape appearance.', 'By utilizing the map function to adjust the values of cosine and sine, the transcript demonstrates the flexibility in varying the shape by changing parameters like noise max.', 'By incrementing the phase, the shape appears to rotate, visually demonstrating the impact of phase variation.', 'The chapter explains the theory of Perlin noise and its application to visualize a cloud-like texture in a two-dimensional space.', 'Using Perlin noise to create a random blob shape in a 2D canvas.', 'The idea of mapping numeric values from Perlin noise to something besides a pixel value is explored.', 'Adjusting X and Y offsets to determine the Perlin noise value at specific spots.', 'The chapter addresses the challenge of dealing with negative values in the Perlin noise space and the need to find a specific point when 0, 0 is in the top left.', 'Adding one to the noise space to achieve a symmetrical result.', 'In two dimensions, each value has eight neighbors, emphasizing the complexity of the two-dimensional space.', 'The concept of Perlin noise is explained in one and two dimensions, highlighting the difference in neighboring values and the idea of walking in a circular path to obtain random values.', 'The chapter illustrates the idea of walking in a circular path to obtain random Perlin noise values, ensuring that the last value matches up with the first one.', 'The chapter discusses the challenge of creating perfect GIF loops with random and chaotic scenes.', 'The chapter talks about a blog post from Necessary Disorder explaining the technique of creating GIFs with random and chaotic scenes.', 'Golan Levin has an example bit of code which describes the technique of creating perfect GIF loops.', 'The author plans to return to a previous coding challenge to illustrate the technique of creating perfect GIF loops.', 'The size and shape of the circle vary with each run due to the use of randomly seeded Perlin noise values, demonstrating the randomness and variation achieved through the Perlin Noise technique.', 'The size of the circle changes with each run due to the use of randomly seeded Perlin noise values, showcasing the randomness and variation achieved through the Perlin Noise technique.', 'The map function is used to adjust the range of Perlin noise values, showcasing the manipulation of noise values to control the visual output of the circle.', "Challenges faced in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle.", "The challenge arises in achieving a seamless loop with Perlin noise, as the last Perlin noise value doesn't match the first one, resulting in an artifact in the shape of the circle.", 'The author expresses the desire to make videos on this topic for the rest of their life.', 'The GIF resembles the heart curve from a previous coding challenge, indicating potential influence.', "Etienne Jacob's work is described as amazing and phenomenal, emphasizing admiration for his technique.", 'The speaker mentions rediscovering a special technique in a dream, highlighting the mysterious nature of inspiration.', 'The speaker encourages the audience to try the ideas and references other individuals who have been working on similar concepts for years.', 'The speaker mentions the possibility of applying the looping values along the path of a circle and then unfurling them back into one-dimensional space to create a perfect GIF loop.', 'Potential for creating animated game shapes, such as asteroids, using Perlin noise variations. Highlighting the potential for creating animated game shapes, specifically asteroids, using Perlin noise variations.']}