title
Coding Challenge 11: 3D Terrain Generation with Perlin Noise in Processing
description
In this coding challenge, I create a 3D procedural terrain using Perlin Noise and the beginShape() function in Processing. Code: https://thecodingtrain.com/challenges/11-3d-terrain-generation-with-perlin-noise
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/OPYPc4ueq
đĨ Previous video: https://youtu.be/HyK_Q5rrcr4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/f0lkz2gSsIk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đž beginShape() reference: https://processing.org/reference/beginShape_.html
đž noise() reference: https://processing.org/reference/noise_.html
Videos:
đ What is Perlin Noise?: https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/perlin/perlin-noise-and-p5js-tutorial-intro
đ´ Coding Train Live 37: https://youtu.be/ELpZW62HGVs?t=1735s
Related Coding Challenges:
đ #18 3D Fractal Trees: https://youtu.be/JcopTKXt8L8
đ #24 Perlin Noise Flow Field: https://youtu.be/BjoM9oKOAKY
đ #112 3D Rendering with Rotation and Projection: https://youtu.be/p4Iz0XJY-Qk
Timestamps:
00:00 Introduction to the Challenge
00:46 What do we need to do?
02:14 Draw a rectangular grid!
04:13 Create a flat triangle strip mesh!
06:51 Rotate the surface in 3D!
08:47 Set the z-values of the vertices randomly!
11:04 Create a 2D array to store the z values!
13:31 How do we make the terrain infinite? What is Perlin Noise?
17:03 How do we make the terrain smooth?
17:43 Reduce offsets to get smoother z values
19:17 How do we make it appear as if we are moving over the terrain?
20:30 Change y-offset per frame to create the illusion of flying!
22:05 Thanks for watching!
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
#perlinnoise #terraingeneration #procedural #processing
detail
{'title': 'Coding Challenge 11: 3D Terrain Generation with Perlin Noise in Processing', 'heatmap': [{'end': 246.985, 'start': 213.677, 'weight': 0.737}, {'end': 410.738, 'start': 394.337, 'weight': 0.787}, {'end': 765.857, 'start': 736.329, 'weight': 0.712}, {'end': 807.407, 'start': 790.701, 'weight': 0.773}, {'end': 1297.008, 'start': 1222.653, 'weight': 0.808}], 'summary': 'Tutorial demonstrates creating a 3d procedurally generated terrain in a java-based environment using processing, including initializing variables, 3d mesh manipulation, generating organic terrains using perlin noise, and creating infinite terrain with smooth random values in a 22 to 30-minute timeframe.', 'chapters': [{'end': 139.887, 'segs': [{'end': 31.44, 'src': 'embed', 'start': 0.549, 'weight': 1, 'content': [{'end': 3.991, 'text': 'Hello Welcome to another coding challenge with me, Dan.', 'start': 0.549, 'duration': 3.442}, {'end': 5.171, 'text': "I don't know.", 'start': 4.011, 'duration': 1.16}, {'end': 6.972, 'text': 'Maybe you know my name.', 'start': 5.291, 'duration': 1.681}, {'end': 7.512, 'text': "Maybe you don't.", 'start': 6.992, 'duration': 0.52}, {'end': 11.834, 'text': "I'm here to program this particular simulation from scratch.", 'start': 7.633, 'duration': 4.201}, {'end': 16.537, 'text': 'So what this is is kind of like an infinite procedurally generated terrain.', 'start': 12.115, 'duration': 4.422}, {'end': 18.037, 'text': "It looks like you're flying over it.", 'start': 16.597, 'duration': 1.44}, {'end': 20.498, 'text': "So I'm going to use the processing programming environment.", 'start': 18.417, 'duration': 2.081}, {'end': 21.539, 'text': "It's a Java-based environment.", 'start': 20.518, 'duration': 1.021}, {'end': 22.94, 'text': 'You can get it at processing.org.', 'start': 21.559, 'duration': 1.381}, {'end': 26.701, 'text': 'Check the links for various things you might need in the description of this video.', 'start': 23.26, 'duration': 3.441}, {'end': 31.44, 'text': "Further ado, I'm going to get started.", 'start': 28.939, 'duration': 2.501}], 'summary': 'Dan will program an infinite terrain simulation using java-based processing environment.', 'duration': 30.891, 'max_score': 0.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk549.jpg'}, {'end': 99.321, 'src': 'embed', 'start': 42.287, 'weight': 0, 'content': [{'end': 46.429, 'text': "And notice in setup I'm also using P3D because I need a 3D environment.", 'start': 42.287, 'duration': 4.142}, {'end': 55.594, 'text': 'So what I need before I can really do anything is I need to make the terrain itself as just like a flat grid.', 'start': 46.729, 'duration': 8.865}, {'end': 63.921, 'text': 'So how does that work? Basically, I could draw a giant rectangle, and that would be my terrain.', 'start': 56.114, 'duration': 7.807}, {'end': 69.942, 'text': 'But instead of drawing a giant rectangle, what I want to draw is a lot of tiny rectangles next to each other.', 'start': 64.101, 'duration': 5.841}, {'end': 73.823, 'text': "And I'm saying rectangle, and I guess I really mean square, like this.", 'start': 69.982, 'duration': 3.841}, {'end': 79.464, 'text': 'Because I want my terrain to be lots and lots of shapes all attached to each other and next to each other.', 'start': 74.083, 'duration': 5.381}, {'end': 85.885, 'text': 'And in fact, a good way to do this in 3D is to use something called a triangle strip.', 'start': 79.884, 'duration': 6.001}, {'end': 89.673, 'text': 'triangle strip.', 'start': 87.011, 'duration': 2.662}, {'end': 99.321, 'text': 'What this means is I can say vertex, vertex, vertex, vertex, vertex, vertex, vertex, vertex over and over again.', 'start': 91.275, 'duration': 8.046}], 'summary': 'Using p3d for 3d environment, creating terrain with triangle strips of vertices.', 'duration': 57.034, 'max_score': 42.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk42287.jpg'}], 'start': 0.549, 'title': 'Creating procedural terrain', 'summary': 'Discusses the process of creating a 3d procedurally generated terrain in a java-based environment using processing, involving the use of triangle strips to form a mesh and extruding points to create mountainous-like quality.', 'chapters': [{'end': 139.887, 'start': 0.549, 'title': 'Procedural terrain simulation', 'summary': 'Discusses the process of creating a 3d procedurally generated terrain in a java-based environment using processing, involving the use of triangle strips to form a mesh, followed by extruding points to create a mountainous-like quality.', 'duration': 139.338, 'highlights': ['The process involves using triangle strips to form a mesh by connecting vertices with triangles, resulting in a mountainous-like appearance. The author discusses using triangle strips to connect vertices and form a mesh, which creates a mountainous-like quality in the terrain.', 'The chapter discusses creating an infinite procedurally generated terrain and using the Processing programming environment, which is Java-based. The chapter covers the creation of an infinite procedurally generated terrain using the Processing programming environment, which is Java-based.', 'The author explains the need to make a flat grid by drawing tiny rectangles next to each other and using a nested loop for every single point on the grid. The author explains the process of creating a flat grid by drawing tiny rectangles next to each other and using a nested loop for every single point on the grid.']}], 'duration': 139.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk549.jpg', 'highlights': ['The process involves using triangle strips to form a mesh by connecting vertices with triangles, resulting in a mountainous-like appearance.', 'The chapter discusses creating an infinite procedurally generated terrain using the Processing programming environment, which is Java-based.', 'The author explains the need to make a flat grid by drawing tiny rectangles next to each other and using a nested loop for every single point on the grid.']}, {'end': 533.003, 'segs': [{'end': 246.985, 'src': 'heatmap', 'start': 140.207, 'weight': 0, 'content': [{'end': 146.856, 'text': "So I'm going to start with x equals 0, x is less than, and I'm going to need to know how many columns and how many rows.", 'start': 140.207, 'duration': 6.649}, {'end': 152.584, 'text': "So I'm going to say x is less than columns, and then I'm going to say y equals 0, y is less than rows.", 'start': 147.296, 'duration': 5.288}, {'end': 158.533, 'text': "OK, so now columns and rows don't exist as variables.", 'start': 154.85, 'duration': 3.683}, {'end': 159.633, 'text': "So I'm going to add them.", 'start': 158.793, 'duration': 0.84}, {'end': 161.375, 'text': 'Columns, rows.', 'start': 160.054, 'duration': 1.321}, {'end': 166.238, 'text': "And what I'm going to do is also I need to figure out a good variable.", 'start': 161.755, 'duration': 4.483}, {'end': 169.02, 'text': "that I'm going to need is how big is each of these squares?", 'start': 166.238, 'duration': 2.782}, {'end': 170.021, 'text': 'How many pixels wide??', 'start': 169.08, 'duration': 0.941}, {'end': 170.882, 'text': 'How many pixels high?', 'start': 170.061, 'duration': 0.821}, {'end': 172.223, 'text': "And it'll be the same number.", 'start': 170.942, 'duration': 1.281}, {'end': 173.183, 'text': "Let's make that 20.", 'start': 172.483, 'duration': 0.7}, {'end': 175.225, 'text': "So I'm going to add another variable.", 'start': 173.183, 'duration': 2.042}, {'end': 176.265, 'text': "I've got this timer going.", 'start': 175.485, 'duration': 0.78}, {'end': 177.206, 'text': "I've been doing this for two months.", 'start': 176.285, 'duration': 0.921}, {'end': 178.087, 'text': 'See how long this takes.', 'start': 177.226, 'duration': 0.861}, {'end': 179.528, 'text': 'Hopefully not more than 30 minutes.', 'start': 178.227, 'duration': 1.301}, {'end': 183.651, 'text': "I'm going to make a variable called scl, kind of standing for scale.", 'start': 180.108, 'duration': 3.543}, {'end': 188.883, 'text': "And I'm going to set that equal to 20.", 'start': 185.542, 'duration': 3.341}, {'end': 192.665, 'text': "And I'm really keeping an eye on my audio to make sure the audio doesn't cut out.", 'start': 188.883, 'duration': 3.782}, {'end': 197.147, 'text': 'So now, what am I doing?', 'start': 194.766, 'duration': 2.381}, {'end': 205.55, 'text': "So first, just to make sure things are working, what I'm going to do is I'm going to have some sort of arbitrary width and height.", 'start': 197.507, 'duration': 8.043}, {'end': 210.215, 'text': "And I'm going to make those the same as the window, just for now.", 'start': 207.233, 'duration': 2.982}, {'end': 211.335, 'text': "It's going to change later.", 'start': 210.275, 'duration': 1.06}, {'end': 213.276, 'text': "But I'm just sort of being simple about things.", 'start': 211.355, 'duration': 1.921}, {'end': 220.92, 'text': 'And then the number of columns is the width of my grid divided by that scale.', 'start': 213.677, 'duration': 7.243}, {'end': 223.862, 'text': 'And the number of rows is the height of my grid divided by that scale.', 'start': 221.161, 'duration': 2.701}, {'end': 227.024, 'text': "And just to make sure things are working, let's just draw a rectangle.", 'start': 224.322, 'duration': 2.702}, {'end': 228.865, 'text': 'A rectangle at where? x.', 'start': 227.404, 'duration': 1.461}, {'end': 234.03, 'text': 'timescale, y timescale, and at that size.', 'start': 229.625, 'duration': 4.405}, {'end': 238.655, 'text': "And I'm going to say stroke 255 and no fill.", 'start': 234.671, 'duration': 3.984}, {'end': 244.322, 'text': 'So what I should have so far, if things are working right, is a perfect grid.', 'start': 239.536, 'duration': 4.786}, {'end': 245.483, 'text': 'This is a good sign.', 'start': 244.582, 'duration': 0.901}, {'end': 246.985, 'text': 'I now have this grid.', 'start': 245.864, 'duration': 1.121}], 'summary': 'The speaker discusses initializing variables and creating a grid for a coding project, aiming to complete it within 30 minutes.', 'duration': 98.448, 'max_score': 140.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk140207.jpg'}, {'end': 285.842, 'src': 'embed', 'start': 262.206, 'weight': 1, 'content': [{'end': 269.251, 'text': "Now I could have my triangles go down, but mentally it's just easier for me to think of everything as rows.", 'start': 262.206, 'duration': 7.045}, {'end': 274.034, 'text': 'So I want to do the top row, next row, next row, next row, next row, next row of triangles.', 'start': 269.611, 'duration': 4.423}, {'end': 276.896, 'text': 'So I need the outer loop to be Y.', 'start': 274.334, 'duration': 2.562}, {'end': 279.538, 'text': 'Because first start with Y, do all the Xs.', 'start': 276.896, 'duration': 2.642}, {'end': 281.179, 'text': 'Go to the next Y, do all the Xs.', 'start': 279.598, 'duration': 1.581}, {'end': 285.842, 'text': 'So I realize I want to take this Y rows and put this as the outer loop.', 'start': 281.479, 'duration': 4.363}], 'summary': 'Using y as the outer loop to iterate through rows of triangles.', 'duration': 23.636, 'max_score': 262.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk262206.jpg'}, {'end': 346.277, 'src': 'embed', 'start': 313.082, 'weight': 6, 'content': [{'end': 314.322, 'text': 'I want this triangle strip.', 'start': 313.082, 'duration': 1.24}, {'end': 318.904, 'text': 'So I want to set a whole bunch of vertices and have it all connected magically with triangles.', 'start': 314.522, 'duration': 4.382}, {'end': 330.067, 'text': 'So now I should be able to, if I go back to the code, say for every single row, beginShape and then endShape.', 'start': 319.884, 'duration': 10.183}, {'end': 335.154, 'text': "And of course, I don't want to just say generic begin shape.", 'start': 331.633, 'duration': 3.521}, {'end': 336.314, 'text': 'I want to say begin shape.', 'start': 335.214, 'duration': 1.1}, {'end': 338.995, 'text': "And what I'm intending to make is a triangle strip.", 'start': 336.714, 'duration': 2.281}, {'end': 346.277, 'text': 'And then instead of making rectangles, what I want to do is just set.', 'start': 339.455, 'duration': 6.822}], 'summary': 'Creating a triangle strip by setting connected vertices and using beginshape and endshape.', 'duration': 33.195, 'max_score': 313.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk313082.jpg'}, {'end': 425.161, 'src': 'heatmap', 'start': 394.337, 'weight': 0.787, 'content': [{'end': 397.62, 'text': 'y plus 1 times scale.', 'start': 394.337, 'duration': 3.283}, {'end': 398.66, 'text': 'There we go.', 'start': 398.24, 'duration': 0.42}, {'end': 399.501, 'text': 'This should work.', 'start': 398.941, 'duration': 0.56}, {'end': 400.342, 'text': 'Please work.', 'start': 399.901, 'duration': 0.441}, {'end': 402.736, 'text': 'There we go.', 'start': 402.076, 'duration': 0.66}, {'end': 406.557, 'text': 'So now you can see I have this beautiful mesh of triangles.', 'start': 402.796, 'duration': 3.761}, {'end': 410.738, 'text': 'So this is the building block that I can manipulate.', 'start': 406.737, 'duration': 4.001}, {'end': 413.258, 'text': "Now, it doesn't look very 3D.", 'start': 411.138, 'duration': 2.12}, {'end': 414.939, 'text': "I've done everything in 2D right now.", 'start': 413.298, 'duration': 1.641}, {'end': 419.62, 'text': "So let's at least take a moment to rotate it on an axis.", 'start': 415.179, 'duration': 4.441}, {'end': 425.161, 'text': "So right now you're seeing, where's a prop? This is my Kleenex.", 'start': 419.64, 'duration': 5.521}], 'summary': 'Manipulated 2d mesh of triangles, needs rotation on axis.', 'duration': 30.824, 'max_score': 394.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk394337.jpg'}, {'end': 471.032, 'src': 'embed', 'start': 443.698, 'weight': 2, 'content': [{'end': 450.728, 'text': "So if I run this, Where did it go? So we've got some problems here.", 'start': 443.698, 'duration': 7.03}, {'end': 454.433, 'text': "The issue is I've drawn everything relative to the top left.", 'start': 451.029, 'duration': 3.404}, {'end': 460.802, 'text': "So if everything's drawn relative to the top left, everything is rotating around the top left, and I've just rotated it completely out of view.", 'start': 454.894, 'duration': 5.908}, {'end': 465.809, 'text': 'So what I need to do is have everything drawn relative to the center of the window.', 'start': 461.222, 'duration': 4.587}, {'end': 471.032, 'text': 'So I should translate to the center.', 'start': 469.352, 'duration': 1.68}], 'summary': 'The issue arises from drawing everything relative to the top left, requiring a shift to the center for proper display.', 'duration': 27.334, 'max_score': 443.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk443698.jpg'}], 'start': 140.207, 'title': 'Initializing variables and creating terrain', 'summary': 'Outlines initializing variables x, y, columns, and rows, setting scale to 20, defining square width and height as window size, and creating a visually appealing terrain using triangles within 30 minutes.', 'chapters': [{'end': 211.335, 'start': 140.207, 'title': 'Initializing variables and setting scale', 'summary': 'Outlines the process of initializing variables x, y, columns, and rows, setting the scale variable to 20, and defining the width and height of squares as the same as the window, aiming to complete the task within 30 minutes.', 'duration': 71.128, 'highlights': ['Initialized variables x, y, columns, and rows to set up a grid for the program.', 'Set the scale variable (scl) to 20 pixels wide and 20 pixels high, aiming for efficiency and uniformity.', 'Defined the width and height of squares as the same as the window, with plans for future adjustments.']}, {'end': 533.003, 'start': 211.355, 'title': 'Creating terrain with triangles', 'summary': 'Discusses creating a terrain using triangles, with a grid structure, and rotating it to appear 3d, achieving a visually appealing result.', 'duration': 321.648, 'highlights': ['Creating a grid structure by dividing the width and height by a specific scale to form vertices for triangles The number of columns and rows are determined by the width and height of the grid divided by a specific scale, resulting in a perfect grid.', 'Utilizing triangle strips to represent the terrain, with the outer loop iterating over the Y rows to create each row as its own triangle strip Implementing triangle strips for the terrain, with the outer loop iterating over the Y rows to create each row as its own triangle strip, allowing for easier manipulation and visualization.', 'Using beginShape and endShape to set vertices and connect them with triangles, achieving the desired triangle strip structure Leveraging beginShape and endShape to set vertices and connect them with triangles, enabling the creation of the desired triangle strip structure for the terrain.', 'Rotating the terrain along the x-axis to simulate a 3D perspective, while addressing issues related to drawing and rotation relative to the window center Rotating the terrain along the x-axis to simulate a 3D perspective, while addressing issues related to drawing and rotation relative to the window center, resulting in a visually appealing 3D terrain.']}], 'duration': 392.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk140207.jpg', 'highlights': ['Initialized variables x, y, columns, and rows to set up a grid for the program.', 'Utilizing triangle strips to represent the terrain, with the outer loop iterating over the Y rows to create each row as its own triangle strip Implementing triangle strips for the terrain, with the outer loop iterating over the Y rows to create each row as its own triangle strip, allowing for easier manipulation and visualization.', 'Rotating the terrain along the x-axis to simulate a 3D perspective, while addressing issues related to drawing and rotation relative to the window center Rotating the terrain along the x-axis to simulate a 3D perspective, while addressing issues related to drawing and rotation relative to the window center, resulting in a visually appealing 3D terrain.', 'Set the scale variable (scl) to 20 pixels wide and 20 pixels high, aiming for efficiency and uniformity.', 'Defined the width and height of squares as the same as the window, with plans for future adjustments.', 'Creating a grid structure by dividing the width and height by a specific scale to form vertices for triangles The number of columns and rows are determined by the width and height of the grid divided by a specific scale, resulting in a perfect grid.', 'Using beginShape and endShape to set vertices and connect them with triangles, achieving the desired triangle strip structure Leveraging beginShape and endShape to set vertices and connect them with triangles, enabling the creation of the desired triangle strip structure for the terrain.']}, {'end': 795.284, 'segs': [{'end': 580.655, 'src': 'embed', 'start': 555.007, 'weight': 0, 'content': [{'end': 560.869, 'text': "But if I want to take this point and pull it up a little bit, so it's turned on its side, it looks like it's going up along the y-axis.", 'start': 555.007, 'duration': 5.862}, {'end': 564.27, 'text': "It's really changing the z, the z value.", 'start': 561.109, 'duration': 3.161}, {'end': 567.451, 'text': 'The z value for all of those vertices has been zero all along.', 'start': 564.33, 'duration': 3.121}, {'end': 576.113, 'text': "So let's go now and say what if I were to do like random negative 100, 100 for all the z values?", 'start': 568.211, 'duration': 7.902}, {'end': 579.314, 'text': "What's going to happen here?", 'start': 578.434, 'duration': 0.88}, {'end': 580.655, 'text': "Let's run this and see.", 'start': 579.575, 'duration': 1.08}], 'summary': 'Changing z values from 0 to random -100, 100.', 'duration': 25.648, 'max_score': 555.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk555007.jpg'}, {'end': 642.125, 'src': 'embed', 'start': 608.813, 'weight': 5, 'content': [{'end': 612.215, 'text': 'I wonder if frame rate is broken in P3D.', 'start': 608.813, 'duration': 3.402}, {'end': 612.976, 'text': "That's really weird.", 'start': 612.295, 'duration': 0.681}, {'end': 613.997, 'text': "I don't know why that's not working.", 'start': 613.036, 'duration': 0.961}, {'end': 616.719, 'text': "I'm going to have to investigate that and maybe file a bug report.", 'start': 614.017, 'duration': 2.702}, {'end': 620.882, 'text': "So, but anyway, that's neither here nor there.", 'start': 618, 'duration': 2.882}, {'end': 626.527, 'text': "the point of what you're seeing is this now has this quality of a terrain because each point is higher or lower.", 'start': 620.882, 'duration': 5.645}, {'end': 630.29, 'text': 'now the issue is, I need to have some consistent way of doing this.', 'start': 626.527, 'duration': 3.763}, {'end': 642.125, 'text': 'so I think what would be useful is For me to have a data structure that stores all the z values right, the, the x and y values, The x and y values.', 'start': 630.29, 'duration': 11.835}], 'summary': 'Investigating broken frame rate in p3d, aiming to store consistent x, y, and z values for terrain quality.', 'duration': 33.312, 'max_score': 608.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk608813.jpg'}, {'end': 690.49, 'src': 'embed', 'start': 656.203, 'weight': 1, 'content': [{'end': 657.585, 'text': "They're never going to change.", 'start': 656.203, 'duration': 1.382}, {'end': 660.248, 'text': 'The Z values, however, might change.', 'start': 658.306, 'duration': 1.942}, {'end': 662.589, 'text': "There's some sort of variable calculated procedural.", 'start': 660.468, 'duration': 2.121}, {'end': 664.571, 'text': 'Some algorithm has to generate those Z values.', 'start': 662.629, 'duration': 1.942}, {'end': 667.853, 'text': 'So I need another data structure to keep track of all those Z values.', 'start': 664.851, 'duration': 3.002}, {'end': 670.915, 'text': 'And what I think I would like to do is use a two-dimensional array.', 'start': 668.113, 'duration': 2.802}, {'end': 682.123, 'text': 'A two-dimensional array would allow me to store for every single spot here some Z value calculated according to some Algorithm.', 'start': 671.356, 'duration': 10.767}, {'end': 690.49, 'text': "so let's go back and I'm going to come back to here and I'm going to say And I'm going to make these floating point values.", 'start': 682.123, 'duration': 8.367}], 'summary': 'Using a two-dimensional array to store z values for every spot calculated by an algorithm.', 'duration': 34.287, 'max_score': 656.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk656203.jpg'}, {'end': 777.072, 'src': 'heatmap', 'start': 736.329, 'weight': 3, 'content': [{'end': 744.553, 'text': "And instead of drawing anything, what I'm doing here is I'm saying terrain index x, index y equals some random value.", 'start': 736.329, 'duration': 8.224}, {'end': 745.974, 'text': 'There we go.', 'start': 745.573, 'duration': 0.401}, {'end': 750.736, 'text': "So now I'm picking a random set of values in setup.", 'start': 746.214, 'duration': 4.522}, {'end': 757.459, 'text': "And then here, instead of drawing them as random, I'm going to say get those z values.", 'start': 752.497, 'duration': 4.962}, {'end': 760.22, 'text': 'I want the z value at x, y.', 'start': 757.719, 'duration': 2.501}, {'end': 765.857, 'text': 'And then what do I want here? I want the z value at x, y plus 1.', 'start': 760.22, 'duration': 5.637}, {'end': 769.061, 'text': "Remember, I'm doing vertex, vertex, vertex, vertex.", 'start': 765.857, 'duration': 3.204}, {'end': 771.765, 'text': 'So I need those z values at y and y plus 1.', 'start': 769.362, 'duration': 2.403}, {'end': 775.23, 'text': 'So now if I run this, we should see, whoops, I got an error.', 'start': 771.765, 'duration': 3.465}, {'end': 777.072, 'text': 'Array out of bounds exception.', 'start': 775.61, 'duration': 1.462}], 'summary': 'Using random values to generate terrain, encountering array out of bounds error.', 'duration': 24.575, 'max_score': 736.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk736329.jpg'}], 'start': 533.183, 'title': '3d mesh manipulation and data structure', 'summary': 'Explores manipulating 3d mesh vertices to create terrain-like quality by adjusting z values and controlling frame rate in p3d mode. it also discusses the need for a data structure to store x, y, and z values in a two-dimensional array, focusing on generating and accessing z values using a procedural algorithm and addressing array out of bounds exceptions.', 'chapters': [{'end': 630.29, 'start': 533.183, 'title': 'Manipulating 3d mesh vertices', 'summary': 'Explores manipulating 3d mesh vertices by adjusting z values, resulting in a terrain-like quality, with attempts to control the frame rate in p3d mode.', 'duration': 97.107, 'highlights': ['The z values for all the vertices are initially zero, and adjusting them creates a terrain-like effect.', 'Randomly setting z values between -10 and 10 results in a mesh with a terrain-like quality.', 'The attempt to set the frame rate in P3D mode seems to be causing unexpected behavior, prompting the need for further investigation.']}, {'end': 795.284, 'start': 630.29, 'title': 'Data structure for storing 3d values', 'summary': 'Discusses the need for a data structure to store x, y, and z values in a two-dimensional array to represent terrain, with a focus on generating and accessing z values using a procedural algorithm and addressing array out of bounds exceptions.', 'duration': 164.994, 'highlights': ['The need for a data structure to store x, y, and z values in a two-dimensional array to represent terrain, with a focus on generating and accessing z values using a procedural algorithm.', 'Utilizing a two-dimensional array to store z values for every spot in the terrain, calculated according to some algorithm, with a specific focus on generating random values for z in the setup.', 'Addressing the issue of array out of bounds exception by adjusting the loop to go up to the second to last row when accessing z values at y and y + 1.']}], 'duration': 262.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk533183.jpg', 'highlights': ['Randomly setting z values between -10 and 10 results in a mesh with a terrain-like quality.', 'The need for a data structure to store x, y, and z values in a two-dimensional array to represent terrain, with a focus on generating and accessing z values using a procedural algorithm.', 'Utilizing a two-dimensional array to store z values for every spot in the terrain, calculated according to some algorithm, with a specific focus on generating random values for z in the setup.', 'Addressing the issue of array out of bounds exception by adjusting the loop to go up to the second to last row when accessing z values at y and y + 1.', 'The z values for all the vertices are initially zero, and adjusting them creates a terrain-like effect.', 'The attempt to set the frame rate in P3D mode seems to be causing unexpected behavior, prompting the need for further investigation.']}, {'end': 1110.751, 'segs': [{'end': 884.515, 'src': 'embed', 'start': 858.568, 'weight': 0, 'content': [{'end': 867.271, 'text': 'Perlin noise is a way of getting smooth random numbers, meaning random numbers, if I think of random numbers in one dimension,', 'start': 858.568, 'duration': 8.703}, {'end': 874.47, 'text': 'random numbers that I might ask for over time that are similar to the one I picked before it.', 'start': 869.028, 'duration': 5.442}, {'end': 884.515, 'text': 'so if I want to get kind of a whole, if I wanted to move something around the screen kind of fluidly, I could use Perlin noise to pick its location.', 'start': 874.47, 'duration': 10.045}], 'summary': 'Perlin noise provides smooth random numbers for fluid movement on screen.', 'duration': 25.947, 'max_score': 858.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk858568.jpg'}, {'end': 1002.822, 'src': 'embed', 'start': 969.384, 'weight': 1, 'content': [{'end': 975.748, 'text': "it's almost as if this infinite plane of numbers was created in two dimensions, with noise values available to you.", 'start': 969.384, 'duration': 6.364}, {'end': 982.692, 'text': 'And you can give it any particular xy value and get a particular noise value.', 'start': 977.049, 'duration': 5.643}, {'end': 986.654, 'text': 'And this function will always give you a value between 0 and 1.', 'start': 982.892, 'duration': 3.762}, {'end': 991.698, 'text': "So actually, something that I can just do right now, it's going to look a little bit weird, is I could just go in here.", 'start': 986.654, 'duration': 5.044}, {'end': 1002.822, 'text': 'and I can say here instead of using random, what I want to do is use the noise function and just give me a noise value for every x and y.', 'start': 992.577, 'duration': 10.245}], 'summary': 'Infinite 2d plane of numbers with noise values; function gives 0-1 value.', 'duration': 33.438, 'max_score': 969.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk969384.jpg'}, {'end': 1087.61, 'src': 'embed', 'start': 1037.881, 'weight': 4, 'content': [{'end': 1042.143, 'text': "And then I'm asking for noise at 1 comma 0, then noise at 2 comma 0.", 'start': 1037.881, 'duration': 4.262}, {'end': 1046.023, 'text': "Down here, I'm asking for noise at 2 comma 1.", 'start': 1042.143, 'duration': 3.88}, {'end': 1050.408, 'text': "I'm making a big leap into the noise space with these whole integer numbers.", 'start': 1046.023, 'duration': 4.385}, {'end': 1054.231, 'text': 'And actually, the noise algorithm wants you to use small gradations.', 'start': 1050.448, 'duration': 3.783}, {'end': 1061.857, 'text': "So the actual pixel xy values doesn't really work very well to be the values that are passed into the noise function.", 'start': 1054.291, 'duration': 7.566}, {'end': 1067.522, 'text': "So the way I'm going to do that instead is by creating my own variable.", 'start': 1062.298, 'duration': 5.224}, {'end': 1072.569, 'text': "I'm going to say x offset as a float starting at 0.", 'start': 1067.602, 'duration': 4.967}, {'end': 1074.093, 'text': 'And that should actually go in here.', 'start': 1072.569, 'duration': 1.524}, {'end': 1079.364, 'text': "And I'm going to say y offset as a float starting at 0.", 'start': 1074.654, 'duration': 4.71}, {'end': 1080.767, 'text': 'x offset, y offset.', 'start': 1079.364, 'duration': 1.403}, {'end': 1087.61, 'text': "And then I'm going to use those values for the noise function as the things are going to pass through.", 'start': 1081.008, 'duration': 6.602}], 'summary': 'Using noise algorithm with small gradations, creating x and y offsets to pass into the function.', 'duration': 49.729, 'max_score': 1037.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1037881.jpg'}], 'start': 796.144, 'title': 'Perlin noise and fractal terrains', 'summary': 'Discusses generating organic, fractal-like terrains using perlin noise to achieve smooth, random terrain values in two dimensions, and explains the concept of perlin noise in processing, emphasizing the importance of using gradual increments for better results.', 'chapters': [{'end': 929.656, 'start': 796.144, 'title': 'Generating fractal terrains with perlin noise', 'summary': 'Discusses creating organic, fractal-like terrains using perlin noise to achieve smooth, random terrain values in two dimensions, allowing for fluid movement and natural appearance.', 'duration': 133.512, 'highlights': ['Using Perlin noise to generate smooth, random terrain values in two dimensions, creating an organic, fractal-like appearance.', 'Discussing how Perlin noise allows for fluid movement and natural appearance of terrains.', 'Explaining the concept of Perlin noise as a way to obtain smooth random numbers similar to the ones picked before.']}, {'end': 1110.751, 'start': 929.676, 'title': 'Understanding perlin noise in processing', 'summary': 'Explains the concept of perlin noise in processing, its functionality, and the impact of small gradations on its application, emphasizing the importance of using gradual increments for better results.', 'duration': 181.075, 'highlights': ['The Perlin noise function in Processing creates an infinite plane of numbers in two dimensions, providing a noise value for any given xy coordinate, always ranging between 0 and 1.', 'The noise algorithm requires small gradations for better results, making it ineffective to use whole integer numbers as inputs for the noise function.', 'Incrementing the x and y offsets by small values, such as 0.01, is essential for effectively utilizing the noise function in Processing.']}], 'duration': 314.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk796144.jpg', 'highlights': ['Using Perlin noise to generate smooth, random terrain values in two dimensions, creating an organic, fractal-like appearance.', 'The Perlin noise function in Processing creates an infinite plane of numbers in two dimensions, providing a noise value for any given xy coordinate, always ranging between 0 and 1.', 'Discussing how Perlin noise allows for fluid movement and natural appearance of terrains.', 'Explaining the concept of Perlin noise as a way to obtain smooth random numbers similar to the ones picked before.', 'Incrementing the x and y offsets by small values, such as 0.01, is essential for effectively utilizing the noise function in Processing.', 'The noise algorithm requires small gradations for better results, making it ineffective to use whole integer numbers as inputs for the noise function.']}, {'end': 1362.713, 'segs': [{'end': 1140.064, 'src': 'embed', 'start': 1111.551, 'weight': 0, 'content': [{'end': 1114.733, 'text': 'You can see now that my noise is much too smooth.', 'start': 1111.551, 'duration': 3.182}, {'end': 1123.138, 'text': "I'm moving so slowly, my gradations within the noise space are so small that the actual terrain is very, very flat.", 'start': 1115.173, 'duration': 7.965}, {'end': 1126.06, 'text': "So let's change that to like 0.1 and 0.1 and see how that does.", 'start': 1123.439, 'duration': 2.621}, {'end': 1128.729, 'text': 'Much better.', 'start': 1128.228, 'duration': 0.501}, {'end': 1133.035, 'text': 'You can start to see I have this sort of smooth mountainous region now.', 'start': 1128.769, 'duration': 4.266}, {'end': 1134.176, 'text': "Ooh, we're really getting something.", 'start': 1133.095, 'duration': 1.081}, {'end': 1134.997, 'text': 'This is much better.', 'start': 1134.196, 'duration': 0.801}, {'end': 1140.064, 'text': 'And maybe I can increase this now to sort of make some of the mountains a little bit higher.', 'start': 1135.017, 'duration': 5.047}], 'summary': 'Adjusting noise parameters improved terrain detail, creating smooth mountainous regions.', 'duration': 28.513, 'max_score': 1111.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1111551.jpg'}, {'end': 1183.449, 'src': 'embed', 'start': 1157.337, 'weight': 1, 'content': [{'end': 1162.921, 'text': "So now I've got this terrain that appears somewhat infinite, like I'm flying over it, but I'm not moving over it.", 'start': 1157.337, 'duration': 5.584}, {'end': 1165.542, 'text': "Well, here's the kind of amazing thing.", 'start': 1163.601, 'duration': 1.941}, {'end': 1172.664, 'text': "So I could start going down the road of like camera work and translation and then like adding to the end of it as I'm flying over it.", 'start': 1165.842, 'duration': 6.822}, {'end': 1176.886, 'text': "But with Perlin noise, there's a really, really quick trick that I can do.", 'start': 1172.885, 'duration': 4.001}, {'end': 1183.449, 'text': "Let's think about how this might work, right? Remember, this is my flat terrain and I have the noise values.", 'start': 1177.246, 'duration': 6.203}], 'summary': 'Creating infinite terrain using perlin noise for quick rendering.', 'duration': 26.112, 'max_score': 1157.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1157337.jpg'}, {'end': 1297.008, 'src': 'heatmap', 'start': 1222.653, 'weight': 0.808, 'content': [{'end': 1227.834, 'text': "I'm moving the noise space along where I'm starting in that two-dimensional plane of noise.", 'start': 1222.653, 'duration': 5.181}, {'end': 1233.096, 'text': "So if I come back here, now I've got to recalculate this in draw.", 'start': 1228.214, 'duration': 4.882}, {'end': 1237.797, 'text': "So I've got to take this whole loop in draw, and I'll just put it at the beginning.", 'start': 1233.116, 'duration': 4.681}, {'end': 1243.399, 'text': "and I'm going to run it, so it looks the same.", 'start': 1240.117, 'duration': 3.282}, {'end': 1249.782, 'text': 'Now all I need to do is say, okay, this value needs to change, not start at zero every single time.', 'start': 1243.759, 'duration': 6.023}, {'end': 1251.723, 'text': 'So I need another.', 'start': 1250.363, 'duration': 1.36}, {'end': 1263.31, 'text': "I'm going to create a variable called flying and it's going to be zero and I'm going to have y offset start at flying and in every cycle through draw,", 'start': 1251.723, 'duration': 11.587}, {'end': 1265.431, 'text': 'flying is going to increase a little bit.', 'start': 1263.31, 'duration': 2.121}, {'end': 1270.019, 'text': "Oh, I'm flying backwards.", 'start': 1268.098, 'duration': 1.921}, {'end': 1273.22, 'text': "So let's have flying decrease a little bit.", 'start': 1270.699, 'duration': 2.521}, {'end': 1276.661, 'text': "And now I'm flying forwards.", 'start': 1275.641, 'duration': 1.02}, {'end': 1278.422, 'text': "Although, it almost doesn't look like I'm flying.", 'start': 1276.681, 'duration': 1.741}, {'end': 1280.103, 'text': "It looks just like it's undulating.", 'start': 1278.462, 'duration': 1.641}, {'end': 1286.221, 'text': "But I'm pretty sure if I make this a lot faster, it's going to appear much more like I'm flying.", 'start': 1280.383, 'duration': 5.838}, {'end': 1289.063, 'text': "So you can see there's some goofiness happening in the background.", 'start': 1286.541, 'duration': 2.522}, {'end': 1290.124, 'text': "It's kind of a nice effect.", 'start': 1289.083, 'duration': 1.041}, {'end': 1297.008, 'text': "Probably, if I extended how much I'm drawing further out, for example, if I made this 1,600.", 'start': 1290.724, 'duration': 6.284}], 'summary': 'Adjusting variables to create a flying effect in the noise space.', 'duration': 74.355, 'max_score': 1222.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1222653.jpg'}, {'end': 1280.103, 'src': 'embed', 'start': 1251.723, 'weight': 2, 'content': [{'end': 1263.31, 'text': "I'm going to create a variable called flying and it's going to be zero and I'm going to have y offset start at flying and in every cycle through draw,", 'start': 1251.723, 'duration': 11.587}, {'end': 1265.431, 'text': 'flying is going to increase a little bit.', 'start': 1263.31, 'duration': 2.121}, {'end': 1270.019, 'text': "Oh, I'm flying backwards.", 'start': 1268.098, 'duration': 1.921}, {'end': 1273.22, 'text': "So let's have flying decrease a little bit.", 'start': 1270.699, 'duration': 2.521}, {'end': 1276.661, 'text': "And now I'm flying forwards.", 'start': 1275.641, 'duration': 1.02}, {'end': 1278.422, 'text': "Although, it almost doesn't look like I'm flying.", 'start': 1276.681, 'duration': 1.741}, {'end': 1280.103, 'text': "It looks just like it's undulating.", 'start': 1278.462, 'duration': 1.641}], 'summary': "Creating a variable 'flying' starting at zero, increasing in each cycle, then adjusting for backward and forward motion during animation.", 'duration': 28.38, 'max_score': 1251.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1251723.jpg'}], 'start': 1111.551, 'title': 'Generating and creating terrain with perlin noise', 'summary': 'Discusses generating terrain with smooth random values and creating infinite terrain using perlin noise, demonstrating 3d shape creation and exploring creative possibilities in a 22-minute example.', 'chapters': [{'end': 1156.977, 'start': 1111.551, 'title': 'Generating terrain with smooth random values', 'summary': 'Discusses the process of generating terrain using smooth random values, with adjustments made to the noise space resulting in the creation of mountainous regions and varied terrains.', 'duration': 45.426, 'highlights': ['By adjusting the smooth random values to 0.1 and 0.1, the terrain transforms into a smooth mountainous region, enhancing the visual representation.', 'Making further adjustments to increase the values results in higher mountains, improving the realism of the generated terrain.', 'Shrinking the values down to 100 speeds up the process and contributes to the creation of more realistic terrains.']}, {'end': 1227.834, 'start': 1157.337, 'title': 'Creating infinite terrain with perlin noise', 'summary': 'Discusses using perlin noise to create the illusion of infinite terrain by manipulating noise values along the x and y axes, allowing the appearance of movement without physical displacement.', 'duration': 70.497, 'highlights': ['Manipulating noise values along the y-axis creates the illusion of movement without physically changing the terrain, achieving an infinite terrain effect.', 'Perlin noise allows for quick manipulation of terrain appearance without complex camera work or translation techniques.']}, {'end': 1362.713, 'start': 1228.214, 'title': 'Creating 3d shapes with perlin noise', 'summary': 'Demonstrates creating 3d shapes using perlin noise, with a focus on manipulating variables to create the appearance of flying, adjusting drawing dimensions and exploring creative possibilities, in a 22-minute example.', 'duration': 134.499, 'highlights': ["The chapter focuses on manipulating variables to create the appearance of flying by adjusting the y offset and introducing the 'flying' variable to increase or decrease the flying effect. The speaker explains the process of creating the appearance of flying by manipulating the 'flying' variable and adjusting the y offset, emphasizing the impact of speed on the flying effect.", 'The tutorial explores the creative possibilities of 3D shapes, encouraging experimentation with values, positioning, rotation, and color to inspire varied project ideas. The tutorial encourages experimentation with values, positioning, rotation, and color to explore creative possibilities and inspire diverse project ideas.', 'The chapter concludes with the speaker expressing satisfaction at completing the example in 22 minutes and thanking the viewers for watching. The speaker expresses satisfaction at completing the 22-minute example and thanks the viewers for watching, concluding the chapter with appreciation and anticipation for future interactions.']}], 'duration': 251.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IKB1hWWedMk/pics/IKB1hWWedMk1111551.jpg', 'highlights': ['By adjusting smooth random values to 0.1 and 0.1, the terrain transforms into a smooth mountainous region, enhancing the visual representation.', 'Manipulating noise values along the y-axis creates the illusion of movement without physically changing the terrain, achieving an infinite terrain effect.', "The chapter focuses on manipulating variables to create the appearance of flying by adjusting the y offset and introducing the 'flying' variable to increase or decrease the flying effect."]}], 'highlights': ['Using Perlin noise to generate smooth, random terrain values in two dimensions, creating an organic, fractal-like appearance.', 'The process involves using triangle strips to form a mesh by connecting vertices with triangles, resulting in a mountainous-like appearance.', 'Utilizing a two-dimensional array to store z values for every spot in the terrain, calculated according to some algorithm, with a specific focus on generating random values for z in the setup.', 'By adjusting smooth random values to 0.1 and 0.1, the terrain transforms into a smooth mountainous region, enhancing the visual representation.', 'Initialized variables x, y, columns, and rows to set up a grid for the program.']}