title
Coding Challenge #50.1: Animated Circle Packing - Part 1
description
In this multi-part coding challenge, I demonstrate how to use a circle packing algorithm. Code: https://thecodingtrain.com/challenges/50-animated-circle-packing
p5.js Web Editor Sketches:
đšī¸ Animated Circle Packing - Text: https://editor.p5js.org/codingtrain/sketches/wxGRAd4I-
đšī¸ Animated Circle Packing - Image: https://editor.p5js.org/codingtrain/sketches/tRpryH_um
đĨ Previous video: https://youtu.be/nnlAH1zDBDE?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/aKYlikFAV4k?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đģ Various Circle Packing Tutorials: http://julienleonard.com/tutorials.html
đ Circle Packing on Wikipedia: https://en.wikipedia.org/wiki/Circle_packing
Videos:
đĨ Part 2: https://youtu.be/ERQcYaaZ6F0
đĨ Livestream Archive: https://youtu.be/pF0cadg2mg0
Related Coding Challenges:
đ #47 Pixel Sorting in Processing: https://youtu.be/JUDYkxU6J0o
Timestamps:
0:00 Introduction
0:47 Circle Packing by Marius Watz
1:09 Create a Circle class
3:06 Add show()
4:22 Create an ArrayList
5:34 Null pointer exception
6:26 Add a grow() function
6:52 Add an edges() function
9:25 Add new circles at random x, y
10:07 Only add valid circles
14:03 Check for overlapping circles
16:02 Make sure circle is not checking itself
20:53 Seed circles based on pixel color
22:06 Read the pixels of an image
23:30 Add circles based on brightness of pixel
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
#loadpixels #circlepacking #processingpixels #processing
detail
{'title': 'Coding Challenge #50.1: Animated Circle Packing - Part 1', 'heatmap': [{'end': 548.1, 'start': 513.703, 'weight': 0.898}, {'end': 604.997, 'start': 557.724, 'weight': 0.772}, {'end': 781.207, 'start': 733.218, 'weight': 0.798}, {'end': 1508.576, 'start': 1489.019, 'weight': 0.74}, {'end': 1576.526, 'start': 1535.619, 'weight': 0.927}], 'summary': 'Explores the creation of a circle packing algorithm using processing and p5.js, covering java arraylist, circle manipulation, and circle placement algorithms, with a focus on creating and growing circles while preventing overlap.', 'chapters': [{'end': 173.668, 'segs': [{'end': 37.605, 'src': 'embed', 'start': 0.229, 'weight': 0, 'content': [{'end': 2.251, 'text': 'Hello Welcome to a coding challenge.', 'start': 0.229, 'duration': 2.022}, {'end': 3.732, 'text': 'My name is Dan.', 'start': 2.872, 'duration': 0.86}, {'end': 8.076, 'text': "I don't know why I'm introducing myself at the beginning of this one, because anyway, but I can, because I just did.", 'start': 3.752, 'duration': 4.324}, {'end': 14.643, 'text': 'This is a coding challenge I am going to build off of, in some ways, a coding challenge that I did previously.', 'start': 8.096, 'duration': 6.547}, {'end': 18.646, 'text': 'And I want to look at animated circle packing.', 'start': 16.064, 'duration': 2.582}, {'end': 24.131, 'text': 'And I want to look at animated circle packing in the context of forming letter forms.', 'start': 19.687, 'duration': 4.444}, {'end': 27.415, 'text': 'Can I do all this in a coding challenge? I think that I can.', 'start': 25.273, 'duration': 2.142}, {'end': 31.038, 'text': "I'm going to use Processing, which is a programming environment built on top of Java.", 'start': 27.475, 'duration': 3.563}, {'end': 34.942, 'text': 'I will also hopefully release a JavaScript version of this.', 'start': 31.939, 'duration': 3.003}, {'end': 37.605, 'text': 'So you can check this description for the source code after I make this.', 'start': 34.962, 'duration': 2.643}], 'summary': 'Dan introduces a coding challenge to create animated circle packing using processing and later plans to release a javascript version.', 'duration': 37.376, 'max_score': 0.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE229.jpg'}], 'start': 0.229, 'title': 'Coding challenge: animated circle packing', 'summary': 'Discusses creating a circle packing algorithm using processing and p5.js, exploring the concept of fitting circles into a space without overlapping, and demonstrates the creation of a circle class with x, y, and radius properties in a coding environment.', 'chapters': [{'end': 173.668, 'start': 0.229, 'title': 'Coding challenge: animated circle packing', 'summary': 'Discusses creating a circle packing algorithm using processing and p5.js, exploring the concept of fitting circles into a space without overlapping, and demonstrates the creation of a circle class with x, y, and radius properties in a coding environment.', 'duration': 173.439, 'highlights': ['The chapter discusses creating a circle packing algorithm using Processing and p5.js. It mentions using Processing, a programming environment built on top of Java, and planning to release a JavaScript version using p5.js library.', 'The concept of fitting circles into a space without overlapping is explored. It explains the idea of circle packing as fitting varying sizes of circles in a space without overlap, referencing computational work by artist Marius Watts.', 'The creation of a circle class with x, y, and radius properties is demonstrated in a coding environment. It details the process of creating a circle class template with x, y, and radius properties, and demonstrates its implementation in a coding environment.']}], 'duration': 173.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE229.jpg', 'highlights': ['The chapter discusses creating a circle packing algorithm using Processing and p5.js.', 'The concept of fitting circles into a space without overlapping is explored.', 'The creation of a circle class with x, y, and radius properties is demonstrated in a coding environment.']}, {'end': 499.904, 'segs': [{'end': 247.806, 'src': 'embed', 'start': 173.989, 'weight': 1, 'content': [{'end': 178.57, 'text': 'Because what do I want to do? I want to write some functionality in the circle object itself.', 'start': 173.989, 'duration': 4.581}, {'end': 182.55, 'text': "I'm going to call it show.", 'start': 179.31, 'duration': 3.24}, {'end': 192.947, 'text': "And I'm going to use the ellipse function, which is a function processing that draws an ellipse with a width and height.", 'start': 183.711, 'duration': 9.236}, {'end': 198.072, 'text': 'the diameter across the horizontal and vertical axes of the same amount is a circle.', 'start': 192.947, 'duration': 5.125}, {'end': 199.313, 'text': 'and what should that diameter be?', 'start': 198.072, 'duration': 1.241}, {'end': 200.714, 'text': "It's the radius times two.", 'start': 199.373, 'duration': 1.341}, {'end': 209.623, 'text': "So now, if I said something like c.display, ah, I didn't call it display, I called it show.", 'start': 201.535, 'duration': 8.088}, {'end': 214.897, 'text': "Ah, where's that circle? I don't know why I don't see that circle.", 'start': 212.133, 'duration': 2.764}, {'end': 216.96, 'text': 'Interesting problem here.', 'start': 215.818, 'duration': 1.142}, {'end': 222.086, 'text': "Ah, why? Well, what's the value of r? The value of r is 0.", 'start': 216.98, 'duration': 5.106}, {'end': 224.43, 'text': "So let's give the value of r 50 right now.", 'start': 222.086, 'duration': 2.344}, {'end': 229.84, 'text': "And let's also be a little more thoughtful here and say stroke 255 and no fill.", 'start': 225.919, 'duration': 3.921}, {'end': 232.421, 'text': "So now I see there's my circle.", 'start': 230.4, 'duration': 2.021}, {'end': 234.702, 'text': "Now, you, I don't know how well you can see this.", 'start': 232.821, 'duration': 1.881}, {'end': 235.802, 'text': 'I can zoom in and you can see it.', 'start': 234.742, 'duration': 1.06}, {'end': 239.703, 'text': "But I'm going to just increase the thickness of the line just because, I don't know,", 'start': 236.022, 'duration': 3.681}, {'end': 242.704, 'text': 'in terms of broadcasting this on YouTube and all that sort of stuff.', 'start': 239.703, 'duration': 3.001}, {'end': 245.385, 'text': "So you can see there's the nice, beautiful, lovely circle.", 'start': 242.884, 'duration': 2.501}, {'end': 246.345, 'text': 'Oh, I love that circle.', 'start': 245.425, 'duration': 0.92}, {'end': 247.806, 'text': 'That circle is my friend.', 'start': 246.746, 'duration': 1.06}], 'summary': 'Creating a circle object with a radius of 50 and displaying it with stroke 255 and no fill.', 'duration': 73.817, 'max_score': 173.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE173989.jpg'}, {'end': 512.702, 'src': 'embed', 'start': 482.759, 'weight': 0, 'content': [{'end': 486.22, 'text': 'This is one of these shorthand things that I never use and people always complain in the comments,', 'start': 482.759, 'duration': 3.461}, {'end': 487.881, 'text': 'like you could have just returned the result of that.', 'start': 486.22, 'duration': 1.661}, {'end': 491.982, 'text': "So I'm returning the result of this or that or this or that.", 'start': 488.281, 'duration': 3.701}, {'end': 494.262, 'text': "So if any of those are true, I'm going to return true.", 'start': 492.022, 'duration': 2.24}, {'end': 498.664, 'text': "So what I'm going to do here is I'm going to say, I'm also going to add a variable.", 'start': 494.803, 'duration': 3.861}, {'end': 499.904, 'text': "I'm going to call it growing.", 'start': 498.684, 'duration': 1.22}, {'end': 502.705, 'text': "And I'm going to set it equal to false.", 'start': 499.924, 'duration': 2.781}, {'end': 504.505, 'text': 'No, true.', 'start': 504.105, 'duration': 0.4}, {'end': 512.702, 'text': "And I'm going to say if growing Increase the radius by one.", 'start': 507.066, 'duration': 5.636}], 'summary': 'The speaker discusses shorthand coding and sets a variable to true, then increases the radius by one.', 'duration': 29.943, 'max_score': 482.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE482759.jpg'}], 'start': 173.989, 'title': 'Java arraylist and circle manipulation', 'summary': 'Covers creating circle objects, managing them with arraylist, handling nullpointerexception, and coding a growing circle in java, aiming to enhance understanding of java arraylist and circle manipulation.', 'chapters': [{'end': 299.19, 'start': 173.989, 'title': 'Creating circles with arraylist in java', 'summary': 'Discusses creating a circle object with a show function, adjusting its radius and stroke, and implementing an arraylist to manage multiple circles in java.', 'duration': 125.201, 'highlights': ['Implementing an ArrayList to manage multiple circles The chapter discusses using an ArrayList in Java to keep track of multiple circle objects, allowing for dynamic management of circles.', 'Creating a circle object with a show function The chapter explains the process of creating a circle object with a show function in Java, enabling the display of the circle with specified attributes.', 'Adjusting the radius and stroke of the circle The chapter demonstrates adjusting the radius and stroke of the circle, including setting the value of the radius and stroke to achieve specific visual effects.']}, {'end': 366.482, 'start': 299.59, 'title': 'Arraylist and nullpointerexception in java', 'summary': 'Demonstrates the use of arraylist in java, highlighting the difference between push and add functions, and the occurrence of a null pointer exception when the arraylist is not properly initialized.', 'duration': 66.892, 'highlights': ['The difference between push and add functions in JavaScript and Java using ArrayList.', 'The occurrence of a null pointer exception when an ArrayList is not properly initialized.', 'The process of creating a new ArrayList in Java by assigning it to a new ArrayList instance.']}, {'end': 499.904, 'start': 366.482, 'title': 'Coding a growing circle', 'summary': 'Demonstrates coding a growing circle with the ability to stop and detect edges, utilizing a function to grow the circle by 1 pixel and determining if the circle has touched the window edge through logical conditions, aiming to make the content more interesting.', 'duration': 133.422, 'highlights': ["The function 'grow' increases the radius of the circle by 1 pixel when called, showcasing the circle's growth. The function 'grow' is implemented to increase the radius of the circle by 1 pixel when called, visually demonstrating the growth process.", "The function 'edges' is designed to determine if the circle has touched an edge of the window through logical conditions, returning a Boolean true or false. The function 'edges' is created to detect whether the circle has reached the edge of the window by evaluating logical conditions and returning a Boolean true or false."]}], 'duration': 325.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE173989.jpg', 'highlights': ['Implementing an ArrayList to manage multiple circles in Java', 'Creating a circle object with a show function in Java', 'Adjusting the radius and stroke of the circle in Java', 'The occurrence of a null pointer exception when an ArrayList is not properly initialized', "The function 'grow' increases the radius of the circle by 1 pixel when called in Java", "The function 'edges' is designed to determine if the circle has touched an edge of the window in Java"]}, {'end': 874.65, 'segs': [{'end': 604.997, 'src': 'heatmap', 'start': 513.703, 'weight': 0, 'content': [{'end': 515.606, 'text': 'Okay, this is good, this is good, this is good.', 'start': 513.703, 'duration': 1.903}, {'end': 518.07, 'text': "Now, I'm going to write a function.", 'start': 516.047, 'duration': 2.023}, {'end': 522.336, 'text': "Let's uh there's a bunch of different ways.", 'start': 520.294, 'duration': 2.042}, {'end': 524.638, 'text': "I could do this, but let's do it actually out here.", 'start': 522.376, 'duration': 2.262}, {'end': 530.502, 'text': "I don't know if I love this, but I'm gonna say if C dot edges, C dot growing equals false.", 'start': 524.638, 'duration': 5.864}, {'end': 532.504, 'text': 'so this should stop.', 'start': 530.502, 'duration': 2.002}, {'end': 541.19, 'text': 'and What did I? By missing a semicolon here, because I have this like ridiculously long line of code that is very unwieldy to type.', 'start': 532.504, 'duration': 8.686}, {'end': 543.232, 'text': "But it's come back now.", 'start': 541.19, 'duration': 2.042}, {'end': 548.1, 'text': 'this should now grow the circle until it reaches the edge.', 'start': 543.232, 'duration': 4.868}, {'end': 551.722, 'text': 'And you can see, why did it stop? It touched the bottom edge down here.', 'start': 548.12, 'duration': 3.602}, {'end': 552.662, 'text': 'So this is good.', 'start': 552.022, 'duration': 0.64}, {'end': 557.144, 'text': 'I now have a circle that can grow and a circle that can stop growing.', 'start': 553.523, 'duration': 3.621}, {'end': 565.388, 'text': 'And what I want to do is I want to add new circles every time through draw.', 'start': 557.724, 'duration': 7.664}, {'end': 569.53, 'text': 'And I want to give it a random location.', 'start': 567.269, 'duration': 2.261}, {'end': 577.104, 'text': "So I'm going to create a new circle at a random location.", 'start': 573.341, 'duration': 3.763}, {'end': 583.789, 'text': 'And I want the circles to all start not with a radius of 50 but a radius of 1.', 'start': 578.425, 'duration': 5.364}, {'end': 584.69, 'text': 'And watch what happens now.', 'start': 583.789, 'duration': 0.901}, {'end': 586.391, 'text': 'So I have all these circles.', 'start': 585.43, 'duration': 0.961}, {'end': 588.553, 'text': "That's kind of actually just nice on its own.", 'start': 586.791, 'duration': 1.762}, {'end': 591.955, 'text': "They're all growing and they're stopping as they reach the edge.", 'start': 588.853, 'duration': 3.102}, {'end': 593.536, 'text': "But let's watch that again.", 'start': 592.215, 'duration': 1.321}, {'end': 595.758, 'text': 'Let me slow down the frame rate.', 'start': 593.556, 'duration': 2.202}, {'end': 604.997, 'text': 'What I want to see happen is I want all these circles to grow, but I also want them to stop growing if they touch another circle.', 'start': 598.194, 'duration': 6.803}], 'summary': 'Creating a function to grow and stop circles, adding new circles with random locations and starting radius of 1, and observing them grow and stop as they reach the edge or touch another circle.', 'duration': 74.85, 'max_score': 513.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE513703.jpg'}, {'end': 781.207, 'src': 'heatmap', 'start': 733.218, 'weight': 0.798, 'content': [{'end': 740.083, 'text': "But technically speaking, you can see it's not adding any circles anymore until it finds a spot that's not inside another circle.", 'start': 733.218, 'duration': 6.865}, {'end': 740.983, 'text': 'Ooh, I like this.', 'start': 740.223, 'duration': 0.76}, {'end': 746.547, 'text': 'But actually, I think what might make more sense here is to return a new circle.', 'start': 741.804, 'duration': 4.743}, {'end': 757.11, 'text': 'Otherwise, return null.', 'start': 753.607, 'duration': 3.503}, {'end': 760.412, 'text': 'And then this is going to be a function that returns a circle.', 'start': 757.35, 'duration': 3.062}, {'end': 767.918, 'text': 'So what I want to do is I want to say this function is going to attempt to find a new circle.', 'start': 761.393, 'duration': 6.525}, {'end': 770.139, 'text': 'And if it does, here it is.', 'start': 768.758, 'duration': 1.381}, {'end': 772.261, 'text': "If I can't find one, it's null.", 'start': 770.479, 'duration': 1.782}, {'end': 781.207, 'text': "So what I'm going to do now is I'm going to say circle C equals new circle.", 'start': 773.041, 'duration': 8.166}], 'summary': 'Function attempts to find a new circle and returns it, else null.', 'duration': 47.989, 'max_score': 733.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE733218.jpg'}], 'start': 499.924, 'title': 'Circle packing and growth', 'summary': 'Covers the creation of growing circles that stop at the edge, addition of new circles, and the aim to stop circles from growing if they touch another circle. it also discusses the circle packing algorithm to fill space without overlapping, including the steps of generating new circles, checking for overlap, and stopping circle growth when touching other circles.', 'chapters': [{'end': 609.958, 'start': 499.924, 'title': 'Circle growing and stopping', 'summary': 'Covers the process of creating circles that grow until they reach the edge and stop, as well as the addition of new circles at random locations with a starting radius of 1, resulting in multiple circles growing and stopping, and the aim to stop circles from growing if they touch another circle.', 'duration': 110.034, 'highlights': ['The chapter covers the process of creating circles that grow until they reach the edge and stop, as well as the addition of new circles at random locations with a starting radius of 1, resulting in multiple circles growing and stopping, and the aim to stop circles from growing if they touch another circle.', 'The code implements a mechanism where circles grow until they reach the edge and stop, with a demonstration of multiple circles growing and stopping, enhancing the visual representation of the process.', 'The addition of new circles at random locations, starting with a radius of 1, results in the development of multiple circles growing and stopping, adding diversity and complexity to the visual output.', 'The objective of preventing circles from growing if they touch another circle is highlighted, indicating the intention to further refine the behavior and interaction of the circles within the visual representation.']}, {'end': 874.65, 'start': 609.958, 'title': 'Circle packing algorithm', 'summary': 'Discusses the process of creating a circle packing algorithm to fill space without overlapping, including the steps of generating new circles, checking for overlap, and stopping circle growth when touching other circles.', 'duration': 264.692, 'highlights': ['Creating a new circle function The speaker discusses creating a function to generate new circles, aiming to fill space without overlap.', 'Checking for overlap with existing circles The process involves checking the distance between the new circle and existing circles to ensure it does not overlap, aiming to prevent overlap and ensure space filling.', 'Adding valid circles to the array list Valid circles are added to the array list, ensuring that only non-overlapping circles contribute to the space-filling algorithm.']}], 'duration': 374.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE499924.jpg', 'highlights': ['The chapter covers the process of creating circles that grow until they reach the edge and stop, as well as the addition of new circles at random locations with a starting radius of 1, resulting in multiple circles growing and stopping, and the aim to stop circles from growing if they touch another circle.', 'The code implements a mechanism where circles grow until they reach the edge and stop, with a demonstration of multiple circles growing and stopping, enhancing the visual representation of the process.', 'Creating a new circle function The speaker discusses creating a function to generate new circles, aiming to fill space without overlap.', 'Checking for overlap with existing circles The process involves checking the distance between the new circle and existing circles to ensure it does not overlap, aiming to prevent overlap and ensure space filling.']}, {'end': 1256.383, 'segs': [{'end': 1073.633, 'src': 'embed', 'start': 1046.795, 'weight': 3, 'content': [{'end': 1051.815, 'text': 'But one thing I do want to do, a couple of things here, is you can see the overlapping is a little bit awkward.', 'start': 1046.795, 'duration': 5.02}, {'end': 1062.397, 'text': 'So I think I probably could clean that up by saying like because the pixel width of those circles is 2, so I could probably, oh,', 'start': 1052.136, 'duration': 10.261}, {'end': 1064.278, 'text': 'and the other thing is, oh, a minus 2, I mean.', 'start': 1062.397, 'duration': 1.881}, {'end': 1073.633, 'text': 'So you can see this is making it a little bit better so that the circles actually kind of stop and abut each other a little bit.', 'start': 1067.284, 'duration': 6.349}], 'summary': 'Improving overlapping circles by adjusting pixel width to 2, resulting in better alignment.', 'duration': 26.838, 'max_score': 1046.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1046795.jpg'}, {'end': 1125.686, 'src': 'embed', 'start': 1090.701, 'weight': 0, 'content': [{'end': 1095.423, 'text': 'The point that I want to actually do is I think that would be useful to add.', 'start': 1090.701, 'duration': 4.722}, {'end': 1097.924, 'text': "is I want to, let's say I want to.", 'start': 1095.423, 'duration': 2.501}, {'end': 1101.906, 'text': 'I want to make sure I add 10 new circles every frame.', 'start': 1097.924, 'duration': 3.982}, {'end': 1106.208, 'text': "So I'm going to say count equals zero.", 'start': 1103.486, 'duration': 2.722}, {'end': 1111.432, 'text': 'And while count is less than total, Whoops.', 'start': 1107.068, 'duration': 4.364}, {'end': 1114.416, 'text': 'Create a new circle.', 'start': 1113.335, 'duration': 1.081}, {'end': 1122.206, 'text': 'If new circle is not null, then count goes up.', 'start': 1116.238, 'duration': 5.968}, {'end': 1125.686, 'text': "And then we're done.", 'start': 1124.625, 'duration': 1.061}], 'summary': 'Add 10 new circles per frame, incrementing count until total is reached.', 'duration': 34.985, 'max_score': 1090.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1090701.jpg'}, {'end': 1214.847, 'src': 'embed', 'start': 1144.259, 'weight': 4, 'content': [{'end': 1150.823, 'text': 'So what I think would make sense to do in that case would be to have some sort of like.', 'start': 1144.259, 'duration': 6.564}, {'end': 1158.906, 'text': "I'm going to also have a variable called attempts, and I'm going to say attempts++.", 'start': 1151.824, 'duration': 7.082}, {'end': 1164.507, 'text': "And if attempts is greater than 1,000, then just let's be done.", 'start': 1159.286, 'duration': 5.221}, {'end': 1167.768, 'text': 'I can even say no loop.', 'start': 1164.527, 'duration': 3.241}, {'end': 1175.15, 'text': 'So I can completely stop the program from running, and I can say print line finished.', 'start': 1169.068, 'duration': 6.082}, {'end': 1184.945, 'text': "So this is just sort of useful to say, oh, if it took 1,000 tries and couldn't find any spots for the circles, then it should be done.", 'start': 1177.659, 'duration': 7.286}, {'end': 1187.347, 'text': 'We can kind of zoom in and see what this is doing.', 'start': 1184.985, 'duration': 2.362}, {'end': 1188.928, 'text': "It's still finding more spots.", 'start': 1187.647, 'duration': 1.281}, {'end': 1191.29, 'text': "At some point, it's going to stop finding spots.", 'start': 1189.328, 'duration': 1.962}, {'end': 1192.611, 'text': "I'll let this run for a little bit.", 'start': 1191.61, 'duration': 1.001}, {'end': 1200.898, 'text': "OK, so while this is running, I'm pretty sure that I did this correctly because I'm waiting for it to say finished down here in the console.", 'start': 1192.691, 'duration': 8.207}, {'end': 1205.441, 'text': "But while this is running, let's go and let's add one more thing to this.", 'start': 1201.338, 'duration': 4.103}, {'end': 1209.305, 'text': "Wow I guess it's still just finding spots.", 'start': 1207.003, 'duration': 2.302}, {'end': 1210.265, 'text': "It's not done.", 'start': 1209.545, 'duration': 0.72}, {'end': 1212.626, 'text': "There's just so many spots left.", 'start': 1210.285, 'duration': 2.341}, {'end': 1214.847, 'text': "OK It's really filling it in there.", 'start': 1213.326, 'duration': 1.521}], 'summary': "Program runs over 1000 attempts to find spots for circles and prints 'finished' when done.", 'duration': 70.588, 'max_score': 1144.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1144259.jpg'}, {'end': 1264.769, 'src': 'embed', 'start': 1236.85, 'weight': 1, 'content': [{'end': 1239.692, 'text': "so there's a couple different ways I could decide.", 'start': 1236.85, 'duration': 2.842}, {'end': 1244.775, 'text': "there's a lot of different ways I could decide where to seed the circle points.", 'start': 1239.692, 'duration': 5.083}, {'end': 1248.398, 'text': "One way that I could do that is I could say I'm going to have a source image.", 'start': 1245.596, 'duration': 2.802}, {'end': 1256.383, 'text': "I'm going to read the pixels of that source image and I'm only ever going to be allowed to start circles where there's a white pixel in that source image.", 'start': 1248.438, 'duration': 7.945}, {'end': 1263.047, 'text': "And that's what I'm going to do right now to make this 2017 message, replace it with your own message later.", 'start': 1256.643, 'duration': 6.404}, {'end': 1264.769, 'text': 'Okay, so.', 'start': 1263.368, 'duration': 1.401}], 'summary': "Using source image's white pixels to seed circle points for 2017 message.", 'duration': 27.919, 'max_score': 1236.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1236850.jpg'}], 'start': 876.426, 'title': 'Circle placement algorithms', 'summary': 'Covers circle overlapping algorithm, animating circle packing, and finding spots for circles algorithm, addressing issues and implementing strategies for successful implementation, including identifying a bug in circle overlap code and seeding circle points.', 'chapters': [{'end': 1003.363, 'start': 876.426, 'title': 'Circle overlapping algorithm', 'summary': 'Explains an algorithm for determining circle overlap based on the distance between circles and their radii, and identifies a bug in the code for checking circle overlaps, ultimately leading to the successful implementation of the algorithm.', 'duration': 126.937, 'highlights': ['The algorithm for determining circle overlap is based on comparing the distance between circles and the sum of their radii, with circles overlapping if the distance is shorter than the sum of the radii. The distance between circles and the comparison of the sum of their radii determine circle overlap, with circles overlapping if the distance is shorter than the sum of the radii.', 'Identifying and rectifying a bug in the code for checking circle overlaps by ensuring that a circle does not compare itself with other circles, resulting in successful circle growth and placement. Rectifying a bug in the code for checking circle overlaps by ensuring that a circle does not compare itself with other circles, leading to successful circle growth and placement.']}, {'end': 1175.15, 'start': 1003.783, 'title': 'Animating circle packing', 'summary': 'Explores the concept of animating circle packing, discussing strategies for circle placement, addressing overlapping issues, and implementing a limit for adding new circles to avoid infinite loops.', 'duration': 171.367, 'highlights': ['The chapter explores the concept of animating circle packing The chapter delves into the concept of animating circle packing, discussing various strategies and considerations for creating animated circle patterns.', 'Addressing overlapping issues The speaker addresses the issue of awkward overlapping between circles by adjusting the pixel width and speed of circle growth, aiming to improve the visual appearance and resolution.', 'Implementing a limit for adding new circles The chapter introduces a method to limit the addition of new circles by setting a maximum number of circles to be added per frame and incorporating a control mechanism to avoid getting stuck in an infinite loop.']}, {'end': 1256.383, 'start': 1177.659, 'title': 'Finding spots for circles algorithm', 'summary': 'Discusses the process of finding spots for circles using an algorithm, iterating through 1,000 tries, zooming in to observe the process, and considering different methods to seed the circle points while waiting for the algorithm to finish.', 'duration': 78.724, 'highlights': ['The chapter explores the process of finding spots for circles using an algorithm, which involves iterating through 1,000 tries and observing the continuous discovery of spots.', "It mentions the consideration of different methods to seed the circle points, such as using a source image and only allowing circles to start where there's a white pixel in the source image.", 'The speaker discusses the possibility of adjusting the starting radius of the circles and notes the ongoing process of the algorithm, expressing confidence in its eventual completion.']}], 'duration': 379.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE876426.jpg', 'highlights': ['Identifying and rectifying a bug in the code for checking circle overlaps by ensuring that a circle does not compare itself with other circles, leading to successful circle growth and placement.', 'Addressing overlapping issues by adjusting the pixel width and speed of circle growth to improve visual appearance and resolution.', 'Implementing a limit for adding new circles by setting a maximum number of circles to be added per frame and incorporating a control mechanism to avoid getting stuck in an infinite loop.', 'The algorithm for determining circle overlap is based on comparing the distance between circles and the sum of their radii, with circles overlapping if the distance is shorter than the sum of the radii.', 'The chapter explores the process of finding spots for circles using an algorithm, which involves iterating through 1,000 tries and observing the continuous discovery of spots.', 'The chapter delves into the concept of animating circle packing, discussing various strategies and considerations for creating animated circle patterns.', "The consideration of different methods to seed the circle points, such as using a source image and only allowing circles to start where there's a white pixel in the source image."]}, {'end': 1700.485, 'segs': [{'end': 1398.765, 'src': 'embed', 'start': 1368.15, 'weight': 3, 'content': [{'end': 1370.812, 'text': 'And I have some videos that cover how this sort of pixel stuff works.', 'start': 1368.15, 'duration': 2.662}, {'end': 1379.34, 'text': 'But I can find the index into that pixel array, the one-dimensional pixel array, by saying the x location plus the y location,', 'start': 1371.153, 'duration': 8.187}, {'end': 1380.901, 'text': "multiplied by the image's width.", 'start': 1379.34, 'duration': 1.561}, {'end': 1381.581, 'text': 'You can think about.', 'start': 1381.021, 'duration': 0.56}, {'end': 1382.401, 'text': 'that makes sense.', 'start': 1381.581, 'duration': 0.82}, {'end': 1390.423, 'text': "if the image was five pixels wide, it's going to be 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, right, 0, 5, 10.", 'start': 1382.401, 'duration': 8.022}, {'end': 1392.004, 'text': 'So you can sort of see how that works.', 'start': 1390.423, 'duration': 1.581}, {'end': 1398.765, 'text': "It's the row plus No, it's the column plus what row it is times the width of those columns.", 'start': 1392.064, 'duration': 6.701}], 'summary': 'Explains how to find index in pixel array using x, y locations and image width.', 'duration': 30.615, 'max_score': 1368.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1368150.jpg'}, {'end': 1521.343, 'src': 'heatmap', 'start': 1489.019, 'weight': 0.74, 'content': [{'end': 1490.059, 'text': 'whoops, that should be a zero.', 'start': 1489.019, 'duration': 1.04}, {'end': 1492.665, 'text': 'oh?, So great.', 'start': 1490.059, 'duration': 2.606}, {'end': 1493.806, 'text': 'so this looks like it worked.', 'start': 1492.665, 'duration': 1.141}, {'end': 1494.647, 'text': 'It found 77,759 possible spots.', 'start': 1493.866, 'duration': 0.781}, {'end': 1503.193, 'text': 'So now, What can I do here?', 'start': 1494.707, 'duration': 8.486}, {'end': 1508.576, 'text': 'Here, instead of creating a random x and a y anywhere in the window,', 'start': 1503.533, 'duration': 5.043}, {'end': 1517.421, 'text': 'what I want to do is say I want a random number that is between 0 and the length of that spots array list.', 'start': 1508.576, 'duration': 8.845}, {'end': 1521.343, 'text': 'So the random function gives me a random number between 0 and the length of the list.', 'start': 1517.701, 'duration': 3.642}], 'summary': 'Successful script found 77,759 possible spots for random placement.', 'duration': 32.324, 'max_score': 1489.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1489019.jpg'}, {'end': 1590.146, 'src': 'heatmap', 'start': 1535.619, 'weight': 0, 'content': [{'end': 1543.181, 'text': 'and now I can say X is spot, that x and y is spot dot y.', 'start': 1535.619, 'duration': 7.562}, {'end': 1545.002, 'text': 'and now if I oh, what did I miss?', 'start': 1543.181, 'duration': 1.821}, {'end': 1548.142, 'text': 'I guess I just need one more closed parentheses.', 'start': 1545.982, 'duration': 2.16}, {'end': 1553.304, 'text': 'now if I run this, oh Whoops, I ruined it by drawing the image.', 'start': 1548.142, 'duration': 5.162}, {'end': 1555.144, 'text': "so let's stop drawing the image.", 'start': 1553.304, 'duration': 1.84}, {'end': 1560.034, 'text': 'and, And we can see there we now have our circle packing algorithm,', 'start': 1555.144, 'duration': 4.89}, {'end': 1570.041, 'text': 'but it is only picking as original spots spots that are available in the actual as part of those white pixels from that source image.', 'start': 1560.034, 'duration': 10.007}, {'end': 1572.723, 'text': 'So you can see we have this nice circle packing algorithm.', 'start': 1570.321, 'duration': 2.402}, {'end': 1574.004, 'text': "It's still finding spots.", 'start': 1572.743, 'duration': 1.261}, {'end': 1576.526, 'text': "I think it's because, hold on a sec.", 'start': 1574.344, 'duration': 2.182}, {'end': 1579.778, 'text': "Let's be a little bit more.", 'start': 1577.816, 'duration': 1.962}, {'end': 1590.146, 'text': "let's say that it has to be the valid spot has to be, it doesn't have to just be.", 'start': 1579.778, 'duration': 10.368}], 'summary': 'Implementing a circle packing algorithm to find available spots in the source image.', 'duration': 30.112, 'max_score': 1535.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1535619.jpg'}, {'end': 1653.649, 'src': 'embed', 'start': 1614.085, 'weight': 2, 'content': [{'end': 1617.508, 'text': "and again you can start to think about color here, how you're picking the circles.", 'start': 1614.085, 'duration': 3.423}, {'end': 1622.792, 'text': "when you're picking the circles, you know not being able to pick the same point twice would probably make a lot of sense.", 'start': 1617.508, 'duration': 5.284}, {'end': 1624.393, 'text': 'and um, here we go.', 'start': 1622.792, 'duration': 1.601}, {'end': 1628.197, 'text': 'uh, animated circle packing, making letter forms.', 'start': 1624.393, 'duration': 3.804}, {'end': 1630.332, 'text': 'now This is the end of this video.', 'start': 1628.197, 'duration': 2.135}, {'end': 1631.453, 'text': 'Coding Challenge, thank you very much.', 'start': 1630.512, 'duration': 0.941}, {'end': 1633.276, 'text': 'I hope you make something creative with it.', 'start': 1631.974, 'duration': 1.302}, {'end': 1639.543, 'text': 'You think of a message. you think of some other type of pattern. you think about color animation in a different way. share it with me, all that stuff.', 'start': 1633.536, 'duration': 6.007}, {'end': 1645.75, 'text': 'But I do want to say is I am using a source image.', 'start': 1639.863, 'duration': 5.887}, {'end': 1653.649, 'text': 'Find the paths of these letters, which is great in the sense that you could use a source image Not just to do letters or numbers.', 'start': 1647.263, 'duration': 6.386}], 'summary': 'Tutorial on animated circle packing for letter forms with source image usage.', 'duration': 39.564, 'max_score': 1614.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1614085.jpg'}], 'start': 1256.643, 'title': 'Circle packing algorithm', 'summary': 'Demonstrates an image processing and circle packing algorithm in processing, identifying 77,759 possible spots, and implements a circle packing algorithm using a source image with dynamic letter forms and color animations.', 'chapters': [{'end': 1525.186, 'start': 1256.643, 'title': 'Image processing and circle packing', 'summary': 'Demonstrates an image processing and circle packing algorithm in processing, identifying bright pixels in an image and creating a list of possible spots for a circle packing algorithm, resulting in 77,759 possible spots.', 'duration': 268.543, 'highlights': ['The image size is 900 by 400 pixels. The transcript mentions the importance of the image size, which is 900 by 400 pixels.', 'A total of 77,759 possible spots are identified for the circle packing algorithm. The chapter identifies 77,759 possible spots for the circle packing algorithm based on the brightness of the pixels in the image.', 'The pixel array is linear with 900 times 400 minus 1 elements. The pixel array is described as linear with 900 times 400 minus 1 elements, providing insight into how the pixels are structured in the image.']}, {'end': 1700.485, 'start': 1530.258, 'title': 'Circle packing algorithm', 'summary': 'Demonstrates the implementation of a circle packing algorithm using a source image to find spots, with considerations for distance and frequency, and encourages creative applications for dynamic letter forms and color animations.', 'duration': 170.227, 'highlights': ['The chapter demonstrates the implementation of a circle packing algorithm using a source image to find spots, with considerations for distance and frequency, and encourages creative applications for dynamic letter forms and color animations.', 'The algorithm picks original spots available in the source image and applies distance and frequency considerations for circle packing.', 'The speaker discusses potential creative applications, such as using source images for dynamic letter forms and color animations, and suggests exploring how to compute paths of letters dynamically in a program.']}], 'duration': 443.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QHEQuoIKgNE/pics/QHEQuoIKgNE1256643.jpg', 'highlights': ['The chapter identifies 77,759 possible spots for the circle packing algorithm based on the brightness of the pixels in the image.', 'The algorithm picks original spots available in the source image and applies distance and frequency considerations for circle packing.', 'The speaker discusses potential creative applications, such as using source images for dynamic letter forms and color animations, and suggests exploring how to compute paths of letters dynamically in a program.', 'The pixel array is described as linear with 900 times 400 minus 1 elements, providing insight into how the pixels are structured in the image.', 'The image size is 900 by 400 pixels. The transcript mentions the importance of the image size, which is 900 by 400 pixels.', 'The chapter demonstrates the implementation of a circle packing algorithm using a source image to find spots, with considerations for distance and frequency, and encourages creative applications for dynamic letter forms and color animations.']}], 'highlights': ['The chapter explores the creation of a circle packing algorithm using Processing and p5.js, covering java arraylist, circle manipulation, and circle placement algorithms.', 'The chapter covers the process of creating circles that grow until they reach the edge and stop, as well as the addition of new circles at random locations with a starting radius of 1, resulting in multiple circles growing and stopping, and the aim to stop circles from growing if they touch another circle.', 'The algorithm for determining circle overlap is based on comparing the distance between circles and the sum of their radii, with circles overlapping if the distance is shorter than the sum of the radii.', 'The chapter identifies 77,759 possible spots for the circle packing algorithm based on the brightness of the pixels in the image.', 'The pixel array is described as linear with 900 times 400 minus 1 elements, providing insight into how the pixels are structured in the image.']}