title
Coding Challenge #103: Fire Effect

description
In this coding challenge, I implement a pixel-based “fire” algorithm using Processing (Java). Code: https://thecodingtrain.com/challenges/103-fire-effect 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/NaXdkoVI 🎥 Previous video: https://youtu.be/BZUdGqeOD0w?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Next video: https://youtu.be/dLp10CFIvxI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH References: 📓 Fire Simulation: https://web.archive.org/web/20160418004150/http://freespace.virgin.net/hugo.elias/models/m_fire.htm 💾 Processing: http://processing.org Videos: 🚂 What is Perlin Noise?: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bgPNQAdxQZpJuJCjeOr7VD 🔴 Livestream Archive: https://youtu.be/PAmwKVCsg54 Related Coding Challenges: 🚂 #102 2D Water Ripple: https://youtu.be/BZUdGqeOD0w 🚂 #132 Fluid Simulation: https://youtu.be/alhpH6ECFvQ Timestamps: 0:00 Introduction 0:39 Fire algorithm 1:11 Let's Code 2:30 Add image buffers 5:20 Implement smoothing algorithm 11:58 Add cooling map 15:57 Introduce Perlin noise field 17:58 Add noise to the cooling map 22:04 Scroll the cooling map 24:32 Experiment with graphics objects 26:18 Add mouseDragged 27:52 Conclusion 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://discord.gg/hPuGy2g 💖 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 #firesimulation #perlinnoise #processing #p5js

detail
{'title': 'Coding Challenge #103: Fire Effect', 'heatmap': [{'end': 712.806, 'start': 687.953, 'weight': 0.95}, {'end': 871.813, 'start': 851.056, 'weight': 0.715}, {'end': 1405.616, 'start': 1375.899, 'weight': 0.739}, {'end': 1644.925, 'start': 1617.526, 'weight': 0.932}, {'end': 1691.057, 'start': 1665.676, 'weight': 0.929}, {'end': 1726.38, 'start': 1702.311, 'weight': 0.77}, {'end': 1760.21, 'start': 1738.177, 'weight': 1}], 'summary': 'Youtube sponsors coding challenge focuses on optimizing flame algorithm and implementing image processing to create visually appealing effects, including creating a cooling map using perlin noise and demonstrating interactive fire effects in processing, enabling sharing variations as gifs on twitter.', 'chapters': [{'end': 329.083, 'segs': [{'end': 30.896, 'src': 'embed', 'start': 0.79, 'weight': 0, 'content': [{'end': 1.39, 'text': 'OK, hello.', 'start': 0.79, 'duration': 0.6}, {'end': 3.652, 'text': 'I am very excited for this coding challenge.', 'start': 1.57, 'duration': 2.082}, {'end': 7.175, 'text': 'This coding challenge is dedicated to all the new YouTube sponsors.', 'start': 3.692, 'duration': 3.483}, {'end': 10.899, 'text': "I don't know, in the future, when someone's watching this video, YouTube won't even exist, or sponsors.", 'start': 7.195, 'duration': 3.704}, {'end': 15.002, 'text': 'But it just happened today, and all these people are sponsoring like, wow, wow, Tomica, thank you.', 'start': 10.939, 'duration': 4.063}, {'end': 20.447, 'text': 'OK, what am I going to do in this coding challenge? So this was my previous coding challenge, the water ripples coding challenge.', 'start': 15.102, 'duration': 5.345}, {'end': 21.988, 'text': 'I made some fixes to it, by the way.', 'start': 20.587, 'duration': 1.401}, {'end': 23.33, 'text': 'I had some errors in the code.', 'start': 22.008, 'duration': 1.322}, {'end': 24.471, 'text': 'You can find it on GitHub.', 'start': 23.51, 'duration': 0.961}, {'end': 29.415, 'text': "And this is just showing you the water ripples where I'm placing them randomly instead of moving the mouse around.", 'start': 25.371, 'duration': 4.044}, {'end': 30.896, 'text': "And I didn't realize this.", 'start': 29.875, 'duration': 1.021}], 'summary': 'Coding challenge dedicated to new youtube sponsors with water ripples on github.', 'duration': 30.106, 'max_score': 0.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY790.jpg'}, {'end': 97.613, 'src': 'embed', 'start': 49.529, 'weight': 1, 'content': [{'end': 56.592, 'text': "But what's really cool about this, just look at it really quickly, is it works if you create this thing called a cooling map.", 'start': 49.529, 'duration': 7.063}, {'end': 64.376, 'text': "So I'm going to create a cooling map, I guess, like this, that's just kind of noisy and grayscale-y and smooth.", 'start': 56.892, 'duration': 7.484}, {'end': 68.637, 'text': 'But You can make shapes and patterns or use an image.', 'start': 65.016, 'duration': 3.621}, {'end': 71.217, 'text': 'I think this is going to spawn a lot of creative ideas.', 'start': 68.717, 'duration': 2.5}, {'end': 73.578, 'text': "So let's get started making this.", 'start': 71.597, 'duration': 1.981}, {'end': 79.679, 'text': "So I'm actually going to just start with my code base from before because it has most of the same things that I need.", 'start': 73.918, 'duration': 5.761}, {'end': 88.201, 'text': 'And so if we start here, the flames can be made to start anywhere on the screen by simply sprinkling a few pixels.', 'start': 80.259, 'duration': 7.942}, {'end': 92.022, 'text': 'Most implementations had the flame source at the bottom of the screen.', 'start': 88.681, 'duration': 3.341}, {'end': 97.613, 'text': "By the way, where does this algorithm come from originally? I don't know.", 'start': 92.362, 'duration': 5.251}], 'summary': "Creating a cooling map for generating creative ideas using code base. the algorithm's origin is unknown.", 'duration': 48.084, 'max_score': 49.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY49529.jpg'}, {'end': 165.372, 'src': 'embed', 'start': 136.2, 'weight': 3, 'content': [{'end': 140.982, 'text': "It doesn't look like, oh, this is the smoothing.", 'start': 136.2, 'duration': 4.782}, {'end': 143.583, 'text': "Yeah So I'm looking at this.", 'start': 141.742, 'duration': 1.841}, {'end': 150.081, 'text': 'Yeah, but I need a current in next.', 'start': 146.599, 'duration': 3.482}, {'end': 150.802, 'text': 'I need a buffer.', 'start': 150.101, 'duration': 0.701}, {'end': 155.145, 'text': 'But I think this might actually make more sense for me to do with image buffers.', 'start': 151.242, 'duration': 3.903}, {'end': 160.328, 'text': "So rather than have these two-dimensional arrays, let's try something.", 'start': 156.326, 'duration': 4.002}, {'end': 161.849, 'text': "I'm just getting rid of everything.", 'start': 160.348, 'duration': 1.501}, {'end': 163.05, 'text': 'Well, this is a nice idea.', 'start': 161.909, 'duration': 1.141}, {'end': 165.372, 'text': "Let's do this.", 'start': 164.711, 'duration': 0.661}], 'summary': 'Discussion about switching to image buffers for better processing.', 'duration': 29.172, 'max_score': 136.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY136200.jpg'}, {'end': 338.449, 'src': 'embed', 'start': 304.725, 'weight': 5, 'content': [{'end': 306.145, 'text': 'So this is my starting point.', 'start': 304.725, 'duration': 1.42}, {'end': 317.395, 'text': 'So now, what I want to do, is I need to apply this smoothing step.', 'start': 307.806, 'duration': 9.589}, {'end': 320.797, 'text': 'There are a few ways to do this, depending on exactly how you want to smooth the image.', 'start': 317.995, 'duration': 2.802}, {'end': 329.083, 'text': 'So I could probably do all sorts of fancy smoothing algorithms and Gaussian blur and all that.', 'start': 322.879, 'duration': 6.204}, {'end': 338.449, 'text': 'But this is a nice way of just adding up, applying a convolution, a little matrix, adding up the pixels and its neighbors and dividing by 4.', 'start': 329.363, 'duration': 9.086}], 'summary': 'Applying a simple convolution matrix for image smoothing.', 'duration': 33.724, 'max_score': 304.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY304725.jpg'}], 'start': 0.79, 'title': 'Youtube sponsors coding challenge and flame algorithm optimization', 'summary': 'Discusses a coding challenge for youtube sponsors focusing on water ripples and fire algorithm, along with optimizing the flame algorithm by removing swapping algorithm and using image buffers.', 'chapters': [{'end': 73.578, 'start': 0.79, 'title': 'Coding challenge for youtube sponsors', 'summary': 'Discusses a coding challenge dedicated to new youtube sponsors, highlighting the water ripples coding challenge and the introduction of a fire algorithm, which allows the creation of cooling maps for creative ideas.', 'duration': 72.788, 'highlights': ['The chapter introduces a coding challenge dedicated to new YouTube sponsors, expressing excitement and gratitude, indicating potential impact on future viewers and sponsors.', 'The author discusses making fixes to the previous coding challenge, the water ripples, and provides access to the code on GitHub, highlighting the transition to placing ripples randomly instead of moving the mouse.', 'The introduction of the fire algorithm and its potential for creating cooling maps for creative ideas is emphasized, noting its versatility in creating shapes, patterns, and using images.']}, {'end': 165.372, 'start': 73.918, 'title': 'Flame algorithm optimization', 'summary': 'Discusses optimizing the flame algorithm by starting flames anywhere on the screen, removing the swapping algorithm, and using image buffers instead of two-dimensional arrays.', 'duration': 91.454, 'highlights': ['The flames can be made to start anywhere on the screen by simply sprinkling a few pixels.', 'Removing the swapping algorithm and using image buffers instead of two-dimensional arrays is considered for optimization.', 'Most implementations had the flame source at the bottom of the screen.']}, {'end': 329.083, 'start': 166.232, 'title': 'Image smoothing process', 'summary': 'Introduces the process of creating an image buffer, updating its pixels, and applying a smoothing step to the image, using a simple code to add a row of white pixels at the bottom and discussing the potential application of various smoothing algorithms.', 'duration': 162.851, 'highlights': ["The chapter introduces the process of creating an image buffer, updating its pixels, and applying a smoothing step to the image. The speaker demonstrates the creation of image buffers 'buffer1' and 'buffer2' and the updating of pixels using the 'buffer1.pixels' array, while discussing the need for a smoothing step in image processing.", "The speaker provides a simple code to add a row of white pixels at the bottom of the image buffer. The speaker uses a loop to iterate through the pixels of the last row of the image buffer and set them to white, demonstrating the process with the code 'buffer1.pixels[index] = color(255)' to create a visual effect of a red line at the bottom.", "The potential application of various smoothing algorithms and techniques is discussed. The speaker mentions the possibility of using 'fancy smoothing algorithms' and 'Gaussian blur' for image smoothing, implying the flexibility and scope for applying different techniques based on the desired effect."]}], 'duration': 328.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY790.jpg', 'highlights': ['The chapter introduces a coding challenge dedicated to new YouTube sponsors, expressing excitement and gratitude, indicating potential impact on future viewers and sponsors.', 'The introduction of the fire algorithm and its potential for creating cooling maps for creative ideas is emphasized, noting its versatility in creating shapes, patterns, and using images.', 'Most implementations had the flame source at the bottom of the screen.', 'Removing the swapping algorithm and using image buffers instead of two-dimensional arrays is considered for optimization.', "The chapter introduces the process of creating an image buffer, updating its pixels, and applying a smoothing step to the image. The speaker demonstrates the creation of image buffers 'buffer1' and 'buffer2' and the updating of pixels using the 'buffer1.pixels' array, while discussing the need for a smoothing step in image processing.", "The potential application of various smoothing algorithms and techniques is discussed. The speaker mentions the possibility of using 'fancy smoothing algorithms' and 'Gaussian blur' for image smoothing, implying the flexibility and scope for applying different techniques based on the desired effect."]}, {'end': 778.032, 'segs': [{'end': 397.215, 'src': 'embed', 'start': 329.363, 'weight': 0, 'content': [{'end': 338.449, 'text': 'But this is a nice way of just adding up, applying a convolution, a little matrix, adding up the pixels and its neighbors and dividing by 4.', 'start': 329.363, 'duration': 9.086}, {'end': 341.771, 'text': "So I'm going to say, and I'm going to use buffer 2 for that.", 'start': 338.449, 'duration': 3.322}, {'end': 345.357, 'text': 'So buffer2 equals.', 'start': 343.376, 'duration': 1.981}, {'end': 345.958, 'text': 'Oh, no, no, no.', 'start': 345.537, 'duration': 0.421}, {'end': 347.238, 'text': 'I need to loop through all the pixels.', 'start': 346.058, 'duration': 1.18}, {'end': 350.6, 'text': 'Let me give myself some space down here.', 'start': 349.14, 'duration': 1.46}, {'end': 354.783, 'text': "So I'm going to now have an algorithm that goes through all the x's.", 'start': 351.081, 'duration': 3.702}, {'end': 362.788, 'text': "And it goes through all the y's.", 'start': 360.867, 'duration': 1.921}, {'end': 364.509, 'text': "And I'm going to skip the edges.", 'start': 363.248, 'duration': 1.261}, {'end': 373.419, 'text': 'which I might need to be more thoughtful about this later.', 'start': 370.117, 'duration': 3.302}, {'end': 377.142, 'text': 'OK, so now what I need to do is let me get the color.', 'start': 373.439, 'duration': 3.703}, {'end': 382.826, 'text': "I'm going to get the color from buffer one pixels at an index.", 'start': 378.843, 'duration': 3.983}, {'end': 386.368, 'text': 'And that index is the same as this formula.', 'start': 383.286, 'duration': 3.082}, {'end': 392.212, 'text': 'So that is now the color.', 'start': 389.89, 'duration': 2.322}, {'end': 397.215, 'text': 'So then, oh, actually, I need to get all the neighbors.', 'start': 393.053, 'duration': 4.162}], 'summary': 'Algorithm processes pixels using convolution, iterating through x and y coordinates.', 'duration': 67.852, 'max_score': 329.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY329363.jpg'}, {'end': 680.005, 'src': 'embed', 'start': 649.852, 'weight': 2, 'content': [{'end': 651.094, 'text': 'Okay, there we go.', 'start': 649.852, 'duration': 1.242}, {'end': 653.236, 'text': "So we can see that that's actually happening.", 'start': 651.374, 'duration': 1.862}, {'end': 659.944, 'text': "I really would like to do this with the RGB values, but that's gonna add too much to this right now, so I'm not gonna worry about that.", 'start': 653.517, 'duration': 6.427}, {'end': 667.873, 'text': 'Okay, so now So this is the heat spread.', 'start': 660.064, 'duration': 7.809}, {'end': 673.218, 'text': 'Cooling is simple and involves subtracting a small amount from every pixel.', 'start': 668.554, 'duration': 4.664}, {'end': 676.902, 'text': 'The exact amount depends on how quickly you want the fire to cool.', 'start': 673.679, 'duration': 3.223}, {'end': 680.005, 'text': "Well, let's say I don't want it to cool at all.", 'start': 676.922, 'duration': 3.083}], 'summary': 'Adjusting cooling involves subtracting small amount from every pixel depending on desired speed.', 'duration': 30.153, 'max_score': 649.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY649852.jpg'}, {'end': 712.806, 'src': 'heatmap', 'start': 687.953, 'weight': 0.95, 'content': [{'end': 695.428, 'text': 'So where is, copy buffer two to the screen, copy buffer two to buffer one, scroll cooling map up one pixel.', 'start': 687.953, 'duration': 7.475}, {'end': 698.173, 'text': 'Smoothing and convection into one.', 'start': 696.209, 'duration': 1.964}, {'end': 699.356, 'text': 'You are indeed correct.', 'start': 698.273, 'duration': 1.083}, {'end': 702.98, 'text': 'Any programmer worth their salt should see that.', 'start': 700.638, 'duration': 2.342}, {'end': 704.3, 'text': 'I am not worth my salt.', 'start': 703.1, 'duration': 1.2}, {'end': 705.141, 'text': 'I did not see it.', 'start': 704.38, 'duration': 0.761}, {'end': 706.582, 'text': "So that is where I'm going to leave it.", 'start': 705.441, 'duration': 1.141}, {'end': 709.144, 'text': "What? What? That's not very helpful.", 'start': 706.662, 'duration': 2.482}, {'end': 712.806, 'text': 'What I want to explain is how to make the fire look really good.', 'start': 710.284, 'duration': 2.522}], 'summary': 'Merging copy buffer, scrolling map, and improving fire visuals.', 'duration': 24.853, 'max_score': 687.953, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY687953.jpg'}], 'start': 329.363, 'title': 'Image processing algorithm and its implementation', 'summary': 'Discusses applying a simple algorithm for image processing, looping through pixels to obtain color and neighbors, and implementing the algorithm to manipulate grayscale pixels, creating visually appealing effects.', 'chapters': [{'end': 457.569, 'start': 329.363, 'title': 'Image processing algorithm', 'summary': 'Discusses applying a simple algorithm for image processing, by looping through all the pixels, skipping the edges, and obtaining the color and neighbors to perform calculations.', 'duration': 128.206, 'highlights': ['Looping through all the pixels and obtaining the color and neighbors to perform calculations', 'Applying a simple algorithm for image processing']}, {'end': 778.032, 'start': 458.39, 'title': 'Implementing image processing algorithm', 'summary': 'Discusses implementing an image processing algorithm to manipulate grayscale pixels, including adding brightness, dividing or multiplying by a constant, and scrolling and cooling the image for creating effects like fire, with the aim of achieving a visually appealing result.', 'duration': 319.642, 'highlights': ['The exact amount for cooling the fire depends on the desired speed of cooling, where no cooling can be set by not subtracting any amount from the pixels.', 'The process involves manipulating grayscale pixels by adding brightness, dividing or multiplying by a constant, and scrolling and cooling the image to create visual effects, such as fire.', 'The discussion includes the implementation of a function to add a row of red or white pixels at the bottom of the buffer for achieving a specific effect in the algorithm.', 'The step-by-step process of manipulating the grayscale pixels involves adding, scrolling, and cooling the image to create visual effects, such as fire, with a focus on achieving a visually appealing result.', 'The chapter delves into the intricacies of manipulating the grayscale pixels to create visual effects, such as fire, including the specific implementation of convection and cooling for achieving the desired result.']}], 'duration': 448.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY329363.jpg', 'highlights': ['Looping through all the pixels and obtaining the color and neighbors to perform calculations', 'Applying a simple algorithm for image processing', 'The step-by-step process of manipulating the grayscale pixels involves adding, scrolling, and cooling the image to create visual effects, such as fire, with a focus on achieving a visually appealing result', 'The chapter delves into the intricacies of manipulating the grayscale pixels to create visual effects, such as fire, including the specific implementation of convection and cooling for achieving the desired result', 'The process involves manipulating grayscale pixels by adding brightness, dividing or multiplying by a constant, and scrolling and cooling the image to create visual effects, such as fire']}, {'end': 1268.742, 'segs': [{'end': 879.948, 'src': 'heatmap', 'start': 851.056, 'weight': 0.715, 'content': [{'end': 852.717, 'text': 'OK So there we go.', 'start': 851.056, 'duration': 1.661}, {'end': 853.778, 'text': 'So this looks more.', 'start': 852.998, 'duration': 0.78}, {'end': 857.281, 'text': "I just didn't really give myself enough white pixels at the bottom.", 'start': 853.838, 'duration': 3.443}, {'end': 859.623, 'text': 'So now this is just filling this up.', 'start': 857.842, 'duration': 1.781}, {'end': 860.684, 'text': "I'm not seeing any fire.", 'start': 859.783, 'duration': 0.901}, {'end': 863.406, 'text': 'So let me be a bit more thoughtful about this.', 'start': 860.724, 'duration': 2.682}, {'end': 869.331, 'text': "So I'm going to actually give this a set of rows.", 'start': 866.529, 'duration': 2.802}, {'end': 871.813, 'text': "And I'm going to say I'm going to have another.", 'start': 870.072, 'duration': 1.741}, {'end': 876.017, 'text': "I'm going to use i and j here.", 'start': 871.833, 'duration': 4.184}, {'end': 879.948, 'text': "Actually I'm just going to use J as the second one.", 'start': 878.047, 'duration': 1.901}], 'summary': 'Adjusting design layout, considering adding rows, using variables i and j.', 'duration': 28.892, 'max_score': 851.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY851056.jpg'}, {'end': 978.69, 'src': 'embed', 'start': 925.47, 'weight': 0, 'content': [{'end': 930.911, 'text': "OK, so that's the fire growing up from the bottom with setting two rows.", 'start': 925.47, 'duration': 5.441}, {'end': 939.933, 'text': "And now if I want to set five rows to white to have more fire, you can see it's mostly the same effect.", 'start': 931.612, 'duration': 8.321}, {'end': 944.494, 'text': "50, but you can see that's just how much white I'm putting there on the bottom.", 'start': 939.953, 'duration': 4.541}, {'end': 947.555, 'text': 'All right, so this is the fire burning now.', 'start': 944.854, 'duration': 2.701}, {'end': 950.298, 'text': 'The exciting part is coming now.', 'start': 948.717, 'duration': 1.581}, {'end': 953.979, 'text': 'What I need to actually do is this cooling.', 'start': 950.358, 'duration': 3.621}, {'end': 955.6, 'text': 'I need to create a cooling map.', 'start': 954.039, 'duration': 1.561}, {'end': 960.983, 'text': 'Now, does this look like anything familiar to you? I mean, I could make something in Photoshop.', 'start': 956.04, 'duration': 4.943}, {'end': 961.943, 'text': 'I could design a shape.', 'start': 961.043, 'duration': 0.9}, {'end': 962.883, 'text': 'I could have RGB.', 'start': 962.003, 'duration': 0.88}, {'end': 963.984, 'text': "There's so much I could do.", 'start': 962.903, 'duration': 1.081}, {'end': 966.825, 'text': 'But this looks like a Perlin noise field to me.', 'start': 964.584, 'duration': 2.241}, {'end': 969.326, 'text': "So let's quickly make a Perlin noise field.", 'start': 967.225, 'duration': 2.101}, {'end': 978.69, 'text': "Let me find, in examples, under Basics, Under math, I'll look at this noise2D.", 'start': 970.067, 'duration': 8.623}], 'summary': 'Setting 5 rows to white increases fire effect by 50%, then creating a cooling map using perlin noise field.', 'duration': 53.22, 'max_score': 925.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY925470.jpg'}, {'end': 1070.317, 'src': 'embed', 'start': 1043.079, 'weight': 4, 'content': [{'end': 1048.482, 'text': "Now I'm just going to say cooling.pixels, cooling.updatePixels.", 'start': 1043.079, 'duration': 5.403}, {'end': 1054.806, 'text': "Let's comment out drawing the actual buffer, and let's just draw cooling now.", 'start': 1049.143, 'duration': 5.663}, {'end': 1057.527, 'text': "So let's look at our cooling map.", 'start': 1055.106, 'duration': 2.421}, {'end': 1059.311, 'text': 'There we go.', 'start': 1058.951, 'duration': 0.36}, {'end': 1060.472, 'text': "So that's the cooling map.", 'start': 1059.331, 'duration': 1.141}, {'end': 1061.332, 'text': 'There it is over there.', 'start': 1060.552, 'duration': 0.78}, {'end': 1069.636, 'text': 'And I could play around with this by changing the increment value or blurring it or changing noise detail.', 'start': 1061.732, 'duration': 7.904}, {'end': 1070.317, 'text': "I'm just sort of curious.", 'start': 1069.676, 'duration': 0.641}], 'summary': 'Demonstrating coding methods for cooling map manipulation.', 'duration': 27.238, 'max_score': 1043.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1043079.jpg'}, {'end': 1268.742, 'src': 'embed', 'start': 1223.45, 'weight': 5, 'content': [{'end': 1227.112, 'text': 'I need just much, much less white in the picture.', 'start': 1223.45, 'duration': 3.662}, {'end': 1232.775, 'text': "So I think what I'm going to do is I'm going to do something like this.", 'start': 1227.452, 'duration': 5.323}, {'end': 1248.574, 'text': "And then I'm going to say, if If n is less than like 0.4, just set n equal to zero.", 'start': 1235.056, 'duration': 13.518}, {'end': 1254.576, 'text': 'Actually, you know, what would be useful is for me to.', 'start': 1250.415, 'duration': 4.161}, {'end': 1268.742, 'text': 'what would be useful is for me to say 1200 by 400 and have width equals 600 and just keep track of these in separate variables.', 'start': 1254.576, 'duration': 14.166}], 'summary': 'Adjust the white balance by setting n < 0.4 and defining dimensions as 1200x400 with width 600.', 'duration': 45.292, 'max_score': 1223.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1223450.jpg'}], 'start': 778.092, 'title': 'Optimizing fire animation and creating a cooling map', 'summary': 'Discusses optimizing fire animation by ensuring white bottom pixels, testing different row numbers, and observing fire growth. it also explains creating a cooling map using perlin noise, adjusting increment value and pixel manipulation for desired cooling effect, and the need to adjust brightness to reduce white in the picture.', 'chapters': [{'end': 953.979, 'start': 778.092, 'title': 'Optimizing fire animation', 'summary': 'Discusses optimizing the fire animation by ensuring the bottom pixels are always white, testing the effect using different numbers of rows, and observing the resulting fire growth.', 'duration': 175.887, 'highlights': ['The author optimizes the fire animation by ensuring the bottom pixels are always white, improving the visual effect and enhancing the fire animation performance.', 'The author tests the effect of setting two rows of white pixels at the bottom, observing the fire growing up from the bottom and noting the visual impact.', 'The author observes that setting five rows of white pixels at the bottom results in more fire, enhancing the visual effect of the animation.']}, {'end': 1268.742, 'start': 954.039, 'title': 'Creating a cooling map', 'summary': 'Explains the process of creating a cooling map using perlin noise in processing, adjusting the increment value and pixel manipulation to achieve the desired cooling effect and discusses the need to adjust the brightness to reduce the white in the picture.', 'duration': 314.703, 'highlights': ['The chapter explains the process of creating a cooling map using Perlin noise in processing.', 'Adjusting the increment value and pixel manipulation to achieve the desired cooling effect.', 'Discussing the need to adjust the brightness to reduce the white in the picture.']}], 'duration': 490.65, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY778092.jpg', 'highlights': ['The author optimizes the fire animation by ensuring the bottom pixels are always white, improving the visual effect and enhancing the fire animation performance.', 'The author observes that setting five rows of white pixels at the bottom results in more fire, enhancing the visual effect of the animation.', 'The author tests the effect of setting two rows of white pixels at the bottom, observing the fire growing up from the bottom and noting the visual impact.', 'The chapter explains the process of creating a cooling map using Perlin noise in processing.', 'Adjusting the increment value and pixel manipulation to achieve the desired cooling effect.', 'Discussing the need to adjust the brightness to reduce the white in the picture.']}, {'end': 1764.673, 'segs': [{'end': 1422.25, 'src': 'heatmap', 'start': 1375.899, 'weight': 1, 'content': [{'end': 1389.164, 'text': 'And so now, if I call cool in draw, we should see this scroll.', 'start': 1375.899, 'duration': 13.265}, {'end': 1396.069, 'text': "That looks sort of, this is kind of crazy what I'm doing.", 'start': 1392.827, 'duration': 3.242}, {'end': 1398.611, 'text': 'Okay, so a couple things now.', 'start': 1396.549, 'duration': 2.062}, {'end': 1405.616, 'text': "Let's see if setting the Perlin noise back to something much brighter makes sense.", 'start': 1400.412, 'duration': 5.204}, {'end': 1415.422, 'text': "Um And maybe I don't need to set so many rows.", 'start': 1408.158, 'duration': 7.264}, {'end': 1422.25, 'text': 'This looks much more like fire in an interesting way.', 'start': 1419.347, 'duration': 2.903}], 'summary': 'Experimenting with perlin noise to create fire-like effect.', 'duration': 46.351, 'max_score': 1375.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1375899.jpg'}, {'end': 1492.332, 'src': 'embed', 'start': 1459.915, 'weight': 4, 'content': [{'end': 1464.32, 'text': "Where's my cooling image? Let's make this even less.", 'start': 1459.915, 'duration': 4.405}, {'end': 1472.868, 'text': 'There, what do we think? Kind of fiery now.', 'start': 1470.226, 'duration': 2.642}, {'end': 1476.347, 'text': "There's a lot of things you could do here now with this.", 'start': 1473.886, 'duration': 2.461}, {'end': 1483.069, 'text': 'You could add color, you could be more clever about how you make the cooling map with shapes and things in it.', 'start': 1477.147, 'duration': 5.922}, {'end': 1487.431, 'text': 'Let me show you one avenue that you might not be thinking about.', 'start': 1483.669, 'duration': 3.762}, {'end': 1492.332, 'text': 'I think something that could be effective here is if.', 'start': 1488.231, 'duration': 4.101}], 'summary': 'Experimenting with cooling image to enhance with color and shapes for effectiveness.', 'duration': 32.417, 'max_score': 1459.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1459915.jpg'}, {'end': 1691.057, 'src': 'heatmap', 'start': 1617.526, 'weight': 0, 'content': [{'end': 1618.767, 'text': "And let's see what happens here.", 'start': 1617.526, 'duration': 1.241}, {'end': 1623.59, 'text': 'So now when I click the mouse, oh wait, there we go.', 'start': 1619.728, 'duration': 3.862}, {'end': 1624.531, 'text': 'Look what happens.', 'start': 1624.01, 'duration': 0.521}, {'end': 1627.533, 'text': 'Oh, that is wild.', 'start': 1626.212, 'duration': 1.321}, {'end': 1629.394, 'text': 'So hold on.', 'start': 1628.814, 'duration': 0.58}, {'end': 1631.376, 'text': 'Let me swap where these are being drawn.', 'start': 1629.674, 'duration': 1.702}, {'end': 1641.062, 'text': 'So now, anywhere I click, it starts to fire there.', 'start': 1635.919, 'duration': 5.143}, {'end': 1644.925, 'text': 'So let me make this mouse dragged.', 'start': 1641.963, 'duration': 2.962}, {'end': 1653.841, 'text': 'Oh, and let me get rid of the stroke.', 'start': 1650.217, 'duration': 3.624}, {'end': 1658.026, 'text': 'Buffer 1, no stroke.', 'start': 1656.765, 'duration': 1.261}, {'end': 1665.295, 'text': 'So you can see I can kind of like seed the fire however I want.', 'start': 1661.631, 'duration': 3.664}, {'end': 1671.5, 'text': "Now again, I'm just adding circles.", 'start': 1665.676, 'duration': 5.824}, {'end': 1674.343, 'text': 'So now the whole world is open to you.', 'start': 1672, 'duration': 2.343}, {'end': 1678.806, 'text': 'You can create your cooling map in an entirely different way.', 'start': 1674.903, 'duration': 3.903}, {'end': 1682.55, 'text': 'Just to remind you, this is what my cooling map looks like.', 'start': 1678.846, 'duration': 3.704}, {'end': 1685.052, 'text': "But you don't have to use Perlin noise.", 'start': 1683.03, 'duration': 2.022}, {'end': 1687.014, 'text': 'You could actually have shapes in here.', 'start': 1685.492, 'duration': 1.522}, {'end': 1691.057, 'text': 'You could make this a P graphics thing and draw into it and blur.', 'start': 1687.394, 'duration': 3.663}], 'summary': 'Demonstration of creating cooling map with interactive mouse controls and visual effects.', 'duration': 56.817, 'max_score': 1617.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1617526.jpg'}, {'end': 1763.992, 'src': 'heatmap', 'start': 1738.177, 'weight': 3, 'content': [{'end': 1745.501, 'text': 'Dare, dare I look, twitter.com slash hashtag coding flames.', 'start': 1738.177, 'duration': 7.324}, {'end': 1748.543, 'text': 'All right.', 'start': 1748.083, 'duration': 0.46}, {'end': 1750.044, 'text': "I think we're good.", 'start': 1749.164, 'duration': 0.88}, {'end': 1752.646, 'text': 'No results for coding flames.', 'start': 1750.724, 'duration': 1.922}, {'end': 1759.61, 'text': 'So code your flames and enjoy.', 'start': 1753.046, 'duration': 6.564}, {'end': 1760.21, 'text': 'All right.', 'start': 1759.85, 'duration': 0.36}, {'end': 1763.992, 'text': "I'll see you in a future video.", 'start': 1762.491, 'duration': 1.501}], 'summary': 'No results for #codingflames on twitter.com; code your flames and enjoy.', 'duration': 61.681, 'max_score': 1738.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1738177.jpg'}], 'start': 1272.168, 'title': 'Creating fire effects in processing', 'summary': 'Demonstrates creating fire effect using perlin noise, adjusting parameters, and using p graphics objects for interactive fire effects in processing, enabling various creative possibilities and sharing variations as gifs on twitter.', 'chapters': [{'end': 1492.332, 'start': 1272.168, 'title': 'Creating fire effect with perlin noise', 'summary': 'Demonstrates the process of creating a fire effect using perlin noise, adjusting parameters to control the brightness and appearance, and exploring potential enhancements for the effect.', 'duration': 220.164, 'highlights': ['By using Perlin Noise, the speaker adjusts the y-offset to create a scrolling effect, providing a dynamic visual representation of the fire effect.', 'The speaker experiments with altering the Perlin Noise settings to achieve a more accurate representation of fire, adjusting brightness and appearance based on visual observations.', 'The speaker suggests potential enhancements for the fire effect, such as adding color and utilizing creative methods to design the cooling map for a more compelling visual result.']}, {'end': 1764.673, 'start': 1492.332, 'title': 'Creating interactive fire with p graphics', 'summary': 'Discusses using p graphics objects to create interactive fire effects in processing, enabling the ability to seed the fire, draw with mouse interaction, and explore various creative possibilities for cooling maps, with the encouragement to share variations as gifs on twitter.', 'duration': 272.341, 'highlights': ['The chapter explores using P graphics objects in Processing to create interactive fire effects, allowing for the seeding of fire and drawing with mouse interaction.', 'The speaker demonstrates the process of creating interactive fire by using P graphics objects, showing the ability to seed the fire and draw with mouse interaction to add elements to the cooling map.', 'The chapter encourages viewers to explore creative variations using full color RGB, shapes, text, and other imagery, and share their creations as GIFs on Twitter with the hashtag coding flames.']}], 'duration': 492.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/X0kjv0MozuY/pics/X0kjv0MozuY1272168.jpg', 'highlights': ['The speaker demonstrates creating interactive fire using P graphics objects, allowing for seeding and drawing with mouse interaction.', 'By using Perlin Noise, the speaker adjusts the y-offset to create a scrolling effect, providing a dynamic visual representation of the fire effect.', 'The speaker experiments with altering the Perlin Noise settings to achieve a more accurate representation of fire, adjusting brightness and appearance based on visual observations.', 'The chapter encourages viewers to explore creative variations using full color RGB, shapes, text, and other imagery, and share their creations as GIFs on Twitter with the hashtag coding flames.', 'The speaker suggests potential enhancements for the fire effect, such as adding color and utilizing creative methods to design the cooling map for a more compelling visual result.']}], 'highlights': ['The chapter encourages viewers to explore creative variations using full color RGB, shapes, text, and other imagery, and share their creations as GIFs on Twitter with the hashtag coding flames.', 'The speaker suggests potential enhancements for the fire effect, such as adding color and utilizing creative methods to design the cooling map for a more compelling visual result.', 'By using Perlin Noise, the speaker adjusts the y-offset to create a scrolling effect, providing a dynamic visual representation of the fire effect.', 'The speaker experiments with altering the Perlin Noise settings to achieve a more accurate representation of fire, adjusting brightness and appearance based on visual observations.', 'The speaker demonstrates creating interactive fire using P graphics objects, allowing for seeding and drawing with mouse interaction.', 'The chapter explains the process of creating a cooling map using Perlin noise in processing.', 'Adjusting the increment value and pixel manipulation to achieve the desired cooling effect.', 'The author optimizes the fire animation by ensuring the bottom pixels are always white, improving the visual effect and enhancing the fire animation performance.', 'The author observes that setting five rows of white pixels at the bottom results in more fire, enhancing the visual effect of the animation.', 'The author tests the effect of setting two rows of white pixels at the bottom, observing the fire growing up from the bottom and noting the visual impact.', 'The process involves manipulating grayscale pixels by adding brightness, dividing or multiplying by a constant, and scrolling and cooling the image to create visual effects, such as fire.']}