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:
- An integer
nlatitudesthat specifies the number of points that appear on the circular cross section of the spiral.
- An integer
nstepsthat specifies the number of circular cross sections that will appear revolved around the spiral.
majorRadiusof the spiral, which is the distance between the center of the inner void and the center of the tube.
minorRadiusof the spiral, which is the radius of the circular cross section.
radiansPerStep, which measures the amount of rotation between each circular cross section.
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.
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);
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.