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.
The next shape that you will add to your library is a plus sign. Like the star, you will start off making this a flat shape. Later on you will extrude it to a tube-like structure.
On your paper, draw a thick and blocky plus sign. Draw only the outer perimeter; do not let any lines cross. Consider the origin to be at the sign’s center. Label the vertices in a counter-clockwise fashion, starting from 0.
Plot a square that passes through all the outer points of the sign. What is its radius? A square doesn’t technically have a radius. Think of a square’s radius as half of its side length. Plot a square that touches only the inner points of the sign. What is its radius?
What are the coordinates of vertex positions?
Write a function named
generatePlus. Have it accept these parameters:
majorRadiusof the plus sign, which is the distance from its center to the outer square.
minorRadiusof the plus sign, which is the distance from its center to the inner square.
Create your empty positions and triangles arrays. Return them in an object.
Generate the vertex positions of the sign. Since this shape doesn’t lend itself to being traversed with a loop, you are better off just enumerating the positions manually, like this:
const positions = [ x0, y0, z0, x1, y1, z1, ... ];
Render your scene using points. You should see the corners of the plus sign.
Modify your drawing by adding lines between vertices so that the sign is broken up into triangles. How many lines do you need? How many triangles are there?
Enumerate the triangles’ indices in your array of triangles.
Render your scene as a solid mesh. You should see a filled plus sign.