» Spiral

Spiral

May 28, 2021 by Chris Johnson. 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.

Draw

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.

Function

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

An integer nlatitudes that specifies the number of points that appear on the circular cross section of the spiral.
An integer nsteps that specifies the number of circular cross sections that will appear revolved around the spiral.
The majorRadius of the spiral, which is the distance between the center of the inner void and the center of the tube.
The minorRadius of the spiral, which is the radius of the circular cross section.
The radiansPerStep, which measures the amount of rotation between each circular cross section.
The liftPerStep, which measures the amount of upward tugging between each circular cross section.

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

Positions

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.

Triangles

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.