title

Coding Challenge #21: Mandelbrot Set with p5.js

description

In this coding challenge, I program from scratch the Mandelbrot set with p5.js Code: https://thecodingtrain.com/challenges/21-mandelbrot-set-with-p5js
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/KsV1wWLqd
đĨ Previous video: https://youtu.be/jrk_lOg_pVA?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/fAsaSkmbF5s?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Wikipedia on Mandelbrot Set: https://en.wikipedia.org/wiki/Mandelbrot_set
đž Mandelbrot Set Explorer: https://meiamso.me/old/mandelbrot/mandelbrot.php
Related Coding Challenges:
đ #22 Julia Set in Processing: https://youtu.be/fAsaSkmbF5s
đ #140 Leibniz Formula for Pi: https://youtu.be/uH4trBNn540
đ #168 The Mandelbulb: https://youtu.be/NJCiUVGiNyA
Timestamps:
0:00 Introducing today's coding challenge: the Mandelbrot set
1:22 What is a complex number?
6:06 Multiplying two complex numbers
7:51 The Mandelbrot set is all of the complex numbers that stay bounded
8:40 The initial sketch sets every pixel to gray
12:00 Calculate the real and complex components for the next generation
13:03 What does it mean to be bounded?
14:58 Set the brightness based on number of iterations
16:46 Store the original values of a and b
20:05 Set the brightness by maping to maxIterations
21:50 Add sliders to add ability to zoom in on the Mandelbrot set
24:58 Conclusion and suggestions for variations
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
#mandelbrot #fractal #complexnumber #imaginarynumber #p5js #javascript

detail

{'title': 'Coding Challenge #21: Mandelbrot Set with p5.js', 'heatmap': [{'end': 1024.382, 'start': 989.466, 'weight': 1}], 'summary': 'Demonstrates programming the mandelbrot set in javascript, emphasizing the math behind it, creating fractal images, and learning opportunities for programming and pixel manipulation. it also discusses the definition and function of the mandelbrot set, iterating values to define it, and techniques for visualizing, including color mapping, iteration normalization, zooming, and performance optimization for interactive visualization.', 'chapters': [{'end': 35.54, 'segs': [{'end': 35.54, 'src': 'embed', 'start': 0.643, 'weight': 0, 'content': [{'end': 2.484, 'text': 'Hello Welcome to another coding challenge.', 'start': 0.643, 'duration': 1.841}, {'end': 8.547, 'text': "In this coding challenge I'm going to with great trepidation but excitement and energy.", 'start': 2.524, 'duration': 6.023}, {'end': 11.468, 'text': "I'm going to program from scratch the Mandelbrot set.", 'start': 8.547, 'duration': 2.921}, {'end': 16.171, 'text': 'show you how to do it, talk about the math behind it and make it happen in JavaScript in the browser.', 'start': 11.468, 'duration': 4.703}, {'end': 18.372, 'text': "Problems will come up, but I'm going to do my best.", 'start': 16.651, 'duration': 1.721}, {'end': 21.373, 'text': "So why do you care about this? It's a fractal pattern.", 'start': 18.652, 'duration': 2.721}, {'end': 22.854, 'text': 'You can make some beautiful images with it.', 'start': 21.393, 'duration': 1.461}, {'end': 26.436, 'text': 'You might also just sort of learn a bit about programming and pixels and arrays.', 'start': 22.914, 'duration': 3.522}, {'end': 28.477, 'text': 'But yeah.', 'start': 27.616, 'duration': 0.861}, {'end': 29.797, 'text': "I don't know.", 'start': 29.377, 'duration': 0.42}, {'end': 30.237, 'text': "You're here.", 'start': 29.837, 'duration': 0.4}, {'end': 31.658, 'text': 'You probably want to do the Mandelbrot side.', 'start': 30.277, 'duration': 1.381}, {'end': 33.979, 'text': "If you don't, you can go outside and play Frisbee.", 'start': 31.678, 'duration': 2.301}, {'end': 35.54, 'text': "So let's see.", 'start': 34.899, 'duration': 0.641}], 'summary': 'Coding challenge to program mandelbrot set in javascript for creating fractal images.', 'duration': 34.897, 'max_score': 0.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks643.jpg'}], 'start': 0.643, 'title': 'Mandelbrot set in javascript', 'summary': 'Demonstrates programming the mandelbrot set from scratch in javascript, highlighting the math behind it, the creation of fractal images, and the learning opportunities for programming and pixel manipulation.', 'chapters': [{'end': 35.54, 'start': 0.643, 'title': 'Coding challenge: mandelbrot set in javascript', 'summary': 'Demonstrates programming the mandelbrot set from scratch in javascript, highlighting the math behind it, the creation of fractal images, and the learning opportunities for programming and pixel manipulation.', 'duration': 34.897, 'highlights': ['The chapter demonstrates programming the Mandelbrot set from scratch in JavaScript, highlighting the math behind it, the creation of fractal images, and the learning opportunities for programming and pixel manipulation.', 'The Mandelbrot set is a fractal pattern that can be used to create beautiful images and provides learning opportunities for programming and pixel manipulation.', 'The coding challenge aims to program the Mandelbrot set in JavaScript, providing insights into the math behind it and demonstrating how to create fractal images.']}], 'duration': 34.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks643.jpg', 'highlights': ['The chapter demonstrates programming the Mandelbrot set from scratch in JavaScript, highlighting the math behind it, the creation of fractal images, and the learning opportunities for programming and pixel manipulation.', 'The Mandelbrot set is a fractal pattern that can be used to create beautiful images and provides learning opportunities for programming and pixel manipulation.', 'The coding challenge aims to program the Mandelbrot set in JavaScript, providing insights into the math behind it and demonstrating how to create fractal images.']}, {'end': 453.392, 'segs': [{'end': 100.917, 'src': 'embed', 'start': 74.536, 'weight': 1, 'content': [{'end': 78.441, 'text': 'And the first thing I want to do before I start writing the code is just talk about the math.', 'start': 74.536, 'duration': 3.905}, {'end': 80.764, 'text': 'And the first thing I want to do is talk about what is a complex number.', 'start': 78.501, 'duration': 2.263}, {'end': 86.105, 'text': 'OK, so you might be familiar with an operation in math called square root.', 'start': 81.721, 'duration': 4.384}, {'end': 88.987, 'text': 'I could say, oh, I think I have the wrong end of this pen.', 'start': 87.025, 'duration': 1.962}, {'end': 92.01, 'text': 'I could say the square root of 4.', 'start': 89.768, 'duration': 2.242}, {'end': 93.971, 'text': 'By the way, I forgot this whole thing.', 'start': 92.01, 'duration': 1.961}, {'end': 96.613, 'text': 'I was practicing pronunciation, and I completely forgot to do it.', 'start': 93.991, 'duration': 2.622}, {'end': 100.917, 'text': 'The Mandelbrot set is named for the French mathematician Benoit Mandelbrot.', 'start': 96.854, 'duration': 4.063}], 'summary': 'Introduction to complex numbers and the mandelbrot set.', 'duration': 26.381, 'max_score': 74.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks74536.jpg'}, {'end': 171.276, 'src': 'embed', 'start': 144.599, 'weight': 4, 'content': [{'end': 152.583, 'text': 'But if we consider the square root of negative 1 actually be something that does exist, and call it i, all sorts of magic can happen, one of which,', 'start': 144.599, 'duration': 7.984}, {'end': 154.004, 'text': 'by the way, is the Mandelbrot set.', 'start': 152.583, 'duration': 1.421}, {'end': 155.965, 'text': "So this is what's known.", 'start': 154.344, 'duration': 1.621}, {'end': 159.667, 'text': 'So this is a real number, and this is an imaginary number.', 'start': 156.266, 'duration': 3.401}, {'end': 164.771, 'text': 'If I put those two things together, 3 plus i.', 'start': 159.968, 'duration': 4.803}, {'end': 166.032, 'text': 'This is a complex number.', 'start': 164.771, 'duration': 1.261}, {'end': 171.276, 'text': 'A complex number has both a real component and an imaginary component.', 'start': 166.392, 'duration': 4.884}], 'summary': 'Imaginary number i allows for complex numbers, enabling mandelbrot set.', 'duration': 26.677, 'max_score': 144.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks144599.jpg'}, {'end': 229.028, 'src': 'embed', 'start': 200.259, 'weight': 2, 'content': [{'end': 201.519, 'text': "Now let's go back to that definition.", 'start': 200.259, 'duration': 1.26}, {'end': 205.72, 'text': 'The set of complex numbers.', 'start': 203.96, 'duration': 1.76}, {'end': 215.003, 'text': 'OK, what does it mean for something to be a set of complex numbers? Well, this actually relates to, you can think about a canvas, right? A canvas.', 'start': 205.86, 'duration': 9.143}, {'end': 217.26, 'text': 'Our canvas.', 'start': 216.599, 'duration': 0.661}, {'end': 226.726, 'text': "the thing that lives in the browser in HTML or processing or Java, or whatever graphics environment you're using, has an x-axis and a y-axis.", 'start': 217.26, 'duration': 9.466}, {'end': 229.028, 'text': "It's a two-dimensional plane.", 'start': 227.587, 'duration': 1.441}], 'summary': 'The set of complex numbers represents a two-dimensional plane in a graphics environment.', 'duration': 28.769, 'max_score': 200.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks200259.jpg'}, {'end': 279.497, 'src': 'embed', 'start': 255.644, 'weight': 0, 'content': [{'end': 262.927, 'text': 'So this plane, this set of complex numbers is all the complex numbers for all of, all a possibilities and all b possibilities.', 'start': 255.644, 'duration': 7.283}, {'end': 269.91, 'text': 'So we have to do something for every single, a set of complex numbers within the sort of bounds of this canvas.', 'start': 263.247, 'duration': 6.663}, {'end': 270.891, 'text': "Okay, so that's good.", 'start': 270.291, 'duration': 0.6}, {'end': 279.497, 'text': 'Which the function f of z equals z squared plus c does not diverge when iterated from z equals 0?', 'start': 272.071, 'duration': 7.426}], 'summary': 'Plane of complex numbers for all a and b possibilities within canvas bounds.', 'duration': 23.853, 'max_score': 255.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks255644.jpg'}], 'start': 35.74, 'title': 'Understanding the mandelbrot set', 'summary': 'Delves into the definition and function of the mandelbrot set in the context of a youtube coding challenge, emphasizing complex numbers and the function f of z equals z squared plus c, essential for programming.', 'chapters': [{'end': 74.496, 'start': 35.74, 'title': 'Understanding the mandelbrot set', 'summary': 'Discusses the definition and function of the mandelbrot set, aiming to unpack and understand it in the context of a short youtube coding challenge video, with a focus on complex numbers and the function f of z equals z squared plus c.', 'duration': 38.756, 'highlights': ['The Mandelbrot set is the set of complex numbers c.', 'The function f of z equals z squared plus c is a key element in understanding the Mandelbrot set.', 'The chapter aims to unpack and understand the definition and function of the Mandelbrot set in the context of a short YouTube coding challenge video.']}, {'end': 453.392, 'start': 74.536, 'title': 'Understanding complex numbers and the mandelbrot set', 'summary': 'Discusses the concept of complex numbers, including the definition, relationship to the mandelbrot set, and the math behind the function f of z equals z squared plus c, which is essential for programming.', 'duration': 378.856, 'highlights': ['A complex number has both a real component and an imaginary component, typically written in the form a + bi. Understanding the structure of a complex number, represented as a + bi, where a is the real component and b is the imaginary component.', 'The relationship between complex numbers and the Mandelbrot set, where the plane of complex numbers represents all a and b possibilities. Explaining the relationship between the set of complex numbers and the canvas, representing all possible a and b values, essential for understanding the Mandelbrot set.', 'The mathematical explanation of the function f of z equals z squared plus c, including the multiplication of complex numbers and its components. Detailing the mathematical process behind the function f of z equals z squared plus c, involving the multiplication of complex numbers and its real and imaginary components.']}], 'duration': 417.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks35740.jpg', 'highlights': ['The function f of z equals z squared plus c is a key element in understanding the Mandelbrot set.', 'The chapter aims to unpack and understand the definition and function of the Mandelbrot set in the context of a short YouTube coding challenge video.', 'The relationship between complex numbers and the Mandelbrot set, where the plane of complex numbers represents all a and b possibilities.', 'The mathematical explanation of the function f of z equals z squared plus c, including the multiplication of complex numbers and its components.', 'A complex number has both a real component and an imaginary component, typically written in the form a + bi.']}, {'end': 638.849, 'segs': [{'end': 560.589, 'src': 'embed', 'start': 453.392, 'weight': 0, 'content': [{'end': 459.076, 'text': 'just calculate these values over and over and over again, generation to generation.', 'start': 453.392, 'duration': 5.684}, {'end': 463.56, 'text': "we're going to iterate, iterate, iterate, and as we calculate those values over and over again,", 'start': 459.076, 'duration': 4.484}, {'end': 466.922, 'text': 'we need to see do they remain bound in an absolute value?', 'start': 463.56, 'duration': 3.362}, {'end': 476.629, 'text': 'so the question is are they Tending to go towards infinity or they actually just like staying around some reasonable number?', 'start': 466.922, 'duration': 9.707}, {'end': 482.732, 'text': 'And the Mandelbrot set is the set of numbers for which the function Remains bounded.', 'start': 476.629, 'duration': 6.103}, {'end': 486.114, 'text': "so it's all the time for all of the possibilities.", 'start': 482.732, 'duration': 3.382}, {'end': 489.195, 'text': "It's all of the ones that don't tend towards infinity.", 'start': 486.114, 'duration': 3.081}, {'end': 491.417, 'text': 'whoo, that was a lot to think about.', 'start': 489.195, 'duration': 2.222}, {'end': 498.78, 'text': "maybe pause this video, go outside, do something, a break for a little while, but Now, if you're back, I'm going to start writing the code for that.", 'start': 491.417, 'duration': 7.363}, {'end': 501.802, 'text': "I'm going to refer back to this math a couple of times, probably.", 'start': 498.881, 'duration': 2.921}, {'end': 503.063, 'text': "I don't know if you're following this.", 'start': 501.982, 'duration': 1.081}, {'end': 504.724, 'text': "I'm having a good time.", 'start': 503.623, 'duration': 1.101}, {'end': 506.304, 'text': "OK, so let's go to the code.", 'start': 505.244, 'duration': 1.06}, {'end': 509.526, 'text': 'Now, I have a sort of empty p5.js sketch here.', 'start': 506.324, 'duration': 3.202}, {'end': 511.367, 'text': 'This is some JavaScript code.', 'start': 510.026, 'duration': 1.341}, {'end': 513.248, 'text': "It's just like a basic skeleton here.", 'start': 511.647, 'duration': 1.601}, {'end': 523.493, 'text': "The only thing that it's doing is it's looking at every single x value and every single y value and setting its pixel to a grayscale value of 51.", 'start': 513.288, 'duration': 10.205}, {'end': 524.634, 'text': "I'm going to go take a look at that.", 'start': 523.493, 'duration': 1.141}, {'end': 525.556, 'text': "It's right here.", 'start': 524.895, 'duration': 0.661}, {'end': 527.057, 'text': 'You can see here.', 'start': 526.136, 'duration': 0.921}, {'end': 527.998, 'text': 'There we go.', 'start': 527.518, 'duration': 0.48}, {'end': 529.4, 'text': "There's my gray window.", 'start': 528.058, 'duration': 1.342}, {'end': 537.369, 'text': "If I were to change this component to 255, you can see it's like a redder window because I added more red.", 'start': 529.76, 'duration': 7.609}, {'end': 545.457, 'text': 'So what I need to do ultimately is is I need to inside this code for every one of these x and y values.', 'start': 537.589, 'duration': 7.868}, {'end': 550.581, 'text': 'I need to run this Mandelbrot set f of z, z squared plus z math thing.', 'start': 545.457, 'duration': 5.124}, {'end': 555.985, 'text': "And I need to see, are my numbers getting bigger, or are they not getting bigger? And then I'm going to set a color based on that.", 'start': 550.881, 'duration': 5.104}, {'end': 560.589, 'text': 'OK, so now we have an interesting question, though, to ask, which is, hmm.', 'start': 557.226, 'duration': 3.363}], 'summary': 'Iterating through values to check for boundedness in mandelbrot set, coding to visualize results.', 'duration': 107.197, 'max_score': 453.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks453392.jpg'}], 'start': 453.392, 'title': 'Mandelbrot set visualization', 'summary': 'Discusses iterating values to define the mandelbrot set, before creating a visualization using grayscale pixels in a 360x240 window, mapping complex numbers between -2 and 2, and iteratively evaluating the mandelbrot set function to determine color.', 'chapters': [{'end': 513.248, 'start': 453.392, 'title': 'Mandelbrot set and iteration', 'summary': 'Discusses the concept of iterating values to determine if they remain bounded, which is essential to defining the mandelbrot set, before transitioning to writing code in p5.js.', 'duration': 59.856, 'highlights': ["The Mandelbrot set is the set of numbers for which the function Remains bounded, encompassing all possibilities and those that don't tend towards infinity.", 'The process involves calculating values repeatedly to ascertain if they remain bound in an absolute value, determining if they tend towards infinity or stay around some reasonable number.', 'The speaker prepares to write code in p5.js, a JavaScript library, following the discussion on the concept of iterating values and the Mandelbrot set.']}, {'end': 638.849, 'start': 513.288, 'title': 'Creating mandelbrot set visualization', 'summary': 'Explains the process of creating a mandelbrot set visualization using grayscale pixels in a window of 360x240, mapping complex numbers between -2 and 2 based on x and y values, and iteratively evaluating the mandelbrot set function f(z) = z^2 + c to determine color.', 'duration': 125.561, 'highlights': ['Mapping complex numbers between -2 and 2 based on x and y values in a 360x240 pixel window for Mandelbrot set visualization.', 'Using grayscale values of pixels (e.g., 51) to represent initial mapping before iteratively evaluating the Mandelbrot set function.', 'Iteratively evaluating the Mandelbrot set function f(z) = z^2 + c to determine if numbers get bigger and setting color based on the result.']}], 'duration': 185.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks453392.jpg', 'highlights': ['The process involves calculating values repeatedly to ascertain if they remain bound in an absolute value, determining if they tend towards infinity or stay around some reasonable number.', 'Using grayscale values of pixels (e.g., 51) to represent initial mapping before iteratively evaluating the Mandelbrot set function.', 'Mapping complex numbers between -2 and 2 based on x and y values in a 360x240 pixel window for Mandelbrot set visualization.', "The Mandelbrot set is the set of numbers for which the function Remains bounded, encompassing all possibilities and those that don't tend towards infinity.", 'Iteratively evaluating the Mandelbrot set function f(z) = z^2 + c to determine if numbers get bigger and setting color based on the result.', 'The speaker prepares to write code in p5.js, a JavaScript library, following the discussion on the concept of iterating values and the Mandelbrot set.']}, {'end': 1032.575, 'segs': [{'end': 670.304, 'src': 'embed', 'start': 639.47, 'weight': 0, 'content': [{'end': 647.095, 'text': 'Okay, so the first thing I need to do is say, I know how to do this.', 'start': 639.47, 'duration': 7.625}, {'end': 647.876, 'text': "I've done this before.", 'start': 647.155, 'duration': 0.721}, {'end': 649.356, 'text': "OK, let's look at this.", 'start': 647.896, 'duration': 1.46}, {'end': 651.097, 'text': 'We need to over and over again.', 'start': 649.556, 'duration': 1.541}, {'end': 652.797, 'text': 'So we need to over and over.', 'start': 651.397, 'duration': 1.4}, {'end': 655.378, 'text': "We need an operation that's going to happen over and over again.", 'start': 652.838, 'duration': 2.54}, {'end': 657.019, 'text': "So let's keep track of how.", 'start': 655.619, 'duration': 1.4}, {'end': 659.8, 'text': 'One thing we should do is keep track of how often are we doing this.', 'start': 657.299, 'duration': 2.501}, {'end': 661.721, 'text': "Let's have a variable called n.", 'start': 659.82, 'duration': 1.901}, {'end': 670.304, 'text': "Because I want to just make sure, as long as n is less than, I don't know, some arbitrary amount, 100, I don't want to iterate more than 100 times.", 'start': 661.721, 'duration': 8.583}], 'summary': "Introducing a variable 'n' to iterate less than 100 times.", 'duration': 30.834, 'max_score': 639.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks639470.jpg'}, {'end': 718.165, 'src': 'embed', 'start': 686.373, 'weight': 3, 'content': [{'end': 688.574, 'text': "But let's figure out some things I need to calculate.", 'start': 686.373, 'duration': 2.201}, {'end': 691.516, 'text': 'I kind of want to pause recording and go, look at my code from before.', 'start': 688.594, 'duration': 2.922}, {'end': 692.677, 'text': "OK, but it's OK.", 'start': 692.017, 'duration': 0.66}, {'end': 693.217, 'text': "I'm fine.", 'start': 692.857, 'duration': 0.36}, {'end': 693.638, 'text': "I'm fine.", 'start': 693.317, 'duration': 0.321}, {'end': 694.458, 'text': "It's going to be OK.", 'start': 693.858, 'duration': 0.6}, {'end': 702.297, 'text': 'Okay, did I get something wrong in the chat? Everybody put like rainbow emojis or something if I did something horribly wrong.', 'start': 696.874, 'duration': 5.423}, {'end': 703.838, 'text': "Maybe rainbow, maybe that's not right.", 'start': 702.517, 'duration': 1.321}, {'end': 705.299, 'text': "It should be rainbow if it's correct.", 'start': 703.858, 'duration': 1.441}, {'end': 712.162, 'text': 'Okay, so the first thing I want to do is I want to calculate a squared minus b squared.', 'start': 706.299, 'duration': 5.863}, {'end': 718.165, 'text': "Okay, so I'm going to call that aa is our.", 'start': 712.943, 'duration': 5.222}], 'summary': 'Calculating a squared minus b squared, encountering code review concerns.', 'duration': 31.792, 'max_score': 686.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks686373.jpg'}, {'end': 777.807, 'src': 'embed', 'start': 745.396, 'weight': 1, 'content': [{'end': 747.897, 'text': 'And then what do I need to say??', 'start': 745.396, 'duration': 2.501}, {'end': 751.279, 'text': 'I need to say a equals aa and b equals bb.', 'start': 747.917, 'duration': 3.362}, {'end': 753.401, 'text': 'And do it again.', 'start': 752.44, 'duration': 0.961}, {'end': 762.546, 'text': 'So this is just my iterative process, because I start with, I think this is right, right? The number while, yeah.', 'start': 754.021, 'duration': 8.525}, {'end': 765.508, 'text': 'Oh, and then I need to say n plus plus.', 'start': 762.846, 'duration': 2.662}, {'end': 769.09, 'text': 'OK, now.', 'start': 768.269, 'duration': 0.821}, {'end': 777.807, 'text': 'Another thing I could do here is, I could say what does it mean for this to be unbounded, to tend towards infinity?', 'start': 770.485, 'duration': 7.322}], 'summary': 'Iterative process with variable assignments and discussion of unbounded tend towards infinity.', 'duration': 32.411, 'max_score': 745.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks745396.jpg'}, {'end': 829.207, 'src': 'embed', 'start': 807.022, 'weight': 2, 'content': [{'end': 815.931, 'text': 'So the question is, did I get to 100 or did I not? So look, so this is, I should have thought about it.', 'start': 807.022, 'duration': 8.909}, {'end': 817.573, 'text': "I'm going to come back, maybe we'll talk about this again.", 'start': 815.971, 'duration': 1.602}, {'end': 819.355, 'text': "Let's see how far I've gotten.", 'start': 817.633, 'duration': 1.722}, {'end': 821.978, 'text': 'Why not use a for loop? Well, I could use a for loop.', 'start': 819.715, 'duration': 2.263}, {'end': 823.46, 'text': 'That would make a lot of sense.', 'start': 822.559, 'duration': 0.901}, {'end': 826.964, 'text': "But I'm just using a while loop for no good reason.", 'start': 824.141, 'duration': 2.823}, {'end': 829.207, 'text': "Okay, so now let's just do something.", 'start': 827.325, 'duration': 1.882}], 'summary': 'Exploring the use of while loops and considering the switch to for loop.', 'duration': 22.185, 'max_score': 807.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks807022.jpg'}, {'end': 1024.382, 'src': 'heatmap', 'start': 989.466, 'weight': 1, 'content': [{'end': 995.189, 'text': "this is like I have a pet peeve and I'm really doing my own pet peeve, which is like all these cryptic variable names.", 'start': 989.466, 'duration': 5.723}, {'end': 997.73, 'text': 'that would never make any sense if you were just coming to look at it.', 'start': 995.189, 'duration': 2.541}, {'end': 999.271, 'text': 'But it is what it is right now.', 'start': 997.83, 'duration': 1.441}, {'end': 1004.173, 'text': 'So I need to store those original values and keep those as ca and cb.', 'start': 999.311, 'duration': 4.862}, {'end': 1006.554, 'text': "So let's take a look now and see what we get.", 'start': 1004.453, 'duration': 2.101}, {'end': 1010.509, 'text': 'Ah, this is starting to look like that Mandelbrot set.', 'start': 1008.147, 'duration': 2.362}, {'end': 1011.51, 'text': 'You can see it there.', 'start': 1010.77, 'duration': 0.74}, {'end': 1015.034, 'text': "Now you can see like, oh, I kind of like, it's not exactly centered.", 'start': 1011.53, 'duration': 3.504}, {'end': 1016.275, 'text': "I think it's sort of the wrong place.", 'start': 1015.054, 'duration': 1.221}, {'end': 1018.597, 'text': 'So you know, we can futz with that.', 'start': 1016.675, 'duration': 1.922}, {'end': 1024.382, 'text': "One way we could futz with that, we could say like, oh, let's kind of like have a little bit of a wider range.", 'start': 1018.697, 'duration': 5.685}], 'summary': 'Using original values as ca and cb, adjusting range for better visualization.', 'duration': 34.916, 'max_score': 989.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks989466.jpg'}], 'start': 639.47, 'title': 'Iterative calculation with variable tracking and mandelbrot set', 'summary': 'Discusses iterating an operation with variable tracking and using a while loop for mandelbrot set calculation. it involves limiting the maximum iteration to 100 and determining the outcome for brightness value.', 'chapters': [{'end': 705.299, 'start': 639.47, 'title': 'Iterating operation with variable tracking', 'summary': "Discusses a process of iterating an operation over and over again, while keeping track of the frequency of iteration and using a variable 'n' to limit the maximum iteration to 100, with the speaker embracing the process despite uncertainties and considering a pause for code review.", 'duration': 65.829, 'highlights': ["The need for an operation to happen over and over again and keeping track of its frequency, indicated by the speaker's emphasis on repetition.", "The use of a variable 'n' to control the maximum iteration to 100, serving as a quantitative limit for the process.", "The speaker's acknowledgment of uncertainties and potential errors in the process, expressing a real-time thought process and adaptability.", 'The consideration of pausing to review previous code, demonstrating a reflective approach to coding and problem-solving.']}, {'end': 1032.575, 'start': 706.299, 'title': 'Mandelbrot set calculation', 'summary': 'Discusses the iterative process of calculating the real and complex components for the mandelbrot set, using a while loop to determine if the absolute value of the real and imaginary components added together goes towards infinity, and the use of a brightness value based on the outcome of the calculation.', 'duration': 326.276, 'highlights': ['Iterative process of calculating the real and complex components for the Mandelbrot set The speaker discusses the iterative process of calculating the real components (aa) and the complex components (bb) for the Mandelbrot set, which involves computing a squared minus b squared and 2ab.', 'Use of while loop to determine if the absolute value of the real and imaginary components goes towards infinity The while loop is used to determine if the absolute value of the real and imaginary components added together goes towards infinity, with a condition set to break out of the loop if the value exceeds a certain threshold, such as 16.', 'Introduction of a brightness value based on the outcome of the calculation A brightness value is introduced based on the outcome of the calculation, with a condition set to change the brightness value to 255 if the iteration reaches the maximum value of 100, influencing the visual representation of the Mandelbrot set.']}], 'duration': 393.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks639470.jpg', 'highlights': ["The use of a variable 'n' to control the maximum iteration to 100, serving as a quantitative limit for the process.", 'The while loop is used to determine if the absolute value of the real and imaginary components added together goes towards infinity, with a condition set to break out of the loop if the value exceeds a certain threshold, such as 16.', 'Introduction of a brightness value based on the outcome of the calculation, with a condition set to change the brightness value to 255 if the iteration reaches the maximum value of 100, influencing the visual representation of the Mandelbrot set.', 'Iterative process of calculating the real and complex components for the Mandelbrot set, involving computing a squared minus b squared and 2ab.']}, {'end': 1526.616, 'segs': [{'end': 1193.878, 'src': 'embed', 'start': 1147.157, 'weight': 0, 'content': [{'end': 1153.66, 'text': "So every pixel is 200 unless it's a pixel that's made it all the way to the max iterations.", 'start': 1147.157, 'duration': 6.503}, {'end': 1155.6, 'text': "That's something that's bounded.", 'start': 1153.76, 'duration': 1.84}, {'end': 1157.001, 'text': "That's within the Mandelbrot set.", 'start': 1155.62, 'duration': 1.381}, {'end': 1160.622, 'text': "So if it's within the Mandelbrot set, its brightness is 0.", 'start': 1157.281, 'duration': 3.341}, {'end': 1161.563, 'text': "It's a black pixel.", 'start': 1160.622, 'duration': 0.941}, {'end': 1163.704, 'text': 'Otherwise, its brightness is 200 so we can see it.', 'start': 1161.823, 'duration': 1.881}, {'end': 1172.984, 'text': 'So what I want to do is keep that core Mandelbrot set, the set itself, with a pixel value of 0.', 'start': 1164.778, 'duration': 8.206}, {'end': 1179.308, 'text': 'And now, you could probably Google Mandelbrot set color system, and you could probably find all sorts of ways of doing it.', 'start': 1172.984, 'duration': 6.324}, {'end': 1181.729, 'text': 'But thankfully, the internet chat came to my rescue.', 'start': 1179.368, 'duration': 2.361}, {'end': 1185.592, 'text': "Let's just look at one other way of coloring this particular fractal.", 'start': 1181.749, 'duration': 3.843}, {'end': 1193.157, 'text': "So what I'm going to do is, what I want to do is say, OK, well, the iteration's got somewhere between 0 and 100.", 'start': 1186.252, 'duration': 6.905}, {'end': 1193.878, 'text': "So I'm going to map.", 'start': 1193.157, 'duration': 0.721}], 'summary': 'Pixels within mandelbrot set have brightness 0, else 200. exploring color system for fractal.', 'duration': 46.721, 'max_score': 1147.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks1147157.jpg'}, {'end': 1504.324, 'src': 'embed', 'start': 1473.425, 'weight': 2, 'content': [{'end': 1475.368, 'text': "I can't reach up there because my hands get cut off.", 'start': 1473.425, 'duration': 1.943}, {'end': 1476.389, 'text': 'But you see the idea.', 'start': 1475.608, 'duration': 0.781}, {'end': 1478.331, 'text': 'hear me out speaking quietly.', 'start': 1477.23, 'duration': 1.101}, {'end': 1480.452, 'text': 'This has kind of been kind of a crazy video.', 'start': 1478.671, 'duration': 1.781}, {'end': 1482.613, 'text': 'But hopefully you got something out of this.', 'start': 1480.712, 'duration': 1.901}, {'end': 1485.454, 'text': 'talked a little bit about complex numbers, imaginary numbers,', 'start': 1482.613, 'duration': 2.841}, {'end': 1491.878, 'text': 'looked at how to set pixels according to what the properties of iterating those numbers happen over a plane of xy values,', 'start': 1485.454, 'duration': 6.424}, {'end': 1494.279, 'text': 'and looked at a little bit of how we can manipulate it with sliders.', 'start': 1491.878, 'duration': 2.401}, {'end': 1498.722, 'text': 'And what I would love to see from you if you watch this video and want to make something with it, look at the code.', 'start': 1494.319, 'duration': 4.403}, {'end': 1504.324, 'text': 'a more thoughtful way of adjusting the range, of doing a zoom, a more thoughtful way of coloring,', 'start': 1499.602, 'duration': 4.722}], 'summary': 'Discussed complex and imaginary numbers, pixel manipulation, and range adjustments for coding.', 'duration': 30.899, 'max_score': 1473.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks1473425.jpg'}], 'start': 1032.595, 'title': 'Visualizing the mandelbrot set', 'summary': 'Delves into the techniques for visualizing the mandelbrot set, covering color mapping, iteration normalization, zooming, and performance optimization to enhance the interactive visualization of the fractal.', 'chapters': [{'end': 1526.616, 'start': 1032.595, 'title': 'Mandelbrot set visualization', 'summary': 'Explores the process of visualizing the mandelbrot set, discussing color mapping, normalization of iterations, zooming techniques, and performance optimization, with the aim to create a more thoughtful and interactive visualization of the fractal.', 'duration': 494.021, 'highlights': ['The chapter discusses the process of visualizing the Mandelbrot set and the challenge of coloring it, exploring different color mapping techniques and their effects on the visualization. Color mapping techniques, impact on visualization', 'The speaker demonstrates the process of normalization of iterations and brightness values to create a more familiar visualization of the Mandelbrot set, ensuring a more visually appealing representation. Normalization of iterations and brightness values impact on visualization', 'The chapter also covers the technique of zooming in on different parts of the fractal, including the use of sliders for interactive exploration, and the impact of performance optimization on the visualization speed. Use of sliders for interactive exploration, performance optimization impact on visualization speed']}], 'duration': 494.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6z7GQewK-Ks/pics/6z7GQewK-Ks1032595.jpg', 'highlights': ['Color mapping techniques, impact on visualization', 'Normalization of iterations and brightness values impact on visualization', 'Use of sliders for interactive exploration, performance optimization impact on visualization speed']}], 'highlights': ['The chapter demonstrates programming the Mandelbrot set from scratch in JavaScript, highlighting the math behind it, the creation of fractal images, and the learning opportunities for programming and pixel manipulation.', 'The Mandelbrot set is a fractal pattern that can be used to create beautiful images and provides learning opportunities for programming and pixel manipulation.', 'The coding challenge aims to program the Mandelbrot set in JavaScript, providing insights into the math behind it and demonstrating how to create fractal images.', 'The function f of z equals z squared plus c is a key element in understanding the Mandelbrot set.', 'The chapter aims to unpack and understand the definition and function of the Mandelbrot set in the context of a short YouTube coding challenge video.', 'The process involves calculating values repeatedly to ascertain if they remain bound in an absolute value, determining if they tend towards infinity or stay around some reasonable number.', 'Using grayscale values of pixels (e.g., 51) to represent initial mapping before iteratively evaluating the Mandelbrot set function.', "The use of a variable 'n' to control the maximum iteration to 100, serving as a quantitative limit for the process.", 'The while loop is used to determine if the absolute value of the real and imaginary components added together goes towards infinity, with a condition set to break out of the loop if the value exceeds a certain threshold, such as 16.', 'Introduction of a brightness value based on the outcome of the calculation, with a condition set to change the brightness value to 255 if the iteration reaches the maximum value of 100, influencing the visual representation of the Mandelbrot set.', 'Color mapping techniques, impact on visualization', 'Normalization of iterations and brightness values impact on visualization', 'Use of sliders for interactive exploration, performance optimization impact on visualization speed']}