8.2 2D Shapes and Transforms

Step 1 — pick the primitive. We need a rectangle, so we use rectangle.

Step 2 — set the size. The size option takes [width, length]. We want width 30 and length 8, so size: [30, 8].

Step 3 — leave the center at its default. The default center is [0,0], which is the origin, so we do not need to pass center.

Answer: rectangle({ size: [30, 8] }) — a 30-by-8 rectangle centered at the origin.

Step 1 — pick the primitive. We need a circle, so we use circle.

Step 2 — set the radius. We want radius 5, so radius: 5.

Step 3 — set the center. The center is (2, 3), so center: [2, 3].

Answer: circle({ radius: 5, center: [2, 3] }) — a radius-5 circle centered at (2, 3).

Step 1 — pick the primitive. We need an ellipse, so we use ellipse.

Step 2 — set the two radii. The radius option takes [xRadius, yRadius]. We want x-radius 4 and y-radius 9, so radius: [4, 9].

Answer: ellipse({ radius: [4, 9] }) — an ellipse with x-radius 4 and y-radius 9.

Step 1 — pick the primitive. We need a rounded rectangle, so we use roundedRectangle.

Step 2 — set the size. The size option takes [width, length]. We want width 40 and length 20, so size: [40, 20].

Step 3 — set the corner radius. We want roundRadius: 5.

Answer: roundedRectangle({ size: [40, 20], roundRadius: 5 }) — a 40-by-20 rounded rectangle with corner radius 5.

You should see a triangle with vertices at (0,0), (6,0), and (3,5). Going (0,0) → (6,0) → (3,5) walks counter-clockwise, so the winding is correct. List the same three points in the opposite order and run it again — the triangle flips over, because the inside is now on the other side.

Step 1 — pick the primitive. We need a polygon, so we use polygon.

Step 2 — list the points. The points option takes an array of 2D points. Our three points are [0, 0], [6, 0], and [3, 5].

Step 3 — check the winding order. Going (0,0) → (6,0) → (3,5) runs counter-clockwise, which is the default orientation.

Answer: polygon({ points: [[0, 0], [6, 0], [3, 5]] }) — a triangle with those three vertices.

Step 1 — pick the primitive. We need a star, so we use star.

Step 2 — set the point count. We want 6 outer points, so vertices: 6.

Step 3 — set the outer radius. We want outerRadius: 12.

Answer: star({ vertices: 6, outerRadius: 12 }) — a 6-point star with outer radius 12.

You should see the same 10-by-20 rectangle, but 5 units further right. The offset comes first and the shape second — translate([5, 0], myshape), not the other way round. Change the offset to [0, 5] and run it again to move it up instead.

Step 1 — build the shape. We need a rectangle, so we use rectangle with size: [10, 20].

Step 2 — pick the transform. We are moving the shape, so we use translate.

Step 3 — pass the offset and the shape. The offset is [5, 0] (5 right, 0 up), and the shape comes second.

Answer: translate([5, 0], rectangle({ size: [10, 20] })) — the rectangle shifted 5 units to the right.

Step 1 — build the shape. We need a rectangle, so we use rectangle with size: [10, 20].

Step 2 — pick the transform. We are turning the shape, so we use rotate.

Step 3 — pass the angles and the shape. A quarter turn is Math.PI / 2 radians around the z axis, so the angles are [0, 0, Math.PI / 2].

Answer: rotate([0, 0, Math.PI / 2], rectangle({ size: [10, 20] })) — the rectangle turned a quarter turn.

Step 1 — build the shape. We need a rectangle, so we use rectangle with size: [10, 20].

Step 2 — pick the transform. We are resizing the shape, so we use scale.

Step 3 — pass the factors and the shape. Doubling the width means an x factor of 2; the y factor stays 1.

Answer: scale([2, 1], rectangle({ size: [10, 20] })) — the rectangle now 20 wide and 20 long.

You should see a second triangle below the x axis, the mirror image of the first. The normal [0, 1, 0] points along y, so the plane it describes is the x axis. Change the normal to [1, 0, 0] and run it again to flip across the y axis instead.

Step 1 — build the shape. We need a triangle, so we build it with polygon from its three points.

Step 2 — pick the transform. We are flipping the shape, so we use mirror.

Step 3 — set the mirror plane. Flipping across the x axis means the plane's normal points along y, so normal: [0, 1, 0].

Answer: mirror({ normal: [0, 1, 0] }, polygon({ points: [[0, 0], [10, 0], [5, 8]] })) — the triangle flipped across the x axis.

Step 1 — build the shape. We need a rectangle, so we use rectangle with size: [10, 20]. We also pass center: [12, 8] so the rectangle starts off-centre and the centering visibly moves it.

Step 2 — pick the transform. We are centering the shape, so we use center.

Step 3 — set the axes. We want to center on both x and y, so axes: [true, true, false].

Answer: center({ axes: [true, true, false] }, rectangle({ size: [10, 20], center: [12, 8] })) — the rectangle slides from [12, 8] to sit centered on the origin.

Step 1 — build the shape. We need a rectangle, so we use rectangle with size: [10, 20]. We also pass center: [12, 8] so the rectangle starts off-centre and the aligning visibly moves it.

Step 2 — pick the transform. We are aligning the shape, so we use align.

Step 3 — set the modes. We want the low edge on y, so the y mode is min; the x mode can stay center.

Answer: align({ modes: ['center', 'min', 'min'] }, rectangle({ size: [10, 20], center: [12, 8] })) — the rectangle's low edge slides to the x axis.