randRange(-4, 4, 4)
90 * randRange(1, 3)
ROTDEG * Math.PI / 180
_.map(_.range(6), function() {
return { x: randRange(-4, 4), y: randRange(-4, 4) };
})
_.map(Geom.convexhull(POINTS), function(p) {
return [p.x, p.y];
})
_.map(HULL, function(p){
return Math.pow(p[0],2) + Math.pow(p[1],2);
})
_.map(HULL, function(p) {
return [p[0]*Math.cos(ROTRAD) - p[1]*Math.sin(ROTRAD), p[0]*Math.sin(ROTRAD) + p[1]*Math.cos(ROTRAD)];
})
0
What is the image of the polygon below after the rotation T_{{ROTDEG }^\circ{} }?
graphInit({
range: 11,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
GRAPH = graph;
for (var i=0; i < 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 }); });
graph.lines = [];
for (var i=0; i < graph.points.length; i++) {
graph.lines.push(addMovableLineSegment({ pointA: graph.points[i], pointZ: graph.points[(i+1) % graph.points.length], fixed: true}));
}
graph.origOffsets = _.map(graph.points, function(point) {
return Math.atan2(point.coord[1], point.coord[0]) - roundToNearest(Math.PI/6, Math.atan2(point.coord[1], point.coord[0]));
});
_.each(graph.points, function(point) {
point.onMove = function(x, y) {
myAng = Math.atan2(this.coord[1], this.coord[0]);
newAng = Math.atan2(y, x);
graph.updatePolygon(newAng-myAng);
return false;
}
point.onMoveEnd = function(x, y) {
possibleSnaps = [
graph.origOffsets[_.indexOf(graph.points, this)] + roundToNearest(Math.PI/6, Math.atan2(y,x)) - Math.atan2(this.coord[1], this.coord[0]),
graph.origOffsets[_.indexOf(graph.points, this)] + roundToNearest(Math.PI/6, Math.atan2(y,x)) + Math.PI/6 - Math.atan2(this.coord[1], this.coord[0]),
graph.origOffsets[_.indexOf(graph.points, this)] + roundToNearest(Math.PI/6, Math.atan2(y,x)) - Math.PI/6 - Math.atan2(this.coord[1], this.coord[0])
];
absSnaps = _.map(possibleSnaps, function(rad) { return Math.abs(rad); });
absMoveTo = Math.min(absSnaps[0],absSnaps[1],absSnaps[2]);
moveTo = _.find(possibleSnaps, function(rad) { return Math.abs(rad) === absMoveTo; });
graph.updatePolygon(moveTo);
}
});
graph.updatePolygon = function(rad) {
_.each(graph.points, function(point) {
point.setCoord([point.coord[0] * Math.cos(rad) - point.coord[1] * Math.sin(rad), point.coord[0] * Math.sin(rad) + point.coord[1] * Math.cos(rad)]);
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 }); });
graph.lines = [];
for (var i=0; i < 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 < TARGET.length; i++) {
line(TARGET[i], TARGET[(i+1) % TARGET.length], { stroke: ORANGE });
}
}
Rotate the blue polygon to its image under the given translation.
GRAPH.curPoints
coordList = _.map(GRAPH.points, function(point) { return point.coord; });
return _.all(coordList, function(point) {
return Math.abs(point[0] - TARGET[_.indexOf(coordList, point)][0]) < 0.1
&& Math.abs(point[1] - TARGET[_.indexOf(coordList, point)][1]) < 0.1;
});
GRAPH.curPoints = guess;
GRAPH.showGuess();
A rotation T_{\LARGE r^\circ{}} rotates points by r degrees around (0,0) counter-clockwise.
To see where a rotation moved this polygon, pick one point and rotate it. For example, what happens to
( HULL[0][0] , HULL[0][1] ) under this rotation?
circle(HULL[0], { r: 0.2, fill: "black", stroke: "none" });
Under the rotation
T_{ROTDEG {}^\circ{} },
( HULL[0][0] , HULL[0][1] ) is translated to
( Math.round(TARGET[0][0]) , Math.round(TARGET[0][1]) ). Where is the rest of the polygon rotated?
circle(TARGET[0], { r: 0.2, fill: "black", stroke: "none" });
arc([0,0], Math.sqrt(Math.pow(HULL[0][0],2) + Math.pow(HULL[0][1],2)), Math.atan2(HULL[0][1], HULL[0][0]) * 180 / Math.PI, Math.atan2(TARGET[0][1], TARGET[0][0]) * 180 / Math.PI, { stroke: "black", arrows: "->" });
To get from ( HULL[0][0] , HULL[0][1] ) to ( Math.round(TARGET[0][0]) , Math.round(TARGET[0][1]) ), we rotated it ROTDEG {}^\circ{}["one quarter","one half","three quarters"][ROTDEG/90-1] of a circle.
The orange outline shows where the polygon ends up after the translation.
for (var i=0; i < TARGET.length; i++) {
line(TARGET[i], TARGET[(i+1) % TARGET.length], { stroke: ORANGE });
}
randRange(-4, 4, 4)
90 * randRange(1, 3)
ROTDEG * Math.PI / 180
_.map(_.range(6), function() {
return {x: randRange(-4, 4), y: randRange(-4, 4)};
})
_.map(Geom.convexhull(POINTS), function(p) {
return [p.x, p.y];
})
_.map(HULL, function(p) {
return Math.pow(p[0],2) + Math.pow(p[1],2);
})
_.map(HULL, function(p) {
return [p[0]*Math.cos(ROTRAD) - p[1]*Math.sin(ROTRAD), p[0]*Math.sin(ROTRAD) + p[1]*Math.cos(ROTRAD)];
})
0
What is the tranformation that rotates the blue solid shape to the orange dashed shape?
graphInit({
range: 11,
scale: 20,
axisArrows: "<->",
tickStep: 1,
labelStep: 1,
gridOpacity: 0.05,
axisOpacity: 0.2,
tickOpacity: 0.4,
labelOpacity: 0.5
});
GRAPH = graph;
for (var i=0; i < HULL.length; i++) {
line(HULL[i], HULL[(i+1) % HULL.length], { stroke: BLUE });
}
for (var i=0; i < TARGET.length; i++) {
line(TARGET[i], TARGET[(i+1) % TARGET.length], { stroke: ORANGE, strokeDasharray: "- " });
}
{\LARGE T } \quad {}^\circ{}
$("#ans").val()
answer = Number($("#ans").val());
if (isNaN(answer)) {
return false;
}
else if (answer > 0) {
return answer % 360 === ROTDEG;
}
else {
return answer % 360 + 360 === ROTDEG;
}
$("#ans").val(guess);
A rotation T_{\LARGE r^\circ{}} rotates points by r degrees around (0,0) counter-clockwise.
To see what rotation moved the blue polygon, pick one point and rotate it. For example, what happened to
( HULL[0][0] , HULL[0][1] ) under this rotation?
circle(HULL[0], { r: 0.2, fill: "black", stroke: "none" });
Under this rotation, ( HULL[0][0] , HULL[0][1] ) was rotated to ( Math.round(TARGET[0][0]) , Math.round(TARGET[0][1]) ). What does this tell you about the rotation used?
circle(TARGET[0], { r: 0.2, fill: "black", stroke: "none" });
arc([0,0], Math.sqrt(Math.pow(HULL[0][0],2) + Math.pow(HULL[0][1],2)), Math.atan2(HULL[0][1], HULL[0][0]) * 180 / Math.PI, Math.atan2(TARGET[0][1], TARGET[0][0]) * 180 / Math.PI, { stroke: "black", arrows: "->" });
To get from ( HULL[0][0] , HULL[0][1] ) to ( Math.round(TARGET[0][0]) , Math.round(TARGET[0][1]) ), we rotated it around (0,0) ROTDEG {}^\circ{}
The rotation used was T_{ROTDEG ^\circ{}}.