feat(topic): add caption to topic3 circumcenter and orthocenter, modify topic19 franago to fagnano

src/data.ts

@@ -375,6 +375,12 @@ export const MAUREEN_CHANG: Contributor = {
   institute: Institute.UCIrvine,
 };
 
+export const MINGHUA_TSAI: Contributor = {
+  name: "Minghua Tsai",
+  email: "minghut1@uci.edu",
+  institute: Institute.UCIrvine,
+};
+
 export const contributors: Contributor[] = [
   ZHIQIN_LU,
   BRIAN_CABALLERO,
@@ -436,7 +442,8 @@ export const contributors: Contributor[] = [
   FELIX_YU,
   MELISSA_YU,
   KIRA_ZHANG,
-  MAUREEN_CHANG
+  MAUREEN_CHANG,
+  MINGHUA_TSAI
 ].sort((a, b) => {
   const aLastName = a.name.split(" ").pop() as string;
   const bLastName = b.name.split(" ").pop() as string;
@@ -518,6 +525,7 @@ export const topics: Topic[] = [
     essay: "pdfs/topic03.pdf",
     animationContributors: [XINXI_GUO, YI_CHEN],
     essayContributors: [ZHIQIN_LU, SHIYI_LYU],
+    captionContributors: [MINGHUA_TSAI],
   },
   {
     name: "Erdős-Mordell Inequality",
@@ -654,7 +662,7 @@ export const topics: Topic[] = [
     essayContributors: [ZHIFENG_WANG],
   },
   {
-    name: "Franago Triangle",
+    name: "Fagnano Triangle",
     index: 19,
     snapshot: "images/snapshots/topic19.png",
     essay: "pdfs/topic19.pdf",

src/views/topics/GdpTopic03View.vue

@@ -12,13 +12,39 @@
     ></a-tab-pane>
     <a-tab-pane key="3" tab="Circumcenter">
       <div id="circumcenter-wrapper">
+        <p>
+          The circumcenter of a triangle is the center of the circumcircle.
+        </p>
+        <p>
+          In the following <span v-katex>\triangle ABC</span>, let <span v-katex>OD, OE,</span>
+          and <span v-katex>OF</span> be the perpendicular bisectors of three sides
+          <span v-katex>BC, CA,</span> and <span v-katex>AB</span> respectively.
+        </p>
+        <p>
+          Click, hold, and move point <span v-katex>A</span>, we shall see that
+          <span v-katex>OD, OE,</span> and <span v-katex>OF</span>
+          are always concurrent at <span v-katex>O</span>.
+        </p>
         <canvas id="circumcenter-canvas1" width="500" height="500"></canvas>
         <ATypographyTitle :level="4"></ATypographyTitle>
         <canvas id="circumcenter-canvas2" width="500" height="500"></canvas>
       </div>
     </a-tab-pane>
     <a-tab-pane key="4" tab="Orthocenter">
       <div id="orthocenter-wrapper">
+        <p>
+          The orthocenter of a triangle is the point where all three altitudes of the triangle intersect.
+        </p>
+        <p>
+          In the following <span v-katex>\triangle ABC</span>, let <span v-katex>AD, BE,</span>
+          and <span v-katex>CF</span> be the heights on <span v-katex>BC, CA,</span> and
+          <span v-katex>AB</span> respectively.
+        </p>
+        <p>
+          Click, hold, and move points <span v-katex>A, B,</span> and <span v-katex>C</span>,
+          we shall see that <span v-katex>AD, BE,</span> and <span v-katex>CF</span> are always
+          concurrent at a point <span v-katex>H</span>.
+        </p>
         <canvas id="orthocenter-canvas" width="500" height="500"></canvas></div
     ></a-tab-pane>
   </a-tabs>

src/views/topics/GdpTopic19View.vue

@@ -3,9 +3,9 @@
     <ATypographyParagraph>
 
     </ATypographyParagraph>
-    <div id="franago-triangle-wrapper">
-        <ATypographyTitle :level="4">Animated Franago Triangle</ATypographyTitle>
-        <canvas id="franago-triangle-canvas" width="500" height="500" />
+    <div id="fagnano-triangle-wrapper">
+        <ATypographyTitle :level="4">Animated Fagnano Triangle</ATypographyTitle>
+        <canvas id="fagnano-triangle-canvas" width="500" height="500" />
     </div>
 </template>
 
@@ -24,7 +24,7 @@ export default defineComponent(
             return { topic };
         },
         mounted() {
-            const canvas = new fabric.Canvas("franago-triangle-canvas", {
+            const canvas = new fabric.Canvas("fagnano-triangle-canvas", {
                 selection: false,
             });