title

Coding Marching Squares

description

In this episode of Coding in the Cabana, Gloria Pickle and I investigate the Marching Squares algorithm and apply it to Open Simplex Noise in Processing. Code: https://thecodingtrain.com/challenges/c5-marching-squares
p5.js Web Editor Sketches:
đšī¸ Color: https://editor.p5js.org/codingtrain/sketches/hERGV3q_u
đšī¸ Worley Noise: https://editor.p5js.org/codingtrain/sketches/JzvYF8WwT
đšī¸ Image: https://editor.p5js.org/codingtrain/sketches/qThqi4OfJ
đšī¸ Webcam: https://editor.p5js.org/codingtrain/sketches/0XAj0DRD2
đšī¸ Metaballs: https://editor.p5js.org/codingtrain/sketches/wwB-AA4i-
đšī¸ Cave Generation: https://editor.p5js.org/codingtrain/sketches/z4U3Luf7o
đšī¸ Metaballs Interpolation: https://editor.p5js.org/codingtrain/sketches/hEB4588QC
đšī¸ OpenSimplex Interpolation: https://editor.p5js.org/codingtrain/sketches/18cjVoAX1
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Marching cubes: A high resolution 3D surface construction algorithm: https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.132.3930
đ Metaballs and Marching Squares: http://jamie-wong.com/2014/08/19/metaballs-and-marching-squares/
đ Marching squares (Wikipedia): https://en.wikipedia.org/wiki/Marching_squares
đž OpenSimplexNoise-for-Processing (GitHub Repo): https://github.com/CodingTrain/OpenSimplexNoise-for-Processing
đž Open Simplex Noise in Java: https://gist.github.com/KdotJPG/b1270127455a94ac5d19
Videos:
đĨ Coding Adventure: Marching Cubes: https://youtu.be/M3iI2l0ltbE
đĨ [Unity] Procedural Cave Generation (E02. Marching Squares): https://youtu.be/yOgIncKp0BE
đĨ Coding Challenge #28 - Metaballs: https://www.youtube.com/watch?v=ccYLb7cLB1I
đĨ What is OpenSimplex Noise?: https://www.youtube.com/watch?v=Lv9gyZZJPE0
đĨ Coding in the Cabana #4 - Worley Noise: https://thecodingtrain.com/challenges/c4-worley-noise
đĨ 2D Noise - Perlin Noise and p5.js Tutorial: https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/perlin/perlin-noise-and-p5js-tutorial-intro
Related Coding Challenges:
đ #28 Metaballs: https://youtu.be/ccYLb7cLB1I
đ #C4 Worley Noise: https://youtu.be/4066MndcyCk
Timestamps:
0:00 Marching Squares
3:35 Creating a 2D Grid
6:18 Visualizing Isolines
13:46 Adding Lines
17:29 Using Noise to Generate Points
21:18 OpenSimplex Noise in 3D
23:32 Next Ideas and Linear Interpolation
25:38 Goodbyes
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
đ Website: http://thecodingtrain.com/
đž Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
đŠ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
đĄ GitHub: https://github.com/CodingTrain
đŦ Discord: https://thecodingtrain.com/discord
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đī¸ Twitter: https://twitter.com/thecodingtrain
đ¸ Instagram: https://www.instagram.com/the.coding.train/
đĨ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
đ p5.js: https://p5js.org
đ p5.js Web Editor: https://editor.p5js.org/
đ Processing: https://processing.org
đ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#marchingsquares #metaballs #worleynoise #isolines #noise #grid #processing
Sebastian Lague cave code ported by David Snyder
Music by Epidemic Sound: http://epidemicsound.com/creator

detail

{'title': 'Coding Marching Squares', 'heatmap': [{'end': 322.942, 'start': 299.978, 'weight': 0.88}, {'end': 382.946, 'start': 362.809, 'weight': 0.721}, {'end': 1071.717, 'start': 1036.425, 'weight': 0.786}, {'end': 1544.453, 'start': 1523.884, 'weight': 0.811}], 'summary': 'Explores the marching squares algorithm in computer graphics, covering its origins, applications, and potential for 3d terrain generation and meta balls, as well as visualization, implementation, isoline and coordinate calculation, drawing lines based on binary representation, and generating contours using opensimplex noise.', 'chapters': [{'end': 126.115, 'segs': [{'end': 78.339, 'src': 'embed', 'start': 44.569, 'weight': 0, 'content': [{'end': 46.071, 'text': "I'm not so sure just yet.", 'start': 44.569, 'duration': 1.502}, {'end': 50.735, 'text': "But I'm going to stick with just marching squares for this first video.", 'start': 46.471, 'duration': 4.264}, {'end': 58.122, 'text': "If you're looking to do some research into this algorithm, the first place to look is the 1987 paper Marching Cubes,", 'start': 50.975, 'duration': 7.147}, {'end': 64.247, 'text': 'a high resolution 3D surface construction algorithm by William Lorentzen and Harvey Klein.', 'start': 58.122, 'duration': 6.125}, {'end': 72.196, 'text': 'Sebastian Lag has a wonderful coding adventure video about using the marching cubes algorithm to create a endless underwater world,', 'start': 64.367, 'duration': 7.829}, {'end': 78.339, 'text': 'as well as a video using marching squares for 2D to generate procedural cave patterns.', 'start': 72.196, 'duration': 6.143}], 'summary': 'Introduction to marching squares and cubes algorithm for 2d and 3d surface construction.', 'duration': 33.77, 'max_score': 44.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU44569.jpg'}, {'end': 139.405, 'src': 'embed', 'start': 109.822, 'weight': 2, 'content': [{'end': 113.266, 'text': "although you could certainly use a whirly noise or any of the other noise algorithms I've talked about.", 'start': 109.822, 'duration': 3.444}, {'end': 115.988, 'text': 'And then, once I finish that up,', 'start': 114.126, 'duration': 1.862}, {'end': 122.172, 'text': "I'll try to return back to some of these ways that you could expand it further into meta balls and terrain generation and 3D.", 'start': 115.988, 'duration': 6.184}, {'end': 126.115, 'text': "And then hopefully, you'll make lots of wonderful variations of this.", 'start': 122.232, 'duration': 3.883}, {'end': 129.598, 'text': "And I'll be able to look at those and show them on a live stream someday.", 'start': 126.395, 'duration': 3.203}, {'end': 132.24, 'text': "So here's how marching squares is described.", 'start': 129.858, 'duration': 2.382}, {'end': 139.405, 'text': 'A computer graphics algorithm that generates contours for a two-dimensional scalar field, rectangular array of individual numerical values.', 'start': 132.58, 'duration': 6.825}], 'summary': 'Algorithm generates contours for 2d scalar field using marching squares.', 'duration': 29.583, 'max_score': 109.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU109822.jpg'}], 'start': 14.367, 'title': 'Marching squares algorithm', 'summary': 'Introduces the marching squares algorithm in computer graphics, covering its origins, applications, and potential for 3d terrain generation and meta balls.', 'chapters': [{'end': 126.115, 'start': 14.367, 'title': 'Introduction to marching squares algorithm', 'summary': 'Discusses the marching squares algorithm in computer graphics, referencing its origins and relevant resources, while also mentioning potential applications and further exploration into 3d terrain generation and meta balls.', 'duration': 111.748, 'highlights': ['The Marching Squares algorithm is introduced, with a reference to its origin and suggested further exploration into 3D terrain generation and meta balls.', "References to relevant resources such as the 1987 paper 'Marching Cubes' and coding adventure videos by Sebastian Lag are provided to aid in understanding and implementation.", 'The potential applications of the algorithm, including the creation of endless underwater worlds and procedural cave patterns, are mentioned, along with the use of noise algorithms for implementation.']}], 'duration': 111.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU14367.jpg', 'highlights': ['The Marching Squares algorithm is introduced, with a reference to its origin and suggested further exploration into 3D terrain generation and meta balls.', "References to relevant resources such as the 1987 paper 'Marching Cubes' and coding adventure videos by Sebastian Lag are provided to aid in understanding and implementation.", 'The potential applications of the algorithm, including the creation of endless underwater worlds and procedural cave patterns, are mentioned, along with the use of noise algorithms for implementation.']}, {'end': 252.513, 'segs': [{'end': 161.156, 'src': 'embed', 'start': 126.395, 'weight': 0, 'content': [{'end': 129.598, 'text': "And I'll be able to look at those and show them on a live stream someday.", 'start': 126.395, 'duration': 3.203}, {'end': 132.24, 'text': "So here's how marching squares is described.", 'start': 129.858, 'duration': 2.382}, {'end': 139.405, 'text': 'A computer graphics algorithm that generates contours for a two-dimensional scalar field, rectangular array of individual numerical values.', 'start': 132.58, 'duration': 6.825}, {'end': 142.607, 'text': "What? So let's try to break that down, what that means.", 'start': 139.805, 'duration': 2.802}, {'end': 148.03, 'text': "So the good news is this is a two-dimensional algorithm, and it's something that we can visualize in a two-dimensional space.", 'start': 142.887, 'duration': 5.143}, {'end': 152.252, 'text': 'So a nice little P5 canvas or processing window.', 'start': 148.43, 'duration': 3.822}, {'end': 155.393, 'text': "I think I'm going to use processing, which I like to do in these Kibana videos.", 'start': 152.272, 'duration': 3.121}, {'end': 161.156, 'text': "But always, there will be a JavaScript P5.js version released as well that you can find in this video's description.", 'start': 155.433, 'duration': 5.723}], 'summary': 'Marching squares algorithm visualized in 2d space for live stream.', 'duration': 34.761, 'max_score': 126.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU126395.jpg'}, {'end': 235.46, 'src': 'embed', 'start': 207.263, 'weight': 2, 'content': [{'end': 210.705, 'text': "Like, it's just a matter of where am I drawing my lines and where am I drawing my dots.", 'start': 207.263, 'duration': 3.442}, {'end': 216.447, 'text': 'but there is a 2D grid of numbers and each one of these spots has a value.', 'start': 210.865, 'duration': 5.582}, {'end': 223.23, 'text': 'So let me first create a processing window that just draws little dots like this and maybe gives each one a random number between zero and one.', 'start': 216.467, 'duration': 6.763}, {'end': 235.46, 'text': "I think I'll want some type of variable to keep track of what is the resolution, what's the distance between any given dot and the next dot.", 'start': 226.974, 'duration': 8.486}], 'summary': 'Creating a 2d grid with random number values for processing window.', 'duration': 28.197, 'max_score': 207.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU207263.jpg'}], 'start': 126.395, 'title': 'Marching squares algorithm', 'summary': 'Explains the marching squares algorithm, a computer graphics algorithm that generates contours for a two-dimensional scalar field using a rectangular grid of numerical values and discusses visualization and implementation in a processing window.', 'chapters': [{'end': 252.513, 'start': 126.395, 'title': 'Understanding marching squares algorithm', 'summary': 'Explains the marching squares algorithm, a computer graphics algorithm that generates contours for a two-dimensional scalar field using a rectangular grid of numerical values, and discusses the visualization and implementation of the algorithm in a processing window.', 'duration': 126.118, 'highlights': ['The chapter explains the marching squares algorithm as a computer graphics algorithm that generates contours for a two-dimensional scalar field using a rectangular grid of numerical values. The algorithm generates contours for a two-dimensional scalar field using a rectangular grid of numerical values.', 'The discussion includes the visualization and implementation of the algorithm in a processing window. The chapter discusses the visualization and implementation of the algorithm in a processing window.', 'The chapter emphasizes the need to think of each spot on the grid as having a value, and discusses the process of drawing dots with random numbers between zero and one in a processing window. Emphasizing the need to think of each spot on the grid as having a value, and discussing the process of drawing dots with random numbers between zero and one in a processing window.']}], 'duration': 126.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU126395.jpg', 'highlights': ['The chapter explains the marching squares algorithm as a computer graphics algorithm that generates contours for a two-dimensional scalar field using a rectangular grid of numerical values.', 'The discussion includes the visualization and implementation of the algorithm in a processing window.', 'Emphasizing the need to think of each spot on the grid as having a value, and discussing the process of drawing dots with random numbers between zero and one in a processing window.']}, {'end': 529.2, 'segs': [{'end': 283.765, 'src': 'embed', 'start': 256.312, 'weight': 0, 'content': [{'end': 261.595, 'text': 'And now I have my two-dimensional array, which is going to keep track of all these values in this scalar field.', 'start': 256.312, 'duration': 5.283}, {'end': 271.939, 'text': "So let's just write a loop, a nested loop, that is, to look at every spot in the array.", 'start': 264.716, 'duration': 7.223}, {'end': 277.122, 'text': 'Oh, and I can just say random one.', 'start': 271.959, 'duration': 5.163}, {'end': 283.765, 'text': "Then I'm going to do that exact same nested loop in draw to visualize the field.", 'start': 277.762, 'duration': 6.003}], 'summary': 'Using a two-dimensional array to track values in a scalar field, and visualizing it through nested loops.', 'duration': 27.453, 'max_score': 256.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU256312.jpg'}, {'end': 341.292, 'src': 'heatmap', 'start': 299.978, 'weight': 1, 'content': [{'end': 301.759, 'text': "And let's see what that looks like.", 'start': 299.978, 'duration': 1.781}, {'end': 304.541, 'text': 'OK, we can see that here.', 'start': 303.14, 'duration': 1.401}, {'end': 306.022, 'text': 'Now let me make those a little bit bigger.', 'start': 304.661, 'duration': 1.361}, {'end': 314.46, 'text': "And we can see, here's my two-dimensional scalar field or rectangular array of numerical values.", 'start': 309.338, 'duration': 5.122}, {'end': 322.942, 'text': 'So the idea of marching squares is what would be some algorithm to find contours and patterns in this array of numbers?', 'start': 314.82, 'duration': 8.122}, {'end': 328.184, 'text': "And I think, just to make this easier to see, I'm going to just increase the resolution to 20..", 'start': 323.242, 'duration': 4.942}, {'end': 337.347, 'text': "Let's actually have the stroke weight be the resolution times like 0.2 or something, and actually make that more like 0.4.", 'start': 328.184, 'duration': 9.163}, {'end': 337.808, 'text': 'And there we go.', 'start': 337.347, 'duration': 0.461}, {'end': 341.292, 'text': 'So I just wanted to be able to see this a bit more clearly at higher resolution.', 'start': 337.988, 'duration': 3.304}], 'summary': 'Demonstrating the use of marching squares algorithm to find contours and patterns in a two-dimensional scalar field at increased resolution.', 'duration': 41.314, 'max_score': 299.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU299978.jpg'}, {'end': 425.678, 'src': 'heatmap', 'start': 362.809, 'weight': 3, 'content': [{'end': 365.631, 'text': "So I'm going to say floor random 2.", 'start': 362.809, 'duration': 2.822}, {'end': 367.491, 'text': "And I'm going to change this to an integer.", 'start': 365.631, 'duration': 1.86}, {'end': 370.233, 'text': "I'm going to come back to floats later, but let's just leave it as an integer right now.", 'start': 367.511, 'duration': 2.722}, {'end': 372.894, 'text': "Let's let the background be gray so I can see.", 'start': 370.753, 'duration': 2.141}, {'end': 374.495, 'text': 'Whoops, and this has to be integers.', 'start': 373.174, 'duration': 1.321}, {'end': 379.723, 'text': 'So now I can see I have just black and white dot.', 'start': 376.26, 'duration': 3.463}, {'end': 382.946, 'text': "To figure this out, let's look at just one square.", 'start': 379.923, 'duration': 3.023}, {'end': 394.707, 'text': "Each one of these corners, we'll call them maybe A, B, C, and D, just as a naming device.", 'start': 387.384, 'duration': 7.323}, {'end': 397.328, 'text': 'Each one of these corners has a value of 0 or 1.', 'start': 394.987, 'duration': 2.341}, {'end': 400.97, 'text': "So let's just say, for the sake of argument, this one is 1.", 'start': 397.328, 'duration': 3.642}, {'end': 402.93, 'text': "And maybe I'll visualize that by filling it in.", 'start': 400.97, 'duration': 1.96}, {'end': 404.251, 'text': 'And this one is 2.', 'start': 403.471, 'duration': 0.78}, {'end': 406.012, 'text': 'Sorry, this one is 0.', 'start': 404.251, 'duration': 1.761}, {'end': 406.572, 'text': 'This one is 0.', 'start': 406.012, 'duration': 0.56}, {'end': 407.212, 'text': 'And this one is 0.', 'start': 406.572, 'duration': 0.64}, {'end': 408.192, 'text': "So I'm going to just consider.", 'start': 407.212, 'duration': 0.98}, {'end': 409.973, 'text': 'Let me draw that again.', 'start': 408.212, 'duration': 1.761}, {'end': 413.374, 'text': "I'm going to consider just this one particular configuration.", 'start': 409.993, 'duration': 3.381}, {'end': 421.35, 'text': 'Well, it so happens that this particular configuration The way that I choose to visualize it is by drawing a line here.', 'start': 413.915, 'duration': 7.435}, {'end': 425.678, 'text': 'We can see that all of these are empty, but this one is full.', 'start': 421.711, 'duration': 3.967}], 'summary': 'Using integers to represent corners, visualizing configurations with lines.', 'duration': 49.418, 'max_score': 362.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU362809.jpg'}], 'start': 256.312, 'title': 'Visualizing 2d scalar field and binary configurations', 'summary': 'Explains visualizing a 2d scalar field using nested loops, marching squares algorithm, with a resolution of 20 and a stroke weight of 0.4. it also discusses representing binary configurations with 16 possible configurations in a four-bit system.', 'chapters': [{'end': 374.495, 'start': 256.312, 'title': 'Marching squares: visualizing 2d scalar field', 'summary': 'Explains the process of visualizing a two-dimensional scalar field using nested loops and demonstrates the concept of marching squares algorithm by creating contours and patterns in the array of numerical values, with a resolution of 20 and a stroke weight of 0.4.', 'duration': 118.183, 'highlights': ['The chapter explains the process of visualizing a two-dimensional scalar field using nested loops. The speaker describes using a nested loop to look at every spot in the two-dimensional array, and then visualizing it in draw to represent the field.', 'Demonstrates the concept of marching squares algorithm by creating contours and patterns in the array of numerical values. The speaker increases the resolution to 20 and adjusts the stroke weight to 0.4 to visualize contours and patterns in the array.', 'Uses a resolution of 20 and a stroke weight of 0.4 to visualize the field. The speaker adjusts the resolution to 20 and sets the stroke weight to 0.4 to visualize the two-dimensional scalar field more clearly.']}, {'end': 529.2, 'start': 376.26, 'title': 'Visualizing binary configurations', 'summary': 'Discusses visualizing binary configurations and demonstrates how to represent each corner as 0 or 1, leading to a total of 16 possible configurations in a four-bit system.', 'duration': 152.94, 'highlights': ['The chapter explains the process of visualizing binary configurations by representing each corner as 0 or 1, leading to a total of 16 possible configurations in a four-bit system.', 'The speaker uses the example of drawing lines to separate filled corners from empty ones as a visualization technique for binary configurations.', 'The chapter mentions that in a four-bit system, there are 16 possible scenarios for the on/off configurations of the corners.', 'The speaker emphasizes the concept of visualizing binary configurations by drawing lines to separate the filled corners from the empty ones.']}], 'duration': 272.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU256312.jpg', 'highlights': ['The chapter explains the process of visualizing a two-dimensional scalar field using nested loops.', 'Demonstrates the concept of marching squares algorithm by creating contours and patterns in the array of numerical values.', 'Uses a resolution of 20 and a stroke weight of 0.4 to visualize the field.', 'The chapter explains the process of visualizing binary configurations by representing each corner as 0 or 1, leading to a total of 16 possible configurations in a four-bit system.', 'The speaker emphasizes the concept of visualizing binary configurations by drawing lines to separate the filled corners from the empty ones.']}, {'end': 713.451, 'segs': [{'end': 592.098, 'src': 'embed', 'start': 567.972, 'weight': 0, 'content': [{'end': 575.139, 'text': "And in order to fill the full space down here on the edges, I'm missing the right and bottom corners.", 'start': 567.972, 'duration': 7.167}, {'end': 580.405, 'text': 'So I can fix that very easily just by adding one more column and one more row.', 'start': 575.52, 'duration': 4.885}, {'end': 587.593, 'text': "And now see I'm ready to look at each collection of four corners and figure out which iso line should I draw based on that.", 'start': 580.785, 'duration': 6.808}, {'end': 592.098, 'text': 'If I look at any individual square, these are the important points.', 'start': 588.073, 'duration': 4.025}], 'summary': 'Adding one more column and one more row to fill edges, determining iso line based on four corners.', 'duration': 24.126, 'max_score': 567.972, 'thumbnail': ''}, {'end': 713.451, 'src': 'embed', 'start': 615.526, 'weight': 2, 'content': [{'end': 621.917, 'text': "because the final column doesn't have any neighbors to the right and the final row doesn't have any neighbors to the bottom.", 'start': 615.526, 'duration': 6.391}, {'end': 626.965, 'text': "A is a P, I'm gonna use P vector just to figure out what's P vector A, B, C, and D.", 'start': 621.937, 'duration': 5.028}, {'end': 631.784, 'text': "The x value is which column I'm on times that resolution.", 'start': 628.223, 'duration': 3.561}, {'end': 641.685, 'text': 'And point A, which is over here, is the x value of this plus half.', 'start': 632.784, 'duration': 8.901}, {'end': 648.587, 'text': 'The length of each side is my variable res, so half of that, plus res times 0.5.', 'start': 642.066, 'duration': 6.521}, {'end': 649.227, 'text': "That's x.", 'start': 648.587, 'duration': 0.64}, {'end': 651.047, 'text': 'And y for A is just at the top.', 'start': 649.227, 'duration': 1.82}, {'end': 655.388, 'text': 'So using that same idea, I can figure out b, c, and d.', 'start': 651.967, 'duration': 3.421}, {'end': 662.698, 'text': 'c is y is all the way at the bottom and x is again in the middle.', 'start': 659.236, 'duration': 3.462}, {'end': 671.604, 'text': 'And then d is x is at its original location of the top left and y is in the middle.', 'start': 664.499, 'duration': 7.105}, {'end': 675.166, 'text': 'And I forgot to make a variable for y.', 'start': 673.105, 'duration': 2.061}, {'end': 685.152, 'text': 'And because of the person who I am, which I am just happy to be these days, I must align all of the spacing here.', 'start': 675.166, 'duration': 9.986}, {'end': 696.681, 'text': "I don't know whether that makes it better or worse, but I'm very happy with how that looks right now.", 'start': 692.799, 'duration': 3.882}, {'end': 710.429, 'text': "So if I just wanted to put, let's say, this line at every single spot, I would say line from a.x, a.y to b.x, b.y.", 'start': 697.262, 'duration': 13.167}, {'end': 713.451, 'text': "Let's say stroke 255.", 'start': 710.889, 'duration': 2.562}], 'summary': 'Using p vector to calculate coordinates for points a, b, c, and d based on column and resolution, with specific positioning for each point.', 'duration': 97.925, 'max_score': 615.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU615526.jpg'}], 'start': 529.26, 'title': 'Isoline and coordinate calculation', 'summary': "Introduces the process of calculating isolines on a grid and emphasizes the importance of adding an extra column and row for correct representation. it also explains the process of calculating coordinate points based on a resolution and the method for drawing lines between these points, with an example of using the 'line' function.", 'chapters': [{'end': 615.526, 'start': 529.26, 'title': 'Isoline calculation process', 'summary': 'Introduces the process of calculating isolines on a grid, emphasizing the importance of adding an extra column and row to ensure the correct representation of squares and midpoint calculation for isoline drawing.', 'duration': 86.266, 'highlights': ['The importance of adding an extra column and row to the grid is emphasized to ensure the correct representation of squares, improving the accuracy of isoline calculation.', 'Emphasis is placed on the calculation of midpoints between the corners of individual squares, crucial for determining isoline positioning and drawing.']}, {'end': 713.451, 'start': 615.526, 'title': 'Coordinate calculation and line drawing', 'summary': "Explains the process of calculating coordinate points based on a resolution, and the method for drawing lines between these points, with an example of using the 'line' function.", 'duration': 97.925, 'highlights': ['The x value is calculated by multiplying the column number by the resolution, and adjusting for the position of the point.', 'The y value is determined by the resolution and the position of the point, such as being at the top or bottom.', 'The process of aligning spacing and drawing lines is described, with the speaker expressing satisfaction with the outcome.']}], 'duration': 184.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU529260.jpg', 'highlights': ['The importance of adding an extra column and row to the grid is emphasized to ensure the correct representation of squares, improving the accuracy of isoline calculation.', 'Emphasis is placed on the calculation of midpoints between the corners of individual squares, crucial for determining isoline positioning and drawing.', 'The x value is calculated by multiplying the column number by the resolution, and adjusting for the position of the point.', 'The y value is determined by the resolution and the position of the point, such as being at the top or bottom.', 'The process of aligning spacing and drawing lines is described, with the speaker expressing satisfaction with the outcome.']}, {'end': 1028.291, 'segs': [{'end': 795.083, 'src': 'embed', 'start': 749.44, 'weight': 0, 'content': [{'end': 754.265, 'text': 'So each one of these maps to the binary representation of the numbers.', 'start': 749.44, 'duration': 4.825}, {'end': 755.946, 'text': "I don't know if I made that totally clear.", 'start': 754.565, 'duration': 1.381}, {'end': 766.514, 'text': 'So, if I take any binary number, I just need to convert this into its base 10 representation, this being 4,', 'start': 756.627, 'duration': 9.887}, {'end': 770.594, 'text': 'and then figure out which one of these it is and draw the appropriate line.', 'start': 766.514, 'duration': 4.08}, {'end': 772.835, 'text': 'So let me write a function.', 'start': 770.654, 'duration': 2.181}, {'end': 781.557, 'text': "I'm going to call it getState that gets the numeric, the base 10 state based on four zeros and ones.", 'start': 772.855, 'duration': 8.702}, {'end': 783.238, 'text': "So I'm going to give it four arguments.", 'start': 782.057, 'duration': 1.181}, {'end': 790.501, 'text': 'This is kind of silly because I could actually use some type of built-in Java function to convert from binary to decimal or base 2 to base 10.', 'start': 783.258, 'duration': 7.243}, {'end': 795.083, 'text': "But I'm just going to do this in a very manual way since I know I only ever have four bits.", 'start': 790.501, 'duration': 4.582}], 'summary': 'Converting binary numbers to base 10 representation and drawing appropriate lines based on the result using a manual approach with four bits.', 'duration': 45.643, 'max_score': 749.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU749440.jpg'}, {'end': 870.069, 'src': 'embed', 'start': 839.119, 'weight': 2, 'content': [{'end': 839.78, 'text': 'Looks good to me.', 'start': 839.119, 'duration': 0.661}, {'end': 850.242, 'text': "OK, so now if state is, for this particular line that I've drawn, That's only if the state is for.", 'start': 840.442, 'duration': 9.8}, {'end': 855.063, 'text': "Oh, guess what? Here's a really excellent time to use a switch statement.", 'start': 850.662, 'duration': 4.401}, {'end': 861.746, 'text': "I'm so afraid of switch statements, but I'm going to be strong and brave, and I'm going to use a switch statement today.", 'start': 856.104, 'duration': 5.642}, {'end': 867.128, 'text': "And I'm definitely not going to Google syntax for a switch statement in Java, no.", 'start': 861.766, 'duration': 5.362}, {'end': 870.069, 'text': "I know it off the top of my head, right? Because I've been programming for 20 years.", 'start': 867.428, 'duration': 2.641}], 'summary': 'Using a switch statement for state checking in java after 20 years of programming.', 'duration': 30.95, 'max_score': 839.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU839119.jpg'}, {'end': 995.1, 'src': 'embed', 'start': 937.391, 'weight': 1, 'content': [{'end': 942.635, 'text': 'And if I remember, this is from a C to D, line C.', 'start': 937.391, 'duration': 5.244}, {'end': 945.017, 'text': "And you know what? I'm going to write my own function.", 'start': 942.635, 'duration': 2.382}, {'end': 948.239, 'text': 'You can do this in Java, because you can overload functions.', 'start': 945.037, 'duration': 3.202}, {'end': 952.122, 'text': "So I'm going to write a function that gets two p vectors, v1.", 'start': 948.64, 'duration': 3.482}, {'end': 957.52, 'text': "V2, I'm just gonna call it line and draws a line between them.", 'start': 953.598, 'duration': 3.922}, {'end': 963.484, 'text': "So I don't have to like constantly type out the X and the Y over and over again.", 'start': 957.801, 'duration': 5.683}, {'end': 965.205, 'text': "So let's do that.", 'start': 964.144, 'duration': 1.061}, {'end': 967.766, 'text': "That's right, right? X, Y, X, Y.", 'start': 965.265, 'duration': 2.501}, {'end': 968.227, 'text': 'Okay, good.', 'start': 967.766, 'duration': 0.461}, {'end': 972.169, 'text': "Now I'm gonna say line from C to D.", 'start': 968.747, 'duration': 3.422}, {'end': 972.829, 'text': 'And that makes sense.', 'start': 972.169, 'duration': 0.66}, {'end': 978.553, 'text': "You can see that line appearing every time there's a, it's not right.", 'start': 972.889, 'duration': 5.664}, {'end': 981.868, 'text': 'Oh, the first one is times 8.', 'start': 980.246, 'duration': 1.622}, {'end': 988.334, 'text': 'Oh, boy, this has been in there for a while, right? My binary number starts on the left and goes to the right.', 'start': 981.868, 'duration': 6.466}, {'end': 995.1, 'text': 'So the left-hand digit, the 0 or 1, is the amount, is the 2 to the fourth.', 'start': 988.594, 'duration': 6.506}], 'summary': 'Creating a java function to draw a line between two vectors, aiming to avoid repetitive typing.', 'duration': 57.709, 'max_score': 937.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU937391.jpg'}], 'start': 713.451, 'title': 'Drawing lines based on binary representation and using switch statements', 'summary': 'Discusses drawing lines based on binary representation to determine square states and using a switch statement in java to draw lines between points while also mentioning potential algorithm optimization and function overloading.', 'chapters': [{'end': 839.039, 'start': 713.451, 'title': 'Drawing conditional lines based on binary representation', 'summary': 'Discusses the process of drawing lines in specific configurations based on the binary representation of numbers, with the goal of creating a function to determine the state of the squares and draw the appropriate line if they match the desired configuration.', 'duration': 125.588, 'highlights': ['The speaker demonstrates using binary representation to map the numbers and explains the process of converting binary numbers to base 10 representation.', "The function 'getState' is created to calculate the base 10 state based on the binary configuration of four zeros and ones.", 'The speaker highlights the manual method of converting binary to decimal and explains the process using a specific example for better understanding.']}, {'end': 1028.291, 'start': 839.119, 'title': 'Switch statement for drawing lines', 'summary': 'Discusses the implementation of a switch statement in java to draw lines between different points based on the state, with a mention of potential ways to optimize the algorithm and a demonstration of overloading functions to simplify code.', 'duration': 189.172, 'highlights': ['The chapter explores the use of a switch statement in Java to draw lines based on different states, with a brief mention of potential optimization opportunities for the algorithm.', 'The speaker demonstrates overloading functions in Java to simplify code by creating a function that draws a line between two points using p vectors v1 and v2.', 'The speaker discusses the binary number representation and correctly places the binary digits to ensure the accurate depiction of the lines based on the state.']}], 'duration': 314.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU713451.jpg', 'highlights': ["The function 'getState' is created to calculate the base 10 state based on the binary configuration of four zeros and ones.", 'The speaker discusses the binary number representation and correctly places the binary digits to ensure the accurate depiction of the lines based on the state.', 'The chapter explores the use of a switch statement in Java to draw lines based on different states, with a brief mention of potential optimization opportunities for the algorithm.', 'The speaker demonstrates overloading functions in Java to simplify code by creating a function that draws a line between two points using p vectors v1 and v2.', 'The speaker demonstrates using binary representation to map the numbers and explains the process of converting binary numbers to base 10 representation.']}, {'end': 1575.223, 'segs': [{'end': 1071.717, 'src': 'heatmap', 'start': 1036.425, 'weight': 0.786, 'content': [{'end': 1043.609, 'text': "I think I've put in all the correct line configurations based on every possible values for the four corners.", 'start': 1036.425, 'duration': 7.184}, {'end': 1048.492, 'text': "Let's see what this gives me.", 'start': 1044.491, 'duration': 4.001}, {'end': 1049.174, 'text': 'Hey, look at that.', 'start': 1048.512, 'duration': 0.662}, {'end': 1056.346, 'text': 'I have now drawn contours around all of the areas of black and white.', 'start': 1049.821, 'duration': 6.525}, {'end': 1060.529, 'text': "Let's try putting in a different algorithm now.", 'start': 1057.126, 'duration': 3.403}, {'end': 1063.231, 'text': "I'm going to use OpenSimplex Noise.", 'start': 1061.47, 'duration': 1.761}, {'end': 1066.533, 'text': 'I would refer you to some videos that I made on OpenSimplex Noise.', 'start': 1063.611, 'duration': 2.922}, {'end': 1071.717, 'text': 'I even worked on a library for processing that incorporates OpenSimplex Noise.', 'start': 1067.134, 'duration': 4.583}], 'summary': 'Configured line values for corners, drew contours, used opensimplex noise.', 'duration': 35.292, 'max_score': 1036.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU1036425.jpg'}, {'end': 1318.274, 'src': 'embed', 'start': 1274.899, 'weight': 1, 'content': [{'end': 1276.78, 'text': 'We can start to see this terrain.', 'start': 1274.899, 'duration': 1.881}, {'end': 1280.242, 'text': "It's like terrain-like thing with these contours drawn around it.", 'start': 1277.601, 'duration': 2.641}, {'end': 1280.983, 'text': 'Oh, I love this.', 'start': 1280.322, 'duration': 0.661}, {'end': 1282.665, 'text': "All right, let's do something a little bit more.", 'start': 1281.203, 'duration': 1.462}, {'end': 1288.671, 'text': 'Let me use the fact that open simplex noise can be calculated in three-dimensional space.', 'start': 1283.225, 'duration': 5.446}, {'end': 1296.7, 'text': 'So, while this really could be something quite exciting if I were rendering in 3D and then eventually I could use 4D open simplex noise,', 'start': 1289.132, 'duration': 7.568}, {'end': 1302.063, 'text': "What I'm going to do instead is use that third dimension essentially as thinking of it like time.", 'start': 1297.14, 'duration': 4.923}, {'end': 1303.825, 'text': 'So frames of animation.', 'start': 1302.304, 'duration': 1.521}, {'end': 1309.148, 'text': 'So if I create a global variable called Z offset, set that equal to zero.', 'start': 1304.145, 'duration': 5.003}, {'end': 1312.27, 'text': 'And then every frame, Z offset goes up.', 'start': 1309.488, 'duration': 2.782}, {'end': 1316.853, 'text': 'I think I might want to control this separately from the X off and Y off incrementation.', 'start': 1312.49, 'duration': 4.363}, {'end': 1318.274, 'text': "So I'm just going to hard code this in there.", 'start': 1317.113, 'duration': 1.161}], 'summary': 'Using open simplex noise in 3d space for creating animated terrain-like contours.', 'duration': 43.375, 'max_score': 1274.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU1274899.jpg'}, {'end': 1460.616, 'src': 'embed', 'start': 1388.086, 'weight': 0, 'content': [{'end': 1398.615, 'text': 'One thing I could do that might be interesting is just actually not bother drawing this at all, the rectangles.', 'start': 1388.086, 'duration': 10.529}, {'end': 1404.02, 'text': "That'll speed things up a little bit and make the background black.", 'start': 1398.635, 'duration': 5.385}, {'end': 1408.884, 'text': 'And then I could also probably use the P2D renderer, which is hardware accelerated.', 'start': 1404.12, 'duration': 4.764}, {'end': 1411.612, 'text': 'There we go.', 'start': 1410.911, 'duration': 0.701}, {'end': 1412.792, 'text': 'Look at that.', 'start': 1411.772, 'duration': 1.02}, {'end': 1413.933, 'text': 'So here we go.', 'start': 1413.273, 'duration': 0.66}, {'end': 1416.355, 'text': 'This is really the end of this video.', 'start': 1413.993, 'duration': 2.362}, {'end': 1422.079, 'text': "It's the marching squares algorithm over a 2D open simplex noise field.", 'start': 1416.395, 'duration': 5.684}, {'end': 1426.442, 'text': 'But I have really only scratched the surface, I think, with the creative possibilities here.', 'start': 1422.579, 'duration': 3.863}, {'end': 1428.023, 'text': 'I have not explored color.', 'start': 1426.722, 'duration': 1.301}, {'end': 1433.329, 'text': "I'm just creating the field of numbers just with OpenSimplex noise.", 'start': 1428.743, 'duration': 4.586}, {'end': 1435.291, 'text': 'There are lots of other noise algorithms.', 'start': 1433.349, 'duration': 1.942}, {'end': 1439.236, 'text': 'Oh, I could use an image, convert it to grayscale, and have those be the values.', 'start': 1435.351, 'duration': 3.885}, {'end': 1441.139, 'text': 'I could use my live webcam image.', 'start': 1439.276, 'duration': 1.863}, {'end': 1449.09, 'text': 'I could use distance from different circles or other objects floating in the space.', 'start': 1444.528, 'duration': 4.562}, {'end': 1454.813, 'text': "This is what's in the Jamie Wong article about using moving circles to create a metal balls-like pattern.", 'start': 1449.11, 'duration': 5.703}, {'end': 1458.515, 'text': 'You can look at what Sebastian Lag did for procedural cave generation.', 'start': 1455.133, 'duration': 3.382}, {'end': 1460.616, 'text': 'There are so many possibilities.', 'start': 1459.056, 'duration': 1.56}], 'summary': 'Using p2d renderer can speed up and create diverse visual possibilities by exploring color and different noise algorithms.', 'duration': 72.53, 'max_score': 1388.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU1388086.jpg'}, {'end': 1549.642, 'src': 'heatmap', 'start': 1523.884, 'weight': 0.811, 'content': [{'end': 1529.907, 'text': "Now, I quite rather like this blocky looking, and it kind of works for a certain aesthetic, but that's something that would be worth exploring.", 'start': 1523.884, 'duration': 6.023}, {'end': 1536.791, 'text': "And if I'm able to do that after this video, you'll be seeing right up here next to me a version of this exact example of how it looks.", 'start': 1529.927, 'duration': 6.864}, {'end': 1544.453, 'text': 'So thanks for joining me through this little exploration of the marching squares algorithm.', 'start': 1539.443, 'duration': 5.01}, {'end': 1546.236, 'text': "I've got to find Gloria.", 'start': 1544.974, 'duration': 1.262}, {'end': 1549.642, 'text': 'Pickle, where has she gone? She never came back for her water.', 'start': 1546.817, 'duration': 2.825}], 'summary': 'Exploration of marching squares algorithm, with potential visual example.', 'duration': 25.758, 'max_score': 1523.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU1523884.jpg'}], 'start': 1028.311, 'title': 'Generating contours using opensimplex noise, opensimplex noise visualization, and exploring marching squares algorithm', 'summary': 'Covers the process of drawing contours using opensimplex noise, visualizing opensimplex noise, and exploring the creative possibilities of the marching squares algorithm. it includes integrating opensimplexnoise library, incorporating a third dimension for animation, and using different noise algorithms and interpolation techniques for creating smoother patterns.', 'chapters': [{'end': 1181.145, 'start': 1028.311, 'title': 'Generating contours using opensimplex noise', 'summary': 'Discusses the process of drawing contours using opensimplex noise and integrating the opensimplexnoise library into the code to generate smooth random values in a two-dimensional space.', 'duration': 152.834, 'highlights': ['Integrating OpenSimplex Noise into the code The speaker discusses integrating the opensimplexnoise library into the code to generate smooth random values in a two-dimensional space.', 'Drawing contours using OpenSimplex Noise The chapter talks about the process of drawing contours around areas of black and white using OpenSimplex Noise.', 'Utilizing OpenSimplex Noise to create smooth gradients The speaker explains using OpenSimplex Noise to obtain smooth gradients of gray throughout a two-dimensional space by calling the function noise.eval.']}, {'end': 1416.355, 'start': 1183.826, 'title': 'Opensimplex noise visualization', 'summary': 'Discusses the process of visualizing opensimplex noise in a two-dimensional space, exploring its values and potential applications, and later incorporating a third dimension as frames of animation.', 'duration': 232.529, 'highlights': ['OpenSimplex noise values range from -1 to 1 and are utilized to draw contours in a 2D space, visualizing terrain-like features. OpenSimplex noise generates values between -1 and 1, which are used to draw contours in a 2D space, creating terrain-like visuals.', 'Incorporating a third dimension as frames of animation by manipulating a global variable called Z offset, resulting in a fast algorithm. A global variable called Z offset is used to manipulate the third dimension, essentially representing frames of animation, resulting in a fast algorithm.', 'Experimenting with visualization options, such as rendering rectangles, adjusting resolution, and utilizing hardware acceleration for improved performance. The chapter explores various visualization options, including rendering rectangles, adjusting resolution, and utilizing hardware acceleration for improved performance.']}, {'end': 1575.223, 'start': 1416.395, 'title': 'Exploring marching squares algorithm', 'summary': 'Discusses the exploration of creative possibilities in using different noise algorithms and interpolation techniques to create smoother patterns with the marching squares algorithm, with potential applications in generating visuals and artwork.', 'duration': 158.828, 'highlights': ['The chapter discusses exploring creative possibilities with different noise algorithms and interpolation techniques. The speaker talks about the potential of using various noise algorithms, such as OpenSimplex noise, and exploring interpolation techniques to create visuals with the marching squares algorithm.', 'The speaker mentions the potential applications of using images, live webcam feeds, and distance from objects to create the field of numbers for the algorithm. The speaker highlights the potential applications of using images, live webcam feeds, and distance from objects to generate the values for the algorithm.', 'The chapter emphasizes the potential of using linear interpolation to create smoother patterns with the marching squares algorithm. The speaker discusses the idea of using linear interpolation based on the magnitude of values on the corners to produce smoother patterns with the algorithm.', 'The speaker mentions the aesthetic appeal of blocky patterns and the intention to explore smoother patterns with the algorithm. The speaker acknowledges the aesthetic appeal of blocky patterns while expressing the intent to explore smoother patterns, potentially through the use of interpolation techniques.']}], 'duration': 546.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/0ZONMNUKTfU/pics/0ZONMNUKTfU1028310.jpg', 'highlights': ['Integrating OpenSimplex Noise into the code to generate smooth random values in a two-dimensional space.', 'Drawing contours using OpenSimplex Noise to create terrain-like visuals in a 2D space.', 'Utilizing OpenSimplex Noise to obtain smooth gradients of gray throughout a two-dimensional space.', 'Incorporating a third dimension as frames of animation by manipulating a global variable called Z offset.', 'Experimenting with visualization options, such as rendering rectangles, adjusting resolution, and utilizing hardware acceleration.', 'Exploring creative possibilities with different noise algorithms and interpolation techniques for visuals with the marching squares algorithm.', 'Discussing potential applications of using images, live webcam feeds, and distance from objects to generate values for the algorithm.', 'Emphasizing the potential of using linear interpolation to create smoother patterns with the marching squares algorithm.']}], 'highlights': ['The Marching Squares algorithm is introduced, with a reference to its origin and suggested further exploration into 3D terrain generation and meta balls.', 'The potential applications of the algorithm, including the creation of endless underwater worlds and procedural cave patterns, are mentioned, along with the use of noise algorithms for implementation.', 'The chapter explains the marching squares algorithm as a computer graphics algorithm that generates contours for a two-dimensional scalar field using a rectangular grid of numerical values.', 'Emphasizing the need to think of each spot on the grid as having a value, and discussing the process of drawing dots with random numbers between zero and one in a processing window.', 'The chapter explains the process of visualizing a two-dimensional scalar field using nested loops.', 'Uses a resolution of 20 and a stroke weight of 0.4 to visualize the field.', 'The importance of adding an extra column and row to the grid is emphasized to ensure the correct representation of squares, improving the accuracy of isoline calculation.', 'Emphasis is placed on the calculation of midpoints between the corners of individual squares, crucial for determining isoline positioning and drawing.', "The function 'getState' is created to calculate the base 10 state based on the binary configuration of four zeros and ones.", 'The chapter explores the use of a switch statement in Java to draw lines based on different states, with a brief mention of potential optimization opportunities for the algorithm.', 'Integrating OpenSimplex Noise into the code to generate smooth random values in a two-dimensional space.', 'Drawing contours using OpenSimplex Noise to create terrain-like visuals in a 2D space.', 'Incorporating a third dimension as frames of animation by manipulating a global variable called Z offset.', 'Exploring creative possibilities with different noise algorithms and interpolation techniques for visuals with the marching squares algorithm.', 'Emphasizing the potential of using linear interpolation to create smoother patterns with the marching squares algorithm.']}