teaching machines


May 21, 2021 by . Filed under public, slai-2021.

This post is part of a course on geometric modeling at the Summer Liberal Arts Institute for Computer Science held at Carleton College in 2021.

Let’s riff off the grid you just generated. Instead of keeping the grid flat, with all the z-coordinates at 0, you will randomize them. When the surface is rotated toward the ground, it has the appearance of terrain. Follow these steps to produce your random terrain.


Add a function named generateTerrain. Have it accept the following parameters:

Create your empty positions and triangles arrays. Return them in an object.

Vertex Positions

Generate the positions of the grid with a structure much like you did in generateGrid. However, instead of setting the z-coordinates to 0, assign each a random value. To generate a random number in [0, 1] in JavaScript, call Math.random(). Scale each random number that you get by the depth.

Render your positions as Points. Do you see both the underlying grid on the xy-axes and the random deviation on the z-axis?


The vertices connect up into triangles in the exact same was as the grid. You can copy the code directly from that function into this one.

When you render the terrain as a solid, shaded surface, you should see a landscape that you may or may not want to walk around on.