website

source code for the ttmaths.uk website
Log | Files | Refs | README

RotationTranslationQuestion.jsx (2588B)

      1 import Point from "../plotting/Point";
      2 import Polygon from "../plotting/Polygon";
      3 import Plot from "../plotting/Plot";
      4 import Question from "../Question";
      5 import Equation from "../Equation";
      6 import RotationTextElement from "../RotationTextElement";
      7 import { getRandomChoice, getRandomInt } from "../../scripts/randomUtils";
      8 import { formatVec } from "../../scripts/formatUtils";
      9 
     10 function rotatePoint(point, angle, axis=[0, 0]) {
     11   const diff = [point[0] - axis[0], point[1] - axis[1]]
     12   const c = Math.cos(angle)
     13   const s = Math.sin(angle)
     14   return [axis[0] + c*diff[0] + s*diff[1], axis[1] + c*diff[1] - s*diff[0]]
     15 }
     16 
     17 export default function RotationTranslationQuestion({ seed, showAnswer }) {
     18   const viewBox = [-7, -7, 14, 14]
     19   const originalShape = [[0, 1], [2, 1], [0, 2]]
     20   const axis1 = [getRandomInt(-3, 3, seed++), getRandomInt(-3, 3, seed++)]
     21   let axis2 = axis1;
     22   while (axis2.every((x, i) => x === axis1[i])) {
     23     axis2 = [getRandomInt(-3, 3, seed++), getRandomInt(-3, 3, seed++)]
     24   }
     25   const angleDegrees = getRandomChoice([90, 180, -90], seed++)
     26   const angle = angleDegrees / 180 * Math.PI
     27 
     28   // Rotation then translation!. could do other way around if really needed.
     29   const midShape = originalShape.map((point) => rotatePoint(point, angle, axis1))
     30 
     31   const rotatedAxis = rotatePoint(axis2, angle, axis1)
     32   const translationVector = axis2.map((value, i) => Math.round(value - rotatedAxis[i]))
     33 
     34   const endShape = midShape.map((point) => point.map((value, i) => value + translationVector[i]))
     35 
     36   const question = (<>
     37     <p>
     38       Shape P is rotated <RotationTextElement angle={angle} /> about point Q to form shape R.<br />
     39       Shape R is translated by <Equation equation={formatVec(translationVector)} /> to form shape S.<br />
     40       What single transformation maps shape P onto shape S?
     41     </p>
     42     <Plot viewBox={viewBox}>
     43       <Polygon points={originalShape} label="P" colour="1" />
     44       <Point   point={         axis1} label="Q" colour="2" />
     45     </Plot>
     46   </>)
     47 
     48   const answer = (<>
     49     <p>
     50       Rotation <RotationTextElement angle={angle} /> about <Equation equation={`(${axis2[0]}, ${axis2[1]})`} />.
     51     </p>
     52     <Plot viewBox={viewBox}>
     53       <Polygon points={originalShape} label="P" colour="1" />
     54       <Point   point={         axis1} label="Q" colour="2" />
     55       <Polygon points={     midShape} label="R" colour="2" />
     56       <Polygon points={     endShape} label="S" colour="3" />
     57       <Point   point={         axis2}           colour="3" />
     58     </Plot>
     59   </>)
     60 
     61   return <Question question={question} answer={answer} showAnswer={showAnswer} />
     62 }