[randRange(2, 5), randRange(2, 5), randRange(2, 5)]
[randRange(1, 6), randRange(1, 6), randRange(1, 6)]
DENOMINATORS[0] * DENOMINATORS[1] * DENOMINATORS[2]
NUMERATORS[0] * NUMERATORS[1] * NUMERATORS[2]
_.map(NUMERATORS, function(n, i) {return n / DENOMINATORS[i]; })
_.map(NUMERATORS, function(n, i) {return fractionReduce(n, DENOMINATORS[i]); })
getGCD(NUMERATORS[0], DENOMINATORS[0]) * getGCD(NUMERATORS[1], DENOMINATORS[1]) * getGCD(NUMERATORS[2], DENOMINATORS[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], FRACTIONS[0] + UNIT_TEXT]]
}, {
verts: [4, 5, 6, 7],
color: COLOR1,
labels: [[[-XBORD, 0, -ZBORD], FRACTIONS[0] + UNIT_TEXT]]
}, {
verts: [0, 1, 5, 4],
color: COLOR3,
labels: [[[-XBORD, YBORD, 0], FRACTIONS[1] + UNIT_TEXT]]
}, {
verts: [2, 3, 7, 6],
color: COLOR3,
labels: [[[-XBORD, -YBORD, 0], FRACTIONS[1] + UNIT_TEXT]]
}, {
verts: [1, 2, 6, 5],
color: COLOR2,
labels: [[[0, -YBORD, -ZBORD], FRACTIONS[2] + UNIT_TEXT]]
}, {
verts: [3, 0, 4, 7],
color: COLOR2,
labels: [[[0, YBORD, ZBORD], FRACTIONS[2] + UNIT_TEXT]]
}
]
[
{
verts: [8,9,10,11],
color: "#A9A9A9"
}, {
verts: [12,13,14,15],
color: "#A9A9A9"
}
]
{}
{}
$._("volume")
$._("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();
// 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");
}
})
});
NUMERPRODUCT / DENOMPRODUCT UNIT_TEXT^3
The volume of a shape is measured by the number of one UNIT cubes which make up the shape.
The volume of a box equals width \times height \times length.
Therefore, \text{VOLUME_TEXT} = FRACTIONS[0] \cdot FRACTIONS[1] \cdot FRACTIONS[2]
\qquad =
\dfrac{NUMERPRODUCT / GCD}{DENOMPRODUCT / GCD} =
fractionReduce(NUMERPRODUCT, DENOMPRODUCT) UNIT_TEXT^3
[randRange(2, 5), randRange(2, 5), randRange(2, 5)]
[randRange(1, 6), randRange(1, 6), randRange(1, 6)]
DENOMINATORS[0] * DENOMINATORS[1] * DENOMINATORS[2]
NUMERATORS[0] * NUMERATORS[1] * NUMERATORS[2]
_.map(NUMERATORS, function(n, i) {return n / DENOMINATORS[i]; })
_.map(NUMERATORS, function(n, i) {return fractionReduce(n, DENOMINATORS[i]); })
getGCD(DENOMINATORS[0] * DENOMINATORS[2], DENOMINATORS[1] * NUMERATORS[0])
fractionReduce(NUMERPRODUCT, DENOMPRODUCT)
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], FRACTIONS[0] + UNIT_TEXT]]
}, {
verts: [4, 5, 6, 7],
color: COLOR1,
labels: [[[-XBORD, 0, -ZBORD], FRACTIONS[0] + 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], FRACTIONS[2] + UNIT_TEXT]]
}, {
verts: [3, 0, 4, 7],
color: COLOR2,
labels: [[[0, YBORD, ZBORD], FRACTIONS[2] + UNIT_TEXT]]
}
]
[
{verts: [8,9,10,11],
color: "#A9A9A9"},
{verts: [12,13,14,15],
color: "#A9A9A9"}
]
{}
{}
$._("base")
$._("height")
The volume of this box is VOL UNIT_TEXT^3.
Find x.
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");
}
})
});
The volume of a box equals width \times height \times length.
Therefore VOL = FRACTIONS[0] \cdot FRACTIONS[2] \cdot x.
\qquadfractionReduce(NUMERATORS[0] * NUMERATORS[2], DENOMINATORS[0] * DENOMINATORS[2])x = VOL
\qquad x = VOL \div
fractionReduce(NUMERATORS[0] * NUMERATORS[2], DENOMINATORS[0] * DENOMINATORS[2])
\qquad x = VOL \cdot
fractionReduce(DENOMINATORS[0] * DENOMINATORS[2], NUMERATORS[0] * NUMERATORS[2])
= FRACTIONS[1]
\qquad x = FRACTIONS[1]