randRangeUnique(2,8,3)
DIMENSIONS[0]
DIMENSIONS[1]
DIMENSIONS[2]
max(max(LENGTH, WIDTH), HEIGHT)
LENGTH/MAX
WIDTH/MAX
HEIGHT/MAX
"#D7ED3A"
"#38C77F"
"#78D0EF"
"#F0B63A"
HEIGHT * 2
[
[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 + UNIT_TEXT]]
}, {
verts: [4, 5, 6, 7],
color: COLOR1,
labels: [[[-XBORD, 0, -ZBORD],WIDTH + UNIT_TEXT]]
}, {
verts: [0, 1, 5, 4],
color: COLOR3,
labels: [[[-XBORD, YBORD, 0], HEIGHT + UNIT_TEXT]]
}, {
verts: [2, 3, 7, 6],
color: COLOR3,
labels: [[[-XBORD, -YBORD, 0], HEIGHT + UNIT_TEXT]]
}, {
verts: [1, 2, 6, 5],
color: COLOR2,
labels: [[[0, -YBORD, -ZBORD], LENGTH + UNIT_TEXT]]
}, {
verts: [3, 0, 4, 7],
color: COLOR2,
labels: [[[0, YBORD, ZBORD], LENGTH + UNIT_TEXT]]
}
]
[
{
verts: [8,9,10,11],
color: "#A9A9A9"
}, {
verts: [12,13,14,15],
color: "#A9A9A9"
}
]
What is the volume of this rectangular prism? Drag on the rectangular prism to rotate it.
init({range: [[-2, 2], [-2, 2]], scale: [100, 100]});
addMouseLayer();
//Adding verticies for the slabs
for (var i = 1; i < HEIGHT;i++ ){
VERTICES.push( [LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([-LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([-LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
};
//Adding verticies for the cubes in one slab
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]);
};
// graphing the initial object
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, PI/3);
graph.obj.rotate(0, 1, 0, 0);
graph.obj.rotate(0, 0, 1, PI/8);
graph.obj.doDraw();
var spinner;
setTimeout(function() {
spinner = setInterval(function() {
graph.obj.rotate(0, 0, 1, 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) {
event.preventDefault();
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");
}
})
});
LENGTH*WIDTH*HEIGHT cubic UNIT_SMALL
The volume of a shape is measured by the number of one UNIT cubes which make up the shape.
To make counting the cubes easier, break the rectangular prism into HEIGHT slabs which are each
WIDTH UNIT_TEXT wide, LENGTH UNIT_TEXT long, and
1 UNIT_TEXT high.
for (var i = 0; i<HEIGHT-1;i++){
graph.obj.addSketch({ verts: [8+4*i,9+4*i,10+4*i,11+4*i,8+4*i]});
};
graph.obj.doDraw();
Each slab has WIDTH rows containing LENGTH cubes, so there are
WIDTH \times LENGTH = WIDTH*LENGTH cubes in each slab.
var start = 8+4*(HEIGHT-1)-1
// bottom length
for (var i = 1; i<LENGTH;i++){
graph.obj.addSketch({ verts: [start+i, start+LENGTH+i-1], opacityValue: 0.5});
};
// bottom width
start = start+2*(LENGTH-1);
for (var i = 1; i<WIDTH;i++){
graph.obj.addSketch({ verts: [start+i, start+WIDTH+i-1], opacityValue: 0.5});
};
// top length
start = start+2*(WIDTH-1);
for (var i = 1; i<LENGTH;i++){
graph.obj.addSketch({ verts: [start+i, start+LENGTH+i-1]});
};
// top length
start = start+2*(LENGTH-1);
for (var i = 1; i<WIDTH;i++){
graph.obj.addSketch({ verts: [start+i, start+WIDTH+i-1]});
};
// sides
start = 8+4*(HEIGHT-1)-1
for (var i = 1; i<2*LENGTH+2*WIDTH-3;i++){
graph.obj.addSketch({ verts: [start+i, start+2*LENGTH-2+2*WIDTH-2+i], opacityValue: 0.5});
};
// corners and top edges
graph.obj.addSketch({ verts: [1, 2,6,5,1], opacityValue: 0.5});
graph.obj.addSketch({ verts: [1, 8], opacityValue: 0.5});
graph.obj.addSketch({ verts: [2, 11], opacityValue: 0.5});
graph.obj.addSketch({ verts: [5, 9], opacityValue: 0.5});
graph.obj.addSketch({ verts: [6, 10], opacityValue: 0.5});
graph.obj.addSketch({ verts: [8, 9,10,11,8], opacityValue: 0.5});
graph.obj.doDraw();
Since there are WIDTH*LENGTH cubes in each slab, there are a total of
HEIGHT \times WIDTH*LENGTH = HEIGHT*WIDTH*LENGTH cubes in the whole rectangular prism.
Since each cube is a cubic UNIT, the volume of the rectangular prism is HEIGHT*WIDTH*LENGTH UNIT_TEXT^3
randRangeUnique(2,8,3)
DIMENSIONS[0]
DIMENSIONS[1]
DIMENSIONS[2]
max(max(LENGTH, WIDTH), HEIGHT)
LENGTH/MAX
WIDTH/MAX
HEIGHT/MAX
"#D7ED3A"
"#38C77F"
"#78D0EF"
"#F0B63A"
HEIGHT * 2
[
[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 + UNIT_TEXT]]
}, {
verts: [4, 5, 6, 7],
color: COLOR1,
labels: [[[-XBORD, 0, -ZBORD],WIDTH + UNIT_TEXT]]
}, {
verts: [0, 1, 5, 4],
color: COLOR3,
labels: [[[-XBORD, YBORD, 0], "x" + UNIT_TEXT]]
}, {
verts: [2, 3, 7, 6],
color: COLOR3,
labels: [[[-XBORD, -YBORD, 0], "x" + UNIT_TEXT]]
}, {
verts: [1, 2, 6, 5],
color: COLOR2,
labels: [[[0, -YBORD, -ZBORD], LENGTH + UNIT_TEXT]]
}, {
verts: [3, 0, 4, 7],
color: COLOR2,
labels: [[[0, YBORD, ZBORD], LENGTH + UNIT_TEXT]]
}
]
[
{verts: [8,9,10,11],
color: "#A9A9A9"},
{verts: [12,13,14,15],
color: "#A9A9A9"}
]
The volume of this rectangular prism is LENGTH*WIDTH*HEIGHT cubic units.
What is the number labeled x below?
init({range: [[-2, 2], [-2, 2]], scale: [100, 100]});
addMouseLayer();
//Adding verticies for the slabs
for (var i = 1; i < HEIGHT;i++ ){
VERTICES.push( [LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([-LENGTH/MAX,WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([-LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
VERTICES.push([LENGTH/MAX,-WIDTH/MAX,(-HEIGHT+2*i)/MAX]);
};
//Adding verticies for the cubes in one slab
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,-WIDTH/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < LENGTH; i++ ){
VERTICES.push( [(-LENGTH+2*i)/MAX,WIDTH/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(-LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]);
};
for (var i = 1; i < WIDTH; i++ ){
VERTICES.push( [(LENGTH)/MAX,(-WIDTH+2*i)/MAX,(-HEIGHT+2)/MAX]);
};
// graphing the initial object
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, PI/3);
graph.obj.rotate(0, 1, 0, 0);
graph.obj.rotate(0, 0, 1, PI/8);
graph.obj.doDraw();
var spinner;
setTimeout(function() {
spinner = setInterval(function() {
graph.obj.rotate(0, 0, 1, 0);
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");
}
})
});
The volume of the
LENGTH UNIT_TEXT \times
WIDTH UNIT_TEXT \times
1 UNIT_TEXT
slab pictured above is
LENGTH*WIDTH UNIT_TEXT^3
since there are
LENGTH rows of
WIDTH cubic
plural_form(UNIT).
var start = 8+4*(HEIGHT-1)-1
// bottom length
for (var i = 1; i<LENGTH;i++){
graph.obj.addSketch({ verts: [start+i, start+LENGTH+i-1], opacityValue: 0.5});
};
// bottom width
start = start+2*(LENGTH-1);
for (var i = 1; i<WIDTH;i++){
graph.obj.addSketch({ verts: [start+i, start+WIDTH+i-1], opacityValue: 0.5});
};
// top length
start = start+2*(WIDTH-1);
for (var i = 1; i<LENGTH;i++){
graph.obj.addSketch({ verts: [start+i, start+LENGTH+i-1]});
};
// top length
start = start+2*(LENGTH-1);
for (var i = 1; i<WIDTH;i++){
graph.obj.addSketch({ verts: [start+i, start+WIDTH+i-1]});
};
// sides
start = 8+4*(HEIGHT-1)-1
for (var i = 1; i<2*LENGTH+2*WIDTH-3;i++){
graph.obj.addSketch({ verts: [start+i, start+2*LENGTH-2+2*WIDTH-2+i], opacityValue: 0.5});
};
// corners and top edges
graph.obj.addSketch({ verts: [1, 2,6,5,1], opacityValue: 0.5});
graph.obj.addSketch({ verts: [1, 8], opacityValue: 0.5});
graph.obj.addSketch({ verts: [2, 11], opacityValue: 0.5});
graph.obj.addSketch({ verts: [5, 9], opacityValue: 0.5});
graph.obj.addSketch({ verts: [6, 10], opacityValue: 0.5});
graph.obj.addSketch({ verts: [8, 9,10,11,8], opacityValue: 0.5});
graph.obj.doDraw();
Since the slabs have a height of 1 UNIT, x is the number of these slabs which fill up the whole rectangular prism.
We can figure out the number of slabs needed by seeing how many times LENGTH*WIDTH
goes into LENGTH*WIDTH*HEIGHT
So x = LENGTH*WIDTH*HEIGHT \div LENGTH*WIDTH
Thus x = HEIGHT
for (var i = 0; i < HEIGHT - 1; i++){
graph.obj.addSketch({ verts: [8+4*i,9+4*i,10+4*i,11+4*i,8+4*i]});
};
graph.obj.doDraw();