## Extrude

*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.*

You’ve now made two flat shapes. Suppose you took one of the shapes and stretched it into the third dimension to produce a solid rod or dowel. That stretching is called an extrusion. If you cut an extruded solid in half, the exposed cross section will always be the original shape.

In this exercise you will write a function that will take in any flat-shape that’s expressed in counter-clockwise order and extrude it in a certain direction.

### Draw

On your paper, draw a simple polygon, perhaps a hexagon. Label the vertices with their indices, starting at 0.

Pretend the paper has a third dimension. Draw a second instance of this polygon “behind” it and label its indices, starting at whatever number you left off in the first polygon.

Connect the corresponding vertices with lines. Between two neighboring lines you find a rectangle. Divide each rectangle into two triangles.

This connection between cross sections is an extrusion.

### Function

Write a function named `extrude`

. Have it accept these parameters:

- The
`shape`

to extrude, which is object that has`positions`

and`triangles`

properties, just as you’ve returned from all your shape-generating functions. Assume that the shape is flat and that the triangles are enumerated in counter-clockwise order. - The
`direction`

in which to extrude expressed as a 3-element array. To extend a shape in the z = 0 plane into the scene 5 units, the caller would pass in the array`[0, 0, -5]`

.

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

### Positions

One end of the extruded surface will have positions identical to the positions of the flat shape. Copy these positions into your extruded shape’s positions array using JavaScript’s *spread* operator:

```
const positions = [...shape.positions];
```

The other end of the extruded surface will have similar vertex positions, but they will be pushed along by `direction`

. Loop over the original positions and append a shifted version of each to your array.

Render your shape as points. You should see the two cross sections of your extrusion.

### Triangles

The first end of the extruded shape will have the same triangles as the original flat shape. Copy over these triangles.

The second end of the extruded shape will have triangles similar to the first end, but they must connect the vertices at the second end. The winding order must also be reversed since the triangle faces the opposite direction. Test the two ends before moving on.

The vertices on the two ends must also be connected to each other to form the side walls of the extrusion. Loop through the original set of vertex indices. Build your triangles off of each of those indices.

## Leave a Reply