Permalink
Fetching contributors…
Cannot retrieve contributors at this time
308 lines (279 sloc) 12.8 KB
<!DOCTYPE html>
<html data-require="math graphie geom interactive">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Translations of polygons</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
</head>
<body>
<div class="exercise">
<div class="problems">
<div id="drag">
<div class="vars">
<var id="SX,SY,EX,EY" data-ensure="SX !== EX || SY !== EY">
randRange(-4, 4, 4)
</var>
<var id="DX,DY">[EX - SX, EY - SY]</var>
<var id="POINTS">_.map(_.range(6), function() {
return {x: randRange(-4, 4), y: randRange(-4, 4)};
})</var>
<var id="HULL">_.map(Geom.convexhull(POINTS), function(p) {
return [p.x + SX, p.y + SY];
})</var>
<var id="TARGET"> _.map(HULL, function(p) {
return [p[0] + DX, p[1] + DY];
})</var>
</div>
<p class="question">
What is the image of the polygon below after the translation
<code>T_{(<var>DX</var>, <var>DY</var>)}</code>?
</p>
<div class="render-answer-area-here"></div>
<div class="problem">
<div class="graphie" id="grid">
graphInit({
range: 11,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
for (var i = 0; i &lt; HULL.length; i++) {
line(
HULL[i],
HULL[(i + 1) % HULL.length],
{ stroke: GRAY, strokeDasharray: "- " }
);
}
addMouseLayer();
graph.points = _.map(HULL, function(point) {
return addMovablePoint({
coord: point,
visible: false
});
});
graph.lines = [];
for (var i = 0; i &lt; graph.points.length; i++) {
graph.lines.push(addMovableLineSegment({
pointA: graph.points[i],
pointZ: graph.points[(i + 1) % graph.points.length],
snapX: 1,
snapY: 1,
onMove: function(dX, dY) {
graph.updatePolygon(dX, dY);
}
}));
}
graph.updatePolygon = function(dX, dY) {
_.each(graph.points, function(point) {
point.setCoord([
point.coord[0] + dX,
point.coord[1] + dY
]);
point.updateLineEnds();
});
graph.curPoints = _.map(graph.points, function(point) {
return point.coord;
});
};
graph.showGuess = function() {
_.each(graph.points, function(point) { point.remove(); });
_.each(graph.lines, function(line) { line.remove(); });
graph.points = _.map(graph.curPoints, function(point) {
return addMovablePoint({
coord: point,
visible: false
});
});
graph.lines = [];
for (var i = 0; i &lt; graph.points.length; i++) {
graph.lines.push(addMovableLineSegment({
pointA: graph.points[i],
pointZ: graph.points[(i + 1) % graph.points.length],
snapX: 1,
snapY: 1
}));
}
};
graph.drawAnswer = function() {
for (var i = 0; i &lt; TARGET.length; i++) {
line(
TARGET[i],
TARGET[(i + 1) % TARGET.length],
{ stroke: BLUE }
);
}
};
</div>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the orange polygon to its image under the given translation.
</div>
<div class="guess"> KhanUtil.currentGraph.graph.curPoints </div>
<div class="validator-function">
coordList = _.pluck(KhanUtil.currentGraph.graph.points, "coord");
return _.all(coordList, function(point, i) {
return (point[0] === TARGET[i][0])
&amp;&amp; (point[1] === TARGET[i][1]);
});
</div>
<div class="show-guess">
KhanUtil.currentGraph.graph.curPoints = guess;
KhanUtil.currentGraph.graph.showGuess();
</div>
</div>
<div class="hints">
<p>
A translation <code>T_{(a, b)}</code> moves points
<code>a</code> units in the <code>x</code> direction (right
if <code>a</code> is positive,left if <code>a</code> is
negative) and <code>b</code> units in the <code>y</code>
direction (up if <code>b</code> is positive, down if
<code>b</code> is negative).
</p>
<p>
<span>To see where a translation moved this polygon, pick one
point and translate it. For example, what happens to
<code>(<var> HULL[0][0] </var>,<var> HULL[0][1] </var>)</code>
under this translation?</span>
</p><div class="graphie" data-update="grid">
circle(HULL[0], { r: 0.2, fill: "black", stroke: "none" });
</div>
<p></p>
<p>
<span>Under the translation
<code>T_{(<var>DX</var>, <var>DY</var>)}</code>,
<code>(<var> HULL[0][0] </var>,<var> HULL[0][1] </var>)</code>
is translated to
<code>(<var> TARGET[0][0] </var>,<var> TARGET[0][1] </var>)</code>.
Where is the rest of the polygon translated?</span>
</p><div class="graphie" data-update="grid">
circle(TARGET[0], { r: 0.2, fill: "black", stroke: "none" });
line(HULL[0], TARGET[0], { stroke: "black", arrows: "-&gt;"});
</div>
<p></p>
<p>
To get from
<code>(<var>HULL[0][0]</var>,<var>HULL[0][1]</var>)</code>
to
<code>(<var>TARGET[0][0]</var>,<var>TARGET[0][1]</var>)</code>,
we changed the <code>x</code>-coordinate by <code><var>DX</var></code>
and the <code>y</code>-coordinate by <code><var>DY</var></code>.
To translate the whole polygon, we need to do the same thing to all of its points.
</p>
<div>
<p>The blue outline shows where the polygon ends up after
the translation.</p>
<div class="graphie" data-update="grid">
graph.drawAnswer();
</div>
</div>
</div>
</div>
<div id="reverse">
<div class="vars">
<var id="SX,SY,EX,EY" data-ensure="SX !== EX || SY !== EY">
randRange(-4, 4, 4)
</var>
<var id="DX,DY">[EX - SX, EY - SY]</var>
<var id="POINTS">_.map(_.range(6), function() {
return {x: randRange(-4, 4), y: randRange(-4, 4)};
})</var>
<var id="HULL">_.map(Geom.convexhull(POINTS), function(p) {
return [p.x + SX, p.y + SY];
})</var>
<var id="TARGET"> _.map(HULL, function(p) {
return [p[0] + DX, p[1] + DY];
})</var>
</div>
<p class="question">
What was the translation applied to move the blue solid shape
to the orange dashed shape?
</p>
<div class="render-answer-area-here"></div>
<div class="problem">
<div class="graphie" id="grid">
graphInit({
range: 11,
scale: 20,
axisArrows: "&lt;-&gt;",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
for (var i=0; i &lt; HULL.length; i++) {
line(
HULL[i],
HULL[(i + 1) % HULL.length],
{ stroke: BLUE }
);
}
for (var i=0; i &lt; TARGET.length; i++) {
line(
TARGET[i],
TARGET[(i + 1) % TARGET.length],
{ stroke: ORANGE, strokeDasharray: "- " }
);
}
</div>
</div>
<div class="solution" data-type="multiple">
<code>{\LARGE{T}} \;(</code>
<span class="sol short30" data-forms="integer" style="width:15px"><var>DX</var></span>
<code>,</code>
<span class="sol short30" data-forms="integer" style="width:15px"><var>DY</var></span>
<code>)</code>
</div>
<div class="hints">
<p>
A translation <code>T_{(a, b)}</code> moves points a units
in the x direction (right if a is positive, left if a is
negative) and b units in the y direction (up if b is
positive, down if b is negative).
</p>
<p>
<span>To see what translation moved the blue polygon, pick one
point and translate it. For example, what happened to
<code>(<var> HULL[0][0] </var>,<var> HULL[0][1] </var>)</code>
under this translation?</span>
</p><div class="graphie" data-update="grid">
circle(HULL[0], { r: 0.2, fill: "black", stroke: "none" });
</div>
<p></p>
<p>
<span>Under this translation,
<code>(<var>HULL[0][0]</var>,<var>HULL[0][1]</var>)</code>
was translated to
<code>(<var>TARGET[0][0]</var>,<var>TARGET[0][1]</var>)</code>.
What does this tell you about the translation used?</span>
</p><div class="graphie" data-update="grid">
circle(TARGET[0], { r: 0.2, fill: "black", stroke: "none" });
line(HULL[0], TARGET[0], { stroke: "black", arrows: "-&gt;"});
</div>
<p></p>
<p>
To get from
<code>(<var>HULL[0][0]</var>,<var>HULL[0][1]</var>)</code>
to
<code>(<var>TARGET[0][0]</var>,<var>TARGET[0][1]</var>)</code>,
we changed the <code>x</code>-coordinate by <code><var>DX</var></code>
and the <code>y</code>-coordinate by <code><var>DY</var></code>.
</p>
<div>
The translation used was
<code>T_{(<var>DX</var>, <var>DY</var>)}</code>.
</div>
</div>
</div>
</div>
</div>
</body>
</html>