"#D7ED3A" "#38C77F" "#78D0EF" "#F0B63A" randRange(2, 5) HEIGHT * 2 "" + HEIGHT + "\\sqrt{2}" randRange(3, 7) PI / 15 -PI / 8 5.0 [ [-1, 0.5, 1], [1, 0.5, 1], [0, -0.5, 1], [-1, 0.5, -1], [1, 0.5, -1], [0, -0.5, -1] ] [ { verts: [0, 2, 1], color: COLOR3, lines: [[[0, -0.5, 1], [0, 0.5, 1]]], labels: [[[0, 0, 1], HEIGHT]] }, { verts: [3, 4, 5], color: COLOR3, lines: [[[-0.03, -0.47, -1], [0.95, 0.5, -1]]], labels: [[[0.2, -0.08, -1], SIDE]] }, { verts: [0, 1, 4, 3], color: COLOR4, lines: [[[1, 0.5, 0], [-1, 0.5, 0]]], labels: [[[0, 0.5, 0], BASE]] }, { verts: [1, 2, 5, 4], color: COLOR1, lines: [[[0.5, 0, 1], [0.5, 0, -1]]], labels: [[[0.5, 0, 0], DEPTH]] }, { verts: [0, 3, 5, 2], color: COLOR2, lines: [[[-1, 0.5, 0], [0, -0.5, 0]]], labels: [[[-0.5, 0, 0], SIDE]] } ] {} {}

What is the volume of this object? Drag on the object to rotate it.

init({range: [[-2, 2], [-2, 2]], scale: [100, 100]}); addMouseLayer(); graph.obj = make3dObject(VERTICES, { scale: SCALE }); _.each(FACES, function(face) { graph.obj.addFace(face); }); graph.obj.setPos([0, 0, 5]); graph.obj.rotate(1, 0, 0, YANGLE); graph.obj.rotate(0, 1, 0, XANGLE); graph.obj.doDraw(); GRAPH = graph; var spinner; setTimeout(function() { spinner = setInterval(function() { GRAPH.obj.rotate(0, 1, 0, 0.01); GRAPH.obj.doDraw(); }, 50); }, 300); var mouseTarget = mouselayer.rect(0, 0, 400, 400).attr({ fill: "#000", opacity: 0.0 }); $(mouseTarget[0]).bind("vmousedown", function(event) { GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; clearInterval(spinner); $(document).bind("vmousemove vmouseup", function(event) { event.preventDefault(); var dx = (event.pageX - GRAPH.lastX) / 200 * PI; var dy = (event.pageY - GRAPH.lastY) / 200 * PI; GRAPH.lastX = event.pageX; GRAPH.lastY = event.pageY; var xAxis = normalize(GRAPH.obj.perspective[1]); var yAxis = normalize(GRAPH.obj.perspective[0]); GRAPH.obj.rotate(xAxis[0], xAxis[1], xAxis[2], -dx / 2); GRAPH.obj.rotate(yAxis[0], yAxis[1], yAxis[2], -dy / 2); GRAPH.obj.doDraw(); if (event.type === "vmouseup") { $(document).unbind("vmousemove vmouseup"); } }) });
DEPTH * BASE * HEIGHT / 2

The volume of a prism is the area of the base \times depth.

In this object, one of the triangles is the base.

We know the area of a triangle is \frac{1}{2}\ \text{base} \times \text{height}.

Orient the triangle like this, and find the base and height from the object:

init({ range: [[-2, 2], [-1.2, 1.2]], scale: [100, 100] }); path([[-1.5, -0.75], [1.5, -0.75], [0, 0.75], true], { stroke: "black", strokeWidth: 1, fill: COLOR3 }); path([[0, -0.75], [0, 0.75]], { stroke: "black", strokeDasharray: ". " }); graph.label1 = label([0, 0], "?", "right"); graph.label2 = label([-0.4, -0.75], "?", "below");

From the object, we find that the base of the triangle is BASE and the height is HEIGHT.

graph.label1.remove(); graph.label2.remove(); label([0, 0], HEIGHT, "right"); label([-0.4, -0.75], BASE, "below");

The area of the triangle is then \frac{1}{2}BASE \times HEIGHT = BASE * HEIGHT / 2.

From the object, we can then find that the depth is DEPTH.

Then, the final volume is BASE * HEIGHT / 2 \times DEPTH = BASE * HEIGHT * DEPTH / 2.

randRange(2, 7) randRange(2, 7) randRange(2, 7) max(max(LENGTH, WIDTH), HEIGHT) LENGTH/MAX WIDTH/MAX HEIGHT/MAX
-PI / 8 0 [ [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX] ] 4.0 [ { verts: [3, 2, 1, 0], color: COLOR1, labels: [[[XBORD, 0, ZBORD], WIDTH]] }, { verts: [4, 5, 6, 7], color: COLOR1, labels: [[[-XBORD, 0, -ZBORD], WIDTH]] }, { verts: [0, 1, 5, 4], color: COLOR3, labels: [[[-XBORD, YBORD, 0], HEIGHT]] }, { verts: [2, 3, 7, 6], color: COLOR3, labels: [[[-XBORD, -YBORD, 0], HEIGHT]] }, { verts: [1, 2, 6, 5], color: COLOR2, labels: [[[0, -YBORD, -ZBORD], LENGTH]] }, { verts: [3, 0, 4, 7], color: COLOR2, labels: [[[0, YBORD, ZBORD], LENGTH]] } ]

What is the volume of this box? Drag on the box to rotate it.

LENGTH * WIDTH * HEIGHT

The volume of a box is the length \times width \times height.

From the figure, we can find that the lengths of the sides are LENGTH, WIDTH, and HEIGHT.

To find the volume, we just multiply these side lengths together.

LENGTH \times WIDTH \times HEIGHT

\qquad= LENGTH * WIDTH * HEIGHT

Thus, the volume of the box is LENGTH * WIDTH * HEIGHT.

What is the surface area of this box? Drag on the box to rotate it.

2 * LENGTH * WIDTH + 2 * LENGTH * HEIGHT + 2 * WIDTH * HEIGHT

To find the surface area, find the areas of each of the faces, and add all the areas up.

To see this better, let's try unwrapping the box:

var verts = [ [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, -HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, -WIDTH/MAX, HEIGHT/MAX], [LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX], [-LENGTH/MAX, WIDTH/MAX, HEIGHT/MAX] ]; var faces = [ { verts: [5, 6, 2, 1], color: COLOR2 }, { verts: [4, 5, 1, 0], color: COLOR3 }, { verts: [6, 7, 3, 2], color: COLOR3 }, { verts: [1, 2, 9, 8], color: COLOR1 }, { verts: [6, 5, 10, 11], color: COLOR1 }, { verts: [13, 12, 3, 7], color: COLOR2 }, { verts: [0, 1, 5, 4], color: COLOR3 }, { verts: [11, 10, 5, 6], color: COLOR1 }, { verts: [7, 3, 12, 13], color: COLOR2 } ]; var size = 2 * WIDTH / MAX + 2 * HEIGHT / MAX; init({range: [[-2, 2], [-2, 2]], scale: [100, 100]}); graph.obj = make3dObject(verts); _.each(faces, function(face) { graph.obj.addFace(face); }); graph.obj.setPos([0, -0.6, 5]); graph.obj.rotate(1, 0, 0, PI / 8); graph.obj.rotate(0, 1, 0, PI / 10); graph.obj.setScale(8 / size); graph.obj.doDraw(); UNWRAPGRAPH = graph; UNWRAPGRAPH.unwrapped = false; graph.unwrap = function() { if (UNWRAPGRAPH.unwrapped) { return; } UNWRAPGRAPH.unwrapped = true; var last = 0; $({ t: 0 }).animate({ t: PI }, { duration: 3000, easing: "linear", step: function(now, fx) { verts[4][2] = verts[0][2] = cos(now) * HEIGHT / MAX; verts[4][1] = verts[0][1] = WIDTH / MAX + 2 * cos((PI - now) / 2) * HEIGHT / MAX; verts[3][2] = verts[7][2] = cos(now) * HEIGHT / MAX; verts[3][1] = verts[7][1] = -WIDTH / MAX - 2 * cos((PI - now) / 2) * HEIGHT / MAX; verts[8][2] = verts[9][2] = cos(now) * HEIGHT / MAX; verts[8][0] = verts[9][0] = LENGTH / MAX + 2 * cos((PI - now) / 2) * HEIGHT / MAX; verts[10][2] = verts[11][2] = cos(now) * HEIGHT / MAX; verts[10][0] = verts[11][0] = -LENGTH / MAX - 2 * cos((PI - now) / 2) * HEIGHT / MAX; verts[12][2] = verts[13][2] = cos(now) * HEIGHT / MAX + 2 * sin(now) * WIDTH / MAX; verts[12][1] = verts[13][1] = -WIDTH / MAX - 2 * cos(PI / 2 - now / 2) * HEIGHT / MAX + 2 * cos(now) * WIDTH / MAX; if (now < PI / 2) { UNWRAPGRAPH.obj.rotate(0, 1, 0, -2 / 10 * (now - last)); } else { UNWRAPGRAPH.obj.rotate(1, 0, 0, -2 / 8 * (now - last)); } last = now; UNWRAPGRAPH.obj.doDraw(); } }); };

We can group the faces together based on size and color:

var width = WIDTH + 2 + LENGTH + 2 + HEIGHT + 2; var height = max(max(WIDTH, LENGTH), HEIGHT) + 1; init({range: [[-1, width + 1], [-1, height + 1]], scale: [400 / width, 400 / width]}); makeSquare(0, HEIGHT, 0, WIDTH, COLOR1); makeSquare(1, HEIGHT, 1, WIDTH, COLOR1); label([0.8 + HEIGHT / 2, WIDTH + 1.2], HEIGHT, "below"); label([1.1 + HEIGHT, 1 + WIDTH / 2], WIDTH, "left"); makeSquare(HEIGHT + 2, WIDTH, 0, LENGTH, COLOR2); makeSquare(HEIGHT + 3, WIDTH, 1, LENGTH, COLOR2); label([2.8 + HEIGHT + WIDTH / 2, 1.2 + LENGTH], WIDTH, "below"); label([3.1 + HEIGHT + WIDTH, 1 + LENGTH / 2], LENGTH, "left"); makeSquare(HEIGHT + WIDTH + 4, LENGTH, 0, HEIGHT, COLOR3); makeSquare(HEIGHT + WIDTH + 5, LENGTH, 1, HEIGHT, COLOR3); label([4.8 + HEIGHT + WIDTH + LENGTH / 2, 1.2 + HEIGHT], LENGTH, "below"); label([5.1 + HEIGHT + WIDTH + LENGTH, 1 + HEIGHT / 2], HEIGHT, "left");

We can calculate the area of each of the pieces now:

2 \left(WIDTH \times HEIGHT\right) + 2 \left(LENGTH \times WIDTH\right) + 2 \left(HEIGHT \times LENGTH\right)

\qquad= 2 * WIDTH * HEIGHT + 2 * LENGTH * WIDTH + 2 * HEIGHT * LENGTH

\qquad= 2 * WIDTH * HEIGHT + 2 * LENGTH * WIDTH + 2 * HEIGHT * LENGTH

Thus, the total surface area of the box is 2 * WIDTH * HEIGHT + 2 * LENGTH * WIDTH + 2 * HEIGHT * LENGTH.

randRange(2, 7) LENGTH LENGTH

What is the volume of this cube? Drag on the cube to rotate it.

The volume of a box is the length \times width \times height.

Since this is a cube, all the sides are the same length.

From the figure, we can find that the side length is WIDTH.

To find the volume, we just cube this side length.

WIDTH^3 = WIDTH \times WIDTH \times WIDTH

\qquad= WIDTH * WIDTH * WIDTH

Thus, the volume of the cube is WIDTH * WIDTH * WIDTH.

randRange(2, 7) LENGTH LENGTH

What is the surface area of this cube? Drag on the cube to rotate it.

Here, we can see that all of the six sides have the same size.

var width = WIDTH + 5; var height = WIDTH + 2; init({range: [[-1, width + 1], [-1, height + 1]], scale: [300 / width, 300 / width]}); var colors = [COLOR3, COLOR3, COLOR1, COLOR1, COLOR2, COLOR2]; for (var i = 0; i < 6; ++i) { makeSquare(i, HEIGHT, i / 3, WIDTH, colors[i]); } label([4.8 + WIDTH / 2, 1.76 + WIDTH], WIDTH, "below"); label([5 + WIDTH, 1.66 + WIDTH / 2], WIDTH, "left");

We can now calculate the total area:

6 \left(WIDTH \times WIDTH\right)

\qquad= 6 \times WIDTH * WIDTH

\qquad= 6 * WIDTH * WIDTH

Thus, the total surface area of the cube is 6 * WIDTH * WIDTH.

randRange(2, 4) randRange(5, 9)

What is the volume of a cylinder with base radius r and height h?

init({ range: [[-1, 4], [-2, 4]] }); arc([1.5, 3], [1.5, 0.4], 0, 48 ); arc([1.5, 3], [1.5, 0.4], 70, 360 ); path([[0, -1], [0, 3]]); path([[3, -1], [3, 3]]); arc([1.5, -1], [1.5, 0.4], 0, 180, { strokeDasharray: "- " }); arc([1.5, -1], [1.5, 0.4], 180, 360); path([[1.5, 3], [3, 3]]); label([2.25, 3], r, "above"); label([3, 1], h, "right");

Math.PI * r * r * h Cubic Units

The area of the base is simply the area of a circle: \pi r^2 = \pi \cdot r^2 = r * r \pi.

The volume of the cylinder is the area of the base times the height: B \cdot h = r * r\pi \cdot h = r * r * h\pi.

randRange( 2, 4 ) randRange( 5, 9 )

What is the surface area of a cylinder with base radius r and height h?

init({ range: [[-1, 4], [-2, 4]] }); arc([1.5, 3], [1.5, 0.4], 0, 48); arc([1.5, 3], [1.5, 0.4], 70, 360); path([[0, -1], [0, 3]]); path([[3, -1], [3, 3]]); arc([1.5, -1], [1.5, 0.4], 0, 180, { strokeDasharray: "- " }); arc([1.5, -1], [1.5, 0.4], 180, 360); path([[1.5, 3], [3, 3]]); label([2.25, 3], r, "above"); label([3, 1], h, "right");

Math.PI * 2 * r * ( r + h ) Square Units

The areas of the top and the base are simply the area of a circle: \pi r^2 = \pi \cdot r^2 = r * r \pi.

The lateral surface area is the same as the area of a rectangle with height h and width equal to the circumference of the base.

That circumference is 2 \pi r = 2\pi \cdot r = 2 * r\pi.

Thus, the lateral surface area is wh = 2 * r \pi \cdot h = 2 * r * h \pi.

The total surface area is r * r \pi + r * r \pi + 2 * r * h \pi = 2 * r * ( r + h )\pi.