title
Coding Challenge #13: Reaction Diffusion Algorithm in p5.js
description
In this coding challenge, I visualize a Reaction Diffusion simulation using the Gray Scott model in JavaScript (with the p5.js library). Code: https://thecodingtrain.com/challenges/13-reaction-diffusion
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/govdEW5aE
đĨ Previous video: https://youtu.be/f0lkz2gSsIk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/0jjeOYMjmDU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Karl Sims' Reaction Diffusion Tutorial: http://karlsims.com/rd.html
đ 2D Array Tutorial: https://processing.org/tutorials/2darray/
đ My NOC class on Kadenze: https://www.kadenze.com/courses/the-nature-of-code/info
Videos:
đ´ Livestream Archive: https://youtu.be/FYRINCEDVKI?t=6697s
Related Coding Challenges:
đ #85 The Game of Life: https://youtu.be/FWSR_7kZuYg
đ #90 Floyd-Steinberg Dithering: https://youtu.be/0L2n8Tg2FwI
đ #103 Fire Effect: https://youtu.be/X0kjv0MozuY
Timestamps:
0:00 Introducing today's topic
0:36 The Gray-Scott model
1:41 Key pieces of the algorithm
4:24 Convolutions
7:01 2D arrays
9:00 The grid stores the amount of a and b chemicals across every pixel
10:30 Create another array to store the next generation
11:37 Dealing with the pixel array
12:55 Set the pixel colors based on the amount of a and b
16:14 Write a function to swap the current and next grid
19:30 Add the reaction diffusion formulas to the code
24:27 Time steps
27:29 Add the Laplace functions
33:45 Seed a whole area with b
36:37 Recap of the code and suggestions for creative possibilities
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
#math #reactiondiffusion #javascript #p5js
detail
{'title': 'Coding Challenge #13: Reaction Diffusion Algorithm in p5.js', 'heatmap': [{'end': 1104.976, 'start': 1076.789, 'weight': 0.78}, {'end': 1953.577, 'start': 1926.837, 'weight': 0.848}, {'end': 2141.418, 'start': 2063.382, 'weight': 0.905}], 'summary': 'Explores the reaction diffusion algorithm in javascript, implementing the gray-scott model and carl sims tutorial to create labyrinthian visuals, covers creating two-dimensional arrays in javascript to store chemical amounts and generating pixel colors, explains the implementation of the schiffman rainbow reaction diffusion algorithm, the concept of time steps in computer programs and animation, and delves into the laplacian function, and discusses debugging issues and simulating reaction diffusion algorithm using javascript.', 'chapters': [{'end': 56.731, 'segs': [{'end': 43.04, 'src': 'embed', 'start': 17.745, 'weight': 0, 'content': [{'end': 24.031, 'text': 'And you can see that this allows you to create this interesting kind of labyrinthian visual in your canvas.', 'start': 17.745, 'duration': 6.286}, {'end': 28.673, 'text': "Now, there's a lot of different ways that you can apply colors and get different qualities to the image.", 'start': 24.051, 'duration': 4.622}, {'end': 34.356, 'text': "But I'm going to look at the sort of core classic reaction diffusion algorithm using the Gray-Scott model.", 'start': 28.873, 'duration': 5.483}, {'end': 36.997, 'text': 'I will include some links below to reference pages.', 'start': 34.396, 'duration': 2.601}, {'end': 43.04, 'text': 'The one that I will build the code based on is right here in the browser, the Carl Sims, a Carl Sims tutorial page.', 'start': 37.298, 'duration': 5.742}], 'summary': 'Explore creating labyrinthian visuals using reaction diffusion algorithm in canvas.', 'duration': 25.295, 'max_score': 17.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc17745.jpg'}], 'start': 0.828, 'title': 'Reaction diffusion algorithm', 'summary': 'Explores the reaction diffusion algorithm, implementing it in javascript to create labyrinthian visuals using the gray-scott model and carl sims tutorial, aiming to inspire creative applications.', 'chapters': [{'end': 56.731, 'start': 0.828, 'title': 'Reaction diffusion algorithm', 'summary': 'Explores the reaction diffusion algorithm, focusing on implementing it in javascript from scratch, to create labyrinthian visuals using the gray-scott model and carl sims tutorial, aiming to inspire creative applications.', 'duration': 55.903, 'highlights': ['The chapter emphasizes implementing the reaction diffusion algorithm in JavaScript from scratch, to create labyrinthian visuals using the Gray-Scott model and references the Carl Sims tutorial page for building the code.', 'The algorithm enables the creation of interesting labyrinthian visual in the canvas, offering opportunities to apply colors and obtain different qualities to the image, fostering creative uses and applications.', 'The focus is on the classic algorithm using the Gray-Scott model to produce black and white pixels, potentially inspiring users to explore and apply the algorithm in various creative ways.']}], 'duration': 55.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc828.jpg', 'highlights': ['Implement reaction diffusion algorithm in JavaScript to create labyrinthian visuals using Gray-Scott model and Carl Sims tutorial', 'Algorithm enables creation of labyrinthian visuals in canvas, fostering creative uses and applications', 'Focus on classic algorithm using Gray-Scott model to produce black and white pixels, inspiring users to explore creative applications']}, {'end': 389.057, 'segs': [{'end': 139.988, 'src': 'embed', 'start': 111.728, 'weight': 0, 'content': [{'end': 117.63, 'text': 'The reaction aspect is chemical A and B reacting, and maybe A is turning into B.', 'start': 111.728, 'duration': 5.902}, {'end': 122.852, 'text': 'And the sort of diffusion in this way is that chemical B is also going to get kind of like removed from it.', 'start': 117.63, 'duration': 5.222}, {'end': 127.897, 'text': "So there are some key constants in the system that are numbers that you're going to see in the code.", 'start': 123.072, 'duration': 4.825}, {'end': 132.221, 'text': 'One is the feed rate, which is how fast are we pouring in chemical A.', 'start': 128.257, 'duration': 3.964}, {'end': 133.982, 'text': 'And then another is called the kill rate.', 'start': 132.221, 'duration': 1.761}, {'end': 139.988, 'text': "I wish there was a nicer name for that, but that's what it's called, which is what is the rate the chemical B is being removed.", 'start': 134.022, 'duration': 5.966}], 'summary': 'Chemical a and b react, with feed rate and kill rate as key constants.', 'duration': 28.26, 'max_score': 111.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc111728.jpg'}, {'end': 309.493, 'src': 'embed', 'start': 280.181, 'weight': 3, 'content': [{'end': 289.564, 'text': "And what I want to know is what is this cell's new values of A and B based on its previous value of A and B.", 'start': 280.181, 'duration': 9.383}, {'end': 291.065, 'text': 'But not just it.', 'start': 289.564, 'duration': 1.501}, {'end': 294.406, 'text': 'I need to know also based on its neighbors.', 'start': 291.525, 'duration': 2.881}, {'end': 301.869, 'text': 'So these chemicals are reacting and combining in a given cell also with what are the chemicals next to it.', 'start': 294.966, 'duration': 6.903}, {'end': 309.493, 'text': 'So a convolution means take every single one of these cells and multiply it by some weight.', 'start': 302.23, 'duration': 7.263}], 'summary': "Determine cell's new values of a and b based on previous values and neighbors by convolution.", 'duration': 29.312, 'max_score': 280.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc280181.jpg'}, {'end': 366.812, 'src': 'embed', 'start': 330.47, 'weight': 2, 'content': [{'end': 337.096, 'text': "But we have a different convolution here, and it's described in the reaction diffusion algorithm.", 'start': 330.47, 'duration': 6.626}, {'end': 339.397, 'text': 'So this is the basic idea.', 'start': 338.197, 'duration': 1.2}, {'end': 340.998, 'text': 'I need a two-dimensional array.', 'start': 339.657, 'duration': 1.341}, {'end': 344.838, 'text': 'Each spot is going to have a certain amount of A and a certain amount of B.', 'start': 341.518, 'duration': 3.32}, {'end': 350.759, 'text': 'I need to have a formula that for each cycle, each frame, through draw, I get a new value of A and a new value of B,', 'start': 344.838, 'duration': 5.921}, {'end': 352.56, 'text': 'and then a new value of A and a new value of B.', 'start': 350.759, 'duration': 1.801}, {'end': 357.781, 'text': "And the math formula is going to be something like this, but more complicated, because it's also going to involve all the neighbors.", 'start': 352.56, 'duration': 5.221}, {'end': 359.781, 'text': "So let's start setting this up now.", 'start': 358.141, 'duration': 1.64}, {'end': 360.921, 'text': 'Hopefully, this is the basic idea.', 'start': 359.841, 'duration': 1.08}, {'end': 362.222, 'text': "Let's start setting it up to program it.", 'start': 360.941, 'duration': 1.281}, {'end': 363.942, 'text': "OK, so now I'm back over here.", 'start': 362.642, 'duration': 1.3}, {'end': 366.812, 'text': 'I am back over here.', 'start': 365.971, 'duration': 0.841}], 'summary': 'Implementing reaction diffusion algorithm to update values of a and b in a two-dimensional array.', 'duration': 36.342, 'max_score': 330.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc330470.jpg'}], 'start': 56.971, 'title': 'Reaction diffusion algorithm', 'summary': 'Explains the reaction diffusion algorithm, simulating chemical reactions on a screen to set colors for pixels based on key constants, and the process of implementing it in code using a two-dimensional array and convolution.', 'chapters': [{'end': 151.099, 'start': 56.971, 'title': 'Reaction diffusion algorithm', 'summary': 'Explains the reaction diffusion algorithm, simulating the reaction and diffusion of chemicals on a screen to set colors for pixels based on the arrangement of chemicals, using feed rate and kill rate as key constants in the system.', 'duration': 94.128, 'highlights': ['The reaction diffusion algorithm simulates the interaction of chemicals A and B on a canvas to set colors for pixels based on their arrangement, using the feed rate and kill rate as key constants in the system.', 'The feed rate determines how fast chemical A is poured into the canvas, while the kill rate represents the rate at which chemical B is being removed from the canvas.']}, {'end': 389.057, 'start': 151.099, 'title': 'Reaction diffusion algorithm in code', 'summary': 'Explains the process of implementing a reaction diffusion algorithm in code, involving the use of a two-dimensional array to track the amount of chemicals a and b, and the application of a convolution to calculate new values of a and b based on their previous values and those of their neighbors.', 'duration': 237.958, 'highlights': ['The implementation involves using a two-dimensional array to track the amount of chemicals A and B, and a formula to calculate new values of A and B for each cycle. The chapter discusses the usage of a two-dimensional array to keep track of the amount of chemicals A and B, and the need for a formula to calculate new values of A and B for each cycle.', 'The concept of convolution is applied to calculate the new values of A and B based on their previous values and those of their neighbors. The chapter explains the application of a convolution to calculate the new values of A and B based on their previous values and those of their neighbors, illustrating the interaction and combination of chemicals within a given cell.', 'The author emphasizes the need for a more complex formula due to the involvement of neighbors in the calculation of new values of A and B. The chapter highlights the necessity for a more complex formula to calculate new values of A and B, attributing the complexity to the involvement of neighbors in the calculation process.']}], 'duration': 332.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc56971.jpg', 'highlights': ['The reaction diffusion algorithm simulates the interaction of chemicals A and B on a canvas to set colors for pixels based on their arrangement, using the feed rate and kill rate as key constants in the system.', 'The feed rate determines how fast chemical A is poured into the canvas, while the kill rate represents the rate at which chemical B is being removed from the canvas.', 'The implementation involves using a two-dimensional array to track the amount of chemicals A and B, and a formula to calculate new values of A and B for each cycle.', 'The concept of convolution is applied to calculate the new values of A and B based on their previous values and those of their neighbors.', 'The author emphasizes the need for a more complex formula due to the involvement of neighbors in the calculation of new values of A and B.']}, {'end': 839.733, 'segs': [{'end': 411.181, 'src': 'embed', 'start': 389.297, 'weight': 2, 'content': [{'end': 398.786, 'text': 'The first thing I need to do is create my two-dimensional array to store all the amount of chemicals in each spot in the grid.', 'start': 389.297, 'duration': 9.489}, {'end': 404.119, 'text': 'Okay, so two-dimensional arrays in JavaScript are kind of a funny thing.', 'start': 399.918, 'duration': 4.201}, {'end': 411.181, 'text': "Not funny, haha, funny a little bit weird, because arrays in JavaScript, there's just so many different ways you can make them.", 'start': 405.039, 'duration': 6.142}], 'summary': 'Creating a 2d array to store chemical amounts in a grid in javascript.', 'duration': 21.884, 'max_score': 389.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc389297.jpg'}, {'end': 612.634, 'src': 'embed', 'start': 581.47, 'weight': 0, 'content': [{'end': 590.415, 'text': "In order to make this work, it's all built on this idea of I need to get the next generation amount of a.", 'start': 581.47, 'duration': 8.945}, {'end': 603.711, 'text': 'So if this grid is the snapshot of all the chemicals in the current generation, I need a completely separate grid to start filling in the new values.', 'start': 591.707, 'duration': 12.004}, {'end': 612.634, 'text': "Because if I were to use the same grid, if I start overwriting the values in that grid while I'm checking other values' neighbors,", 'start': 606.112, 'duration': 6.522}], 'summary': 'To update chemicals, a separate grid is needed for new values to avoid overwriting.', 'duration': 31.164, 'max_score': 581.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc581470.jpg'}, {'end': 734.218, 'src': 'embed', 'start': 706.105, 'weight': 3, 'content': [{'end': 709.969, 'text': 'So guess what everybody? I have a whole video that goes through the pixel array.', 'start': 706.105, 'duration': 3.864}, {'end': 711.13, 'text': 'I should link to that from here.', 'start': 710.069, 'duration': 1.061}, {'end': 719.218, 'text': 'The pixel array in P5.js in the JavaScript canvas is a pixel array that has four spots for every pixel.', 'start': 711.37, 'duration': 7.848}, {'end': 722.522, 'text': "So I need to figure out, and it's one dimensional.", 'start': 719.838, 'duration': 2.684}, {'end': 734.218, 'text': "So I go through the derivation of this formula, but I'm going to say pix equals x plus y, times width times four,", 'start': 722.782, 'duration': 11.436}], 'summary': 'The p5.js pixel array in javascript canvas has four spots for every pixel and is one dimensional.', 'duration': 28.113, 'max_score': 706.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc706105.jpg'}, {'end': 819.545, 'src': 'embed', 'start': 787.231, 'weight': 1, 'content': [{'end': 794.196, 'text': "So I'm going to do the red and the blue as coming from the two-dimensional array itself and we should see all black,", 'start': 787.231, 'duration': 6.965}, {'end': 798.841, 'text': 'but if I give everything a Random amounts.', 'start': 794.196, 'duration': 4.645}, {'end': 811.541, 'text': 'We should see, okay, so what am I missing here? So I gave the grid a random amount of A and a random amount of B.', 'start': 802.677, 'duration': 8.864}, {'end': 817.504, 'text': "And what's missing? Oh, I did a random between zero and one.", 'start': 811.541, 'duration': 5.963}, {'end': 819.545, 'text': 'So what I want to do is multiply these by 255.', 'start': 817.824, 'duration': 1.721}], 'summary': 'Experimenting with random amounts in a 2d array, aiming to multiply by 255.', 'duration': 32.314, 'max_score': 787.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc787231.jpg'}], 'start': 389.297, 'title': 'Javascript arrays and pixel color generation', 'summary': 'Covers creating two-dimensional arrays in javascript to store chemical amounts and generating pixel colors from a two-dimensional array, providing a mechanism to represent chemical amounts with pixel colors.', 'chapters': [{'end': 656.828, 'start': 389.297, 'title': 'Javascript two-dimensional arrays', 'summary': 'Discusses creating two-dimensional arrays in javascript to store chemical amounts in a grid, utilizing arrays of arrays and initializing chemical quantities, with the need for separate grids for current and next generations.', 'duration': 267.531, 'highlights': ['Creating a two-dimensional array in JavaScript involves using an array of arrays to represent the grid structure, with each array corresponding to a row and containing chemical quantities for each spot. Explains the concept of a two-dimensional array in JavaScript as an array of arrays, representing the grid structure and chemical quantities for each spot.', 'Initializes chemical quantities for each spot in the grid using a JavaScript object to represent the amount of two different chemicals, a and b, with zero of each initially. Demonstrates the initialization of chemical quantities using a JavaScript object to represent the amount of two different chemicals, a and b, with zero of each initially.', "Emphasizes the need for separate grids for current and next generations to avoid overwriting values while checking neighboring spots' chemicals. Stresses the importance of separate grids for current and next generations to prevent overwriting values while checking neighboring spots' chemicals."]}, {'end': 839.733, 'start': 657.828, 'title': 'Generating pixel colors from a two-dimensional array', 'summary': 'Demonstrates using a two-dimensional array to generate pixel colors in a window using a nested loop, a pixel array, and a formula, resulting in a mechanism to represent chemical amounts with pixel colors.', 'duration': 181.905, 'highlights': ['Using a two-dimensional array to generate pixel colors based on chemical amounts, demonstrated through a nested loop and a pixel array, providing a visual representation of the chemical data.', 'Explaining the derivation of the formula (pix = x + y * width * 4) to find the array position for each pixel, allowing for accurate color assignment based on chemical amounts.', 'Demonstrating the use of random amounts for color generation and addressing the need to multiply the random values by 255 and convert them to integers for accurate representation.']}], 'duration': 450.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc389297.jpg', 'highlights': ["Emphasizes the need for separate grids for current and next generations to avoid overwriting values while checking neighboring spots' chemicals.", 'Demonstrating the use of random amounts for color generation and addressing the need to multiply the random values by 255 and convert them to integers for accurate representation.', 'Using a two-dimensional array to generate pixel colors based on chemical amounts, demonstrated through a nested loop and a pixel array, providing a visual representation of the chemical data.', 'Explaining the derivation of the formula (pix = x + y * width * 4) to find the array position for each pixel, allowing for accurate color assignment based on chemical amounts.', 'Initializes chemical quantities for each spot in the grid using a JavaScript object to represent the amount of two different chemicals, a and b, with zero of each initially.', 'Creating a two-dimensional array in JavaScript involves using an array of arrays to represent the grid structure, with each array corresponding to a row and containing chemical quantities for each spot.']}, {'end': 1085.61, 'segs': [{'end': 998.326, 'src': 'embed', 'start': 885.847, 'weight': 0, 'content': [{'end': 905.049, 'text': "I'm gonna say grid x comma so next dot a equals grid x y dot a you know times 0.2 and Next then the next B is is the grid's b times 1.2.", 'start': 885.847, 'duration': 19.202}, {'end': 907.331, 'text': "So I'm going to do that.", 'start': 905.049, 'duration': 2.282}, {'end': 909.954, 'text': "So this is, again, this isn't the correct formula.", 'start': 907.371, 'duration': 2.583}, {'end': 913.417, 'text': "We're going to have to actually put in the reaction diffusion formula.", 'start': 910.514, 'duration': 2.903}, {'end': 919.063, 'text': "But I'm showing this is the structure by which I say the next generation will be that.", 'start': 913.618, 'duration': 5.445}, {'end': 922.006, 'text': 'So now if I run this again, we come back to here.', 'start': 919.363, 'duration': 2.643}, {'end': 925.752, 'text': "Well, it doesn't seem to be animating or changing.", 'start': 923.39, 'duration': 2.362}, {'end': 930.895, 'text': "Why? So it's not animating or changing because I'm still drawing it based on grid.", 'start': 925.932, 'duration': 4.963}, {'end': 934.638, 'text': 'So maybe what I actually want to do is draw the next one.', 'start': 931.196, 'duration': 3.442}, {'end': 939.802, 'text': 'And I did get something strange happening here.', 'start': 937.58, 'duration': 2.222}, {'end': 940.822, 'text': 'So it looks different.', 'start': 939.842, 'duration': 0.98}, {'end': 946.566, 'text': "And let's actually not let the values go over.", 'start': 941.583, 'duration': 4.983}, {'end': 951.61, 'text': 'So you can see that it is actually doing something, like the values are different.', 'start': 947.867, 'duration': 3.743}, {'end': 956.295, 'text': "Importantly here, I don't see anything animating.", 'start': 954.272, 'duration': 2.023}, {'end': 960.76, 'text': 'So one of the major things that we need here is something called a swap.', 'start': 956.535, 'duration': 4.225}, {'end': 965.506, 'text': "Are you with me? Are you still paying attention? I would understand if you weren't.", 'start': 961.541, 'duration': 3.965}, {'end': 967.428, 'text': 'OK, so I need a swap.', 'start': 965.967, 'duration': 1.461}, {'end': 975.956, 'text': 'This is a very common technique in cellular automata systems and other types of generation by generation systems.', 'start': 970.694, 'duration': 5.262}, {'end': 980.458, 'text': 'What I have here is I have, oops, wrong side of this marker.', 'start': 976.597, 'duration': 3.861}, {'end': 987.121, 'text': 'What I have here is I have a two-dimensional array called grid, and then I have one called next.', 'start': 981.138, 'duration': 5.983}, {'end': 993.864, 'text': 'So grid is all my starting values.', 'start': 991.683, 'duration': 2.181}, {'end': 998.326, 'text': 'Then next is calculated, and then next is drawn to the window.', 'start': 994.224, 'duration': 4.102}], 'summary': "Exploring grid manipulation and the need for a 'swap' technique in cellular automata systems.", 'duration': 112.479, 'max_score': 885.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc885847.jpg'}, {'end': 1085.61, 'src': 'embed', 'start': 1035.904, 'weight': 3, 'content': [{'end': 1041.127, 'text': "So at the end of every, oops, after I draw, I'm going to call a function called swap.", 'start': 1035.904, 'duration': 5.223}, {'end': 1042.888, 'text': "And I'm going to write that down.", 'start': 1041.588, 'duration': 1.3}, {'end': 1045.931, 'text': "Can you see this? I'm going to write this down somewhere down here.", 'start': 1043.309, 'duration': 2.622}, {'end': 1049.594, 'text': "So I'm going to write a function called swap.", 'start': 1046.351, 'duration': 3.243}, {'end': 1057.87, 'text': "And so what's going on here? Next, I want grid to be next and I want next to be grid.", 'start': 1050.58, 'duration': 7.29}, {'end': 1060.713, 'text': 'I want grid to be next and I want next to be grid.', 'start': 1058.551, 'duration': 2.162}, {'end': 1061.514, 'text': 'I want to swap them.', 'start': 1060.753, 'duration': 0.761}, {'end': 1062.736, 'text': 'Oh, but this is no good.', 'start': 1061.735, 'duration': 1.001}, {'end': 1067.642, 'text': 'If grid is next and then next equals grid, well then next is next because grid is next.', 'start': 1063.237, 'duration': 4.405}, {'end': 1069.327, 'text': "We've got a problem here.", 'start': 1068.507, 'duration': 0.82}, {'end': 1076.188, 'text': 'So in a swap, what I need to do is I need to have a temporary variable that keeps track of the old grid.', 'start': 1069.587, 'duration': 6.601}, {'end': 1081.769, 'text': 'So now grid can become next, and next can become that old grid temp.', 'start': 1076.789, 'duration': 4.98}, {'end': 1085.61, 'text': 'So this is a very simple swapping algorithm to swap the values of two variables.', 'start': 1081.949, 'duration': 3.661}], 'summary': 'Illustrates a simple swapping algorithm to swap values of two variables.', 'duration': 49.706, 'max_score': 1035.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1035904.jpg'}], 'start': 840.093, 'title': 'Implementing reaction diffusion and cellular automata swapping', 'summary': 'Covers implementing reaction diffusion formula, focusing on adjusting grid values and emphasizing the importance of swap for animation. it also discusses the swapping technique in cellular automata systems, emphasizing the need to swap old and new arrays for continuous generation and drawing.', 'chapters': [{'end': 967.428, 'start': 840.093, 'title': 'Implementing reaction diffusion formula', 'summary': 'Discusses the process of implementing a formula for reaction diffusion, demonstrating the structure and identifying the need for a swap to achieve animation, with a focus on adjusting grid values and emphasizing the importance of a swap for animation.', 'duration': 127.335, 'highlights': ['The need for a swap to enable animation is emphasized, highlighting the importance of incorporating this feature to enable visual changes in the grid values.', 'The process of implementing a formula for reaction diffusion is demonstrated, emphasizing the structure and the multiplication of grid values by specific factors to represent the next generation.', 'The chapter emphasizes the need to draw the next generation rather than the current one to observe visual changes and avoid values going over, indicating a focus on visual representation and value limitations.']}, {'end': 1085.61, 'start': 970.694, 'title': 'Cellular automata swapping technique', 'summary': 'Discusses the swapping technique in cellular automata systems, emphasizing the need to swap old and new arrays to enable continuous generation and drawing to the window.', 'duration': 114.916, 'highlights': ['The need to swap old and new arrays in cellular automata systems for continuous generation and drawing to the window. The chapter emphasizes the importance of swapping old and new arrays, enabling continuous generation and drawing to the window.', 'Explanation of the swapping process using a temporary variable to interchange the values of two arrays. The chapter explains a simple swapping algorithm using a temporary variable to interchange the values of two arrays.', "Introduction of a separate function called 'swap' to facilitate the array swapping process. The chapter introduces a separate function called 'swap' to facilitate the array swapping process, enhancing code organization and reusability."]}], 'duration': 245.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc840093.jpg', 'highlights': ['The need for a swap to enable animation is emphasized, highlighting the importance of incorporating this feature to enable visual changes in the grid values.', 'The need to swap old and new arrays in cellular automata systems for continuous generation and drawing to the window. The chapter emphasizes the importance of swapping old and new arrays, enabling continuous generation and drawing to the window.', 'The process of implementing a formula for reaction diffusion is demonstrated, emphasizing the structure and the multiplication of grid values by specific factors to represent the next generation.', 'Explanation of the swapping process using a temporary variable to interchange the values of two arrays. The chapter explains a simple swapping algorithm using a temporary variable to interchange the values of two arrays.', "Introduction of a separate function called 'swap' to facilitate the array swapping process. The chapter introduces a separate function called 'swap' to facilitate the array swapping process, enhancing code organization and reusability.", 'The chapter emphasizes the need to draw the next generation rather than the current one to observe visual changes and avoid values going over, indicating a focus on visual representation and value limitations.']}, {'end': 1621.38, 'segs': [{'end': 1140.176, 'src': 'embed', 'start': 1110.078, 'weight': 0, 'content': [{'end': 1111.098, 'text': "Now again, this isn't.", 'start': 1110.078, 'duration': 1.02}, {'end': 1117.482, 'text': "this is the like Schiffman rainbow Reaction diffusion algorithm, which isn't very interesting at all.", 'start': 1111.098, 'duration': 6.384}, {'end': 1119.023, 'text': 'so we have the guts here.', 'start': 1117.482, 'duration': 1.541}, {'end': 1120.324, 'text': 'We have the foundation.', 'start': 1119.023, 'duration': 1.301}, {'end': 1122.005, 'text': 'we have the two-dimensional array.', 'start': 1120.324, 'duration': 1.681}, {'end': 1124.286, 'text': 'each spot holds the amount of each chemical.', 'start': 1122.005, 'duration': 2.281}, {'end': 1130.67, 'text': 'the screen is colored based on those chemicals, And I have some formula to calculate the new chemical value based on the old chemical value.', 'start': 1124.286, 'duration': 6.384}, {'end': 1133.432, 'text': "So I don't know how long I've been doing this for, but we're so close.", 'start': 1130.67, 'duration': 2.762}, {'end': 1140.176, 'text': 'now all I need to do is actually go and get that scary formula from that web page and stick it in the code.', 'start': 1133.432, 'duration': 6.744}], 'summary': 'Developing a reaction diffusion algorithm with 2d array for chemical simulation.', 'duration': 30.098, 'max_score': 1110.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1110078.jpg'}, {'end': 1243.058, 'src': 'embed', 'start': 1213.154, 'weight': 1, 'content': [{'end': 1214.134, 'text': "Let's see what else we got.", 'start': 1213.154, 'duration': 0.98}, {'end': 1217.332, 'text': 'DB equals 0.5.', 'start': 1214.554, 'duration': 2.778}, {'end': 1218.854, 'text': 'Diffusion rate for B.', 'start': 1217.332, 'duration': 1.522}, {'end': 1222.919, 'text': 'The feed, feed is how fast are you feeding in chemical A is 0.055.', 'start': 1218.854, 'duration': 4.065}, {'end': 1229.106, 'text': "I'm going to call that feed just to, because F can mean other stuff in programming.", 'start': 1222.919, 'duration': 6.187}, {'end': 1238.295, 'text': '0.055, was that it? Yep, and k is 0.062, var k equals 0.062.', 'start': 1229.126, 'duration': 9.169}, {'end': 1243.058, 'text': "That's sort of the kill rate, how fast is a B being removed.", 'start': 1238.295, 'duration': 4.763}], 'summary': 'Db=0.5, feed rate=0.055, k=0.062 for b diffusion and removal.', 'duration': 29.904, 'max_score': 1213.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1213154.jpg'}, {'end': 1510.883, 'src': 'embed', 'start': 1482.568, 'weight': 2, 'content': [{'end': 1488.673, 'text': "And we're doing this calculation in this sort of like stop, calculate, wait, stop, calculate, wait, stop, calculate.", 'start': 1482.568, 'duration': 6.105}, {'end': 1494.516, 'text': "We can sort of scale the amount of time that's passing scale, the calculation according time.", 'start': 1489.814, 'duration': 4.702}, {'end': 1501.699, 'text': "I'm going to leave that as one and basically my time scale is going to be the 60 frames per second that I hope that the,", 'start': 1494.516, 'duration': 7.183}, {'end': 1505.601, 'text': 'that the Algorithm that I hope that the animation plays out at.', 'start': 1501.699, 'duration': 3.902}, {'end': 1510.883, 'text': "but you can really sort of change the quality of what you're getting and the degree of Accuracy that you're getting by having a smaller time step.", 'start': 1505.601, 'duration': 5.282}], 'summary': 'The calculation involves adjusting time scale and frames per second for accuracy.', 'duration': 28.315, 'max_score': 1482.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1482568.jpg'}, {'end': 1584.019, 'src': 'embed', 'start': 1550.046, 'weight': 3, 'content': [{'end': 1552.667, 'text': 'and then add them all together to get the new value.', 'start': 1550.046, 'duration': 2.621}, {'end': 1555.767, 'text': "That's the Laplacian function, the convolution.", 'start': 1552.987, 'duration': 2.78}, {'end': 1565.049, 'text': "So if we go back here, let's go back to this page, and here it says the Laplacian is performed with a three.", 'start': 1556.087, 'duration': 8.962}, {'end': 1571.11, 'text': "now there's different ways you could do this, but this says with a three by three, convolution with a center weight of negative one,", 'start': 1565.049, 'duration': 6.061}, {'end': 1574.691, 'text': 'adjacent neighbors point two and diagonals point five.', 'start': 1571.11, 'duration': 3.581}, {'end': 1576.211, 'text': 'This means the following.', 'start': 1575.131, 'duration': 1.08}, {'end': 1584.019, 'text': 'So I need to, in this function, Look at every single cell and apply a weight.', 'start': 1576.872, 'duration': 7.147}], 'summary': 'Laplacian function using 3x3 convolution with specific weights for adjacent neighbors and diagonals.', 'duration': 33.973, 'max_score': 1550.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1550046.jpg'}], 'start': 1086.55, 'title': 'Implementing reaction diffusion algorithm and understanding time steps', 'summary': 'Covers the implementation of the schiffman rainbow reaction diffusion algorithm, including the definition of chemical values, diffusion rates, feed rates, and kill rates, and the process of applying the algorithm to create visual effects. it also explains the concept of time steps in computer programs and animation, emphasizing the effect of changing time steps on the quality and accuracy of calculations, and delves into the laplacian function, detailing the process and the specific weights assigned to neighbors for the convolution.', 'chapters': [{'end': 1455.942, 'start': 1086.55, 'title': 'Implementing reaction diffusion algorithm', 'summary': 'Covers the implementation of the schiffman rainbow reaction diffusion algorithm, including the definition of chemical values, diffusion rates, feed rates, and kill rates, and the step-by-step coding process, aiming to apply the algorithm to create visual effects.', 'duration': 369.392, 'highlights': ['Implemented the Schiffman rainbow Reaction diffusion algorithm, including the definition of chemical values, diffusion rates, feed rates, and kill rates, and the step-by-step coding process, aiming to apply the algorithm to create visual effects.', 'Defined the diffusion rate for A as 1, diffusion rate for B as 0.5, feed rate for chemical A as 0.055, and kill rate for chemical B as 0.062, highlighting the importance of playing with these values to produce different results.', 'Outlined the step-by-step process of coding the reaction-diffusion formula, breaking it down into components for A and B, and discussing the calculation of new chemical values based on old ones.']}, {'end': 1621.38, 'start': 1455.962, 'title': 'Understanding time steps and laplacian function', 'summary': 'Explains the concept of time steps in computer programs and animation, emphasizing the effect of changing time steps on the quality and accuracy of calculations, and then delves into the laplacian function, detailing the process and the specific weights assigned to neighbors for the convolution.', 'duration': 165.418, 'highlights': ['Explaining the concept of time steps in computer programs and animation, emphasizing the effect of changing time steps on the quality and accuracy of calculations. 60 frames per second', 'Detailing the process of the Laplacian function and the specific weights assigned to neighbors for the convolution. Weights: center weight of -1, adjacent neighbors weight of 0.2, and diagonals weight of 0.05']}], 'duration': 534.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1086550.jpg', 'highlights': ['Implemented the Schiffman rainbow Reaction diffusion algorithm, including the definition of chemical values, diffusion rates, feed rates, and kill rates, and the step-by-step coding process, aiming to apply the algorithm to create visual effects.', 'Defined the diffusion rate for A as 1, diffusion rate for B as 0.5, feed rate for chemical A as 0.055, and kill rate for chemical B as 0.062, highlighting the importance of playing with these values to produce different results.', 'Explaining the concept of time steps in computer programs and animation, emphasizing the effect of changing time steps on the quality and accuracy of calculations. 60 frames per second', 'Detailing the process of the Laplacian function and the specific weights assigned to neighbors for the convolution. Weights: center weight of -1, adjacent neighbors weight of 0.2, and diagonals weight of 0.05', 'Outlined the step-by-step process of coding the reaction-diffusion formula, breaking it down into components for A and B, and discussing the calculation of new chemical values based on old ones.']}, {'end': 1873.813, 'segs': [{'end': 1656.656, 'src': 'embed', 'start': 1621.42, 'weight': 3, 'content': [{'end': 1626.945, 'text': 'I could write another nested loop and kind of use some sort of other two-dimensional array to keep track of the weights.', 'start': 1621.42, 'duration': 5.525}, {'end': 1628.266, 'text': 'I probably should do that.', 'start': 1627.025, 'duration': 1.241}, {'end': 1632.93, 'text': "But I'm going to be a little bit lazy right now and just do this in a very hard-coded, manual way.", 'start': 1628.526, 'duration': 4.404}, {'end': 1636.315, 'text': "So let's look at how I might do that.", 'start': 1633.75, 'duration': 2.565}, {'end': 1643.548, 'text': "So if I come back here, first of all, let's just write, so down here I'm going to need a function called Laplace a.", 'start': 1636.696, 'duration': 6.852}, {'end': 1648.309, 'text': "and I'm also going to need a function called Laplace B.", 'start': 1645.046, 'duration': 3.263}, {'end': 1649.63, 'text': "And I'm just going to do something right now.", 'start': 1648.309, 'duration': 1.321}, {'end': 1653.814, 'text': "I'm going to just say they return the value one, which is obviously like wildly incorrect.", 'start': 1650.071, 'duration': 3.743}, {'end': 1654.475, 'text': "Oh boy, I'm not here.", 'start': 1653.834, 'duration': 0.641}, {'end': 1656.656, 'text': 'So I need to add these two functions.', 'start': 1655.315, 'duration': 1.341}], 'summary': 'Discussing hard-coded approach for laplace a and laplace b functions.', 'duration': 35.236, 'max_score': 1621.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1621420.jpg'}, {'end': 1829.366, 'src': 'embed', 'start': 1780.554, 'weight': 0, 'content': [{'end': 1783.197, 'text': 'Does that seem right to you? Did I get, oh, no, no, no, no, I already did minus one.', 'start': 1780.554, 'duration': 2.643}, {'end': 1784.638, 'text': 'Minus one, plus one.', 'start': 1783.217, 'duration': 1.421}, {'end': 1787.24, 'text': "So I have, oh boy, I've been doing this for a half an hour.", 'start': 1785.299, 'duration': 1.941}, {'end': 1788.201, 'text': "That's not good.", 'start': 1787.3, 'duration': 0.901}, {'end': 1791.883, 'text': 'Okay, this is turning out to be a very long video.', 'start': 1789.422, 'duration': 2.461}, {'end': 1793.845, 'text': "I should have done it in multiple parts, but it's too late now.", 'start': 1791.903, 'duration': 1.942}, {'end': 1799.528, 'text': 'Okay, so minus one minus, minus minus, plus minus, plus plus, minus plus.', 'start': 1794.225, 'duration': 5.303}, {'end': 1800.269, 'text': "That's all four.", 'start': 1799.588, 'duration': 0.681}, {'end': 1812.377, 'text': "So I think I've gotten this right and then I just need to return and I need to get those xy values as arguments and then I need to return that sum a.", 'start': 1800.609, 'duration': 11.768}, {'end': 1817.617, 'text': "And then, Oh, and I'm not returning that whole object.", 'start': 1812.377, 'duration': 5.24}, {'end': 1821.94, 'text': "I'm adding the a amount for each one of these.", 'start': 1817.997, 'duration': 3.943}, {'end': 1827.064, 'text': 'So I could do this in a more clever way by also having a b1 function to add these objects together.', 'start': 1822.28, 'duration': 4.784}, {'end': 1829.366, 'text': "So now I'm just going to do the Laplace.", 'start': 1827.545, 'duration': 1.821}], 'summary': 'Struggling with calculations and considering a different approach for a long video.', 'duration': 48.812, 'max_score': 1780.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1780554.jpg'}, {'end': 1879.735, 'src': 'embed', 'start': 1850.52, 'weight': 1, 'content': [{'end': 1851.741, 'text': 'Sometimes I want suggestions.', 'start': 1850.52, 'duration': 1.221}, {'end': 1853.162, 'text': "Sometimes I don't want suggestions.", 'start': 1851.801, 'duration': 1.361}, {'end': 1856.943, 'text': 'And this is silly now that I called it this, but I did.', 'start': 1853.562, 'duration': 3.381}, {'end': 1859.004, 'text': "So I'm going to go all the way through with it.", 'start': 1857.003, 'duration': 2.001}, {'end': 1864.267, 'text': "OK, so now we've got these Laplace functions.", 'start': 1861.185, 'duration': 3.082}, {'end': 1866.448, 'text': "I'm doing the convolution for every x and y.", 'start': 1864.307, 'duration': 2.141}, {'end': 1868.209, 'text': "I'm adding up all the neighbors and the weights.", 'start': 1866.448, 'duration': 1.761}, {'end': 1871.372, 'text': 'So that should go right into this formula.', 'start': 1869.571, 'duration': 1.801}, {'end': 1873.813, 'text': 'And honestly, I think we might be done.', 'start': 1871.792, 'duration': 2.021}, {'end': 1875.834, 'text': "I'm going to be shocked if this actually works.", 'start': 1873.833, 'duration': 2.001}, {'end': 1877.715, 'text': "We're going to have to debug what we missed.", 'start': 1876.094, 'duration': 1.621}, {'end': 1878.635, 'text': "But let's run it.", 'start': 1877.995, 'duration': 0.64}, {'end': 1879.735, 'text': 'I know this kind of, OK.', 'start': 1879.035, 'duration': 0.7}], 'summary': "Working on laplace functions, adding neighbors' weights, hoping for success.", 'duration': 29.215, 'max_score': 1850.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1850520.jpg'}], 'start': 1621.42, 'title': 'Implementing laplace functions', 'summary': 'Covers manually implementing laplace functions for weight tracking, grid calculation, and adding xy values as arguments, resulting in a half-hour video and lengthy convolution processes.', 'chapters': [{'end': 1671.09, 'start': 1621.42, 'title': 'Hard-coded weight tracking', 'summary': 'Discusses manually implementing weight tracking using hard-coded functions laplace a and laplace b, each returning one, in order to ensure functionality and obtain output.', 'duration': 49.67, 'highlights': ['Manually implementing weight tracking using hard-coded functions Laplace A and Laplace B to ensure functionality and obtain output.', 'Using a hard-coded, manual approach to avoid nested loops and two-dimensional arrays.', 'Returning the value one from functions Laplace A and Laplace B for simplicity and to ensure code runs.']}, {'end': 1800.269, 'start': 1672.281, 'title': 'Implementing laplace function for grid', 'summary': 'Entails implementing the correct laplace function for grid calculation, involving manual computation for nine neighbors and diagonals, resulting in a lengthy video of half an hour.', 'duration': 127.988, 'highlights': ['Implementing the correct Laplace function for grid calculation, involving manual computation for nine neighbors and diagonals.', 'The video turned out to be very long, lasting for half an hour.']}, {'end': 1873.813, 'start': 1800.609, 'title': 'Implementing laplace function', 'summary': 'Discusses implementing laplace function manually, including adding xy values as arguments, creating a b1 function to add objects, and performing convolution for x and y to get the final formula.', 'duration': 73.204, 'highlights': ['Implementing Laplace function manually by adding xy values as arguments and creating a b1 function to add objects together.', 'Performing convolution for every x and y by adding up all the neighbors and weights to obtain the final formula.']}], 'duration': 252.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1621420.jpg', 'highlights': ['Implementing Laplace function manually by adding xy values as arguments and creating a b1 function to add objects together.', 'Performing convolution for every x and y by adding up all the neighbors and weights to obtain the final formula.', 'Implementing the correct Laplace function for grid calculation, involving manual computation for nine neighbors and diagonals.', 'Manually implementing weight tracking using hard-coded functions Laplace A and Laplace B to ensure functionality and obtain output.', 'Using a hard-coded, manual approach to avoid nested loops and two-dimensional arrays.', 'Returning the value one from functions Laplace A and Laplace B for simplicity and to ensure code runs.', 'The video turned out to be very long, lasting for half an hour.']}, {'end': 2348.107, 'segs': [{'end': 1956.039, 'src': 'heatmap', 'start': 1918.394, 'weight': 3, 'content': [{'end': 1921.815, 'text': "I'm going to start at one and I'm going to go to width minus one and height minus one.", 'start': 1918.394, 'duration': 3.421}, {'end': 1925.097, 'text': "So I'm actually going to ignore the edge pixel so I don't have that issue.", 'start': 1922.075, 'duration': 3.022}, {'end': 1926.337, 'text': 'So that should fix that.', 'start': 1925.417, 'duration': 0.92}, {'end': 1927.918, 'text': "Now I'm going to run it, and look at this.", 'start': 1926.837, 'duration': 1.081}, {'end': 1929.999, 'text': 'Something kind of crazy happened.', 'start': 1928.478, 'duration': 1.521}, {'end': 1932.7, 'text': "So I think I've got the algorithm going here.", 'start': 1930.519, 'duration': 2.181}, {'end': 1941.067, 'text': "I'm a little worried I have a mistake, but mostly the problem right now is that I haven't really seeded this in a way that makes sense.", 'start': 1933.32, 'duration': 7.747}, {'end': 1953.577, 'text': "So I think the traditional way these are done let's look here is I'm giving the grid all random values is what I think would make sense would be to fill it with b.", 'start': 1941.707, 'duration': 11.87}, {'end': 1956.039, 'text': 'I want to fill the grid with b.', 'start': 1953.577, 'duration': 2.462}], 'summary': 'Ignoring edge pixels, testing algorithm, seeding grid with random values.', 'duration': 37.645, 'max_score': 1918.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1918394.jpg'}, {'end': 2038.764, 'src': 'embed', 'start': 2010.502, 'weight': 5, 'content': [{'end': 2013.925, 'text': "So I filled the whole thing with A and then I want to add a little bit of B, but that's not going to work.", 'start': 2010.502, 'duration': 3.423}, {'end': 2019.629, 'text': 'Just like a one little droplet of B on one pixel, not going to get enough reaction diffusion to make anything happen.', 'start': 2014.545, 'duration': 5.084}, {'end': 2024.173, 'text': 'I actually need to give it a block of like, I need to pour a lot more in.', 'start': 2019.889, 'duration': 4.284}, {'end': 2026.375, 'text': 'So I need like a little area of.', 'start': 2024.193, 'duration': 2.182}, {'end': 2033.341, 'text': "so what I think I'm going to do is I'm going to say for and I'm going to use I here just to use a different like I equals 100, I is less than 10,", 'start': 2026.375, 'duration': 6.966}, {'end': 2034.121, 'text': 'I plus plus.', 'start': 2033.341, 'duration': 0.78}, {'end': 2038.764, 'text': 'No, I is less than 110.', 'start': 2034.381, 'duration': 4.383}], 'summary': 'Need to pour a lot more of b to get enough reaction diffusion, considering using loop for i equals 100 to 110.', 'duration': 28.262, 'max_score': 2010.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc2010502.jpg'}, {'end': 2141.418, 'src': 'heatmap', 'start': 2043.949, 'weight': 4, 'content': [{'end': 2058.659, 'text': "but I'm going to use J J++ and what I'm going to do is I'm going to take a whole area and give it some b, like a little 10 by 10 pixel area.", 'start': 2043.949, 'duration': 14.71}, {'end': 2062.983, 'text': 'So every pixel from between 100 to 110 is going to get some b right?', 'start': 2058.998, 'duration': 3.985}, {'end': 2069.027, 'text': 'Every pixel is going to start with a lot of a and no b, and then this little 10 by 10 area is going to start with b.', 'start': 2063.382, 'duration': 5.645}, {'end': 2072.25, 'text': "And what I'm actually going to do is just for a second comment this out.", 'start': 2069.027, 'duration': 3.223}, {'end': 2074.753, 'text': "So let's just see what this looks like.", 'start': 2073.19, 'duration': 1.563}, {'end': 2077.975, 'text': "Now why am I, I'm getting this crazy flickering.", 'start': 2075.813, 'duration': 2.162}, {'end': 2080.054, 'text': "You can't see that, actually.", 'start': 2078.635, 'duration': 1.419}, {'end': 2084.877, 'text': "Interestingly enough, I don't think the flickering is showing up, because I've done something wrong with my rendering.", 'start': 2080.655, 'duration': 4.222}, {'end': 2092.619, 'text': "But you can see, though, that, ooh, whoa, oh, now you're seeing, I don't know what you're actually seeing on the stream.", 'start': 2086.277, 'duration': 6.342}, {'end': 2098.781, 'text': "Oh boy, this is a really, this was a much harder one than I imagined, but I'm going to put this back in.", 'start': 2094.82, 'duration': 3.961}, {'end': 2102.502, 'text': "I've got to figure out what the flickering is there, why the flickering is happening.", 'start': 2098.801, 'duration': 3.701}, {'end': 2106.243, 'text': 'Okay, so you can see this is now finally working.', 'start': 2103.982, 'duration': 2.261}, {'end': 2110.146, 'text': "I'm getting a weird flickering around the edges.", 'start': 2108.285, 'duration': 1.861}, {'end': 2112.167, 'text': 'Oh, I know what the problem is.', 'start': 2111.106, 'duration': 1.061}, {'end': 2113.488, 'text': 'I know what the problem is.', 'start': 2112.767, 'duration': 0.721}, {'end': 2122.593, 'text': "Because I'm not updating the edges, the edges need to make sure they're seated with the original amount of stuff.", 'start': 2116.99, 'duration': 5.603}, {'end': 2126.015, 'text': "There we go, finally we're good.", 'start': 2124.175, 'duration': 1.84}, {'end': 2136.537, 'text': 'So it took me a little while there, but the issue was that I needed to place an area of pixels in order to seed it with some chemical B.', 'start': 2126.075, 'duration': 10.462}, {'end': 2141.418, 'text': 'So this was much, this would have been good, this would have benefited from, this would benefit from a second run.', 'start': 2136.537, 'duration': 4.881}], 'summary': 'Using j j++ to seed a 10x10 pixel area with chemical b, resolving flickering issue by updating the edges.', 'duration': 25.078, 'max_score': 2043.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc2043949.jpg'}, {'end': 2197.684, 'src': 'embed', 'start': 2154.702, 'weight': 0, 'content': [{'end': 2160.946, 'text': 'And what happens if you give it a circular area of pixels or start stuff with random values?', 'start': 2154.702, 'duration': 6.244}, {'end': 2162.687, 'text': 'What kind of patterns might you get?', 'start': 2161.366, 'duration': 1.321}, {'end': 2166.949, 'text': 'And you can see the reaction diffusion algorithm is kind of blossoming into this nice little flower.', 'start': 2162.707, 'duration': 4.242}, {'end': 2168.049, 'text': 'We can let it run for a little bit.', 'start': 2166.989, 'duration': 1.06}, {'end': 2169.41, 'text': "I'm curious about the frame rate.", 'start': 2168.069, 'duration': 1.341}, {'end': 2172.312, 'text': 'JavaScript is handling this pretty well.', 'start': 2170.851, 'duration': 1.461}, {'end': 2173.472, 'text': 'Is this only 200 by 200 pixels?', 'start': 2172.332, 'duration': 1.14}, {'end': 2181.176, 'text': "So it isn't a tremendous amount of pixels for it to work with,", 'start': 2175.733, 'duration': 5.443}, {'end': 2185.318, 'text': 'but so you might run into some serious performance issues if you do this in the browser.', 'start': 2181.176, 'duration': 4.142}, {'end': 2187.499, 'text': "It's going to run a lot faster in processing.", 'start': 2185.338, 'duration': 2.161}, {'end': 2194.983, 'text': "Of course, I'm sure there's like fancy shader WebGL ways of doing this super, super fast, but I think this kind of wraps up this tutorial.", 'start': 2187.519, 'duration': 7.464}, {'end': 2197.684, 'text': "So, to recap just now that we've kind of like.", 'start': 2195.023, 'duration': 2.661}], 'summary': 'Discussion of reaction diffusion algorithm with 200x200 pixels, potential performance issues in the browser, and faster processing in other environments.', 'duration': 42.982, 'max_score': 2154.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc2154702.jpg'}, {'end': 2296.637, 'src': 'embed', 'start': 2271.637, 'weight': 1, 'content': [{'end': 2279.083, 'text': 'I need to calculate the next amount of A and B based on the current amount of A, the diffusion rate, the feed, the kill rate, all of that stuff,', 'start': 2271.637, 'duration': 7.446}, {'end': 2281.525, 'text': 'as well as this sum of all of the neighbors.', 'start': 2279.083, 'duration': 2.442}, {'end': 2285.029, 'text': 'So the sum of all the neighbors happens in these Laplace functions.', 'start': 2281.886, 'duration': 3.143}, {'end': 2287.31, 'text': 'And that is lower down in the code.', 'start': 2285.689, 'duration': 1.621}, {'end': 2293.355, 'text': "Again, I would suggest, and I'd be happy to do this and post this at some point if someone wants to remind me, modified version.", 'start': 2287.711, 'duration': 5.644}, {'end': 2296.637, 'text': 'I could condense this into one function, and I could also make this happen in a loop.', 'start': 2293.375, 'duration': 3.262}], 'summary': 'Calculate next a and b amounts based on current values and laplace functions.', 'duration': 25, 'max_score': 2271.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc2271637.jpg'}], 'start': 1873.833, 'title': 'Debugging and simulating reaction diffusion', 'summary': 'Discusses debugging issues in a reaction diffusion algorithm, adjusting the algorithm to avoid errors, experimenting with seeding the system, and demonstrates the implementation of a reaction diffusion simulation using javascript, covering diffusion rates, feed and kill rates, the laplace function, and a performance comparison between browser and processing.', 'chapters': [{'end': 2069.027, 'start': 1873.833, 'title': 'Debugging reaction diffusion algorithm', 'summary': 'Discusses debugging issues related to a reaction diffusion algorithm, adjusting the algorithm to avoid errors, and experimenting with seeding the system to achieve the desired result.', 'duration': 195.194, 'highlights': ["The algorithm was adjusted to ignore the edge pixels by starting the calculation from one and going to width minus one and height minus one, resolving the 'Cannot read property 0 of undefined' issue. The adjustment to the algorithm involved ignoring the edge pixels by starting the calculation from one and going to width minus one and height minus one, which resolved the issue of 'Cannot read property 0 of undefined.'", 'Experimenting with seeding the system by pouring a lot more of a little area of B, using a loop to assign a 10 by 10 pixel area with B, and starting each pixel with a lot of A and no B. The experimentation involved using a loop to assign a 10 by 10 pixel area with B, starting each pixel with a lot of A and no B, and pouring a lot more of a little area of B to seed the system.', 'Realizing that adding just a small droplet of B on one pixel is not sufficient for reaction diffusion to occur, and the need for a larger area of B to produce the desired effect. The realization that adding just a small droplet of B on one pixel is not sufficient for reaction diffusion to occur, and the need for a larger area of B to produce the desired effect was recognized.']}, {'end': 2348.107, 'start': 2069.027, 'title': 'Reaction diffusion simulation', 'summary': 'Demonstrates the implementation of a reaction diffusion simulation using javascript, achieving a visual pattern through the manipulation of chemicals and pixels, covering concepts such as diffusion rates, feed and kill rates, and the laplace function, with a performance comparison between browser and processing.', 'duration': 279.08, 'highlights': ['The simulation showcases the implementation of a reaction diffusion algorithm in JavaScript, generating visual patterns by manipulating chemical substances and pixels. The chapter covers the implementation of a reaction diffusion algorithm in JavaScript, showcasing the generation of visual patterns through the manipulation of chemical substances and pixels.', 'Concepts such as diffusion rates, feed and kill rates, and the Laplace function are explained and demonstrated in the code. The code demonstrates and explains concepts such as diffusion rates, feed and kill rates, and the Laplace function, providing insights into their implementation.', 'Performance differences between running the simulation in the browser and in processing are discussed, highlighting potential performance issues in the browser for larger simulations. The chapter discusses the performance disparities between running the simulation in the browser and in processing, emphasizing potential performance issues in the browser for larger simulations.']}], 'duration': 474.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BV9ny785UNc/pics/BV9ny785UNc1873833.jpg', 'highlights': ['The chapter covers the implementation of a reaction diffusion algorithm in JavaScript, showcasing the generation of visual patterns through the manipulation of chemical substances and pixels.', 'The code demonstrates and explains concepts such as diffusion rates, feed and kill rates, and the Laplace function, providing insights into their implementation.', 'The chapter discusses the performance disparities between running the simulation in the browser and in processing, emphasizing potential performance issues in the browser for larger simulations.', "The adjustment to the algorithm involved ignoring the edge pixels by starting the calculation from one and going to width minus one and height minus one, which resolved the issue of 'Cannot read property 0 of undefined.'", 'The experimentation involved using a loop to assign a 10 by 10 pixel area with B, starting each pixel with a lot of A and no B, and pouring a lot more of a little area of B to seed the system.', 'The realization that adding just a small droplet of B on one pixel is not sufficient for reaction diffusion to occur, and the need for a larger area of B to produce the desired effect was recognized.']}], 'highlights': ['Implemented the Schiffman rainbow Reaction diffusion algorithm, including the definition of chemical values, diffusion rates, feed rates, and kill rates, and the step-by-step coding process, aiming to apply the algorithm to create visual effects.', 'The reaction diffusion algorithm simulates the interaction of chemicals A and B on a canvas to set colors for pixels based on their arrangement, using the feed rate and kill rate as key constants in the system.', 'Explaining the concept of time steps in computer programs and animation, emphasizing the effect of changing time steps on the quality and accuracy of calculations. 60 frames per second', 'The chapter covers the implementation of a reaction diffusion algorithm in JavaScript, showcasing the generation of visual patterns through the manipulation of chemical substances and pixels.', 'The need for a swap to enable animation is emphasized, highlighting the importance of incorporating this feature to enable visual changes in the grid values.']}