teaching machines


May 28, 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.

To make a torus, you took a circle and rotated it around the y-axis. What would happen if on each step of the rotation you also tugged the rotated circle upward? And then kept on going instead of stopping upon reaching a complete circuit? The shape that you would end up with is a spiral. Let’s make one.


On your paper, draw the y-axis. To its right, draw a circle with a few points spread around the perimeter. This circle holds the set of seed points of your spiral. You will revolve this circle around the y-axis and pull it upward to form your spiral.

Draw a similar circle to the left of the y-axis, but draw if upward a bit. Connect the two circles to each other to form a half revolution of the spiral.


Write a function named generateSpiral. Have it accept these parameters:

Copy your code from generateTorus into this function. Much of it will be the same.


The seed positions of the spiral are identical to the seed positions of the torus. However, the code that generates positions does need to be adapted. First, your loop is measured in steps instead of longitude indexes. Second, you need to not only rotate the seed points, but also shift or translate them upward. Create one matrix that both rotates and translates like this:

const rotate = new THREE.Matrix4().makeRotationY(totalRadians);
const translate = new THREE.Matrix4().makeTranslation(0, totalLift, 0);
const matrix = rotate.multiply(translate);

Compute totalRadians and totalLift according to the step you are on in the loop.

When you render your scene after making these changes, you should see a spiral.


The topology of the torus means that the surface wraps back around both vertically and horizontally. The spiral does not wrap horizontally. Adjust your loop so that the last circle is not connected back to the first circle.