9.1 First Extrusion: 2D to 3D

Aligned outcomes:

SLO 3

Describe, design, implement, and test structured programs using currently accepted methodology.

SLO 4

Explain what an algorithm is and its importance in computer programming.

Learning Objectives

By the end of this section, you will be able to:

In this section, you will learn to:
  • explain how extrudeLinear pushes a 2D outline straight up to make a solid;
  • read the options tables for extrudeLinear, extrudeRectangular, and extrudeRotate and pick the options you need;
  • write a call to extrudeLinear that gives a 2D shape height;
  • twist a shape as it extrudes with twistAngle and twistSteps;
  • build a wall or frame from a path with extrudeRectangular;
  • write a call to extrudeRotate that spins a 2D profile around the Y axis.

Extruding straight up

So far we have built flat 2D shapes. To make a 3D object, we need a way to give a 2D outline depth. The simplest way is to extrude the outline straight up: take the flat shape and push it up by a height, like a cookie cutter pressed through a slab of dough. Every 2D shape chapter 8 taught — rectangle, circle, polygon, star, and every boolean built from them — becomes a solid that way.

extrudeLinear(options, geometry) → geom3

Pushes a 2D outline straight up by a height to make a solid.

A profile plus a height is a solid

Think of the 2D outline as the footprint of the part. Give it a height and you have a solid with a top, a bottom, and walls. The outline is called the profile, and the height is how far it is pushed up. That is the whole idea behind the first extrusion function, extrudeLinear.

Option Type Default Meaning
height Number 1 distance the outline is pushed up
twistAngle Number 0 rotation applied while extruding, radians
twistSteps Number 1 number of steps the twist is divided into
Editor
renders in your browser 





The height is the third dimension

A 2D shape has width and length but no thickness. extrudeLinear adds the third dimension: the height becomes the distance along the z axis. A 10-by-20 rectangle extruded to a height of 10 is a 10-by-20-by-10 block.







Try It Now 9.1.1


Extrude a 10-by-20 rectangle to a height of 15. Write the JSCAD call.




Editor










renders in your browser













Solution



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


Step 2 — pick the extrusion. We are pushing the shape straight up, so we use extrudeLinear.


Step 3 — set the height. We want a height of 15, so height: 15.




Editor










renders in your browser












Answer: extrudeLinear({ height: 15 }, rectangle({ size: [10, 20] })) — a 10-by-20-by-15 block.









Twisting as you extrude



Once you know extrudeLinear exists, the options students reach for are twistAngle and twistSteps. They let the shape rotate as it is pushed up, so a straight prism becomes a twisted one — the shape of a screw thread or a twisted ribbon.





Editor










renders in your browser













Twist is a rotation, not a bend

twistAngle is how far the top of the shape is rotated relative to the bottom, in radians. A quarter turn is Math.PI / 2. twistSteps is how many slices the twist is divided into — more steps makes the twist smoother, fewer makes it faceted.







Example 9.1.1: Twisting a prism as it extrudes


twistAngle rotates the top of a shape relative to its bottom as it is pushed up, and twistSteps divides that turn into slices. Build a rectangle that twists a quarter turn — each comment below is one line for you to write. Press Run when you are done.




Editor










renders in your browser













Solution





Editor










renders in your browser












You should see the 10-by-20 rectangle pushed up 10 units while its top twists a quarter turn relative to its bottom. twistSteps of 10 keeps the twist smooth; drop it to 1 and run again and the whole turn happens in one hard jump, leaving a faceted, blocky twist.











Try It Now 9.1.2


Extrude a circle of radius 5 to a height of 20, twisting a quarter turn over 8 steps. Write the JSCAD call.




Editor










renders in your browser













Solution



Step 1 — build the shape. We need a circle, so we use circle with radius: 5.


Step 2 — pick the extrusion. We are pushing the shape up and twisting it, so we use extrudeLinear.


Step 3 — set the height, twist, and steps. We want height 20, a quarter turn (Math.PI / 2), and 8 steps.




Editor










renders in your browser












Answer: extrudeLinear({ height: 20, twistAngle: Math.PI / 2, twistSteps: 8 }, circle({ radius: 5 })) — a circle extruded to a height of 20 while twisting a quarter turn.









extrudeRectangular(options, geometry) → geom3



Turns a 2D outline into a walled solid — a hollow shape with a wall of a given thickness.







Option
Type
Default
Meaning




size
Number
1
wall thickness




height
Number
1
wall height








Editor










renders in your browser













A wall, not a filled block

extrudeRectangular builds a wall around the outline of a shape rather than filling it in. The size is the wall's thickness and height is how tall it stands. That is how you make a frame, a rim, or the walls of a box from an outline.







Try It Now 9.1.3


Build a wall from a 20-by-8 rectangle with a wall thickness of 3 and height 12. Write the JSCAD call.




Editor










renders in your browser













Solution



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


Step 2 — pick the extrusion. We are building a wall from an outline, so we use extrudeRectangular.


Step 3 — set the size and height. We want a wall thickness of 3 and a height of 12.




Editor










renders in your browser












Answer: extrudeRectangular({ size: 3, height: 12 }, rectangle({ size: [20, 8] })) — a wall 3 thick and 12 high around a 20-by-8 outline.









Extruding by rotation



The straight-up extrusions above push a profile along a line. There is another way to give a 2D outline depth: spin it around an axis. In JSCAD, the function extrudeRotate(options, geometry) spins a geom2 profile around the Y axis and returns a geom3 solid.



The extrudeRotate options



The function takes an options object that controls how the rotation happens. Here is the full options table:


A lathe in code

A real lathe spins a block of wood or metal while a tool carves it into a rounded shape. extrudeRotate does the same thing in code: it takes a flat outline and spins it around the Y axis to build a vase, a bowl, or a bottle.




Spin a sticker

Imagine a flat sticker shaped like half a vase. If you spin that sticker around a vertical pole, the shape it sweeps out is the full 3D vase. That sweep is exactly what extrudeRotate computes for you.









Option
Type
Default
Meaning




angle
Number
TAU
angle of extrusion, radians




startAngle
Number
0
start angle, radians




overflow
String
'cap'
how to handle points outside bounds




segments
Number
12
number of segments around the rotation






Why segments matters

A full rotation is a circle, and a circle is drawn with straight segments. Fewer segments makes a blocky, faceted shape; more segments makes a smoother one. For a vase you usually want a smooth look, so you raise segments.





The angle option controls how far around the axis the profile spins. A full turn is TAU radians (about 6.28, a full circle). Setting angle: TAU / 2 spins only halfway, which is useful for building half a shape.



A first rotated shape



Here is a complete example. We take a small circle and spin it halfway around the Y axis:





Editor










renders in your browser













The circle is the profile

The circle({ radius: 3, center: [4, 0] }) is the flat outline we are spinning. Its center sits at [4, 0], away from the Y axis, so when it spins it sweeps out a ring-like solid rather than a solid ball.





Here is a second example, this time spinning a square profile a full turn to make a ring:





Editor










renders in your browser















Example 9.1.2: Spinning a profile with extrudeRotate


extrudeRotate spins a 2D profile around the Y axis to make a rounded solid. The profile must sit away from the axis or the spin traces nothing. Build a ring from a small square — each comment below is one line for you to write. Press Run when you are done.




Editor










renders in your browser













Solution





Editor










renders in your browser












You should see a ring: the square profile spun a full turn around the Y axis, tracing a torus-like solid. The points start at x = 2, not at the axis, so the spin sweeps a ring rather than a solid ball. Change angle to TAU / 2 and run again to see half a ring.











Try It Now 9.1.4


Write a call to extrudeRotate that spins a circle of radius 2, centered at [5, 0], a full turn around the Y axis using 16 segments.




Editor










renders in your browser













Solution



Step 1 — build the profile: Create the flat circle with circle({ radius: 2, center: [5, 0] }).


Step 2 — set the rotation options: A full turn means angle: TAU, and we want 16 segments, so the options object is { segments: 16, angle: TAU }.


Step 3 — combine them:




Editor










renders in your browser












Answer: The call above spins the circle a full turn around the Y axis, producing a smooth ring-shaped solid.









Choosing an extrusion







Function
What it makes
Reach for it when




extrudeLinear
a solid pushed straight up from a filled shape
you have a 2D shape and want to give it height




extrudeRectangular
a walled solid from a path
you have an outline and want a wall or frame




extrudeRotate
a solid spun around the Y axis
you have a profile and want a rounded, lathe-turned part






Each function turns a 2D outline into a 3D solid, but they start from different inputs and make different parts. Use extrudeLinear to give a filled shape height, extrudeRectangular to build a wall from a path, and extrudeRotate when the part is round and symmetric around an axis.



Problem Set







Problem 1. Write a JSCAD call that extrudes a 10-by-20 rectangle to a height of 15.






Problem 2. Write a JSCAD call that extrudes a circle of radius 4 to a height of 10.






Problem 3. Write a JSCAD call that extrudes a 10-by-20 rectangle to a height of 20 while twisting it a quarter turn over 10 steps.






Problem 4. Write a JSCAD call that builds a wall from the outline (0, 0), (30, 0), (30, 10), (0, 10) with a wall thickness of 4 and height 15.






Problem 5. Write a JSCAD call that extrudes a star with 6 points and an outer radius of 8 to a height of 12.






Problem 6. Write a JSCAD call that spins a circle of radius 4, centered at [6, 0], a full turn with 24 segments.






Problem 7. Write a JSCAD call that spins a circle of radius 2, centered at [5, 0], a full turn around the Y axis using 16 segments.







Key Terms





extrude — to give a 2D outline depth by sweeping it through space.


profile — the flat 2D outline that gets swept or spun to build a 3D solid.


height — the distance an outline is pushed straight up by extrudeLinear.


twistAngle — how far a shape rotates as it extrudes, in radians.


twistSteps — the number of steps a twist is divided into; more steps means a smoother twist.


path2 — the object type JSCAD uses to represent a 2D outline or path.


segments — the number of straight pieces used to draw a curved rotation; more segments means a smoother shape.