title
Coding Worley Noise
description
Coding in the Cabana is a series where I attempt challenges from my garden cabana in Brooklyn, NY. In this episode, I explore the beauty of Worley noise. Code: https://thecodingtrain.com/challenges/c4-worley-noise
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/QsiCWVczZ
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Worley Noise: https://en.wikipedia.org/wiki/Worley_noise
đ A Cellular Texture Basis Function: https://www.rhythmiccanvas.com/research/papers/worley.pdf
đ Book of Shaders - Chapter 11 Noise: https://thebookofshaders.com/11/
đ The Nature of Code - Spatial Subdivision: https://natureofcode.com/book/chapter-6-autonomous-agents/#chapter06_figure37
đž saveFrame() (Processing Reference): https://processing.org/reference/saveFrame_.html
Videos:
đĨ Coding Challenge #98 - Quadtree: https://www.youtube.com/watch?v=QQx_NmCIuCY
đĨ Coding Challenge #24: Perlin Noise Flow Field: https://www.youtube.com/watch?v=BjoM9oKOAKY
đĨ Coding Challenge #114 - Bubble Sort Visualization: https://www.youtube.com/watch?v=67k3I2GxTH8
đĨ Coding Challenge #143 - Quicksort Visualization: https://www.youtube.com/watch?v=eqo2LxRADhU
Related Coding Challenges:
đ #24 Perlin Noise Flow Field: https://youtu.be/BjoM9oKOAKY
đ #28 Metaballs: https://youtu.be/ccYLb7cLB1I
đ #98 Quadtree: https://youtu.be/OJxEcs0w_kE
đ #114 Bubble Sort Visualization: https://youtu.be/67k3I2GxTH8
đ #C5 Marching Squares: https://youtu.be/0ZONMNUKTfU
Timestamps:
0:00 About Worley Noise
1:13 Coding Random Noise
3:29 Adding a Set of Points
4:57 Calculating The Distances
7:25 Coloring
8:10 Animating The Points
10:28 TWorley Noise in 3D
14:00 Optimization Possibilities
14:49 Conclusions and Goodbyes
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
#worleynoise #cellulartexture #tesselation #distance #p5js
detail
{'title': 'Coding Worley Noise', 'heatmap': [{'end': 209.294, 'start': 196.444, 'weight': 0.71}, {'end': 303.946, 'start': 291.516, 'weight': 0.709}, {'end': 418.463, 'start': 405.309, 'weight': 0.865}, {'end': 494.328, 'start': 421.506, 'weight': 0.77}], 'summary': "Tutorial 'coding worley noise' covers implementing and visualizing the whirly noise algorithm, detailing the formula for determining index values in a two-dimensional space and generating noise algorithm through randomly distributing feature points, calculating noise values for pixels, and visualizing the algorithm by calculating distances between pixels and feature points, sorting distances, and manipulating noise values to create voronoi-like tessellations. it also includes visualizing whirly noise in 3d, adding z value to p vectors, analyzing 2d and 3d feature points, and providing optimization techniques for improving rendering speed.", 'chapters': [{'end': 175.823, 'segs': [{'end': 47.196, 'src': 'embed', 'start': 18.314, 'weight': 0, 'content': [{'end': 20.337, 'text': 'Good morning.', 'start': 18.314, 'duration': 2.023}, {'end': 23.262, 'text': 'Welcome to Coding in the Cabana.', 'start': 20.518, 'duration': 2.744}, {'end': 29.592, 'text': "I'm here with my co-host, Gloria Pickle, and today the topic is whirly noise.", 'start': 23.763, 'duration': 5.829}, {'end': 35.207, 'text': "Now, I'm particularly excited about this topic.", 'start': 33.686, 'duration': 1.521}, {'end': 40.751, 'text': "I'm here quarantined at home, like many of you are who might be watching this all around the world.", 'start': 35.668, 'duration': 5.083}, {'end': 44.134, 'text': 'And I did a live stream where I implemented whirly noise.', 'start': 41.632, 'duration': 2.502}, {'end': 47.196, 'text': "So I've done this before, but I had some technical difficulties.", 'start': 44.154, 'duration': 3.042}], 'summary': 'Topic: whirly noise. excited to discuss implementation challenges.', 'duration': 28.882, 'max_score': 18.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk18314.jpg'}, {'end': 102.629, 'src': 'embed', 'start': 76.124, 'weight': 1, 'content': [{'end': 79.908, 'text': 'And I just want to set every single pixel color to a noise value.', 'start': 76.124, 'duration': 3.784}, {'end': 83.267, 'text': 'Now, just plain old noise is randomness.', 'start': 81.323, 'duration': 1.944}, {'end': 85.712, 'text': "So let's set up and let's just do plain old noise first.", 'start': 83.387, 'duration': 2.325}, {'end': 92.946, 'text': 'In order to set every single pixel of this window to a given color, I need a nested loop to look at every single x and every single y.', 'start': 85.872, 'duration': 7.074}, {'end': 98.283, 'text': 'Now, the pixels are stored in an array.', 'start': 96.621, 'duration': 1.662}, {'end': 99.144, 'text': 'And I can access it.', 'start': 98.303, 'duration': 0.841}, {'end': 102.629, 'text': "It's just a global variable in processing that's built in with just the keyword pixels.", 'start': 99.184, 'duration': 3.445}], 'summary': 'Setting every pixel color to a noise value using nested loops and accessing pixels array.', 'duration': 26.505, 'max_score': 76.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk76124.jpg'}], 'start': 18.314, 'title': 'Whirly noise algorithm', 'summary': 'Focuses on implementing and visualizing the whirly noise algorithm, detailing the formula used to determine the index values for each pixel in a two-dimensional space.', 'chapters': [{'end': 175.823, 'start': 18.314, 'title': 'Whirly noise algorithm', 'summary': 'Focuses on implementing and visualizing the whirly noise algorithm, discussing the process, challenges, and visualization of noise in a two-dimensional space, with a specific focus on setting every pixel color to a noise value and detailing the formula used to determine the index values for each pixel.', 'duration': 157.509, 'highlights': ["Implementing and visualizing the whirly noise algorithm The chapter discusses the excitement and challenges of implementing the whirly noise algorithm, emphasizing the author's quarantine experience and the intention to create a short video explaining the algorithm and enabling viewers to share their versions. The chapter also highlights the author's previous coverage of noise algorithms, particularly Perlin noise, and the focus on visualizing noise in a two-dimensional space.", 'Setting every pixel color to a noise value The discussion delves into the process of setting every pixel color to a noise value, initially focusing on plain old noise as randomness and then progressing to the specific steps and formula for achieving this, including the use of nested loops, array indexing, and the calculation of index values based on the row and column. The chapter provides a detailed explanation of the formula used to set the entire window to a specific color.']}], 'duration': 157.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk18314.jpg', 'highlights': ["The chapter discusses the excitement and challenges of implementing the whirly noise algorithm, emphasizing the author's quarantine experience and the intention to create a short video explaining the algorithm and enabling viewers to share their versions.", 'The discussion delves into the process of setting every pixel color to a noise value, initially focusing on plain old noise as randomness and then progressing to the specific steps and formula for achieving this, including the use of nested loops, array indexing, and the calculation of index values based on the row and column.']}, {'end': 631.377, 'segs': [{'end': 224.51, 'src': 'heatmap', 'start': 196.444, 'weight': 0.71, 'content': [{'end': 198.946, 'text': "So let's change this to a noise algorithm.", 'start': 196.444, 'duration': 2.502}, {'end': 201.127, 'text': 'And pure noise is randomness.', 'start': 199.286, 'duration': 1.841}, {'end': 204.75, 'text': "We've got this old-timey, the television has no signal.", 'start': 201.508, 'duration': 3.242}, {'end': 209.294, 'text': 'And I know that you watching this are watching this on your tubular old-timey television.', 'start': 204.79, 'duration': 4.504}, {'end': 217.627, 'text': 'Whirly noise is a kind of cellular noise, and the algorithm was proposed by Stephen Whirly in a paper published in 1996.', 'start': 210.583, 'duration': 7.044}, {'end': 220.848, 'text': "There's a really basic two-step process for generating the noise.", 'start': 217.627, 'duration': 3.221}, {'end': 224.51, 'text': 'First step is randomly distribute feature points in space.', 'start': 221.188, 'duration': 3.322}], 'summary': 'Algorithm generates whirly noise using feature points in space', 'duration': 28.066, 'max_score': 196.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk196444.jpg'}, {'end': 323.28, 'src': 'heatmap', 'start': 291.516, 'weight': 0.709, 'content': [{'end': 292.016, 'text': 'And there we go.', 'start': 291.516, 'duration': 0.5}, {'end': 296.7, 'text': "So now we see every time I run this, I'm going to get a new set of points.", 'start': 292.217, 'duration': 4.483}, {'end': 298.061, 'text': 'So step one is done.', 'start': 297.02, 'duration': 1.041}, {'end': 300.403, 'text': 'Randomly distribute feature points in space.', 'start': 298.301, 'duration': 2.102}, {'end': 303.946, 'text': 'Step two is really where the noise algorithm starts to kick in.', 'start': 300.843, 'duration': 3.103}, {'end': 307.409, 'text': 'f of n of x.', 'start': 304.907, 'duration': 2.502}, {'end': 310.951, 'text': 'So x being the given pixel, xy.', 'start': 307.409, 'duration': 3.542}, {'end': 315.615, 'text': 'So for every given pixel, xy, I need to calculate a noise value.', 'start': 311.432, 'duration': 4.183}, {'end': 318.357, 'text': 'And it is equal to the distance.', 'start': 315.695, 'duration': 2.662}, {'end': 323.28, 'text': 'to the nth closest point.', 'start': 319.578, 'duration': 3.702}], 'summary': 'Algorithm distributes feature points in space, calculates noise value for each pixel.', 'duration': 31.764, 'max_score': 291.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk291516.jpg'}, {'end': 344.435, 'src': 'embed', 'start': 311.432, 'weight': 0, 'content': [{'end': 315.615, 'text': 'So for every given pixel, xy, I need to calculate a noise value.', 'start': 311.432, 'duration': 4.183}, {'end': 318.357, 'text': 'And it is equal to the distance.', 'start': 315.695, 'duration': 2.662}, {'end': 323.28, 'text': 'to the nth closest point.', 'start': 319.578, 'duration': 3.702}, {'end': 327.822, 'text': "Meaning, let's start with n equals one.", 'start': 324.241, 'duration': 3.581}, {'end': 341.573, 'text': 'So if these are all my seed points and then I happen to be looking at a given pixel, for example this pixel, which point is the nth closest,', 'start': 328.843, 'duration': 12.73}, {'end': 343.414, 'text': 'the n being 1, the first closest?', 'start': 341.573, 'duration': 1.841}, {'end': 344.435, 'text': "That's this one.", 'start': 343.734, 'duration': 0.701}], 'summary': 'Calculate noise value for each pixel based on distance to nth closest point.', 'duration': 33.003, 'max_score': 311.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk311432.jpg'}, {'end': 435.542, 'src': 'heatmap', 'start': 405.309, 'weight': 0.865, 'content': [{'end': 409.353, 'text': "And let's put all those into an array of distance values.", 'start': 405.309, 'duration': 4.044}, {'end': 415.52, 'text': 'The reason why I want to look at all the distances is because I want to vary this end value.', 'start': 411.516, 'duration': 4.004}, {'end': 418.463, 'text': 'Sometimes I want to look at the first closest, second closest, third closest.', 'start': 415.56, 'duration': 2.903}, {'end': 420.965, 'text': "Maybe I don't need them all, but let's just keep them all right now.", 'start': 418.543, 'duration': 2.422}, {'end': 423.067, 'text': 'Store them all into this array.', 'start': 421.506, 'duration': 1.561}, {'end': 427.672, 'text': 'And then after that, I can sort the array.', 'start': 424.349, 'duration': 3.323}, {'end': 430.639, 'text': "That's an array also.", 'start': 429.738, 'duration': 0.901}, {'end': 435.542, 'text': 'So I could write my own algorithm for sorting an array, but processing has it built in.', 'start': 431.239, 'duration': 4.303}], 'summary': 'Array of distance values used for sorting algorithm.', 'duration': 30.233, 'max_score': 405.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk405309.jpg'}, {'end': 494.328, 'src': 'heatmap', 'start': 421.506, 'weight': 0.77, 'content': [{'end': 423.067, 'text': 'Store them all into this array.', 'start': 421.506, 'duration': 1.561}, {'end': 427.672, 'text': 'And then after that, I can sort the array.', 'start': 424.349, 'duration': 3.323}, {'end': 430.639, 'text': "That's an array also.", 'start': 429.738, 'duration': 0.901}, {'end': 435.542, 'text': 'So I could write my own algorithm for sorting an array, but processing has it built in.', 'start': 431.239, 'duration': 4.303}, {'end': 439.325, 'text': "If it's just an array of numbers, processing will sort it for me just with the sort function.", 'start': 435.582, 'duration': 3.743}, {'end': 444.829, 'text': "And let's ask the question of what n do I want to use if I want to use n equals 1.", 'start': 439.846, 'duration': 4.983}, {'end': 448.732, 'text': "Then the color, it's not going to be a random value.", 'start': 444.829, 'duration': 3.903}, {'end': 450.433, 'text': 'The noise value is n.', 'start': 449.212, 'duration': 1.221}, {'end': 453.516, 'text': 'From distances, n of 1.', 'start': 451.414, 'duration': 2.102}, {'end': 456.698, 'text': 'And actually, so n should be 0, because 0 is the first element of the array.', 'start': 453.516, 'duration': 3.182}, {'end': 459.28, 'text': "And I'm going to set it to a color.", 'start': 457.099, 'duration': 2.181}, {'end': 461.162, 'text': 'Ah, not the distances.', 'start': 459.3, 'duration': 1.862}, {'end': 462.783, 'text': 'I want the sorted ones.', 'start': 461.482, 'duration': 1.301}, {'end': 466.646, 'text': 'The distances were sorted, so the closest one is always at the beginning of the array.', 'start': 463.484, 'duration': 3.162}, {'end': 467.447, 'text': 'There we go.', 'start': 466.966, 'duration': 0.481}, {'end': 471.25, 'text': 'We can start to see this Voronoi-like tessellation.', 'start': 467.507, 'duration': 3.743}, {'end': 472.931, 'text': "Let's do a little bit of a mapping.", 'start': 471.39, 'duration': 1.541}, {'end': 480.585, 'text': "Let's say the distances range between 0 and width divided by 2.", 'start': 474.443, 'duration': 6.142}, {'end': 483.785, 'text': "And when it's really close, when the distance is 0, I want it to be very bright.", 'start': 480.585, 'duration': 3.2}, {'end': 485.866, 'text': "And when it's far away, I want it to be dark.", 'start': 484.045, 'duration': 1.821}, {'end': 487.866, 'text': 'There we go.', 'start': 487.446, 'duration': 0.42}, {'end': 489.967, 'text': 'This looks more like what I would expect.', 'start': 488.146, 'duration': 1.821}, {'end': 494.328, 'text': 'And interestingly enough, we can do some fun things, like we can have these points move around.', 'start': 490.307, 'duration': 4.021}], 'summary': 'The transcript discusses sorting an array, using n values, and creating voronoi-like tessellation.', 'duration': 72.822, 'max_score': 421.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk421506.jpg'}, {'end': 548.759, 'src': 'embed', 'start': 522.282, 'weight': 4, 'content': [{'end': 528.098, 'text': 'We see the same pattern, but the cells, the cellular texture of it, their cells are getting smaller and smaller.', 'start': 522.282, 'duration': 5.816}, {'end': 536.789, 'text': "100 Because there are so many points now, it's not having an easy time calculating the distance to all those points.", 'start': 528.098, 'duration': 8.691}, {'end': 537.79, 'text': "And it's running quite slow.", 'start': 536.829, 'duration': 0.961}, {'end': 540.793, 'text': 'So this is where I would want to add some kind of optimization to it.', 'start': 537.99, 'duration': 2.803}, {'end': 542.474, 'text': "But I'm not going to worry about that right now.", 'start': 541.073, 'duration': 1.401}, {'end': 544.576, 'text': 'I just want to compute static noise.', 'start': 542.494, 'duration': 2.082}, {'end': 546.297, 'text': "And it doesn't matter if it takes a long time.", 'start': 544.596, 'duration': 1.701}, {'end': 548.759, 'text': "So I'm going to get rid of this idea of an animation.", 'start': 546.518, 'duration': 2.241}], 'summary': 'Cells are getting smaller, causing slow computation with many points. planning to optimize for speed.', 'duration': 26.477, 'max_score': 522.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk522282.jpg'}, {'end': 631.377, 'src': 'embed', 'start': 589.589, 'weight': 1, 'content': [{'end': 596.332, 'text': "So I don't just have to map the noise to the distance of the closest point, which will give me the Voronoi-like pattern.", 'start': 589.589, 'duration': 6.743}, {'end': 602.335, 'text': 'I could also calculate the noise value based on the distance to the second closest point, in which case an n of 1.', 'start': 596.572, 'duration': 5.763}, {'end': 605.157, 'text': 'And look at this.', 'start': 602.335, 'duration': 2.822}, {'end': 607.758, 'text': 'I have this almost more like crystal-like structure to it.', 'start': 605.237, 'duration': 2.521}, {'end': 614.591, 'text': 'What happens if I change it to n of 2? n of 3.', 'start': 607.978, 'duration': 6.613}, {'end': 617.772, 'text': 'change the mapping to allow for a larger range of distance.', 'start': 614.591, 'duration': 3.181}, {'end': 624.274, 'text': "So you can see, there's lots of different kinds of textures that you could generate, based on how you manipulate that mapping,", 'start': 618.032, 'duration': 6.242}, {'end': 628.435, 'text': "how many seed points you pick, as well as which value of n you're using.", 'start': 624.274, 'duration': 4.161}, {'end': 629.776, 'text': 'But I have missed something.', 'start': 628.676, 'duration': 1.1}, {'end': 631.377, 'text': 'So whirly noise.', 'start': 630.256, 'duration': 1.121}], 'summary': 'Exploring noise mapping for different textures, considering n values and seed points.', 'duration': 41.788, 'max_score': 589.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk589589.jpg'}], 'start': 175.883, 'title': 'Whirly noise algorithm', 'summary': 'Discusses generating whirly noise algorithm, including randomly distributing feature points in space, calculating noise value for every pixel, and visualizing the algorithm by calculating distances between pixels and feature points, sorting the distances, and manipulating noise values to create voronoi-like tessellations.', 'chapters': [{'end': 386.271, 'start': 175.883, 'title': 'Generating worley noise algorithm', 'summary': 'Discusses the process of generating worley noise algorithm, including the two-step process of randomly distributing feature points in space and calculating a noise value for every given pixel, with an example of seven seed points and the relationship to voronoi tessellation.', 'duration': 210.388, 'highlights': ['The chapter explains the two-step process of generating the Worley noise algorithm, starting with randomly distributing feature points in space, illustrated with an example of seven seed points and visual representation of the points on the canvas.', 'The algorithm calculates a noise value for every given pixel, xy, equal to the distance to the nth closest point, which is demonstrated with the examples of n equals one and n equals two, and the relationship to Voronoi tessellation.']}, {'end': 631.377, 'start': 386.651, 'title': 'Whirly noise visualization', 'summary': 'Explores the visualization of whirly noise, where the author explains the process of calculating distances between pixels and feature points, sorting the distances, and manipulating noise values to create voronoi-like tessellations, with examples of varying patterns based on different seed points and n values.', 'duration': 244.726, 'highlights': ['The author explains the process of calculating distances between pixels and feature points, sorting the distances, and manipulating noise values to create Voronoi-like tessellations, with examples of varying patterns based on different seed points and n values.', 'The author demonstrates the impact of increasing the number of points on the cellular texture, causing the cells to become smaller and the computation to slow down, indicating the need for optimization.', 'The author showcases the ability to create different textures by manipulating the mapping, varying the seed points, and adjusting the value of n, leading to diverse visual outcomes.', 'The author emphasizes the significance of the additional variable n in generating various textures based on the distance to the closest, second closest, or third closest point, offering insights into different structures and patterns achievable through this manipulation.']}], 'duration': 455.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk175883.jpg', 'highlights': ['The algorithm calculates a noise value for every given pixel, xy, equal to the distance to the nth closest point, which is demonstrated with the examples of n equals one and n equals two, and the relationship to Voronoi tessellation.', 'The author emphasizes the significance of the additional variable n in generating various textures based on the distance to the closest, second closest, or third closest point, offering insights into different structures and patterns achievable through this manipulation.', 'The author explains the process of calculating distances between pixels and feature points, sorting the distances, and manipulating noise values to create Voronoi-like tessellations, with examples of varying patterns based on different seed points and n values.', 'The author showcases the ability to create different textures by manipulating the mapping, varying the seed points, and adjusting the value of n, leading to diverse visual outcomes.', 'The author demonstrates the impact of increasing the number of points on the cellular texture, causing the cells to become smaller and the computation to slow down, indicating the need for optimization.']}, {'end': 923.799, 'segs': [{'end': 655.757, 'src': 'embed', 'start': 631.377, 'weight': 0, 'content': [{'end': 638.844, 'text': "even though we're looking at this sort of two-dimensional visualization of it, those feature points could actually exist in three dimensions.", 'start': 631.377, 'duration': 7.467}, {'end': 646.871, 'text': 'So I could think of a cube in three dimensions, pick a whole set of initial feature points, and then look at a slice inside of that cube.', 'start': 639.204, 'duration': 7.667}, {'end': 651.215, 'text': "To do that, let's add a z value to the p vectors.", 'start': 647.351, 'duration': 3.864}, {'end': 655.757, 'text': "I'm keeping everything in square dimensions because I think it makes things a little bit simpler here.", 'start': 651.934, 'duration': 3.823}], 'summary': 'Feature points can exist in three dimensions, using a cube and adding z value to the p vectors.', 'duration': 24.38, 'max_score': 631.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk631377.jpg'}, {'end': 750.842, 'src': 'embed', 'start': 720.944, 'weight': 1, 'content': [{'end': 722.645, 'text': "Let's allow it to animate.", 'start': 720.944, 'duration': 1.701}, {'end': 726.427, 'text': "So you can see here when I click the mouse, there's a lot more cells.", 'start': 723.205, 'duration': 3.222}, {'end': 730.149, 'text': "Let's see if I use fewer feature points if this is maybe a bit more obvious.", 'start': 726.827, 'duration': 3.322}, {'end': 734.631, 'text': "So that's with the feature points in 3D, and this is within 2D.", 'start': 730.569, 'duration': 4.062}, {'end': 738.496, 'text': "So we can see there's a bit more of a spherical kind of quality to them.", 'start': 735.652, 'duration': 2.844}, {'end': 740.78, 'text': "It's a bit smoother, the noise texture.", 'start': 738.536, 'duration': 2.244}, {'end': 742.743, 'text': "Let's go back to about 50 points.", 'start': 741.18, 'duration': 1.563}, {'end': 745.928, 'text': "Let's stick with 3D.", 'start': 743.925, 'duration': 2.003}, {'end': 750.842, 'text': "Let's look at n equals 1.", 'start': 746.489, 'duration': 4.353}], 'summary': 'Analyzing animations with varying feature points in 2d and 3d dimensions.', 'duration': 29.898, 'max_score': 720.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk720944.jpg'}, {'end': 905.729, 'src': 'embed', 'start': 879.406, 'weight': 2, 'content': [{'end': 886.654, 'text': "There's a really nice resource called The Book of Shaders, and it has a tutorial write-up about how to compute whirly noise with a WebGL shader.", 'start': 879.406, 'duration': 7.248}, {'end': 890.038, 'text': "It's called The Book of Shaders, so I'll link to that in the video description as well.", 'start': 887.135, 'duration': 2.903}, {'end': 893.202, 'text': 'So I look forward to your own versions of whirly noise.', 'start': 890.118, 'duration': 3.084}, {'end': 899.306, 'text': "I'm going to leave you with a rendering that I made during the live stream when I first coded the whirly noise algorithm.", 'start': 893.482, 'duration': 5.824}, {'end': 901.147, 'text': "This didn't run originally in real time.", 'start': 899.366, 'duration': 1.781}, {'end': 905.729, 'text': "It's 1920 by 1080, computing the noise space with that resolution.", 'start': 901.207, 'duration': 4.522}], 'summary': 'The book of shaders tutorial covers whirly noise computation in webgl shader, leading to 1920x1080 resolution rendering.', 'duration': 26.323, 'max_score': 879.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk879406.jpg'}], 'start': 631.377, 'title': 'Visualizing whirly noise', 'summary': 'Introduces visualizing whirly noise in 3d, adding z value to p vectors, analyzing 2d and 3d feature points, and providing optimization techniques for improving rendering speed.', 'chapters': [{'end': 923.799, 'start': 631.377, 'title': 'Whirly noise visualization', 'summary': 'Introduces the concept of visualizing whirly noise in three dimensions, explaining the process of adding a z value to p vectors, analyzing the differences between 2d and 3d feature points, and providing optimization techniques for improving rendering speed.', 'duration': 292.422, 'highlights': ['The process of adding a z value to p vectors in three-dimensional space is explained, allowing for the visualization of whirly noise in 3D. Explanation of adding z value to p vectors, enabling visualization in 3D space.', 'Comparison between 2D and 3D feature points is provided, demonstrating the differences and the smoother, spherical quality of 3D feature points. Comparison of 2D and 3D feature points, demonstration of smoother, spherical quality in 3D.', "Optimization techniques for improving rendering speed, including the use of spatial subdivision and referencing 'The Book of Shaders' for computing whirly noise with a WebGL shader, are discussed. Optimization techniques for rendering speed, suggestion of using spatial subdivision, reference to 'The Book of Shaders' for computing whirly noise with a WebGL shader."]}], 'duration': 292.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4066MndcyCk/pics/4066MndcyCk631377.jpg', 'highlights': ['Explanation of adding z value to p vectors, enabling visualization in 3D space.', 'Comparison of 2D and 3D feature points, demonstration of smoother, spherical quality in 3D.', "Optimization techniques for rendering speed, suggestion of using spatial subdivision, reference to 'The Book of Shaders' for computing whirly noise with a WebGL shader."]}], 'highlights': ['The algorithm calculates a noise value for every given pixel, xy, equal to the distance to the nth closest point, which is demonstrated with the examples of n equals one and n equals two, and the relationship to Voronoi tessellation.', 'The discussion delves into the process of setting every pixel color to a noise value, initially focusing on plain old noise as randomness and then progressing to the specific steps and formula for achieving this, including the use of nested loops, array indexing, and the calculation of index values based on the row and column.', "The chapter discusses the excitement and challenges of implementing the whirly noise algorithm, emphasizing the author's quarantine experience and the intention to create a short video explaining the algorithm and enabling viewers to share their versions.", 'The author emphasizes the significance of the additional variable n in generating various textures based on the distance to the closest, second closest, or third closest point, offering insights into different structures and patterns achievable through this manipulation.', 'The author explains the process of calculating distances between pixels and feature points, sorting the distances, and manipulating noise values to create Voronoi-like tessellations, with examples of varying patterns based on different seed points and n values.', 'The author showcases the ability to create different textures by manipulating the mapping, varying the seed points, and adjusting the value of n, leading to diverse visual outcomes.', 'Explanation of adding z value to p vectors, enabling visualization in 3D space.', 'Comparison of 2D and 3D feature points, demonstration of smoother, spherical quality in 3D.', "Optimization techniques for rendering speed, suggestion of using spatial subdivision, reference to 'The Book of Shaders' for computing whirly noise with a WebGL shader.", 'The author demonstrates the impact of increasing the number of points on the cellular texture, causing the cells to become smaller and the computation to slow down, indicating the need for optimization.']}