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"
}
]
{}
{}
$._("base")
$._("height")
What is the volume of this box? Drag on the box 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();
GRAPH = graph;
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 UNIT_TEXT^3
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 box 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 box.
Since each cube is a cubic UNIT, the volume of the box 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], "\\Box" + UNIT_TEXT]]
}, {
verts: [2, 3, 7, 6],
color: COLOR3,
labels: [[[-XBORD, -YBORD, 0], "\\Box" + 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"}
]
{}
{}
$._("base")
$._("height")
The volume of this box is LENGTH*WIDTH*HEIGHT UNIT_TEXT^3.
What is the number labeled \Box 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();
GRAPH = graph;
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");
}
})
});
HEIGHT
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, \Box is the number of these slabs which fill up the whole box.
We can figure out the number of slabs needed by seeing how many times LENGTH*WIDTH
goes into LENGTH*WIDTH*HEIGHT
So \Box = LENGTH*WIDTH*HEIGHT \div LENGTH*WIDTH
Thus \Box = 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();